`views/public/home.ejs`

106 lines
<%- include('../partials/head', { title }) %>
<%- include('../partials/header') %>

<main class="home">
  <!-- Gucci-style huge hero: full-bleed photographic ground + wordmark BELOW + italic tagline below.
       Per standing rule (feedback_hero_anatomy_gucci): logo UL + hamburger UR live on top.
       Image source is /img/hero.jpg (≥2560×1600); CSS gradient is the fallback ground. -->
  <section class="hero-gucci" aria-labelledby="hero-wordmark">
    <div class="hero-gucci-bg" role="img" aria-label="Editorial interior — placeholder while final hero photo is licensed"></div>
    <div class="hero-gucci-stars" aria-hidden="true"></div>
    <div class="hero-gucci-stack">
      <h1 id="hero-wordmark" class="hero-gucci-wordmark">Stars of Design</h1>
      <p class="hero-gucci-tagline">
        <em>The designers who set the room.</em><br>
        <em>The wallcoverings that set the tone.</em>
      </p>
      <p class="hero-gucci-subtitle">A working atlas of 150 interior designers — Draper through Wearstler — paired to the patterns they'd actually hang.</p>
      <div class="hero-gucci-cta">
        <a class="btn primary" href="/designers">Browse the directory →</a>
        <a class="btn ghost"   href="/about">How it works</a>
      </div>
    </div>
    <a class="hero-gucci-scroll" href="#directory" aria-label="Scroll to the directory">↓</a>
  </section>

  <section class="section" id="directory">
    <div class="wrap">
      <div class="section-head">
        <h2>The directory</h2>
        <a class="muted" href="/designers">View all designers →</a>
      </div>

      <%- include('../partials/grid-controls', { total, sortKey }) %>

      <div class="designer-grid" data-designer-grid>
        <% designers.slice(0, 24).forEach(function (d) { %>
          <article class="designer-card">
            <header>
              <span class="card-mark" aria-hidden="true"><%= (d.name || '?').split(' ').slice(0,2).map(function (w) { return w[0]; }).join('') %></span>
              <div>
                <h3><a href="/designers/<%= d.slug %>"><%= d.name %></a></h3>
                <p class="muted"><%= d.era %><% if (d.city) { %> · <%= d.city %><% } %></p>
              </div>
            </header>
            <% if (d.headline) { %>
              <p class="headline"><%= d.headline %></p>
            <% } %>
            <% if (d.styles && d.styles.length) { %>
              <ul class="tags">
                <% d.styles.forEach(function (s) { %><li><%= s %></li><% }) %>
              </ul>
            <% } %>
          </article>
        <% }); %>
      </div>
    </div>
  </section>

  <% if (typeof eraIndex !== 'undefined' && eraIndex && eraIndex.length) { %>
    <section class="section era-section" id="by-era">
      <div class="wrap">
        <div class="section-head">
          <h2>By the era</h2>
          <a class="muted" href="/designers">Filter the directory →</a>
        </div>
        <p class="era-section-lede">A working anthology, decade by decade — the designers who defined each chapter of the modern American interior, and the wallcoverings they put on the walls.</p>
        <div class="era-grid">
          <% eraIndex.forEach(function (e) { %>
            <a class="era-card" href="<%= e.href %>">
              <span class="era-card-rule" aria-hidden="true"></span>
              <h3 class="era-card-title"><%= e.era %></h3>
              <p class="era-card-blurb"><%= e.blurb %></p>
              <ul class="era-card-names">
                <% e.exemplars.forEach(function (n) { %><li><%= n %></li><% }) %>
              </ul>
              <span class="era-card-count"><%= e.count %> designer<%= e.count === 1 ? '' : 's' %> →</span>
            </a>
          <% }); %>
        </div>
      </div>
    </section>
  <% } %>

  <section class="section alt">
    <div class="wrap two-col">
      <div>
        <h2>How to read these profiles</h2>
        <ol class="prose">
          <li><strong>Era and city.</strong> Every profile is anchored to a working decade and a working city — Dorothy Draper in 1940s New York is a different designer than Athena Calderone in 2020s Brooklyn.</li>
          <li><strong>Signature.</strong> One sentence on the visual language a designer is known for. The thing you'd recognize across the room.</li>
          <li><strong>Wallcovering pairings.</strong> Three Designer Wallcoverings collections that map to the designer's published interiors — chintz for Buatta, plaster for Vervoordt, hexagonal geometric for Hicks.</li>
        </ol>
      </div>
      <div>
        <h2>For designers and PR</h2>
        <p>If you'd like to be added to the directory or update an existing profile, use the <a href="/submit">submission form</a>. Profiles are free, editorial, and never paid placement.</p>
        <p class="muted">We do not sell contact data and we do not run ads above organic results.</p>
      </div>
    </div>
  </section>
</main>

<%- include('../partials/footer') %>
<script src="/js/grid-controls.js" defer></script>
<script src="/js/hamburger.js" defer></script>