← back to Ventura Claw Leads

views/public/home.ejs

246 lines

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

<%
  // Organization + WebSite + FAQPage JSON-LD on the home page only. Three
  // schemas wrapped in @graph so Google parses them as a single document
  // describing one entity. Organization → brand-level rich result;
  // WebSite → sitelinks search box (queries route to /find?q=); FAQPage →
  // FAQ rich snippet for the 5 questions in the FAQ section below.
  var _publicUrl = (typeof publicUrl !== 'undefined' && publicUrl) ? publicUrl.replace(/\/+$/, '') : 'https://leads.venturaclaw.com';
  var _faqItems = [
    { q: "How does this differ from Yelp or Google Maps?",
      a: "Ventura Claw is curated, narrow, and local — limited to small businesses on the Ventura Blvd corridor (Sherman Oaks → Woodland Hills). No reviews, no ranking algorithm, no ads on consumer surfaces. Just a clean way to find a business near you and message them directly." },
    { q: "Why aren't doctors, lawyers, or contractors listed?",
      a: "State-licensed professions (medical, legal, financial, real estate, licensed trades) have their own referral and fee-splitting rules. Ventura Claw intentionally only lists businesses where the work is done by the business itself, not by a regulated individual. This keeps the platform structurally simple and our pricing structurally honest." },
    { q: "How do leads get to the business?",
      a: "When you fill out a contact form on a business profile, your message routes to the business's email within five minutes via our lead-delivery cron. The reply-to is set to your email, so when they hit reply you get the response directly — Ventura Claw is never on the chain." },
    { q: "How much does it cost — for me, for the business?",
      a: "For visitors: zero. Always. We never charge consumers anything. Businesses pay a monthly subscription ($0 free / $49 starter / $99 standard / $199 premier) for premium placement. We don't take a cut of any transaction between consumers and businesses." },
    { q: "I own a business on Ventura Blvd. How do I claim my listing?",
      a: "Find your business in the directory and click 'Claim this listing' on the profile page. We'll email you a confirmation link, you set a password, and you're in your dashboard with a lead inbox, profile editor, and tier picker. Free tier always available." }
  ];
  var _ldGraph = {
    '@context': 'https://schema.org',
    '@graph': [
      {
        '@type': 'Organization',
        '@id': _publicUrl + '/#org',
        name: 'Ventura Claw',
        url: _publicUrl + '/',
        description: 'Directory and lead-routing service for small businesses on Ventura Blvd between Sherman Oaks and Woodland Hills.',
        areaServed: {
          '@type': 'GeoShape',
          name: 'Ventura Blvd corridor',
          addressRegion: 'CA',
          addressCountry: 'US'
        }
      },
      {
        '@type': 'WebSite',
        '@id': _publicUrl + '/#site',
        url: _publicUrl + '/',
        name: 'Ventura Claw',
        publisher: { '@id': _publicUrl + '/#org' },
        potentialAction: {
          '@type': 'SearchAction',
          target: { '@type': 'EntryPoint', urlTemplate: _publicUrl + '/find?q={query}' },
          'query-input': 'required name=query'
        }
      },
      {
        '@type': 'FAQPage',
        '@id': _publicUrl + '/#faq',
        mainEntity: _faqItems.map(function(it){
          return {
            '@type': 'Question', name: it.q,
            acceptedAnswer: { '@type': 'Answer', text: it.a }
          };
        })
      }
    ]
  };
%>
<script type="application/ld+json"><%- JSON.stringify(_ldGraph) %></script>

<section class="hero">
  <p class="kicker">Ventura Blvd · Sherman Oaks · Studio City · Encino · Tarzana · Woodland Hills</p>
  <h1>Every business worth knowing on the Boulevard.</h1>
  <p class="lede">A curated directory of small businesses on Ventura Blvd — restaurants, salons, retail, fitness, pet services, auto detail, cleaning, and creative pros. Find them, message them, support them.</p>
  <form action="/find" method="get" class="hero-search" role="search">
    <input type="search" name="q" placeholder="Try 'salon Sherman Oaks' or 'cafe Studio City'" autocomplete="off">
    <button type="submit" class="btn btn-primary btn-lg">Search →</button>
  </form>
  <p class="hero-secondary" style="margin:8px 0 0;font-size:14px">
    or <a href="/map" style="font-weight:600">browse the map →</a> · <%= stats.total %> pins on Ventura Blvd
  </p>
  <div class="hero-meta">
    <span><strong><%= stats.total %></strong> businesses</span>
    <span><strong><%= stats.vertical_count %></strong> categories</span>
    <span><strong><%= stats.city_count %></strong> neighborhoods</span>
    <% if (stats.messages_30d > 0) { %>
      <span><strong><%= stats.messages_30d %></strong> messages routed in the last 30 days</span>
    <% } %>
    <% if (stats.claimed_count > 0) { %>
      <span><strong><%= stats.claimed_count %></strong> claimed by their owners</span>
    <% } %>
  </div>
</section>

<section class="how-it-works">
  <h2>How it works</h2>
  <p class="lede" style="margin:0 0 32px;max-width:60ch">Three steps. No middleman, no markup, no booking fees for you.</p>
  <div class="how-grid">
    <div class="how-step">
      <div class="how-num">01</div>
      <h3>Find a business</h3>
      <p>Search by category, neighborhood, or name across <%= stats.total %> Ventura Blvd businesses — restaurants, salons, retail, fitness, pet, auto detail, cleaning, creative pros.</p>
    </div>
    <div class="how-step">
      <div class="how-num">02</div>
      <h3>Send a message</h3>
      <p>Click a business, write a quick note. Their phone, address, hours, and Instagram are right on the profile if you'd rather reach out directly.</p>
    </div>
    <div class="how-step">
      <div class="how-num">03</div>
      <h3>They reply to you</h3>
      <p>The business gets your message in their inbox within five minutes and replies straight to your email. Ventura Claw is never on the chain.</p>
    </div>
  </div>
</section>

<section class="verticals">
  <h2>Browse by category</h2>
  <div class="verticals-grid">
    <% verticals.forEach(function(v){ %>
      <a class="vertical-chip" href="/find?vertical=<%= v.key %>">
        <span class="v-icon" aria-hidden="true"><%= v.icon %></span>
        <span class="v-meta">
          <span class="v-label"><%= v.label %></span>
          <span class="v-count"><%= verticalCountMap[v.key] || 0 %> businesses · <%= v.blurb %></span>
        </span>
      </a>
    <% }); %>
  </div>
</section>

<% if (typeof verticalSamples !== 'undefined' && verticalSamples) {
     // Render rails in the same order verticalCountMap dictates (largest first).
     // Each rail = 6-card preview + a "see all N <vertical>" link to the filter.
     verticals.forEach(function(vv){
       var rows = verticalSamples[vv.key];
       if (!rows || rows.length < 3) return;
       var totalForV = verticalCountMap[vv.key] || rows.length;
%>
  <section class="find-page" style="padding-top:24px">
    <div style="display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 16px">
      <h2 style="margin:0"><span aria-hidden="true"><%= vv.icon %></span> <%= vv.label %> on Ventura Blvd</h2>
      <a href="/find?vertical=<%= vv.key %>" style="font-size:14px;font-weight:600;color:var(--brass);text-decoration:underline;white-space:nowrap;flex-shrink:0">
        See all <%= totalForV %> →
      </a>
    </div>
    <div class="business-grid" style="grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px">
      <% rows.forEach(function(b){ %>
        <a class="business-card" href="/business/<%= b.slug %>" style="padding:14px 16px">
          <% if (b.photo_path) { %>
            <div class="biz-card-hero biz-card-hero-photo" style="aspect-ratio:16/9;margin:-14px -16px 12px">
              <img src="<%= b.photo_path %>" alt="<%= b.business_name %>" loading="lazy" decoding="async">
            </div>
          <% } else { %>
            <div class="biz-card-hero vertical-hero-<%= b.vertical %>" aria-hidden="true" style="aspect-ratio:16/9;margin:-14px -16px 12px">
              <%- include('../partials/vertical-glyph', { verticalKey: b.vertical }) %>
            </div>
          <% } %>
          <p class="biz-name" style="font-size:15px;margin:2px 0"><%= b.business_name %></p>
          <p class="biz-loc" style="font-size:11px;margin:0"><%= [b.neighborhood, b.city].filter(Boolean).join(' · ') %></p>
          <% if (b.claim_status === 'self' || b.claim_status === 'claimed') { %>
            <p class="muted" style="font-size:10px;margin:4px 0 0;letter-spacing:0.05em;text-transform:uppercase">✓ Claimed</p>
          <% } %>
        </a>
      <% }); %>
    </div>
  </section>
<% }); } %>

<section class="faq">
  <h2>Common questions</h2>
  <details class="faq-item">
    <summary>How does this differ from Yelp or Google Maps?</summary>
    <p>Ventura Claw is curated, narrow, and local — limited to small businesses on the Ventura Blvd corridor (Sherman Oaks → Woodland Hills). No reviews, no ranking algorithm, no ads on consumer surfaces. Just a clean way to find a business near you and message them directly.</p>
  </details>
  <details class="faq-item">
    <summary>Why aren't doctors, lawyers, or contractors listed?</summary>
    <p>State-licensed professions (medical, legal, financial, real estate, licensed trades) have their own referral and fee-splitting rules. Ventura Claw intentionally only lists businesses where the work is done by the business itself, not by a regulated individual. This keeps the platform structurally simple and our pricing structurally honest.</p>
  </details>
  <details class="faq-item">
    <summary>How do leads get to the business?</summary>
    <p>When you fill out a contact form on a business profile, your message routes to the business's email within five minutes via our lead-delivery cron. The reply-to is set to your email, so when they hit reply you get the response directly — Ventura Claw is never on the chain.</p>
  </details>
  <details class="faq-item">
    <summary>How much does it cost — for me, for the business?</summary>
    <p>For visitors: zero. Always. We never charge consumers anything. Businesses pay a monthly subscription ($0 free / $49 starter / $99 standard / $199 premier) for premium placement. We don't take a cut of any transaction between consumers and businesses.</p>
  </details>
  <details class="faq-item">
    <summary>I own a business on Ventura Blvd. How do I claim my listing?</summary>
    <p>Find your business in the <a href="/find">directory</a> and click "Claim this listing" on the profile page. We'll email you a confirmation link, you set a password, and you're in your dashboard with a lead inbox, profile editor, and tier picker. Free tier always available.</p>
  </details>
</section>

<% if (typeof recentlyJoined !== 'undefined' && recentlyJoined && recentlyJoined.length >= 3) { %>
  <section class="find-page">
    <div style="display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 16px">
      <h2 style="margin:0">Recently joined</h2>
      <p class="muted" style="margin:0;font-size:13px">Latest businesses to claim their listing on Ventura Claw.</p>
    </div>
    <div class="business-grid" style="grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px">
      <% recentlyJoined.forEach(function(b){
           var vMeta = verticals.find(function(v){return v.key===b.vertical});
      %>
        <a class="business-card" href="/business/<%= b.slug %>" style="padding:14px 16px">
          <% if (b.photo_path) { %>
            <div class="biz-card-hero biz-card-hero-photo" style="aspect-ratio:16/9;margin:-14px -16px 12px">
              <img src="<%= b.photo_path %>" alt="<%= b.business_name %>" loading="lazy" decoding="async">
            </div>
          <% } else { %>
            <div class="biz-card-hero vertical-hero-<%= b.vertical %>" aria-hidden="true" style="aspect-ratio:16/9;margin:-14px -16px 12px">
              <%- include('../partials/vertical-glyph', { verticalKey: b.vertical }) %>
            </div>
          <% } %>
          <p class="biz-vertical" style="font-size:10px"><%= vMeta ? vMeta.label : b.vertical %></p>
          <p class="biz-name" style="font-size:16px;margin:2px 0"><%= b.business_name %></p>
          <p class="biz-loc" style="font-size:11px;margin:0"><%= [b.neighborhood, b.city].filter(Boolean).join(' · ') %></p>
        </a>
      <% }); %>
    </div>
  </section>
<% } %>

<% if (featured && featured.length > 0) { %>
<section class="find-page">
  <h2>Featured this week</h2>
  <div class="business-grid">
    <% featured.forEach(function(b){
         var vMeta = verticals.find(function(v){return v.key===b.vertical});
    %>
      <a class="business-card" href="/business/<%= b.slug %>">
        <% if (b.photo_path) { %>
          <div class="biz-card-hero biz-card-hero-photo">
            <img src="<%= b.photo_path %>" alt="<%= b.business_name %>" loading="lazy" decoding="async">
          </div>
        <% } else { %>
          <div class="biz-card-hero vertical-hero-<%= b.vertical %>" aria-hidden="true">
            <%- include('../partials/vertical-glyph', { verticalKey: b.vertical }) %>
          </div>
        <% } %>
        <p class="biz-vertical"><%= vMeta ? vMeta.label : b.vertical %></p>
        <p class="biz-name"><%= b.business_name %></p>
        <p class="biz-loc"><%= [b.neighborhood, b.city, b.state].filter(Boolean).join(' · ') %></p>
        <% if (b.headline) { %><p class="biz-headline"><%= b.headline %></p><% } %>
      </a>
    <% }); %>
  </div>
</section>
<% } %>

<%- include('../partials/footer') %>