bc7fbcd595
- favicon.svg: pending logo tweaks - base.html: pending template changes - CHANGELOG.md: add waitlist mode and logo redesign entries missed in prior commits - scratch/: add design prototype HTML/JSX files, remove old markdown notes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1079 lines
36 KiB
HTML
1079 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Padelnomics – Design Prototype</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ═══════════════════════════════════════════════
|
||
DESIGN SYSTEM — Phase 1
|
||
Fonts: Bricolage Grotesque (display) + DM Sans (body)
|
||
═══════════════════════════════════════════════ */
|
||
|
||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
:root {
|
||
--font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
|
||
--font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
|
||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
|
||
|
||
--navy: #0F172A;
|
||
--charcoal: #1E293B;
|
||
--electric: #1D4ED8;
|
||
--electric-hover: #1E40AF;
|
||
--accent: #16A34A;
|
||
--soft-white: #F8FAFC;
|
||
--light-gray: #E2E8F0;
|
||
--mid-gray: #CBD5E1;
|
||
--slate: #64748B;
|
||
--slate-dark: #475569;
|
||
--danger: #EF4444;
|
||
--warning: #D97706;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-body);
|
||
color: var(--slate-dark);
|
||
background: var(--soft-white);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
h1, h2, h3, h4 {
|
||
font-family: var(--font-display);
|
||
color: var(--navy);
|
||
font-weight: 700;
|
||
letter-spacing: -0.025em;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
a { color: var(--electric); text-decoration: none; transition: color 0.15s; }
|
||
a:hover { color: var(--electric-hover); }
|
||
|
||
.container {
|
||
max-width: 72rem;
|
||
margin: 0 auto;
|
||
padding: 0 1.5rem;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
ANIMATIONS
|
||
═══════════════════════════════════════════════ */
|
||
|
||
@keyframes fade-up {
|
||
from { opacity: 0; transform: translateY(24px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@keyframes fade-in {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
NAVIGATION — glass effect
|
||
═══════════════════════════════════════════════ */
|
||
|
||
.nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
background: rgba(255, 255, 255, 0.82);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
border-bottom: 1px solid rgba(226, 232, 240, 0.7);
|
||
}
|
||
.nav-inner {
|
||
max-width: 72rem;
|
||
margin: 0 auto;
|
||
padding: 0 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 56px;
|
||
}
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.5rem;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
}
|
||
.nav-links a { color: var(--slate-dark); }
|
||
.nav-links a:hover { color: var(--electric); }
|
||
.nav-links--left { justify-content: flex-start; }
|
||
.nav-links--right { justify-content: flex-end; }
|
||
.nav-logo {
|
||
font-family: var(--font-display);
|
||
font-weight: 800;
|
||
font-size: 1.125rem;
|
||
color: var(--navy);
|
||
letter-spacing: -0.03em;
|
||
flex-shrink: 0;
|
||
}
|
||
.nav-auth-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 7px 18px;
|
||
border-radius: 10px;
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
background: var(--electric);
|
||
box-shadow: 0 2px 8px rgba(29,78,216,0.25);
|
||
transition: background 0.15s;
|
||
}
|
||
.nav-auth-btn:hover { background: var(--electric-hover); color: #fff; }
|
||
.nav-badge {
|
||
background: rgba(29,78,216,0.1);
|
||
color: var(--electric);
|
||
padding: 2px 10px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-links { display: none; }
|
||
.nav-inner { justify-content: center; }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
HERO — dark section
|
||
═══════════════════════════════════════════════ */
|
||
|
||
.hero-dark {
|
||
background: var(--navy);
|
||
background-image:
|
||
radial-gradient(ellipse at 68% 44%, rgba(29,78,216,0.12) 0%, transparent 55%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.hero-dark::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-inner {
|
||
padding: 88px 0 80px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.hero-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 56px;
|
||
align-items: center;
|
||
}
|
||
.hero-content {
|
||
animation: fade-up 0.7s ease-out both;
|
||
}
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: rgba(22,163,74,0.12);
|
||
border: 1px solid rgba(22,163,74,0.22);
|
||
border-radius: 999px;
|
||
padding: 6px 16px;
|
||
margin-bottom: 24px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: #4ADE80;
|
||
}
|
||
.hero-title {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(38px, 5.5vw, 60px);
|
||
font-weight: 800;
|
||
letter-spacing: -0.035em;
|
||
line-height: 1.06;
|
||
margin: 0 0 22px;
|
||
color: #fff;
|
||
}
|
||
.hero-title .accent { color: #60A5FA; }
|
||
.hero-desc {
|
||
font-size: 1.0625rem;
|
||
color: rgba(255,255,255,0.6);
|
||
line-height: 1.7;
|
||
margin: 0 0 32px;
|
||
max-width: 440px;
|
||
}
|
||
.hero-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 24px;
|
||
}
|
||
.btn-hero {
|
||
padding: 14px 28px;
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
font-family: var(--font-body);
|
||
border-radius: 12px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: #fff;
|
||
color: var(--navy);
|
||
border: none;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 20px rgba(255,255,255,0.12);
|
||
transition: transform 0.15s, box-shadow 0.15s;
|
||
}
|
||
.btn-hero:hover {
|
||
color: var(--navy);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 6px 24px rgba(255,255,255,0.18);
|
||
}
|
||
.btn-hero-outline {
|
||
padding: 14px 24px;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
font-family: var(--font-body);
|
||
border-radius: 12px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
border: 1.5px solid rgba(255,255,255,0.2);
|
||
color: rgba(255,255,255,0.8);
|
||
background: transparent;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.btn-hero-outline:hover {
|
||
border-color: rgba(255,255,255,0.4);
|
||
background: rgba(255,255,255,0.06);
|
||
color: #fff;
|
||
}
|
||
.hero-bullets {
|
||
display: flex;
|
||
gap: 24px;
|
||
font-size: 0.8125rem;
|
||
color: rgba(255,255,255,0.4);
|
||
}
|
||
.hero-check { color: #4ADE80; font-weight: 700; margin-right: 2px; }
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
ROI CALCULATOR — white card on dark bg
|
||
═══════════════════════════════════════════════ */
|
||
|
||
.roi-calc {
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
padding: 32px;
|
||
box-shadow:
|
||
0 20px 60px rgba(0,0,0,0.35),
|
||
0 0 0 1px rgba(255,255,255,0.06);
|
||
animation: fade-up 0.7s ease-out 0.12s both;
|
||
}
|
||
.roi-calc__title {
|
||
font-family: var(--font-display);
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
color: var(--navy);
|
||
margin-bottom: 4px;
|
||
}
|
||
.roi-calc__sub {
|
||
font-size: 0.75rem;
|
||
color: #94A3B8;
|
||
margin-bottom: 24px;
|
||
}
|
||
.roi-calc__sliders { display: grid; gap: 20px; }
|
||
.roi-calc__row label {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
color: var(--slate);
|
||
margin-bottom: 8px;
|
||
}
|
||
.roi-calc__row label span {
|
||
color: var(--electric);
|
||
font-weight: 700;
|
||
font-size: 0.875rem;
|
||
font-family: var(--font-mono);
|
||
}
|
||
.roi-calc__row input[type="range"] {
|
||
width: 100%;
|
||
accent-color: var(--electric);
|
||
cursor: pointer;
|
||
height: 6px;
|
||
}
|
||
.roi-metrics {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
border-top: 1px solid var(--light-gray);
|
||
padding-top: 20px;
|
||
margin-top: 24px;
|
||
}
|
||
.roi-metric__label {
|
||
font-size: 0.6875rem;
|
||
color: #94A3B8;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
}
|
||
.roi-metric__val {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: var(--navy);
|
||
font-family: var(--font-mono);
|
||
}
|
||
.roi-metric__val--green { color: var(--electric); }
|
||
.roi-metric__val--red { color: var(--danger); }
|
||
.roi-calc__note {
|
||
font-size: 0.6875rem;
|
||
color: #94A3B8;
|
||
margin-top: 16px;
|
||
line-height: 1.5;
|
||
}
|
||
.roi-calc__cta {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 18px;
|
||
background: var(--electric);
|
||
color: #fff;
|
||
border-radius: 12px;
|
||
padding: 13px;
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
font-family: var(--font-body);
|
||
box-shadow: 0 2px 10px rgba(29,78,216,0.25);
|
||
transition: background 0.15s;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
.roi-calc__cta:hover { background: var(--electric-hover); color: #fff; }
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
JOURNEY TRACK — numbered 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;
|
||
}
|
||
.journey-track::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 23px;
|
||
left: 12%;
|
||
right: 12%;
|
||
height: 2px;
|
||
background: var(--light-gray);
|
||
z-index: 0;
|
||
}
|
||
.journey-step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.journey-step__num {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--font-display);
|
||
font-weight: 800;
|
||
font-size: 0.875rem;
|
||
background: #fff;
|
||
border: 2px solid var(--light-gray);
|
||
color: var(--mid-gray);
|
||
margin-bottom: 1rem;
|
||
transition: all 0.2s;
|
||
}
|
||
.journey-step--active .journey-step__num {
|
||
background: var(--electric);
|
||
border-color: var(--electric);
|
||
color: #fff;
|
||
box-shadow: 0 4px 16px rgba(29,78,216,0.3);
|
||
}
|
||
.journey-step__title {
|
||
font-family: var(--font-display);
|
||
font-size: 0.9375rem;
|
||
font-weight: 700;
|
||
color: var(--navy);
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
.journey-step__desc {
|
||
font-size: 0.8125rem;
|
||
color: var(--slate);
|
||
max-width: 170px;
|
||
line-height: 1.5;
|
||
}
|
||
.journey-step--upcoming {
|
||
opacity: 0.45;
|
||
}
|
||
.journey-step--upcoming .journey-step__title {
|
||
color: var(--slate);
|
||
}
|
||
.badge-soon {
|
||
display: inline-block;
|
||
background: rgba(29,78,216,0.08);
|
||
color: var(--electric);
|
||
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;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.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; }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
FEATURE CARDS
|
||
═══════════════════════════════════════════════ */
|
||
|
||
.features-section { padding: 3rem 0 4rem; }
|
||
.features-section h2 {
|
||
text-align: center;
|
||
font-size: 1.75rem;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.25rem;
|
||
}
|
||
.feature-card {
|
||
background: #fff;
|
||
border: 1px solid var(--light-gray);
|
||
border-radius: 16px;
|
||
padding: 1.5rem;
|
||
transition: box-shadow 0.2s, transform 0.2s;
|
||
}
|
||
.feature-card:hover {
|
||
box-shadow: 0 8px 28px rgba(0,0,0,0.06);
|
||
transform: translateY(-2px);
|
||
}
|
||
.feature-card--electric { border-left: 3px solid var(--electric); }
|
||
.feature-card--accent { border-left: 3px solid var(--accent); }
|
||
.feature-card--warning { border-left: 3px solid var(--warning); }
|
||
.feature-card--danger { border-left: 3px solid var(--danger); }
|
||
|
||
.feature-card h3 {
|
||
font-size: 1.0625rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.feature-card p {
|
||
font-size: 0.8125rem;
|
||
color: var(--slate-dark);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.features-grid { grid-template-columns: 1fr; }
|
||
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
|
||
.hero-title { font-size: clamp(32px, 8vw, 44px); }
|
||
.hero-bullets { flex-wrap: wrap; gap: 12px; }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
SUPPLIER MATCHING
|
||
═══════════════════════════════════════════════ */
|
||
|
||
.matching-section {
|
||
padding: 4rem 0;
|
||
}
|
||
.matching-section h2 {
|
||
text-align: center;
|
||
font-size: 1.75rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.matching-section .sub {
|
||
text-align: center;
|
||
color: var(--slate);
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
.match-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
.match-step {
|
||
text-align: center;
|
||
}
|
||
.match-step__num {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: rgba(29,78,216,0.06);
|
||
color: var(--electric);
|
||
font-family: var(--font-display);
|
||
font-weight: 800;
|
||
font-size: 1.375rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.match-step h3 {
|
||
font-size: 1rem;
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
.match-step p {
|
||
font-size: 0.8125rem;
|
||
color: var(--slate);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.match-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
FAQ
|
||
═══════════════════════════════════════════════ */
|
||
|
||
.faq-section { padding: 3rem 0; }
|
||
.faq-section h2 {
|
||
text-align: center;
|
||
font-size: 1.75rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.faq {
|
||
max-width: 640px;
|
||
margin: 0 auto;
|
||
}
|
||
.faq details {
|
||
border-bottom: 1px solid var(--light-gray);
|
||
padding: 1.125rem 0;
|
||
}
|
||
.faq summary {
|
||
font-family: var(--font-body);
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
font-size: 0.9375rem;
|
||
color: var(--charcoal);
|
||
list-style: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.faq summary::-webkit-details-marker { display: none; }
|
||
.faq summary::before {
|
||
content: "+";
|
||
color: var(--electric);
|
||
font-weight: 700;
|
||
font-size: 1.125rem;
|
||
font-family: var(--font-display);
|
||
width: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
.faq details[open] summary::before { content: "\2212"; }
|
||
.faq .faq-answer {
|
||
color: var(--slate);
|
||
font-size: 0.875rem;
|
||
margin-top: 0.625rem;
|
||
line-height: 1.65;
|
||
padding-left: 30px;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
SEO CONTENT
|
||
═══════════════════════════════════════════════ */
|
||
|
||
.seo-section {
|
||
padding: 3rem 0;
|
||
max-width: 44rem;
|
||
margin: 0 auto;
|
||
}
|
||
.seo-section h2 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.seo-section p {
|
||
color: var(--slate-dark);
|
||
line-height: 1.75;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
CTA CARD — dark rounded card
|
||
═══════════════════════════════════════════════ */
|
||
|
||
.cta-section { padding: 2rem 0 4rem; }
|
||
|
||
.cta-card {
|
||
background: var(--navy);
|
||
background-image: radial-gradient(ellipse at 50% 120%, rgba(29,78,216,0.15) 0%, transparent 60%);
|
||
border-radius: 24px;
|
||
padding: 5rem 2rem;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.cta-card::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
|
||
pointer-events: none;
|
||
}
|
||
.cta-card h2 {
|
||
color: #fff;
|
||
font-size: 2rem;
|
||
margin-bottom: 0.625rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.cta-card p {
|
||
color: rgba(255,255,255,0.55);
|
||
margin-bottom: 2rem;
|
||
max-width: 480px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.cta-card__btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 15px 32px;
|
||
background: #fff;
|
||
color: var(--navy);
|
||
border-radius: 12px;
|
||
font-family: var(--font-body);
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
border: none;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 20px rgba(255,255,255,0.1);
|
||
transition: transform 0.15s, box-shadow 0.15s;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.cta-card__btn:hover {
|
||
color: var(--navy);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 28px rgba(255,255,255,0.16);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
FOOTER
|
||
═══════════════════════════════════════════════ */
|
||
|
||
.footer {
|
||
border-top: 1px solid var(--light-gray);
|
||
padding: 3rem 0 2rem;
|
||
margin-top: 1rem;
|
||
}
|
||
.footer-grid {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr;
|
||
gap: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.footer-brand {
|
||
font-family: var(--font-display);
|
||
font-weight: 800;
|
||
font-size: 1rem;
|
||
color: var(--navy);
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.footer p { font-size: 0.875rem; color: var(--slate); }
|
||
.footer h4 {
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--slate);
|
||
}
|
||
.footer ul { list-style: none; }
|
||
.footer li { margin-bottom: 0.375rem; }
|
||
.footer li a { font-size: 0.875rem; color: var(--slate-dark); }
|
||
.footer li a:hover { color: var(--electric); }
|
||
.footer-copy {
|
||
text-align: center;
|
||
font-size: 0.75rem;
|
||
color: var(--slate);
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.footer-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ═══════════ NAVIGATION ═══════════ -->
|
||
|
||
<nav class="nav">
|
||
<div class="nav-inner">
|
||
<div class="nav-links nav-links--left">
|
||
<a href="#">Planner</a>
|
||
<a href="#">Get Quotes</a>
|
||
</div>
|
||
<a href="#" class="nav-logo">padelnomics</a>
|
||
<div class="nav-links nav-links--right">
|
||
<a href="#">Directory</a>
|
||
<a href="#">For Suppliers</a>
|
||
<a href="#">Help</a>
|
||
<a href="#" class="nav-badge">Admin</a>
|
||
<a href="#" class="nav-auth-btn">Sign In</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
<!-- ═══════════ HERO — dark ═══════════ -->
|
||
|
||
<section class="hero-dark">
|
||
<div class="container hero-inner">
|
||
<div class="hero-grid">
|
||
<div class="hero-content">
|
||
<div class="hero-badge">🎾 Padel court financial planner</div>
|
||
<h1 class="hero-title">
|
||
Plan Your Padel<br>
|
||
Business in Minutes,<br>
|
||
<span class="accent">Not Months</span>
|
||
</h1>
|
||
<p class="hero-desc">
|
||
Model your padel court investment with 60+ variables, sensitivity analysis,
|
||
and professional-grade projections. Then get matched with verified suppliers.
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a href="#" class="btn-hero">Plan Your Padel Business →</a>
|
||
<a href="#" class="btn-hero-outline">Browse Suppliers</a>
|
||
</div>
|
||
<div class="hero-bullets">
|
||
<span><span class="hero-check">✓</span> No signup required</span>
|
||
<span><span class="hero-check">✓</span> 60+ variables</span>
|
||
<span><span class="hero-check">✓</span> Unlimited scenarios</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="roi-calc">
|
||
<div class="roi-calc__title">Quick ROI Estimate</div>
|
||
<div class="roi-calc__sub">Drag the sliders to see your projection</div>
|
||
<div class="roi-calc__sliders">
|
||
<div class="roi-calc__row">
|
||
<label>Courts <span id="roiCourtsVal">6</span></label>
|
||
<input type="range" id="roiCourts" min="2" max="20" value="6" step="1">
|
||
</div>
|
||
<div class="roi-calc__row">
|
||
<label>Avg. Hourly Rate <span id="roiRateVal">€40</span></label>
|
||
<input type="range" id="roiRate" min="20" max="120" value="40" step="5">
|
||
</div>
|
||
<div class="roi-calc__row">
|
||
<label>Target Utilization <span id="roiUtilVal">35%</span></label>
|
||
<input type="range" id="roiUtil" min="20" max="80" value="35" step="5">
|
||
</div>
|
||
</div>
|
||
<div class="roi-metrics">
|
||
<div>
|
||
<div class="roi-metric__label">Investment</div>
|
||
<div class="roi-metric__val" id="roiCapex">€330K</div>
|
||
</div>
|
||
<div>
|
||
<div class="roi-metric__label">Monthly Cash Flow</div>
|
||
<div class="roi-metric__val" id="roiCf">€7K</div>
|
||
</div>
|
||
<div>
|
||
<div class="roi-metric__label">Payback Period</div>
|
||
<div class="roi-metric__val" id="roiPayback">3.9 yr</div>
|
||
</div>
|
||
<div>
|
||
<div class="roi-metric__label">Annual ROI</div>
|
||
<div class="roi-metric__val" id="roiReturn">26%</div>
|
||
</div>
|
||
</div>
|
||
<p class="roi-calc__note">Assumes indoor rent model, €8/m² rent, staff costs, 5% interest, 10-yr loan.</p>
|
||
<a href="#" class="roi-calc__cta">Open Full Planner →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<div class="container">
|
||
|
||
<!-- ═══════════ JOURNEY TRACK ═══════════ -->
|
||
|
||
<section class="journey-section">
|
||
<h2>Your Journey</h2>
|
||
<div class="journey-track">
|
||
<div class="journey-step journey-step--upcoming">
|
||
<div class="journey-step__num">01</div>
|
||
<h3 class="journey-step__title">Explore <span class="badge-soon">Soon</span></h3>
|
||
<p class="journey-step__desc">Market demand analysis, whitespace mapping, location scoring.</p>
|
||
</div>
|
||
<div class="journey-step journey-step--active">
|
||
<div class="journey-step__num">02</div>
|
||
<h3 class="journey-step__title">Plan</h3>
|
||
<p class="journey-step__desc">Model your investment with 60+ variables, charts, and sensitivity analysis.</p>
|
||
</div>
|
||
<div class="journey-step journey-step--upcoming">
|
||
<div class="journey-step__num">03</div>
|
||
<h3 class="journey-step__title">Finance <span class="badge-soon">Soon</span></h3>
|
||
<p class="journey-step__desc">Connect with banks and investors. Your planner becomes your business case.</p>
|
||
</div>
|
||
<div class="journey-step journey-step--active">
|
||
<div class="journey-step__num">04</div>
|
||
<h3 class="journey-step__title">Build</h3>
|
||
<p class="journey-step__desc">Browse 120+ court suppliers across 24 countries. Get matched to your specs.</p>
|
||
</div>
|
||
<div class="journey-step journey-step--upcoming">
|
||
<div class="journey-step__num">05</div>
|
||
<h3 class="journey-step__title">Grow <span class="badge-soon">Soon</span></h3>
|
||
<p class="journey-step__desc">Launch playbook, performance benchmarks, and expansion analytics.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ═══════════ FEATURES ═══════════ -->
|
||
|
||
<section class="features-section">
|
||
<h2>Built for Serious Padel Entrepreneurs</h2>
|
||
<div class="features-grid">
|
||
<div class="feature-card feature-card--electric">
|
||
<h3>🔧 60+ Variables</h3>
|
||
<p>Every assumption is adjustable. Court costs, rent, pricing, utilization, financing terms, exit scenarios. Nothing is hard-coded.</p>
|
||
</div>
|
||
<div class="feature-card feature-card--accent">
|
||
<h3>📋 6 Analysis Tabs</h3>
|
||
<p>Assumptions, Investment (CAPEX), Operating Model, Cash Flow, Returns & Exit, and Key Metrics. Each with interactive charts.</p>
|
||
</div>
|
||
<div class="feature-card feature-card--warning">
|
||
<h3>☀️ Indoor & Outdoor</h3>
|
||
<p>Model indoor halls (rent or build) and outdoor courts with seasonality. Compare scenarios side by side.</p>
|
||
</div>
|
||
<div class="feature-card feature-card--danger">
|
||
<h3>📉 Sensitivity Analysis</h3>
|
||
<p>See how your returns change with different utilization rates and pricing. Find your break-even point instantly.</p>
|
||
</div>
|
||
<div class="feature-card feature-card--electric">
|
||
<h3>🎯 Professional Metrics</h3>
|
||
<p>IRR, MOIC, DSCR, cash-on-cash yield, break-even utilization, RevPAH, debt yield. The metrics banks and investors want.</p>
|
||
</div>
|
||
<div class="feature-card feature-card--accent">
|
||
<h3>💾 Save & Compare</h3>
|
||
<p>Save unlimited scenarios. Test different locations, court counts, financing structures. Find the optimal plan.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ═══════════ SUPPLIER MATCHING ═══════════ -->
|
||
|
||
<section class="matching-section">
|
||
<h2>Find the Right Suppliers for Your Project</h2>
|
||
<p class="sub">120+ verified suppliers across 24 countries. Manufacturers, builders, turf, lighting, and more.</p>
|
||
<div class="match-grid">
|
||
<div class="match-step">
|
||
<div class="match-step__num">1</div>
|
||
<h3>Plan Your Venue</h3>
|
||
<p>Use the financial planner to model your courts, budget, and timeline.</p>
|
||
</div>
|
||
<div class="match-step">
|
||
<div class="match-step__num">2</div>
|
||
<h3>Get Quotes</h3>
|
||
<p>Request quotes and we match you with suppliers based on your project specs.</p>
|
||
</div>
|
||
<div class="match-step">
|
||
<div class="match-step__num">3</div>
|
||
<h3>Compare & Build</h3>
|
||
<p>Receive proposals from matched suppliers. No cold outreach needed.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ═══════════ FAQ ═══════════ -->
|
||
|
||
<section class="faq-section" id="faq">
|
||
<h2>Frequently Asked Questions</h2>
|
||
<div class="faq">
|
||
<details>
|
||
<summary>What does the planner calculate?</summary>
|
||
<p class="faq-answer">The planner produces a complete financial model: CAPEX breakdown, monthly operating costs, cash flow projections, debt service, IRR, MOIC, DSCR, payback period, break-even utilization, and sensitivity analysis.</p>
|
||
</details>
|
||
<details>
|
||
<summary>Do I need to sign up?</summary>
|
||
<p class="faq-answer">No. The planner works instantly with no signup. Create an account to save scenarios, compare configurations, and export PDF reports.</p>
|
||
</details>
|
||
<details>
|
||
<summary>How does supplier matching work?</summary>
|
||
<p class="faq-answer">When you request quotes through the planner, we share your project details with relevant suppliers from our directory. They contact you directly with proposals.</p>
|
||
</details>
|
||
<details>
|
||
<summary>How accurate are the financial projections?</summary>
|
||
<p class="faq-answer">The model uses real-world defaults based on European market data. Every assumption is adjustable so you can match your local conditions. The sensitivity analysis shows how results change across scenarios.</p>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ═══════════ SEO CONTENT ═══════════ -->
|
||
|
||
<section class="seo-section">
|
||
<h2>Padel Court Investment Planning</h2>
|
||
<p>
|
||
Padel is the fastest-growing sport in Europe, with demand for courts far outstripping supply in Germany, the UK, Scandinavia, and beyond. Opening a padel hall can be a lucrative investment, but the numbers need to work. A typical indoor padel venue with 6-8 courts requires between €300K and €2-3M, with payback periods of 3-5 years for well-located venues.
|
||
</p>
|
||
<p>
|
||
The key variables that determine success are location, construction costs, rent, and pricing strategy. Our financial planner lets you model all of these interactively, seeing the impact on your IRR, MOIC, cash flow, and debt service coverage ratio in real time.
|
||
</p>
|
||
</section>
|
||
|
||
|
||
<!-- ═══════════ FINAL CTA ═══════════ -->
|
||
|
||
<section class="cta-section">
|
||
<div class="cta-card">
|
||
<h2>Start Planning Today</h2>
|
||
<p>Model your investment, then get matched with verified court suppliers across 24 countries.</p>
|
||
<a href="#" class="cta-card__btn">Plan Your Padel Business →</a>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════ FOOTER ═══════════ -->
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div>
|
||
<div class="footer-brand">padelnomics</div>
|
||
<p>Plan, finance, and build your padel business.</p>
|
||
</div>
|
||
<div>
|
||
<h4>Product</h4>
|
||
<ul>
|
||
<li><a href="#">Planner</a></li>
|
||
<li><a href="#">Supplier Directory</a></li>
|
||
<li><a href="#">Markets</a></li>
|
||
<li><a href="#">For Suppliers</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>Legal</h4>
|
||
<ul>
|
||
<li><a href="#">Terms</a></li>
|
||
<li><a href="#">Privacy</a></li>
|
||
<li><a href="#">About</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<p class="footer-copy">© 2026 Padelnomics. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
<!-- ═══════════ ROI CALCULATOR JS ═══════════ -->
|
||
<script>
|
||
(function() {
|
||
var courts = document.getElementById('roiCourts');
|
||
var rate = document.getElementById('roiRate');
|
||
var util = document.getElementById('roiUtil');
|
||
|
||
function fmt(n) {
|
||
if (n >= 1e6) return '\u20ac' + (n / 1e6).toFixed(1) + 'M';
|
||
if (n >= 1e3) return '\u20ac' + Math.round(n / 1e3) + 'K';
|
||
return '\u20ac' + Math.round(n);
|
||
}
|
||
|
||
function update() {
|
||
var c = +courts.value, r = +rate.value, u = +util.value / 100;
|
||
|
||
document.getElementById('roiCourtsVal').textContent = c;
|
||
document.getElementById('roiRateVal').innerHTML = '€' + r;
|
||
document.getElementById('roiUtilVal').textContent = u * 100 + '%';
|
||
|
||
var costPerCourt = 35000;
|
||
var courtCapex = c * costPerCourt;
|
||
var fitout = 60000 + c * 5000;
|
||
var contingency = 0.10;
|
||
var capex = Math.round((courtCapex + fitout) * (1 + contingency));
|
||
|
||
var hoursDay = 16, daysMonth = 29;
|
||
var monthlyRev = c * hoursDay * daysMonth * u * r;
|
||
|
||
var sqm = c * 300;
|
||
var staff = 2500 * Math.ceil(c / 4) + 3500;
|
||
var monthlyOpex = (sqm * 8) + staff + (c * 600) + 300 + (c * 300) + 350;
|
||
|
||
var loan = capex * 0.85;
|
||
var mr = 0.05 / 12;
|
||
var n = 120;
|
||
var debtService = loan * mr * Math.pow(1 + mr, n) / (Math.pow(1 + mr, n) - 1);
|
||
|
||
var monthlyCf = monthlyRev - monthlyOpex - debtService;
|
||
var annualCf = monthlyCf * 12;
|
||
|
||
document.getElementById('roiCapex').textContent = fmt(capex);
|
||
|
||
var cfEl = document.getElementById('roiCf');
|
||
cfEl.textContent = fmt(Math.abs(monthlyCf)) + '/mo';
|
||
cfEl.className = 'roi-metric__val ' + (monthlyCf >= 0 ? 'roi-metric__val--green' : 'roi-metric__val--red');
|
||
|
||
var payback = annualCf > 0 ? capex / annualCf : 99;
|
||
document.getElementById('roiPayback').textContent = payback < 20 ? payback.toFixed(1) + ' yr' : '20+ yr';
|
||
|
||
var roi = capex > 0 ? (annualCf / capex) * 100 : 0;
|
||
var roiEl = document.getElementById('roiReturn');
|
||
roiEl.textContent = roi > 0 ? Math.round(roi) + '%' : 'N/A';
|
||
roiEl.className = 'roi-metric__val ' + (roi > 0 ? 'roi-metric__val--green' : 'roi-metric__val--red');
|
||
}
|
||
|
||
courts.addEventListener('input', update);
|
||
rate.addEventListener('input', update);
|
||
util.addEventListener('input', update);
|
||
update();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|