`_legacy-directory/views/index.ejs`

129 lines
<%- include('partials/head', { title: site.name + ' — ' + site.tagline, description: site.description }) %>

<main class="wrap main">
  <section class="hero">
    <h1>
      <span class="hero-line-1">Every wallcovering line.</span>
      <span class="hero-line-2">Mapped to who actually stocks it.</span>
    </h1>
    <p class="lead">A trade index of B2B wallcovering distributors across the U.S. and Canada &mdash; searchable by vendor line, region, and project segment. <strong><%= total %></strong> distributors indexed, <strong><%= facets.lines.length %></strong> lines mapped, <strong><%= facets.regions.length %></strong> regions covered.</p>
  </section>

  <form class="filter-bar" method="get" action="/">
    <input type="search" name="q" value="<%= filters.q %>" placeholder="Search distributor, city, line, segment&hellip;" aria-label="Search">

    <select name="region" aria-label="Region">
      <option value="">All regions</option>
      <% facets.regions.forEach(function(r){ %>
        <option value="<%= r %>" <%= filters.region === r ? 'selected' : '' %>><%= r %></option>
      <% }) %>
    </select>

    <select name="segment" aria-label="Project segment">
      <option value="">All segments</option>
      <% facets.segments.forEach(function(s){ %>
        <option value="<%= s %>" <%= filters.segment === s ? 'selected' : '' %>><%= s %></option>
      <% }) %>
    </select>

    <select name="line" aria-label="Line carried">
      <option value="">All lines</option>
      <% facets.lines.forEach(function(l){ %>
        <option value="<%= l %>" <%= filters.line === l ? 'selected' : '' %>><%= l %></option>
      <% }) %>
    </select>

    <label class="check">
      <input type="checkbox" name="trade" value="1" <%= filters.trade === '1' ? 'checked' : '' %>>
      <span>Trade-only</span>
    </label>

    <button type="submit" class="btn-primary">Filter</button>
    <% if (filters.q || filters.region || filters.segment || filters.line || filters.trade) { %>
      <a class="btn-ghost" href="/">Reset</a>
    <% } %>
  </form>

  <div class="result-bar">
    <div class="muted"><%= matched %> of <%= total %> matching</div>
    <div class="controls">
      <label class="control">
        <span>Sort</span>
        <select id="sort-select" name="sort">
          <option value="newest" <%= filters.sort === 'newest' ? 'selected' : '' %>>Newest</option>
          <option value="company" <%= filters.sort === 'company' ? 'selected' : '' %>>Company A&rarr;Z</option>
          <option value="city" <%= filters.sort === 'city' ? 'selected' : '' %>>City A&rarr;Z</option>
          <option value="lines" <%= filters.sort === 'lines' ? 'selected' : '' %>>Most lines &darr;</option>
          <option value="years" <%= filters.sort === 'years' ? 'selected' : '' %>>Oldest first</option>
        </select>
      </label>
      <label class="control">
        <span>Density</span>
        <input id="density-slider" type="range" min="240" max="440" step="20" value="320">
      </label>
    </div>
  </div>

  <% if (!matched) { %>
    <div class="empty">No distributors match those filters. <a href="/">Reset</a>.</div>
  <% } else { %>
    <ul class="card-grid" id="rep-grid">
      <% distributors.forEach(function(d){ %>
        <li class="rep-card">
          <a class="rep-link" href="/distributor/<%= d.id %>">
            <div class="rep-card-head">
              <div class="rep-avatar"><%= d.company.split(' ').map(s => s[0]).join('').replace(/[^A-Z]/g,'').slice(0,3).toUpperCase() %></div>
              <div>
                <div class="rep-name"><%= d.company %></div>
                <div class="rep-agency"><%= d.city %></div>
              </div>
            </div>
            <div class="rep-meta">
              <% if (d.trade_only) { %><span class="chip ok" title="To-the-trade only">Trade-only</span><% } else { %><span class="chip retail">Trade + Retail</span><% } %>
              <% if (d.showroom && d.showroom.toLowerCase() !== 'none') { %><span class="chip">Showroom</span><% } %>
              <% if (d.memo_program && /yes/i.test(d.memo_program)) { %><span class="chip">Memos</span><% } %>
              <span class="chip"><%= d.lines_carried.length %> lines</span>
              <% if (d.founded) { %><span class="chip muted-chip">Since <%= d.founded %></span><% } %>
            </div>
            <div class="rep-lines muted">
              <%= d.lines_carried.slice(0,4).join(' &middot; ') %><% if (d.lines_carried.length > 4) { %> &middot; +<%= d.lines_carried.length - 4 %><% } %>
            </div>
            <div class="rep-vertical">
              <% d.segments.slice(0,4).forEach(function(s){ %>
                <span class="tag"><%= s %></span>
              <% }) %>
            </div>
          </a>
        </li>
      <% }) %>
    </ul>
  <% } %>

  <section class="how-it-works">
    <div class="hiw-head">
      <span class="hiw-eyebrow">How matches work</span>
      <h2>Three filters. One distributor that actually stocks the line.</h2>
    </div>
    <ol class="hiw-steps">
      <li>
        <span class="hiw-num">01</span>
        <h3>Filter by line carried</h3>
        <p>Pick a specific vendor line &mdash; Schumacher, Thibaut, Phillip Jeffries, Cole &amp; Son, Maya Romanoff &mdash; and see every distributor authorized to carry it.</p>
      </li>
      <li>
        <span class="hiw-num">02</span>
        <h3>Narrow by region</h3>
        <p>Each listing maps the metros and states the distributor actively services. Filter by region to find the closest in-region inventory and memo turnaround.</p>
      </li>
      <li>
        <span class="hiw-num">03</span>
        <h3>Match the project segment</h3>
        <p>Hospitality FF&amp;E, healthcare, multifamily, residential trade, government &mdash; narrow to distributors who've shipped to your project type.</p>
      </li>
    </ol>
    <p class="hiw-note">Listings reflect distributor-supplied information &mdash; not pay-to-play. To list your company, update an entry, or correct a line authorization, email <a href="mailto:<%= site.email %>"><%= site.email %></a>. Operated by <a href="https://designerwallcoverings.com">Designer Wallcoverings</a> as a free industry resource.</p>
  </section>
</main>

<%- include('partials/foot') %>