deemanone/padelnomics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Deeman
2026-03-03 06:33:43 +01:00
parent 9e471f8960
commit f4f8a45654
2 changed files with 127 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/padelnomics/public/routes.py
View File

@@ -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,
)

186
web/src/padelnomics/public/templates/landing.html
View File

@@ -118,48 +118,64 @@
}
.roi-calc__cta:hover { background: #1E40AF; color: #fff; }
/* Journey timeline */
.journey-section { padding: 5rem 0 4rem; }
.journey-section h2 { text-align: center; font-size: 1.75rem; margin-bottom: 3.5rem; }
.journey-track {
display: grid; grid-template-columns: repeat(5, 1fr);
position: relative; padding: 0 1rem;
/* Proof strip */
.proof-strip {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 1rem 1.5rem; font-size: 0.8125rem; color: #64748B;
border-bottom: 1px solid #E2E8F0; flex-wrap: wrap;
}
.journey-track::after {
content: ''; position: absolute; top: 23px; left: 12%; right: 12%;
height: 2px; background: #E2E8F0; z-index: 0;
.proof-strip__dot { color: #CBD5E1; }
/* "Sound familiar?" cards */
.familiar-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
max-width: 800px; margin: 0 auto;
}
.journey-step {
display: flex; flex-direction: column; align-items: center;
text-align: center; position: relative; z-index: 1;
.familiar-card {
background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px;
padding: 1.5rem; position: relative;
}
.journey-step__num {
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
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;
.familiar-card blockquote {
font-size: 0.9375rem; color: #334155; font-style: italic;
line-height: 1.6; margin: 0 0 0.75rem; padding: 0;
}
.journey-step--active .journey-step__num {
background: #1D4ED8; border-color: #1D4ED8; color: #fff;
box-shadow: 0 4px 16px rgba(29,78,216,0.3);
.familiar-card p {
font-size: 0.8125rem; color: #64748B; margin: 0; line-height: 1.5;
}
.journey-step__title {
font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
font-size: 0.9375rem; font-weight: 700; color: #0F172A; margin-bottom: 0.375rem;
/* "Why Padelnomics" comparison */
.vs-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
max-width: 900px; margin: 0 auto;
}
.journey-step__desc {
font-size: 0.8125rem; color: #64748B; max-width: 170px; line-height: 1.5;
.vs-card {
border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.5rem;
display: flex; flex-direction: column;
}
.journey-step--upcoming { opacity: 0.45; }
.journey-step--upcoming .journey-step__title { color: #64748B; }
.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 h3 {
font-size: 1rem; margin-bottom: 1rem; text-align: center;
}
.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; }
.journey-track::after { display: none; }
.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; }
.familiar-grid { grid-template-columns: 1fr; }
.vs-grid { grid-template-columns: 1fr; }
.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 -->
<section class="journey-section">
<h2>{{ t.landing_journey_title }}</h2>
<div class="journey-track">
<div class="journey-step journey-step--upcoming">
<div class="journey-step__num">01</div>
<h3 class="journey-step__title">{{ t.landing_journey_01 }} <span class="badge-soon">{{ t.landing_journey_01_badge }}</span></h3>
<p class="journey-step__desc">{{ t.landing_journey_01_desc }}</p>
<!-- Social proof strip -->
<div class="proof-strip">
<span>{{ t.landing_proof_plans | tformat(count=calc_requests) }}</span>
<span class="proof-strip__dot">&middot;</span>
<span>{{ t.landing_proof_suppliers | tformat(count=total_suppliers, countries=total_countries) }}</span>
<span class="proof-strip__dot">&middot;</span>
<span>{{ t.landing_proof_projects | tformat(amount=total_budget_millions) }}</span>
</div>
<!-- "Sound familiar?" — struggling moments -->
<section class="py-12">
<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--active">
<div class="journey-step__num">02</div>
<h3 class="journey-step__title">{{ t.landing_journey_02 }}</h3>
<p class="journey-step__desc">{{ t.landing_journey_02_desc }}</p>
<div class="familiar-card">
<blockquote>&ldquo;{{ t.landing_familiar_2_quote }}&rdquo;</blockquote>
<p>{{ t.landing_familiar_2_desc }}</p>
</div>
<div class="journey-step journey-step--upcoming">
<div class="journey-step__num">03</div>
<h3 class="journey-step__title">{{ t.landing_journey_03 }} <span class="badge-soon">{{ t.landing_journey_03_badge }}</span></h3>
<p class="journey-step__desc">{{ t.landing_journey_03_desc }}</p>
<div class="familiar-card">
<blockquote>&ldquo;{{ t.landing_familiar_3_quote }}&rdquo;</blockquote>
<p>{{ t.landing_familiar_3_desc }}</p>
</div>
<div class="journey-step journey-step--active">
<div class="journey-step__num">04</div>
<h3 class="journey-step__title">{{ t.landing_journey_04 }}</h3>
<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="journey-step__num">05</div>
<h3 class="journey-step__title">{{ t.landing_journey_05 }} <span class="badge-soon">{{ t.landing_journey_05_badge }}</span></h3>
<p class="journey-step__desc">{{ t.landing_journey_05_desc }}</p>
<div class="familiar-card">
<blockquote>&ldquo;{{ t.landing_familiar_4_quote }}&rdquo;</blockquote>
<p>{{ t.landing_familiar_4_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>