chore: commit pending changes — logo, base template, scratch designs, changelog
- 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>
This commit is contained in:
Deeman
328
scratch/padelnomics-landing-supplyside.jsx
Normal file
328
scratch/padelnomics-landing-supplyside.jsx
Normal file
@@ -0,0 +1,328 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
export default function App() {
|
||||
const [openFaq, setOpenFaq] = useState(null);
|
||||
const [visibleSections, setVisibleSections] = useState(new Set());
|
||||
const sectionRefs = useRef({});
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setVisibleSections((prev) => new Set([...prev, entry.target.dataset.section]));
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.15 }
|
||||
);
|
||||
Object.values(sectionRefs.current).forEach((el) => el && observer.observe(el));
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const ref = (id) => (el) => {
|
||||
if (el) { el.dataset.section = id; sectionRefs.current[id] = el; }
|
||||
};
|
||||
const visible = (id) => visibleSections.has(id);
|
||||
const fadeUp = (id, delay = 0) => ({
|
||||
opacity: visible(id) ? 1 : 0,
|
||||
transform: visible(id) ? "translateY(0)" : "translateY(24px)",
|
||||
transition: `all 0.6s cubic-bezier(0.16,1,0.3,1) ${delay}s`,
|
||||
});
|
||||
|
||||
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",
|
||||
gold: "#D97706", goldPale: "#FEF3C7",
|
||||
red: "#DC2626", redPale: "#FEE2E2",
|
||||
};
|
||||
const font = "'Inter', -apple-system, BlinkMacSystemFont, sans-serif";
|
||||
const mono = "'JetBrains Mono', 'SF Mono', monospace";
|
||||
|
||||
const STATS = [
|
||||
{ value: "1,000+", label: "Calculator requests / month", icon: "📊" },
|
||||
{ value: "€285K", label: "Average project value", icon: "💰" },
|
||||
{ value: "48h", label: "Average response time", icon: "⚡" },
|
||||
{ value: "35+", label: "Verified suppliers", icon: "✓" },
|
||||
];
|
||||
|
||||
const STEPS = [
|
||||
{ num: "01", title: "We capture the lead", desc: "Padel entrepreneurs use our free ROI calculator and planner. When they're ready to build, they submit a project brief with specs, budget, timeline, and location.", icon: "📋" },
|
||||
{ num: "02", title: "You browse & choose", desc: "Anonymized project briefs appear in your lead feed. See project type, court count, budget range, and timeline — before spending a single credit.", icon: "👁" },
|
||||
{ num: "03", title: "Unlock & connect", desc: "Spend credits to unlock full contact details: name, email, phone. Reach out directly with a tailored proposal. No middleman, no platform fee on the deal.", icon: "🔓" },
|
||||
];
|
||||
|
||||
const LEADS = [
|
||||
{ type: "Indoor", courts: 8, region: "Munich, Bavaria", budget: "€400K – €600K", timeline: "3–6 months", services: ["Turnkey", "Glass walls", "LED lighting"], heat: "hot", bidders: 1 },
|
||||
{ type: "Outdoor", courts: 4, region: "Amsterdam, Netherlands", budget: "€150K – €250K", timeline: "ASAP", services: ["Court surfaces", "Steel canopy"], heat: "hot", bidders: 0 },
|
||||
{ type: "Indoor + Outdoor", courts: 12, region: "Lyon, France", budget: "€800K – €1.2M", timeline: "6–12 months", services: ["Architecture", "Turnkey", "Financing"], heat: "warm", bidders: 2 },
|
||||
];
|
||||
|
||||
const PLANS = [
|
||||
{ name: "Starter", price: "Free", period: "", credits: "10 credits", sub: "one-time", features: ["Basic supplier profile", "Browse anonymized leads", "Unlock up to 10 leads", "Email notifications"], cta: "Get Started Free", outline: true },
|
||||
{ name: "Growth", price: "€149", period: "/mo", credits: "30 credits/mo", sub: "included", features: ["Everything in Starter", "Directory listing + logo", "Priority search placement", "Monthly market report", "30 lead unlocks/month"], cta: "Start Growing", popular: true },
|
||||
{ name: "Pro", price: "€399", period: "/mo", credits: "100 credits/mo", sub: "included", features: ["Everything in Growth", "Verified supplier badge", "Newsletter feature", "Custom brand color", "Auto-unlock hot leads", "Quarterly strategy call"], cta: "Go Pro" },
|
||||
];
|
||||
|
||||
const TESTIMONIALS = [
|
||||
{ quote: "We've closed 3 projects worth over €1.2M total from Padelnomics leads in the first 6 months. The ROI is insane compared to trade shows.", name: "Thomas K.", role: "CEO, PadelBau GmbH", avatar: "T" },
|
||||
{ quote: "The lead quality is exceptional — these are real entrepreneurs with budgets and timelines, not tire-kickers. Worth every credit.", name: "Maria S.", role: "Sales Director, CourtTech", avatar: "M" },
|
||||
{ quote: "Finally a lead source where we can see the project specs before committing. The credit system is fair and transparent.", name: "Luca R.", role: "Founder, Padel Italia", avatar: "L" },
|
||||
];
|
||||
|
||||
const FAQS = [
|
||||
{ q: "How do credits work?", a: "Each credit unlocks one lead's full contact details (name, email, phone). Credit cost varies by project size: 5–8 for small residential, 15–25 for mid-size clubs, 30–40 for large complexes. You browse anonymized briefs first, then decide which leads to unlock." },
|
||||
{ q: "Where do the leads come from?", a: "Padel entrepreneurs use our free ROI calculator and financial planner at padelnomics.io. When they're ready to move from planning to building, they submit a project brief requesting supplier quotes. These are high-intent leads actively planning a facility." },
|
||||
{ q: "Do I get the actual contact details?", a: "Yes. When you unlock a lead, you get their full name, email, and phone number. You contact them directly — we don't sit in the middle of the conversation. The deal is between you and the client." },
|
||||
{ q: "What if a lead doesn't respond?", a: "We guarantee lead quality. If contact information is invalid or the lead was submitted in error, we refund the credits to your account within 48 hours. We also limit each lead to a maximum of 5 supplier unlocks to avoid overwhelming the client." },
|
||||
{ q: "Can I cancel anytime?", a: "Yes. All paid plans are month-to-month with no lock-in. Cancel anytime from your dashboard. Unused credits from your plan expire at the end of each billing cycle, but purchased credit packs never expire." },
|
||||
{ q: "Which countries do you cover?", a: "We currently have the strongest lead flow in Germany, Netherlands, France, Italy, and the UK. We're expanding rapidly across Europe, Scandinavia, and the Middle East. You'll only see leads in regions you've selected in your profile." },
|
||||
];
|
||||
|
||||
const BOOSTS = [
|
||||
{ name: "Directory Listing", price: "€49/mo", boost: "+120%", desc: "discoverability" },
|
||||
{ name: "Highlighted", price: "€39/mo", boost: "+65%", desc: "more views" },
|
||||
{ name: "Verified Badge", price: "€49/mo", boost: "+55%", desc: "more inquiries" },
|
||||
{ name: "Newsletter", price: "€99/mo", boost: "+120", desc: "impressions/wk" },
|
||||
{ name: "Sticky Top", price: "€199", boost: "6×", desc: "more views" },
|
||||
{ name: "Brand Color", price: "€59/mo", boost: "+80%", desc: "brand recall" },
|
||||
];
|
||||
|
||||
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>
|
||||
<span style={{ fontSize: "12px", color: $.faint, marginLeft: "4px", fontWeight: 500 }}>for Suppliers</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "24px" }}>
|
||||
<a href="#how" style={{ fontSize: "14px", color: $.dim, textDecoration: "none", fontWeight: 500 }}>How it works</a>
|
||||
<a href="#pricing" style={{ fontSize: "14px", color: $.dim, textDecoration: "none", fontWeight: 500 }}>Pricing</a>
|
||||
<a href="#faq" style={{ fontSize: "14px", color: $.dim, textDecoration: "none", fontWeight: 500 }}>FAQ</a>
|
||||
<button style={{ background: $.blue, color: "#fff", border: "none", borderRadius: "8px", padding: "9px 18px", fontSize: "14px", fontWeight: 600, cursor: "pointer", fontFamily: font }}>Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* ─── HERO ─── */}
|
||||
<section ref={ref("hero")} style={{ maxWidth: "1100px", margin: "0 auto", padding: "80px 24px 60px", textAlign: "center" }}>
|
||||
<div style={fadeUp("hero")}>
|
||||
<div style={{ display: "inline-flex", alignItems: "center", gap: "8px", background: $.blueGhost, border: `1px solid ${$.bluePale}`, borderRadius: "999px", padding: "6px 16px", marginBottom: "24px" }}>
|
||||
<span style={{ fontSize: "13px" }}>🎾</span>
|
||||
<span style={{ fontSize: "13px", fontWeight: 600, color: $.blue }}>The #1 lead source for padel court suppliers</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1 style={{ ...fadeUp("hero", 0.1), fontSize: "clamp(32px, 5.5vw, 56px)", fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 1.08, margin: "0 0 20px", maxWidth: "750px", marginLeft: "auto", marginRight: "auto" }}>
|
||||
Stop chasing leads.<br />
|
||||
<span style={{ color: $.blue }}>Let them come to you.</span>
|
||||
</h1>
|
||||
<p style={{ ...fadeUp("hero", 0.2), fontSize: "18px", color: $.dim, lineHeight: 1.6, maxWidth: "560px", margin: "0 auto 32px" }}>
|
||||
Padel entrepreneurs plan their facility on Padelnomics. When they're ready to build, you get first access to their project brief — with real budgets, timelines, and contact details.
|
||||
</p>
|
||||
<div style={{ ...fadeUp("hero", 0.3), display: "flex", gap: "14px", justifyContent: "center", flexWrap: "wrap", marginBottom: "20px" }}>
|
||||
<button style={{ background: $.blue, color: "#fff", border: "none", borderRadius: "10px", padding: "14px 28px", fontSize: "16px", fontWeight: 700, cursor: "pointer", fontFamily: font, boxShadow: "0 4px 14px rgba(29,78,216,0.25)" }}>Start Free — 10 Credits Included →</button>
|
||||
<button style={{ background: $.bg, color: $.sub, border: `1.5px solid ${$.border}`, borderRadius: "10px", padding: "14px 24px", fontSize: "16px", fontWeight: 600, cursor: "pointer", fontFamily: font }}>See Example Leads</button>
|
||||
</div>
|
||||
<p style={{ ...fadeUp("hero", 0.35), fontSize: "13px", color: $.faint }}>No credit card required · Cancel anytime</p>
|
||||
</section>
|
||||
|
||||
{/* ─── STATS BAR ─── */}
|
||||
<section ref={ref("stats")} style={{ background: $.soft, borderTop: `1px solid ${$.border}`, borderBottom: `1px solid ${$.border}` }}>
|
||||
<div style={{ maxWidth: "1100px", margin: "0 auto", padding: "36px 24px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "24px" }}>
|
||||
{STATS.map((s, i) => (
|
||||
<div key={i} style={{ ...fadeUp("stats", i * 0.08), textAlign: "center" }}>
|
||||
<div style={{ fontSize: "28px", fontWeight: 700, fontFamily: mono, color: $.text, letterSpacing: "-0.02em" }}>{s.value}</div>
|
||||
<div style={{ fontSize: "13px", color: $.dim, marginTop: "4px" }}>{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── HOW IT WORKS ─── */}
|
||||
<section id="how" ref={ref("how")} style={{ maxWidth: "1100px", margin: "0 auto", padding: "80px 24px" }}>
|
||||
<div style={{ textAlign: "center", marginBottom: "48px" }}>
|
||||
<div style={fadeUp("how")}><span style={{ fontSize: "12px", fontWeight: 700, color: $.blue, textTransform: "uppercase", letterSpacing: "0.08em" }}>How it works</span></div>
|
||||
<h2 style={{ ...fadeUp("how", 0.1), fontSize: "clamp(24px, 4vw, 36px)", fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0 0" }}>Three steps to your next project</h2>
|
||||
</div>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "24px" }}>
|
||||
{STEPS.map((step, i) => (
|
||||
<div key={i} style={{ ...fadeUp("how", 0.15 + i * 0.1), background: $.bg, border: `1px solid ${$.border}`, borderRadius: "18px", padding: "32px 26px", position: "relative", boxShadow: "0 1px 4px rgba(0,0,0,0.04)" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "16px" }}>
|
||||
<div style={{ fontSize: "28px" }}>{step.icon}</div>
|
||||
<span style={{ fontSize: "32px", fontWeight: 800, fontFamily: mono, color: $.bluePale }}>{step.num}</span>
|
||||
</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>
|
||||
|
||||
{/* ─── LEAD FEED PREVIEW ─── */}
|
||||
<section ref={ref("leads")} 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={fadeUp("leads")}><span style={{ fontSize: "12px", fontWeight: 700, color: $.blue, textTransform: "uppercase", letterSpacing: "0.08em" }}>Live Lead Feed</span></div>
|
||||
<h2 style={{ ...fadeUp("leads", 0.1), fontSize: "clamp(24px, 4vw, 36px)", fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0 6px" }}>Real projects, real budgets</h2>
|
||||
<p style={{ ...fadeUp("leads", 0.15), color: $.dim, fontSize: "15px" }}>Here's what your lead feed looks like. Browse anonymized briefs, then unlock the ones that fit.</p>
|
||||
</div>
|
||||
<div style={{ maxWidth: "680px", margin: "0 auto", display: "flex", flexDirection: "column", gap: "14px" }}>
|
||||
{LEADS.map((lead, i) => (
|
||||
<div key={i} style={{ ...fadeUp("leads", 0.2 + i * 0.1), background: $.bg, border: `1px solid ${$.border}`, borderRadius: "16px", padding: "22px", boxShadow: "0 1px 4px rgba(0,0,0,0.04)", borderLeft: `4px solid ${lead.heat === "hot" ? $.red : $.gold}` }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "12px", flexWrap: "wrap", gap: "8px" }}>
|
||||
<div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }}>
|
||||
<span style={{ background: lead.heat === "hot" ? $.redPale : $.goldPale, color: lead.heat === "hot" ? $.red : $.gold, fontSize: "11px", fontWeight: 700, padding: "2px 8px", borderRadius: "999px" }}>{lead.heat === "hot" ? "🔥 Hot" : "◐ Warm"}</span>
|
||||
<span style={{ fontSize: "15px", fontWeight: 600 }}>{lead.type} · {lead.courts} courts</span>
|
||||
</div>
|
||||
<div style={{ fontSize: "13px", color: $.dim }}>{lead.region}</div>
|
||||
</div>
|
||||
<div style={{ textAlign: "right" }}>
|
||||
<div style={{ fontSize: "14px", fontWeight: 600, fontFamily: mono, color: $.text }}>{lead.budget}</div>
|
||||
<div style={{ fontSize: "12px", color: $.faint }}>{lead.timeline}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "14px" }}>
|
||||
{lead.services.map(s => <span key={s} style={{ background: $.muted, borderRadius: "6px", padding: "3px 10px", fontSize: "12px", color: $.sub, fontWeight: 500 }}>{s}</span>)}
|
||||
</div>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<span style={{ fontSize: "12px", color: lead.bidders === 0 ? $.green : $.faint }}>{lead.bidders === 0 ? "✨ No suppliers yet — be first!" : `${lead.bidders} supplier${lead.bidders > 1 ? "s" : ""} unlocked`}</span>
|
||||
<button style={{ background: $.blue, color: "#fff", border: "none", borderRadius: "8px", padding: "8px 16px", fontSize: "13px", fontWeight: 600, cursor: "pointer", fontFamily: font, display: "flex", alignItems: "center", gap: "6px" }}>
|
||||
🔓 Unlock · {lead.courts > 8 ? "35" : lead.courts > 5 ? "20" : "10"} credits
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ ...fadeUp("leads", 0.6), textAlign: "center", marginTop: "28px" }}>
|
||||
<button style={{ background: $.bg, color: $.blue, border: `1.5px solid ${$.blue}`, borderRadius: "10px", padding: "12px 24px", fontSize: "14px", fontWeight: 600, cursor: "pointer", fontFamily: font }}>Start Free — See All Leads →</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── BOOSTS STRIP ─── */}
|
||||
<section ref={ref("boosts")} style={{ maxWidth: "1100px", margin: "0 auto", padding: "60px 24px" }}>
|
||||
<div style={{ textAlign: "center", marginBottom: "32px" }}>
|
||||
<div style={fadeUp("boosts")}><span style={{ fontSize: "12px", fontWeight: 700, color: $.blue, textTransform: "uppercase", letterSpacing: "0.08em" }}>Visibility Boosts</span></div>
|
||||
<h2 style={{ ...fadeUp("boosts", 0.1), fontSize: "clamp(20px, 3vw, 28px)", fontWeight: 700, letterSpacing: "-0.02em", margin: "10px 0 6px" }}>Stack add-ons to stand out</h2>
|
||||
<p style={{ ...fadeUp("boosts", 0.15), color: $.dim, fontSize: "14px" }}>Every plan supports optional boosts. Mix and match to maximize your reach.</p>
|
||||
</div>
|
||||
<div style={{ ...fadeUp("boosts", 0.2), display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: "12px" }}>
|
||||
{BOOSTS.map((b, i) => (
|
||||
<div key={i} style={{ background: $.soft, border: `1px solid ${$.border}`, borderRadius: "12px", padding: "16px", textAlign: "center" }}>
|
||||
<div style={{ fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>{b.name}</div>
|
||||
<div style={{ fontSize: "20px", fontWeight: 700, color: $.blue, fontFamily: mono }}>{b.boost}</div>
|
||||
<div style={{ fontSize: "11px", color: $.dim, marginBottom: "8px" }}>{b.desc}</div>
|
||||
<div style={{ fontSize: "12px", color: $.faint, fontFamily: mono }}>{b.price}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── PRICING ─── */}
|
||||
<section id="pricing" ref={ref("pricing")} 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: "44px" }}>
|
||||
<div style={fadeUp("pricing")}><span style={{ fontSize: "12px", fontWeight: 700, color: $.blue, textTransform: "uppercase", letterSpacing: "0.08em" }}>Pricing</span></div>
|
||||
<h2 style={{ ...fadeUp("pricing", 0.1), fontSize: "clamp(24px, 4vw, 36px)", fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0 6px" }}>Simple, transparent pricing</h2>
|
||||
<p style={{ ...fadeUp("pricing", 0.15), color: $.dim, fontSize: "15px" }}>Start free. Upgrade when the leads start flowing.</p>
|
||||
</div>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(270px, 1fr))", gap: "20px", maxWidth: "900px", margin: "0 auto" }}>
|
||||
{PLANS.map((p, i) => (
|
||||
<div key={i} style={{ ...fadeUp("pricing", 0.2 + i * 0.08), position: "relative", background: $.bg, border: `2px solid ${p.popular ? $.blue : $.border}`, borderRadius: "18px", padding: "30px 24px", boxShadow: p.popular ? "0 8px 30px rgba(29,78,216,0.12)" : "0 1px 4px rgba(0,0,0,0.04)" }}>
|
||||
{p.popular && <div style={{ position: "absolute", top: "-1px", left: "50%", transform: "translateX(-50%)", background: $.blue, color: "#fff", fontSize: "11px", fontWeight: 700, padding: "4px 16px", borderRadius: "0 0 10px 10px", textTransform: "uppercase", letterSpacing: "0.04em" }}>Most Popular</div>}
|
||||
<div style={{ fontSize: "20px", fontWeight: 700, marginBottom: "4px" }}>{p.name}</div>
|
||||
<div style={{ display: "flex", alignItems: "baseline", gap: "3px", marginBottom: "4px" }}>
|
||||
<span style={{ fontSize: "36px", fontWeight: 800, letterSpacing: "-0.03em" }}>{p.price}</span>
|
||||
{p.period && <span style={{ fontSize: "15px", color: $.dim }}>{p.period}</span>}
|
||||
</div>
|
||||
<div style={{ display: "inline-flex", alignItems: "center", gap: "5px", background: $.bluePale, borderRadius: "999px", padding: "4px 12px", marginBottom: "20px" }}>
|
||||
<span style={{ fontSize: "13px" }}>⚡</span>
|
||||
<span style={{ fontSize: "13px", fontWeight: 600, color: $.blue, fontFamily: mono }}>{p.credits}</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "9px", marginBottom: "24px" }}>
|
||||
{p.features.map((f, j) => <div key={j} style={{ display: "flex", gap: "7px", fontSize: "14px" }}><span style={{ color: $.green, fontWeight: 700 }}>✓</span><span style={{ color: $.dim, lineHeight: 1.4 }}>{f}</span></div>)}
|
||||
</div>
|
||||
<button style={{ width: "100%", background: p.popular ? $.blue : $.bg, color: p.popular ? "#fff" : $.sub, border: p.popular ? "none" : `1.5px solid ${$.border}`, borderRadius: "10px", padding: "12px", fontSize: "15px", fontWeight: 600, cursor: "pointer", fontFamily: font, boxShadow: p.popular ? "0 2px 10px rgba(29,78,216,0.25)" : "none" }}>{p.cta}</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── TESTIMONIALS ─── */}
|
||||
<section ref={ref("test")} style={{ maxWidth: "1100px", margin: "0 auto", padding: "80px 24px" }}>
|
||||
<div style={{ textAlign: "center", marginBottom: "40px" }}>
|
||||
<div style={fadeUp("test")}><span style={{ fontSize: "12px", fontWeight: 700, color: $.blue, textTransform: "uppercase", letterSpacing: "0.08em" }}>Trusted By Suppliers</span></div>
|
||||
<h2 style={{ ...fadeUp("test", 0.1), fontSize: "clamp(24px, 4vw, 36px)", fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0" }}>Suppliers love the lead quality</h2>
|
||||
</div>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "20px" }}>
|
||||
{TESTIMONIALS.map((t, i) => (
|
||||
<div key={i} style={{ ...fadeUp("test", 0.15 + i * 0.1), background: $.soft, 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>
|
||||
</section>
|
||||
|
||||
{/* ─── FAQ ─── */}
|
||||
<section id="faq" ref={ref("faq")} style={{ background: $.soft, borderTop: `1px solid ${$.border}`, borderBottom: `1px solid ${$.border}` }}>
|
||||
<div style={{ maxWidth: "700px", margin: "0 auto", padding: "80px 24px" }}>
|
||||
<div style={{ textAlign: "center", marginBottom: "40px" }}>
|
||||
<div style={fadeUp("faq")}><span style={{ fontSize: "12px", fontWeight: 700, color: $.blue, textTransform: "uppercase", letterSpacing: "0.08em" }}>FAQ</span></div>
|
||||
<h2 style={{ ...fadeUp("faq", 0.1), fontSize: "clamp(24px, 4vw, 32px)", fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0" }}>Common questions</h2>
|
||||
</div>
|
||||
<div style={{ ...fadeUp("faq", 0.15), display: "flex", flexDirection: "column", gap: "8px" }}>
|
||||
{FAQS.map((faq, 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" }}>{faq.q}</span>
|
||||
<span style={{ fontSize: "18px", color: $.faint, transform: openFaq === i ? "rotate(45deg)" : "none", transition: "transform 0.2s" }}>+</span>
|
||||
</button>
|
||||
{openFaq === i && <div style={{ padding: "0 22px 18px", fontSize: "14px", color: $.dim, lineHeight: 1.6 }}>{faq.a}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── FINAL CTA ─── */}
|
||||
<section ref={ref("cta")} style={{ maxWidth: "1100px", margin: "0 auto", padding: "80px 24px", textAlign: "center" }}>
|
||||
<div style={fadeUp("cta")}>
|
||||
<h2 style={{ fontSize: "clamp(24px, 4vw, 38px)", fontWeight: 800, letterSpacing: "-0.03em", margin: "0 0 12px" }}>Ready to grow your pipeline?</h2>
|
||||
<p style={{ color: $.dim, fontSize: "16px", maxWidth: "480px", margin: "0 auto 28px", lineHeight: 1.6 }}>Start with 10 free credits. Browse real project briefs. Unlock your first lead today.</p>
|
||||
<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)" }}>Get Started Free →</button>
|
||||
<p style={{ fontSize: "13px", color: $.faint, marginTop: "14px" }}>No credit card · 10 free lead credits · Cancel anytime</p>
|
||||
</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>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "24px", fontSize: "13px", color: $.dim }}>
|
||||
<a href="https://padelnomics.io" style={{ color: $.dim, textDecoration: "none" }}>padelnomics.io</a>
|
||||
<span>Terms</span><span>Privacy</span><span>Contact</span>
|
||||
</div>
|
||||
<div style={{ fontSize: "12px", color: $.faint }}>© 2026 Padelnomics. All rights reserved.</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user