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 (
{/* โ”€โ”€โ”€ NAV โ”€โ”€โ”€ */} {/* โ”€โ”€โ”€ HERO โ”€โ”€โ”€ */}
๐ŸŽพ The #1 lead source for padel court suppliers

Stop chasing leads.
Let them come to you.

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.

No credit card required ยท Cancel anytime

{/* โ”€โ”€โ”€ STATS BAR โ”€โ”€โ”€ */}
{STATS.map((s, i) => (
{s.value}
{s.label}
))}
{/* โ”€โ”€โ”€ HOW IT WORKS โ”€โ”€โ”€ */}
How it works

Three steps to your next project

{STEPS.map((step, i) => (
{step.icon}
{step.num}

{step.title}

{step.desc}

))}
{/* โ”€โ”€โ”€ LEAD FEED PREVIEW โ”€โ”€โ”€ */}
Live Lead Feed

Real projects, real budgets

Here's what your lead feed looks like. Browse anonymized briefs, then unlock the ones that fit.

{LEADS.map((lead, i) => (
{lead.heat === "hot" ? "๐Ÿ”ฅ Hot" : "โ— Warm"} {lead.type} ยท {lead.courts} courts
{lead.region}
{lead.budget}
{lead.timeline}
{lead.services.map(s => {s})}
{lead.bidders === 0 ? "โœจ No suppliers yet โ€” be first!" : `${lead.bidders} supplier${lead.bidders > 1 ? "s" : ""} unlocked`}
))}
{/* โ”€โ”€โ”€ BOOSTS STRIP โ”€โ”€โ”€ */}
Visibility Boosts

Stack add-ons to stand out

Every plan supports optional boosts. Mix and match to maximize your reach.

{BOOSTS.map((b, i) => (
{b.name}
{b.boost}
{b.desc}
{b.price}
))}
{/* โ”€โ”€โ”€ PRICING โ”€โ”€โ”€ */}
Pricing

Simple, transparent pricing

Start free. Upgrade when the leads start flowing.

{PLANS.map((p, i) => (
{p.popular &&
Most Popular
}
{p.name}
{p.price} {p.period && {p.period}}
โšก {p.credits}
{p.features.map((f, j) =>
โœ“{f}
)}
))}
{/* โ”€โ”€โ”€ TESTIMONIALS โ”€โ”€โ”€ */}
Trusted By Suppliers

Suppliers love the lead quality

{TESTIMONIALS.map((t, i) => (
โ˜…โ˜…โ˜…โ˜…โ˜…

"{t.quote}"

{t.avatar}
{t.name}
{t.role}
))}
{/* โ”€โ”€โ”€ FAQ โ”€โ”€โ”€ */}
FAQ

Common questions

{FAQS.map((faq, i) => (
{openFaq === i &&
{faq.a}
}
))}
{/* โ”€โ”€โ”€ FINAL CTA โ”€โ”€โ”€ */}

Ready to grow your pipeline?

Start with 10 free credits. Browse real project briefs. Unlock your first lead today.

No credit card ยท 10 free lead credits ยท Cancel anytime

{/* โ”€โ”€โ”€ FOOTER โ”€โ”€โ”€ */}
); }