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>
338 lines
29 KiB
JavaScript
338 lines
29 KiB
JavaScript
import { useState, useEffect, useRef } from "react";
|
||
|
||
export default function App() {
|
||
const [openFaq, setOpenFaq] = useState(null);
|
||
const [vis, setVis] = useState(new Set());
|
||
const refs = useRef({});
|
||
const [courts, setCourts] = useState(6);
|
||
const [rate, setRate] = useState(50);
|
||
const [util, setUtil] = useState(40);
|
||
|
||
useEffect(() => {
|
||
const obs = new IntersectionObserver((entries) => {
|
||
entries.forEach((e) => { if (e.isIntersecting) setVis((p) => new Set([...p, e.target.dataset.s])); });
|
||
}, { threshold: 0.12 });
|
||
Object.values(refs.current).forEach((el) => el && obs.observe(el));
|
||
return () => obs.disconnect();
|
||
}, []);
|
||
|
||
const r = (id) => (el) => { if (el) { el.dataset.s = id; refs.current[id] = el; } };
|
||
const v = (id) => vis.has(id);
|
||
const fade = (id, d = 0) => ({ opacity: v(id) ? 1 : 0, transform: v(id) ? "translateY(0)" : "translateY(24px)", transition: `all 0.6s cubic-bezier(0.16,1,0.3,1) ${d}s` });
|
||
|
||
// Mini calculator
|
||
const revenue = courts * rate * (util / 100) * 14 * 30;
|
||
const costs = courts * 1800 + 2500;
|
||
const cashflow = revenue - costs;
|
||
const investment = courts * 30000 + 50000;
|
||
const payback = cashflow > 0 ? (investment / (cashflow * 12)).toFixed(1) : "—";
|
||
|
||
const $ = {
|
||
bg: "#FFFFFF", soft: "#F8FAFC", muted: "#F1F5F9", warm: "#FFFBEB",
|
||
border: "#E2E8F0", borderDark: "#CBD5E1",
|
||
text: "#0F172A", sub: "#334155", dim: "#64748B", faint: "#94A3B8",
|
||
blue: "#1D4ED8", blueLight: "#3B82F6", bluePale: "#DBEAFE", blueGhost: "#EFF6FF", blueDark: "#1E40AF",
|
||
green: "#16A34A", greenPale: "#DCFCE7", greenGhost: "#F0FDF4",
|
||
gold: "#D97706", goldPale: "#FEF3C7",
|
||
};
|
||
const font = "'Inter', -apple-system, BlinkMacSystemFont, sans-serif";
|
||
const mono = "'JetBrains Mono', 'SF Mono', monospace";
|
||
|
||
const JOURNEY = [
|
||
{ icon: "📊", title: "Plan", desc: "Model your investment with 60+ variables. CAPEX, operating costs, cash flow, returns, sensitivity analysis. Know your numbers before you commit.", tag: "Free" },
|
||
{ icon: "💰", title: "Finance", desc: "Your planner output becomes your business case. Connect with banks and investors who understand sports facility financing.", tag: "Coming soon" },
|
||
{ icon: "🏗️", title: "Build", desc: "Get quotes from verified court suppliers matched to your specs. Compare pricing, quality, and timelines. Direct contact, no middleman.", tag: "Live" },
|
||
{ icon: "🎾", title: "Operate", desc: "Analytics powered by real booking data. Benchmark against similar venues. Pricing optimization and demand forecasting.", tag: "Coming soon" },
|
||
];
|
||
|
||
const FEATURES = [
|
||
{ icon: "🔧", title: "60+ Variables", desc: "Every assumption adjustable — court costs, rent, pricing, utilization, financing terms, exit scenarios." },
|
||
{ icon: "📋", title: "6 Analysis Tabs", desc: "Assumptions, CAPEX, Operating Model, Cash Flow, Returns & Exit, Key Metrics. Each with interactive charts." },
|
||
{ icon: "☀️", title: "Indoor & Outdoor", desc: "Model indoor halls (rent or build) and outdoor courts with seasonality. Compare scenarios side by side." },
|
||
{ icon: "📉", title: "Sensitivity Analysis", desc: "See how returns change with different utilization and pricing. Find your break-even instantly." },
|
||
{ icon: "🎯", title: "Professional Metrics", desc: "IRR, MOIC, DSCR, cash-on-cash, break-even utilization, RevPAH. The metrics banks want to see." },
|
||
{ icon: "💾", title: "Save & Compare", desc: "Unlimited scenarios. Test locations, court counts, financing structures. Find your optimal plan." },
|
||
];
|
||
|
||
const TESTIMONIALS = [
|
||
{ quote: "Padelnomics saved me months of spreadsheet work. I walked into the bank meeting with a professional business case and got financing approved in 2 weeks.", name: "Stefan M.", role: "Founder, Padel House Berlin", avatar: "S" },
|
||
{ quote: "The supplier matching is brilliant. I submitted my specs and had 3 detailed proposals within a week. Ended up saving €40K versus the first quote I'd gotten on my own.", name: "Anna L.", role: "Padel Club Amsterdam", avatar: "A" },
|
||
{ quote: "I've opened two halls now, both planned on Padelnomics. The sensitivity analysis alone is worth it — it showed me the exact utilization I needed to break even.", name: "Marco P.", role: "CEO, Padel Nation", avatar: "M" },
|
||
];
|
||
|
||
const FAQS = [
|
||
{ q: "Is the planner really free?", a: "Yes. The full financial planner with 60+ variables, 6 analysis tabs, sensitivity analysis, and unlimited saved scenarios is completely free. No credit card required. We make money on the supplier side — suppliers pay to access project briefs from entrepreneurs like you." },
|
||
{ q: "How does supplier matching work?", a: "After you've built your financial plan, you can optionally submit a project brief with your specs (courts, type, budget, timeline, location). We match you with 2–5 pre-vetted suppliers who fit your requirements. They contact you directly with tailored proposals. It's free for you — suppliers pay for the introduction." },
|
||
{ q: "Do I have to share my contact details?", a: "Only if you choose to request supplier quotes. Your planner data is 100% private. If you submit a project brief, your contact details are shared only with the 2–5 matched suppliers — never published publicly, never sold to third parties." },
|
||
{ q: "How accurate are the projections?", a: "The planner uses industry-standard financial models with real market assumptions. However, every market is different — the projections are as good as your inputs. That's why we give you 60+ adjustable variables and sensitivity analysis, so you can stress-test your assumptions." },
|
||
{ q: "Which countries/markets do you cover?", a: "The planner works globally — just input your local costs and pricing. For supplier matching, we currently have the strongest network in Germany, Netherlands, France, Italy, UK, and Scandinavia, with rapid expansion across Europe and the Middle East." },
|
||
{ q: "Can I use it for my bank or investor presentation?", a: "Absolutely — that's one of the main use cases. The planner generates professional metrics (IRR, MOIC, DSCR, debt yield) that banks and investors expect to see. Many users export their scenario data for business plan documents." },
|
||
];
|
||
|
||
const LOGOS_SEEN = ["200+ padel halls planned", "15 countries", "€85M+ in planned investments"];
|
||
|
||
return (
|
||
<div style={{ minHeight: "100vh", background: $.bg, color: $.text, fontFamily: font, overflowX: "hidden" }}>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||
|
||
{/* NAV */}
|
||
<nav style={{ position: "sticky", top: 0, zIndex: 50, background: "rgba(255,255,255,0.92)", backdropFilter: "blur(12px)", borderBottom: `1px solid ${$.border}` }}>
|
||
<div style={{ maxWidth: "1100px", margin: "0 auto", padding: "14px 24px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||
<div style={{ width: "32px", height: "32px", borderRadius: "9px", background: $.blue, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "16px", fontWeight: 700, color: "#fff" }}>P</div>
|
||
<span style={{ fontSize: "18px", fontWeight: 700, letterSpacing: "-0.02em" }}>padelnomics</span>
|
||
</div>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "24px" }}>
|
||
<a href="#planner" style={{ fontSize: "14px", color: $.dim, textDecoration: "none", fontWeight: 500 }}>Planner</a>
|
||
<a href="#suppliers" style={{ fontSize: "14px", color: $.dim, textDecoration: "none", fontWeight: 500 }}>Suppliers</a>
|
||
<a href="#faq" style={{ fontSize: "14px", color: $.dim, textDecoration: "none", fontWeight: 500 }}>FAQ</a>
|
||
<button style={{ background: "transparent", color: $.sub, border: `1.5px solid ${$.border}`, borderRadius: "8px", padding: "8px 16px", fontSize: "14px", fontWeight: 500, cursor: "pointer", fontFamily: font }}>Sign In</button>
|
||
<button style={{ background: $.blue, color: "#fff", border: "none", borderRadius: "8px", padding: "9px 18px", fontSize: "14px", fontWeight: 600, cursor: "pointer", fontFamily: font }}>Get Started Free</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* HERO */}
|
||
<section ref={r("hero")} style={{ maxWidth: "1100px", margin: "0 auto", padding: "72px 24px 56px" }}>
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "48px", alignItems: "center" }}>
|
||
<div>
|
||
<div style={{ ...fade("hero"), display: "inline-flex", alignItems: "center", gap: "8px", background: $.greenGhost, border: `1px solid ${$.greenPale}`, borderRadius: "999px", padding: "5px 14px", marginBottom: "20px" }}>
|
||
<span style={{ fontSize: "12px" }}>🎾</span>
|
||
<span style={{ fontSize: "12px", fontWeight: 600, color: $.green }}>Free padel court financial planner</span>
|
||
</div>
|
||
<h1 style={{ ...fade("hero", 0.08), fontSize: "clamp(30px, 4.5vw, 48px)", fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 1.1, margin: "0 0 18px" }}>
|
||
Plan Your Padel<br />Business in Minutes,<br /><span style={{ color: $.blue }}>Not Months</span>
|
||
</h1>
|
||
<p style={{ ...fade("hero", 0.16), fontSize: "17px", color: $.dim, lineHeight: 1.65, margin: "0 0 28px", maxWidth: "460px" }}>
|
||
Model your padel court investment with 60+ variables, sensitivity analysis, and professional-grade projections. Then get matched with verified suppliers.
|
||
</p>
|
||
<div style={{ ...fade("hero", 0.24), display: "flex", gap: "12px", flexWrap: "wrap", marginBottom: "18px" }}>
|
||
<button style={{ background: $.blue, color: "#fff", border: "none", borderRadius: "10px", padding: "14px 26px", fontSize: "16px", fontWeight: 700, cursor: "pointer", fontFamily: font, boxShadow: "0 4px 14px rgba(29,78,216,0.25)" }}>Create Your Plan — Free →</button>
|
||
<button style={{ background: $.bg, color: $.sub, border: `1.5px solid ${$.border}`, borderRadius: "10px", padding: "14px 22px", fontSize: "16px", fontWeight: 600, cursor: "pointer", fontFamily: font }}>See Demo</button>
|
||
</div>
|
||
<div style={{ ...fade("hero", 0.3), display: "flex", gap: "20px", fontSize: "13px", color: $.faint }}>
|
||
{["No credit card", "60+ variables", "Unlimited scenarios"].map((t) => (
|
||
<span key={t} style={{ display: "flex", alignItems: "center", gap: "5px" }}><span style={{ color: $.green, fontWeight: 700 }}>✓</span>{t}</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mini calculator */}
|
||
<div style={{ ...fade("hero", 0.2) }}>
|
||
<div style={{ background: $.bg, border: `1.5px solid ${$.border}`, borderRadius: "20px", padding: "28px", boxShadow: "0 8px 40px rgba(0,0,0,0.06)" }}>
|
||
<div style={{ fontSize: "14px", fontWeight: 700, marginBottom: "4px" }}>Quick ROI Estimate</div>
|
||
<div style={{ fontSize: "12px", color: $.faint, marginBottom: "22px" }}>Drag the sliders to see your projection</div>
|
||
|
||
{[["Courts", courts, setCourts, 2, 16, ""], ["Peak Rate", rate, setRate, 30, 80, "€/hr"], ["Utilization", util, setUtil, 20, 70, "%"]].map(([label, val, setter, min, max, unit]) => (
|
||
<div key={label} style={{ marginBottom: "18px" }}>
|
||
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: "6px" }}>
|
||
<span style={{ fontSize: "13px", color: $.dim, fontWeight: 500 }}>{label}</span>
|
||
<span style={{ fontSize: "14px", fontWeight: 700, fontFamily: mono, color: $.blue }}>{val}{unit}</span>
|
||
</div>
|
||
<input type="range" min={min} max={max} value={val} onChange={(e) => setter(+e.target.value)} style={{ width: "100%", accentColor: $.blue, height: "6px" }} />
|
||
</div>
|
||
))}
|
||
|
||
<div style={{ borderTop: `1px solid ${$.border}`, paddingTop: "18px", marginTop: "6px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px" }}>
|
||
{[
|
||
["Total Investment", `€${(investment / 1000).toFixed(0)}K`, false],
|
||
["Monthly Cash Flow", `€${cashflow > 0 ? cashflow.toLocaleString("de") : 0}`, true],
|
||
["Payback Period", `${payback} yrs`, false],
|
||
["Cash-on-Cash", `${cashflow > 0 ? ((cashflow * 12 / (investment * 0.25)) * 100).toFixed(0) : 0}%`, true],
|
||
].map(([label, val, hl]) => (
|
||
<div key={label}>
|
||
<div style={{ fontSize: "11px", color: $.faint, textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "3px" }}>{label}</div>
|
||
<div style={{ fontSize: "18px", fontWeight: 700, fontFamily: mono, color: hl ? $.blue : $.text }}>{val}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div style={{ fontSize: "11px", color: $.faint, marginTop: "14px", lineHeight: 1.5 }}>Assumes €8/m² rent, 5% interest, 10-yr loan, 300 m²/court</div>
|
||
<button style={{ width: "100%", background: $.blue, color: "#fff", border: "none", borderRadius: "10px", padding: "12px", fontSize: "14px", fontWeight: 700, cursor: "pointer", fontFamily: font, marginTop: "16px", boxShadow: "0 2px 8px rgba(29,78,216,0.2)" }}>Open Full Planner →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* SOCIAL PROOF BAR */}
|
||
<section style={{ background: $.soft, borderTop: `1px solid ${$.border}`, borderBottom: `1px solid ${$.border}` }}>
|
||
<div style={{ maxWidth: "1100px", margin: "0 auto", padding: "28px 24px", display: "flex", justifyContent: "center", gap: "48px", flexWrap: "wrap" }}>
|
||
{LOGOS_SEEN.map((t, i) => (
|
||
<div key={i} style={{ fontSize: "14px", color: $.dim, fontWeight: 600, display: "flex", alignItems: "center", gap: "8px" }}>
|
||
<span style={{ color: $.blue, fontSize: "16px" }}>●</span>{t}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* JOURNEY: Plan → Finance → Build → Operate */}
|
||
<section ref={r("journey")} style={{ maxWidth: "1100px", margin: "0 auto", padding: "80px 24px" }}>
|
||
<div style={{ textAlign: "center", marginBottom: "48px" }}>
|
||
<div style={fade("journey")}><span style={{ fontSize: "12px", fontWeight: 700, color: $.blue, textTransform: "uppercase", letterSpacing: "0.08em" }}>From Idea to Operating Hall</span></div>
|
||
<h2 style={{ ...fade("journey", 0.08), fontSize: "clamp(24px, 4vw, 36px)", fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0 6px" }}>Everything you need, in order</h2>
|
||
<p style={{ ...fade("journey", 0.14), color: $.dim, fontSize: "15px", maxWidth: "520px", margin: "0 auto" }}>Padelnomics walks you through the entire journey — from first napkin math to your operating padel hall.</p>
|
||
</div>
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", gap: "18px" }}>
|
||
{JOURNEY.map((step, i) => (
|
||
<div key={i} style={{ ...fade("journey", 0.18 + i * 0.08), background: $.bg, border: `1px solid ${$.border}`, borderRadius: "18px", padding: "28px 22px", position: "relative", boxShadow: "0 1px 4px rgba(0,0,0,0.04)" }}>
|
||
<div style={{ position: "absolute", top: "16px", right: "16px", background: step.tag === "Live" ? $.greenPale : step.tag === "Free" ? $.bluePale : $.muted, color: step.tag === "Live" ? $.green : step.tag === "Free" ? $.blue : $.faint, fontSize: "10px", fontWeight: 700, padding: "3px 8px", borderRadius: "999px", textTransform: "uppercase", letterSpacing: "0.04em" }}>{step.tag}</div>
|
||
<div style={{ fontSize: "32px", marginBottom: "14px" }}>{step.icon}</div>
|
||
<h3 style={{ fontSize: "18px", fontWeight: 700, margin: "0 0 8px" }}>{step.title}</h3>
|
||
<p style={{ fontSize: "14px", color: $.dim, lineHeight: 1.6, margin: 0 }}>{step.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* PLANNER FEATURES */}
|
||
<section id="planner" ref={r("features")} style={{ background: $.soft, borderTop: `1px solid ${$.border}`, borderBottom: `1px solid ${$.border}` }}>
|
||
<div style={{ maxWidth: "1100px", margin: "0 auto", padding: "80px 24px" }}>
|
||
<div style={{ textAlign: "center", marginBottom: "48px" }}>
|
||
<div style={fade("features")}><span style={{ fontSize: "12px", fontWeight: 700, color: $.blue, textTransform: "uppercase", letterSpacing: "0.08em" }}>Financial Planner</span></div>
|
||
<h2 style={{ ...fade("features", 0.08), fontSize: "clamp(24px, 4vw, 36px)", fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0 6px" }}>Built for serious padel entrepreneurs</h2>
|
||
<p style={{ ...fade("features", 0.14), color: $.dim, fontSize: "15px" }}>Not a toy calculator. A professional-grade financial model.</p>
|
||
</div>
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "16px" }}>
|
||
{FEATURES.map((f, i) => (
|
||
<div key={i} style={{ ...fade("features", 0.18 + i * 0.06), background: $.bg, border: `1px solid ${$.border}`, borderRadius: "16px", padding: "24px 22px", display: "flex", gap: "14px", boxShadow: "0 1px 3px rgba(0,0,0,0.04)" }}>
|
||
<span style={{ fontSize: "24px", flexShrink: 0 }}>{f.icon}</span>
|
||
<div>
|
||
<div style={{ fontSize: "15px", fontWeight: 700, marginBottom: "4px" }}>{f.title}</div>
|
||
<div style={{ fontSize: "13px", color: $.dim, lineHeight: 1.5 }}>{f.desc}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div style={{ ...fade("features", 0.6), textAlign: "center", marginTop: "36px" }}>
|
||
<button style={{ background: $.blue, color: "#fff", border: "none", borderRadius: "10px", padding: "14px 28px", fontSize: "15px", fontWeight: 700, cursor: "pointer", fontFamily: font, boxShadow: "0 4px 14px rgba(29,78,216,0.25)" }}>Create Your Plan — Free →</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* SUPPLIER MATCHING */}
|
||
<section id="suppliers" ref={r("suppliers")} style={{ maxWidth: "1100px", margin: "0 auto", padding: "80px 24px" }}>
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "48px", alignItems: "center" }}>
|
||
<div>
|
||
<div style={fade("suppliers")}><span style={{ fontSize: "12px", fontWeight: 700, color: $.blue, textTransform: "uppercase", letterSpacing: "0.08em" }}>Supplier Matching</span></div>
|
||
<h2 style={{ ...fade("suppliers", 0.08), fontSize: "clamp(24px, 4vw, 34px)", fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0 12px" }}>From plan to quotes<br />in 48 hours</h2>
|
||
<p style={{ ...fade("suppliers", 0.14), fontSize: "15px", color: $.dim, lineHeight: 1.65, margin: "0 0 24px" }}>When your numbers work, take the next step. Submit your project specs and we'll match you with 2–5 verified court suppliers. They reach out directly with proposals tailored to your project.</p>
|
||
<div style={{ ...fade("suppliers", 0.2), display: "flex", flexDirection: "column", gap: "14px", marginBottom: "28px" }}>
|
||
{[
|
||
["Verified suppliers only", "Every supplier is vetted for quality, reliability, and track record."],
|
||
["Direct contact", "You get real proposals from real people. No chatbots, no middlemen."],
|
||
["100% free for you", "Suppliers pay for the introduction. You pay nothing — ever."],
|
||
["Your data stays private", "Contact details shared only with your matched suppliers."],
|
||
].map(([title, desc]) => (
|
||
<div key={title} style={{ display: "flex", gap: "12px" }}>
|
||
<div style={{ width: "22px", height: "22px", borderRadius: "6px", background: $.greenPale, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: "1px" }}>
|
||
<span style={{ fontSize: "12px", color: $.green, fontWeight: 700 }}>✓</span>
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: "14px", fontWeight: 600, marginBottom: "1px" }}>{title}</div>
|
||
<div style={{ fontSize: "13px", color: $.dim, lineHeight: 1.4 }}>{desc}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<button style={{ ...fade("suppliers", 0.28), background: $.blue, color: "#fff", border: "none", borderRadius: "10px", padding: "13px 24px", fontSize: "15px", fontWeight: 700, cursor: "pointer", fontFamily: font, boxShadow: "0 2px 10px rgba(29,78,216,0.2)" }}>Get Supplier Quotes →</button>
|
||
</div>
|
||
|
||
{/* Mock supplier cards */}
|
||
<div style={{ ...fade("suppliers", 0.2), display: "flex", flexDirection: "column", gap: "12px" }}>
|
||
{[
|
||
{ name: "PadelCourt Europe", loc: "Cologne, Germany", spec: "Full turnkey solutions", rating: 4.9, projects: "150+ projects", color: $.blue, avatar: "P" },
|
||
{ name: "Mondo Padel", loc: "Milan, Italy", spec: "Court surfaces & glass walls", rating: 4.8, projects: "200+ projects", color: $.blueLight, avatar: "M" },
|
||
{ name: "CourtTech Solutions", loc: "Amsterdam, NL", spec: "Steel structures & lighting", rating: 4.7, projects: "85+ projects", color: $.gold, avatar: "C" },
|
||
].map((s, i) => (
|
||
<div key={i} style={{ background: $.bg, border: `1px solid ${$.border}`, borderRadius: "14px", padding: "18px", display: "flex", gap: "14px", boxShadow: "0 1px 4px rgba(0,0,0,0.04)", transition: "box-shadow 0.2s", position: "relative" }}>
|
||
<div style={{ width: "42px", height: "42px", borderRadius: "12px", background: s.color + "18", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "17px", fontWeight: 700, color: s.color, flexShrink: 0 }}>{s.avatar}</div>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: "6px" }}>
|
||
<div>
|
||
<div style={{ fontSize: "15px", fontWeight: 600, marginBottom: "1px" }}>{s.name}</div>
|
||
<div style={{ fontSize: "12px", color: $.dim }}>{s.loc} · {s.spec}</div>
|
||
</div>
|
||
<div style={{ background: $.greenPale, borderRadius: "999px", padding: "3px 10px", fontSize: "11px", fontWeight: 600, color: $.green }}>✓ Verified</div>
|
||
</div>
|
||
<div style={{ display: "flex", gap: "14px", fontSize: "12px", color: $.faint, marginTop: "8px" }}>
|
||
<span>⭐ {s.rating}</span><span>{s.projects}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
<div style={{ textAlign: "center", fontSize: "12px", color: $.faint, marginTop: "4px" }}>35+ verified suppliers across Europe</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* TESTIMONIALS */}
|
||
<section ref={r("test")} style={{ background: $.soft, borderTop: `1px solid ${$.border}`, borderBottom: `1px solid ${$.border}` }}>
|
||
<div style={{ maxWidth: "1100px", margin: "0 auto", padding: "80px 24px" }}>
|
||
<div style={{ textAlign: "center", marginBottom: "40px" }}>
|
||
<div style={fade("test")}><span style={{ fontSize: "12px", fontWeight: 700, color: $.blue, textTransform: "uppercase", letterSpacing: "0.08em" }}>Success Stories</span></div>
|
||
<h2 style={{ ...fade("test", 0.08), fontSize: "clamp(24px, 4vw, 36px)", fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0" }}>From plans to padel halls</h2>
|
||
</div>
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "20px" }}>
|
||
{TESTIMONIALS.map((t, i) => (
|
||
<div key={i} style={{ ...fade("test", 0.12 + i * 0.08), background: $.bg, border: `1px solid ${$.border}`, borderRadius: "16px", padding: "26px" }}>
|
||
<div style={{ fontSize: "22px", color: $.bluePale, marginBottom: "12px" }}>★★★★★</div>
|
||
<p style={{ fontSize: "14px", color: $.sub, lineHeight: 1.65, margin: "0 0 18px", fontStyle: "italic" }}>"{t.quote}"</p>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||
<div style={{ width: "36px", height: "36px", borderRadius: "50%", background: $.bluePale, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "15px", fontWeight: 700, color: $.blue }}>{t.avatar}</div>
|
||
<div><div style={{ fontSize: "14px", fontWeight: 600 }}>{t.name}</div><div style={{ fontSize: "12px", color: $.dim }}>{t.role}</div></div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ */}
|
||
<section id="faq" ref={r("faq")} style={{ maxWidth: "700px", margin: "0 auto", padding: "80px 24px" }}>
|
||
<div style={{ textAlign: "center", marginBottom: "40px" }}>
|
||
<div style={fade("faq")}><span style={{ fontSize: "12px", fontWeight: 700, color: $.blue, textTransform: "uppercase", letterSpacing: "0.08em" }}>FAQ</span></div>
|
||
<h2 style={{ ...fade("faq", 0.08), fontSize: "clamp(24px, 4vw, 32px)", fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0" }}>Common questions</h2>
|
||
</div>
|
||
<div style={{ ...fade("faq", 0.14), display: "flex", flexDirection: "column", gap: "8px" }}>
|
||
{FAQS.map((f, i) => (
|
||
<div key={i} style={{ background: $.bg, border: `1px solid ${$.border}`, borderRadius: "12px", overflow: "hidden" }}>
|
||
<button onClick={() => setOpenFaq(openFaq === i ? null : i)} style={{ width: "100%", background: "transparent", border: "none", padding: "18px 22px", display: "flex", justifyContent: "space-between", alignItems: "center", cursor: "pointer", fontFamily: font }}>
|
||
<span style={{ fontSize: "15px", fontWeight: 600, color: $.text, textAlign: "left" }}>{f.q}</span>
|
||
<span style={{ fontSize: "18px", color: $.faint, transform: openFaq === i ? "rotate(45deg)" : "none", transition: "transform 0.2s", flexShrink: 0, marginLeft: "12px" }}>+</span>
|
||
</button>
|
||
{openFaq === i && <div style={{ padding: "0 22px 18px", fontSize: "14px", color: $.dim, lineHeight: 1.6 }}>{f.a}</div>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* FINAL CTA */}
|
||
<section ref={r("cta")} style={{ background: $.blueGhost, borderTop: `1px solid ${$.bluePale}` }}>
|
||
<div style={{ maxWidth: "1100px", margin: "0 auto", padding: "72px 24px", textAlign: "center" }}>
|
||
<h2 style={{ ...fade("cta"), fontSize: "clamp(26px, 4.5vw, 40px)", fontWeight: 800, letterSpacing: "-0.03em", margin: "0 0 12px" }}>Start planning your padel business today</h2>
|
||
<p style={{ ...fade("cta", 0.08), color: $.dim, fontSize: "17px", maxWidth: "500px", margin: "0 auto 28px", lineHeight: 1.6 }}>Join 200+ entrepreneurs who've planned their padel hall on Padelnomics. Free, no credit card, unlimited scenarios.</p>
|
||
<div style={{ ...fade("cta", 0.16), display: "flex", gap: "14px", justifyContent: "center", flexWrap: "wrap" }}>
|
||
<button style={{ background: $.blue, color: "#fff", border: "none", borderRadius: "12px", padding: "16px 36px", fontSize: "17px", fontWeight: 700, cursor: "pointer", fontFamily: font, boxShadow: "0 4px 16px rgba(29,78,216,0.25)" }}>Create Your Plan — Free →</button>
|
||
<button style={{ background: $.bg, color: $.sub, border: `1.5px solid ${$.border}`, borderRadius: "12px", padding: "16px 28px", fontSize: "17px", fontWeight: 600, cursor: "pointer", fontFamily: font }}>I'm a Supplier →</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FOOTER */}
|
||
<footer style={{ borderTop: `1px solid ${$.border}`, background: $.soft }}>
|
||
<div style={{ maxWidth: "1100px", margin: "0 auto", padding: "36px 24px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "16px" }}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||
<div style={{ width: "28px", height: "28px", borderRadius: "8px", background: $.blue, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "14px", fontWeight: 700, color: "#fff" }}>P</div>
|
||
<span style={{ fontSize: "16px", fontWeight: 700 }}>padelnomics</span>
|
||
<span style={{ fontSize: "13px", color: $.faint, marginLeft: "4px" }}>Plan, finance, and build your padel business.</span>
|
||
</div>
|
||
<div style={{ display: "flex", gap: "24px", fontSize: "13px", color: $.dim }}>
|
||
<span>Planner</span><span>Suppliers</span><span>About</span><span>Terms</span><span>Privacy</span>
|
||
</div>
|
||
<div style={{ fontSize: "12px", color: $.faint }}>© 2026 Padelnomics. All rights reserved.</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|