[object Object]

← back to Ventura Claw Leads

yolo tick 15: home-page 'How it works' 3-step explainer

4e2663de6e78a8d066641669be285f4751aee28e · 2026-05-06 19:56:12 -0700 · Steve Abrams

views/public/home.ejs: section between hero and verticals — Find →
Message → Reply. Each step has brass-italic '01/02/03' label, serif
headline, and a 1-sentence body that names the actual product mechanic
(5-min lead delivery, reply-to consumer, no middleman).

public/css/public.css: .how-it-works section + .how-grid (3 cols
desktop, 1 col phone via the existing 768px breakpoint). Steps inherit
the existing serif/sans + brass typography system; no new design tokens.

Concrete visitor explanation right above the category browser, addresses
the most common 'wait, how does this work / will the business actually
reply?' confusion. 46/46 tests still pass.

Files touched

Diff

commit 4e2663de6e78a8d066641669be285f4751aee28e
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed May 6 19:56:12 2026 -0700

    yolo tick 15: home-page 'How it works' 3-step explainer
    
    views/public/home.ejs: section between hero and verticals — Find →
    Message → Reply. Each step has brass-italic '01/02/03' label, serif
    headline, and a 1-sentence body that names the actual product mechanic
    (5-min lead delivery, reply-to consumer, no middleman).
    
    public/css/public.css: .how-it-works section + .how-grid (3 cols
    desktop, 1 col phone via the existing 768px breakpoint). Steps inherit
    the existing serif/sans + brass typography system; no new design tokens.
    
    Concrete visitor explanation right above the category browser, addresses
    the most common 'wait, how does this work / will the business actually
    reply?' confusion. 46/46 tests still pass.
---
 public/css/public.css | 14 ++++++++++++++
 views/public/home.ejs | 22 ++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/public/css/public.css b/public/css/public.css
index 7ab15d5..ed6c43f 100644
--- a/public/css/public.css
+++ b/public/css/public.css
@@ -8,6 +8,18 @@
 .hero-meta { display: flex; gap: 24px; margin-top: 16px; font-size: 12px; color: var(--fg-muted); }
 .hero-meta strong { color: var(--fg); font-family: var(--serif); font-size: 14px; font-weight: 500; }
 
+/* How it works */
+.how-it-works { padding: 56px 28px 32px; max-width: 1200px; margin: 0 auto; }
+.how-it-works h2 { margin: 0 0 12px; }
+.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
+.how-step { padding: 0; }
+.how-step .how-num {
+  font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: 0.18em;
+  color: var(--brass); margin: 0 0 8px;
+}
+.how-step h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 0 0 10px; line-height: 1.2; }
+.how-step p { font-size: 15px; line-height: 1.6; color: var(--fg-muted); margin: 0; max-width: 38ch; }
+
 /* Vertical chips */
 .verticals { padding: 32px 28px; max-width: 1200px; margin: 0 auto; }
 .verticals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
@@ -135,6 +147,8 @@
   .footer-inner { grid-template-columns: 1fr; gap: 24px; }
   .hero { padding: 48px 16px 32px; }
   .find-page { padding: 32px 16px; }
+  .how-it-works { padding: 32px 16px; }
+  .how-grid { grid-template-columns: 1fr; gap: 24px; }
   .profile-body { grid-template-columns: 1fr; gap: 32px; padding: 16px 16px 48px; }
   .filter-row { grid-template-columns: 1fr; }
   .business-grid { grid-template-columns: 1fr; }
diff --git a/views/public/home.ejs b/views/public/home.ejs
index f1f31dd..e4cebd0 100644
--- a/views/public/home.ejs
+++ b/views/public/home.ejs
@@ -22,6 +22,28 @@
   </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">

← 294e68a yolo tick 14: /admin/leads search-within-messages  ·  back to Ventura Claw Leads  ·  yolo tick 16: profile activity badge (≥3 threshold) + /find 53d59c1 →