feat(cro): homepage structural overhaul — proof strip, struggling moments, comparison

Task 2: Remove journey timeline (3 "SOON" badges = incomplete signal).
Add proof strip below hero with live stats. Add "Sound familiar?"
section with 4 JTBD struggling-moment cards. Add "Why Padelnomics"
3-column comparison (DIY vs consultant vs us). Update hero secondary
CTA and supplier matching links to /quote. Route handler now passes
calc_requests and total_budget_millions to template.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/padelnomics/public/routes.py

@@ -26,10 +26,21 @@ async def _supplier_counts():
 @bp.route("/")
 async def landing():
     total_suppliers, total_countries = await _supplier_counts()
+    calc_requests = await count_where("scenarios WHERE deleted_at IS NULL")
+    budget_row = await fetch_one(
+        "SELECT COALESCE(SUM(budget_estimate), 0) AS total"
+        " FROM lead_requests WHERE budget_estimate > 0 AND lead_type = 'quote'"
+    )
+    total_budget_millions = round((budget_row["total"] if budget_row else 0) / 1_000_000, 1)
+    # Floor to nearest whole number if > 1, show one decimal if < 1
+    if total_budget_millions >= 1:
+        total_budget_millions = int(total_budget_millions)
     return await render_template(
         "landing.html",
         total_suppliers=total_suppliers,
         total_countries=total_countries,
+        calc_requests=calc_requests,
+        total_budget_millions=total_budget_millions,
     )
 
 

web/src/padelnomics/public/templates/landing.html

@@ -118,48 +118,64 @@
   }
   .roi-calc__cta:hover { background: #1E40AF; color: #fff; }
 
-  /* Journey timeline */
+  /* Proof strip */
-  .journey-section { padding: 5rem 0 4rem; }
+  .proof-strip {
-  .journey-section h2 { text-align: center; font-size: 1.75rem; margin-bottom: 3.5rem; }
+    display: flex; align-items: center; justify-content: center; gap: 8px;
-  .journey-track {
+    padding: 1rem 1.5rem; font-size: 0.8125rem; color: #64748B;
-    display: grid; grid-template-columns: repeat(5, 1fr);
+    border-bottom: 1px solid #E2E8F0; flex-wrap: wrap;
-    position: relative; padding: 0 1rem;
   }
-  .journey-track::after {
+  .proof-strip__dot { color: #CBD5E1; }
-    content: ''; position: absolute; top: 23px; left: 12%; right: 12%;
+
-    height: 2px; background: #E2E8F0; z-index: 0;
+  /* "Sound familiar?" cards */
+  .familiar-grid {
+    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
+    max-width: 800px; margin: 0 auto;
   }
-  .journey-step {
+  .familiar-card {
-    display: flex; flex-direction: column; align-items: center;
+    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px;
-    text-align: center; position: relative; z-index: 1;
+    padding: 1.5rem; position: relative;
   }
-  .journey-step__num {
+  .familiar-card blockquote {
-    width: 48px; height: 48px; border-radius: 50%;
+    font-size: 0.9375rem; color: #334155; font-style: italic;
-    display: flex; align-items: center; justify-content: center;
+    line-height: 1.6; margin: 0 0 0.75rem; padding: 0;
-    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
-    font-weight: 800; font-size: 0.875rem;
-    background: #fff; border: 2px solid #E2E8F0; color: #CBD5E1;
-    margin-bottom: 1rem; transition: all 0.2s;
   }
-  .journey-step--active .journey-step__num {
+  .familiar-card p {
-    background: #1D4ED8; border-color: #1D4ED8; color: #fff;
+    font-size: 0.8125rem; color: #64748B; margin: 0; line-height: 1.5;
-    box-shadow: 0 4px 16px rgba(29,78,216,0.3);
   }
-  .journey-step__title {
+
-    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
+  /* "Why Padelnomics" comparison */
-    font-size: 0.9375rem; font-weight: 700; color: #0F172A; margin-bottom: 0.375rem;
+  .vs-grid {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
+    max-width: 900px; margin: 0 auto;
   }
-  .journey-step__desc {
+  .vs-card {
-    font-size: 0.8125rem; color: #64748B; max-width: 170px; line-height: 1.5;
+    border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.5rem;
+    display: flex; flex-direction: column;
   }
-  .journey-step--upcoming { opacity: 0.45; }
+  .vs-card h3 {
-  .journey-step--upcoming .journey-step__title { color: #64748B; }
+    font-size: 1rem; margin-bottom: 1rem; text-align: center;
-  .badge-soon {
-    display: inline-block; background: rgba(29,78,216,0.08); color: #1D4ED8;
-    font-size: 0.625rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
-    margin-left: 4px; text-transform: uppercase; letter-spacing: 0.04em;
-    vertical-align: middle;
   }
+  .vs-card dl { flex-grow: 1; }
+  .vs-card dt {
+    font-size: 0.6875rem; color: #94A3B8; text-transform: uppercase;
+    letter-spacing: 0.04em; margin-top: 0.75rem;
+  }
+  .vs-card dt:first-of-type { margin-top: 0; }
+  .vs-card dd { font-size: 0.875rem; color: #475569; margin: 0.25rem 0 0; }
+  .vs-card--muted { background: #F8FAFC; }
+  .vs-card--highlight {
+    border-color: #1D4ED8; border-width: 2px;
+    box-shadow: 0 4px 16px rgba(29,78,216,0.08);
+  }
+  .vs-card__bottom {
+    font-size: 0.8125rem; color: #94A3B8; font-style: italic;
+    text-align: center; margin-top: auto; padding-top: 1rem;
+  }
+  .vs-card__cta {
+    display: block; text-align: center; margin-top: auto; padding-top: 1rem;
+    color: #1D4ED8; font-weight: 600; font-size: 0.875rem; text-decoration: none;
+  }
+  .vs-card__cta:hover { text-decoration: underline; }
 
   /* Supplier matching */
   .match-grid {
@@ -225,14 +241,8 @@
     .hero-title { font-size: clamp(32px, 8vw, 44px); }
     .hero-bullets { flex-wrap: wrap; gap: 12px; }
     .roi-metrics { grid-template-columns: 1fr 1fr; }
-    .journey-track { grid-template-columns: 1fr; gap: 2rem; padding: 0; }
+    .familiar-grid { grid-template-columns: 1fr; }
-    .journey-track::after { display: none; }
+    .vs-grid { grid-template-columns: 1fr; }
-    .journey-step {
-      display: grid; grid-template-columns: 48px 1fr;
-      column-gap: 1rem; text-align: left; align-items: start;
-    }
-    .journey-step__num { grid-row: 1 / 3; margin-bottom: 0; }
-    .journey-step__desc { max-width: none; }
     .match-grid { grid-template-columns: 1fr; }
   }
 </style>
@@ -253,7 +263,7 @@
         <p class="hero-desc">{{ t.landing_hero_desc }}</p>
         <div class="hero-actions">
           <a href="{{ url_for('planner.index') }}" class="btn-hero">{{ t.landing_hero_btn_primary }}</a>
-          <a href="{{ url_for('directory.index') }}" class="btn-hero-outline">{{ t.landing_hero_btn_secondary }}</a>
+          <a href="{{ url_for('quote.wizard') }}" class="btn-hero-outline">{{ t.landing_hero_btn_secondary }}</a>
         </div>
         <div class="hero-bullets">
           <span><span class="hero-check">&#x2713;</span> {{ t.landing_hero_bullet_1 }}</span>
@@ -305,36 +315,37 @@
 </section>
 
 <main class="container-page">
-  <!-- Journey Timeline -->
+  <!-- Social proof strip -->
-  <section class="journey-section">
+  <div class="proof-strip">
-    <h2>{{ t.landing_journey_title }}</h2>
+    <span>{{ t.landing_proof_plans | tformat(count=calc_requests) }}</span>
-    <div class="journey-track">
+    <span class="proof-strip__dot">&middot;</span>
-      <div class="journey-step journey-step--upcoming">
+    <span>{{ t.landing_proof_suppliers | tformat(count=total_suppliers, countries=total_countries) }}</span>
-        <div class="journey-step__num">01</div>
+    <span class="proof-strip__dot">&middot;</span>
-        <h3 class="journey-step__title">{{ t.landing_journey_01 }} <span class="badge-soon">{{ t.landing_journey_01_badge }}</span></h3>
+    <span>{{ t.landing_proof_projects | tformat(amount=total_budget_millions) }}</span>
-        <p class="journey-step__desc">{{ t.landing_journey_01_desc }}</p>
   </div>
-      <div class="journey-step journey-step--active">
+
-        <div class="journey-step__num">02</div>
+  <!-- "Sound familiar?" — struggling moments -->
-        <h3 class="journey-step__title">{{ t.landing_journey_02 }}</h3>
+  <section class="py-12">
-        <p class="journey-step__desc">{{ t.landing_journey_02_desc }}</p>
+    <h2 class="text-2xl text-center mb-8">{{ t.landing_familiar_title }}</h2>
+    <div class="familiar-grid">
+      <div class="familiar-card">
+        <blockquote>&ldquo;{{ t.landing_familiar_1_quote }}&rdquo;</blockquote>
+        <p>{{ t.landing_familiar_1_desc }}</p>
       </div>
-      <div class="journey-step journey-step--upcoming">
+      <div class="familiar-card">
-        <div class="journey-step__num">03</div>
+        <blockquote>&ldquo;{{ t.landing_familiar_2_quote }}&rdquo;</blockquote>
-        <h3 class="journey-step__title">{{ t.landing_journey_03 }} <span class="badge-soon">{{ t.landing_journey_03_badge }}</span></h3>
+        <p>{{ t.landing_familiar_2_desc }}</p>
-        <p class="journey-step__desc">{{ t.landing_journey_03_desc }}</p>
       </div>
-      <div class="journey-step journey-step--active">
+      <div class="familiar-card">
-        <div class="journey-step__num">04</div>
+        <blockquote>&ldquo;{{ t.landing_familiar_3_quote }}&rdquo;</blockquote>
-        <h3 class="journey-step__title">{{ t.landing_journey_04 }}</h3>
+        <p>{{ t.landing_familiar_3_desc }}</p>
-        <p class="journey-step__desc">{{ t.landing_journey_04_desc | tformat(total_suppliers=total_suppliers, total_countries=total_countries) }}</p>
       </div>
-      <div class="journey-step journey-step--upcoming">
+      <div class="familiar-card">
-        <div class="journey-step__num">05</div>
+        <blockquote>&ldquo;{{ t.landing_familiar_4_quote }}&rdquo;</blockquote>
-        <h3 class="journey-step__title">{{ t.landing_journey_05 }} <span class="badge-soon">{{ t.landing_journey_05_badge }}</span></h3>
+        <p>{{ t.landing_familiar_4_desc }}</p>
-        <p class="journey-step__desc">{{ t.landing_journey_05_desc }}</p>
       </div>
     </div>
+    <p class="text-center text-slate mt-6" style="font-weight:500">{{ t.landing_familiar_cta }}</p>
   </section>
 
   <!-- Feature Highlights -->
@@ -370,6 +381,41 @@
     </div>
   </section>
 
+  <!-- "Why Padelnomics" comparison -->
+  <section class="py-12">
+    <h2 class="text-2xl text-center mb-2">{{ t.landing_vs_title }}</h2>
+    <p class="text-center text-slate mb-8">{{ t.landing_vs_sub }}</p>
+    <div class="vs-grid">
+      <div class="vs-card vs-card--muted">
+        <h3>{{ t.landing_vs_col_diy }}</h3>
+        <dl>
+          <dt>{{ t.landing_vs_row1_label }}</dt><dd>{{ t.landing_vs_row1_diy }}</dd>
+          <dt>{{ t.landing_vs_row2_label }}</dt><dd>{{ t.landing_vs_row2_diy }}</dd>
+          <dt>{{ t.landing_vs_row3_label }}</dt><dd>{{ t.landing_vs_row3_diy }}</dd>
+        </dl>
+        <p class="vs-card__bottom">{{ t.landing_vs_diy_cta }}</p>
+      </div>
+      <div class="vs-card vs-card--muted">
+        <h3>{{ t.landing_vs_col_consultant }}</h3>
+        <dl>
+          <dt>{{ t.landing_vs_row1_label }}</dt><dd>{{ t.landing_vs_row1_consultant }}</dd>
+          <dt>{{ t.landing_vs_row2_label }}</dt><dd>{{ t.landing_vs_row2_consultant }}</dd>
+          <dt>{{ t.landing_vs_row3_label }}</dt><dd>{{ t.landing_vs_row3_consultant }}</dd>
+        </dl>
+        <p class="vs-card__bottom">{{ t.landing_vs_consultant_cta }}</p>
+      </div>
+      <div class="vs-card vs-card--highlight">
+        <h3>{{ t.landing_vs_col_us }}</h3>
+        <dl>
+          <dt>{{ t.landing_vs_row1_label }}</dt><dd>{{ t.landing_vs_row1_us }}</dd>
+          <dt>{{ t.landing_vs_row2_label }}</dt><dd>{{ t.landing_vs_row2_us }}</dd>
+          <dt>{{ t.landing_vs_row3_label }}</dt><dd>{{ t.landing_vs_row3_us }}</dd>
+        </dl>
+        <a href="{{ url_for('planner.index') }}" class="vs-card__cta">{{ t.landing_vs_us_cta }}</a>
+      </div>
+    </div>
+  </section>
+
   <!-- Supplier Matching -->
   <section class="py-12">
     <h2 class="text-2xl text-center mb-2">{{ t.landing_supplier_title }}</h2>
@@ -392,7 +438,7 @@
       </div>
     </div>
     <div class="text-center mt-8">
-      <a href="{{ url_for('directory.index') }}" class="btn-outline">{{ t.landing_supplier_browse_btn }}</a>
+      <a href="{{ url_for('quote.wizard') }}" class="btn-outline">{{ t.landing_supplier_browse_btn }}</a>
     </div>
   </section>
 
@@ -436,7 +482,7 @@
   <section style="padding: 2rem 0 4rem">
     <div class="cta-card">
       <h2>{{ t.landing_final_cta_h2 }}</h2>
-      <p>{{ t.landing_final_cta_sub | tformat(total_countries=total_countries) }}</p>
+      <p>{{ t.landing_final_cta_sub }}</p>
       <a href="{{ url_for('planner.index') }}" class="cta-card__btn">{{ t.landing_final_cta_btn }}</a>
     </div>
   </section>