`views/public/home.ejs`

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

<section class="hero">
  <div class="hero-inner">
    <p class="kicker">Verified · Insured · Scheduled</p>
    <h1 class="display">The luxury wallcovering<br>installer hub.</h1>
    <p class="lede">Hand-painted papers, silk, grasscloth, murals — installed by verified specialists across every market in the country. Search, vet, and book directly into the installer's calendar.</p>
    <form action="/find" method="get" class="hero-search" role="search">
      <input type="text" name="q" placeholder="City, ZIP, brand, or specialty" aria-label="Search">
      <select name="segment" aria-label="Segment">
        <option value="">All segments</option>
        <option value="luxury_residential">Luxury residential</option>
        <option value="hospitality">Hospitality</option>
        <option value="retail">Retail</option>
        <option value="museum">Museum / cultural</option>
        <option value="yacht">Yacht / aviation</option>
      </select>
      <button type="submit" class="btn btn-primary">Find an installer</button>
    </form>
    <p class="hero-trust">Already specifying a project? <a href="/find?segment=luxury_residential">Browse signature studios →</a></p>
  </div>
</section>

<section class="trust-strip">
  <div class="trust-inner">
    <div><strong><%= stats.total_listings %>+</strong><span>installer studios listed</span></div>
    <div><strong><%= stats.state_count %></strong><span>states covered</span></div>
    <div><strong><%= stats.accredited_count %></strong><span>WIA-accredited members</span></div>
    <div><strong>Concierge</strong><span>For architects, designers, hospitality</span></div>
  </div>
</section>

<section class="featured">
  <div class="section-head">
    <h2 class="section-title">Featured studios</h2>
    <a href="/find" class="section-link">Browse all installers →</a>
  </div>
  <div class="installer-grid">
    <% featured.forEach(function(i){ %>
      <a class="installer-card" href="/installer/<%= i.slug %>">
        <% var _pdImg = pickSegmentImage(i); %>
        <div class="card-image">
          <% if (_pdImg) { %>
            <img loading="lazy" decoding="async" src="<%= _pdImg.file %>" alt="<%= i.business_name %> — wallcovering installer in <%= [i.city,i.state].filter(Boolean).join(', ') %>">
          <% } else { %>
            <span class="card-image-placeholder"><%= (i.business_name || '').slice(0,2).toUpperCase() %></span>
          <% } %>
        </div>
        <div class="card-body">
          <h3 class="card-title"><%= i.business_name %></h3>
          <p class="card-meta"><%= i.city %>, <%= i.state %></p>
          <p class="card-headline"><%= i.headline %></p>
          <ul class="card-tags">
            <% (i.materials || []).slice(0,3).forEach(function(m){ %>
              <li class="tag"><%= m.replace(/_/g,' ') %></li>
            <% }); %>
          </ul>
          <% if (i.verified) { %><span class="verified-badge">Verified</span><% } %>
        </div>
      </a>
    <% }); %>
  </div>
</section>

<section class="how-it-works">
  <div class="section-head">
    <h2 class="section-title">How it works</h2>
  </div>
  <ol class="how-grid">
    <li>
      <span class="step">01</span>
      <h3>Search by location, specialty, or brand</h3>
      <p>Filter for hand-painted papers, silk, grasscloth, mural, or specific manufacturers like Fromental, Maya Romanoff, or de Gournay.</p>
    </li>
    <li>
      <span class="step">02</span>
      <h3>Vet the studio</h3>
      <p>Every active installer profile shows portfolio, insurance status, accreditations, brand experience, response SLA, and travel radius.</p>
    </li>
    <li>
      <span class="step">03</span>
      <h3>Book the calendar</h3>
      <p>Pick an open slot directly from the installer's live calendar — consultations, site visits, and installs scheduled in one place.</p>
    </li>
  </ol>
</section>

<section class="for-installers-cta">
  <div class="cta-inner">
    <h2 class="display-sm">Run a wallcovering studio?</h2>
    <p>Get listed in the directory the trade actually uses, and turn your calendar into your booking system. From $39/month.</p>
    <a href="/for-installers" class="btn btn-primary">List your business</a>
  </div>
</section>

<%
  var _orgBase = (typeof publicUrl !== 'undefined' && publicUrl) ? publicUrl.replace(/\/+$/, '') : 'https://www.nationalpaperhangers.com';
%>
<script type="application/ld+json"><%- JSON.stringify({
  '@context':'https://schema.org','@type':'Organization',
  name: 'National Paper Hangers',
  url: _orgBase,
  sameAs: [],
  description: 'A directory of verified luxury wallcovering installers across the United States. NPH operates as a referral and lead-coordination service; the installation contract is between the consumer and the installer.'
}) %></script>
<script type="application/ld+json"><%- JSON.stringify({
  '@context':'https://schema.org','@type':'WebSite',
  name: 'National Paper Hangers',
  url: _orgBase,
  potentialAction: {
    '@type':'SearchAction',
    target: _orgBase + '/find?q={search_term_string}',
    'query-input':'required name=search_term_string'
  }
}) %></script>
<%- include('../partials/footer') %>