// Sportistry marketing website — home.jsx // Shared chrome (MarketingNav, Footer) + the Home page and its sections. // Bilingual: data arrays are built at render time via helper functions so a // language switch re-localises everything (see i18n.jsx). function webEvents() { return [ { id: "w1", sport: "soccer", title: tr( "Sunday 5-a-side · all levels", "Vasárnapi kispályás · minden szint", ), time: tr("Sun · 3:00 PM", "V · 15:00"), location: tr( "Városliget · 0.9 km", "Városliget · 0,9 km", ), going: 8, left: 2, status: "live", attendees: [ { name: "Marco P", tint: "#1652F0" }, { name: "Ana R", tint: "#E27A2B" }, { name: "Jo K", tint: "#6A3FF0" }, { name: "Kim L", tint: "#0DB1C9" }, { name: "Sam W", tint: "#F0498D" }, ], }, { id: "w2", sport: "basket", title: tr( "Friday hoops at Erzsébet tér", "Pénteki kosár az Erzsébet téren", ), time: tr("Fri · 7:30 PM", "P · 19:30"), location: tr("Erzsébet tér · 1.9 km", "Erzsébet tér · 1,9 km"), going: 10, status: "full", attendees: [ { name: "Sam S", tint: "#F0498D" }, { name: "Kai T", tint: "#84B30C" }, { name: "Lou D", tint: "#2EB85C" }, ], }, { id: "w3", sport: "running", title: tr("Sunrise 5k loop", "Hajnali 5K kör"), time: tr("Wed · 7:00 AM", "Sze · 7:00"), location: tr("Margitsziget · 3.2 km", "Margitsziget · 3,2 km"), going: 14, left: 6, status: "going", joined: true, attendees: [ { name: "Tia M", tint: "#6A3FF0" }, { name: "Owen P", tint: "#0DB1C9" }, { name: "Niko F", tint: "#1652F0" }, { name: "Pip R", tint: "#E27A2B" }, ], }, { id: "w4", sport: "padel", title: tr("Padel doubles · social", "Padel páros · társasági"), time: tr("Sat · 11:00 AM", "Szo · 11:00"), location: tr( "Padel Garden Budapest · 2.9 km", "Padel Garden Budapest · 2,9 km", ), going: 4, left: 0, status: "open", attendees: [ { name: "Diego A", tint: "#00C2A8" }, { name: "Mae H", tint: "#1652F0" }, ], }, { id: "w5", sport: "cycling", title: tr("Weekend ride · 30km", "Hétvégi tekerés · 30 km"), time: tr("Sat · 8:00 AM", "Szo · 8:00"), location: tr( "Hűvösvölgyi végállomás · 5.5 km", "Hűvösvölgyi végállomás · 5,5 km", ), going: 7, left: 5, status: "open", attendees: [ { name: "Eli K", tint: "#0DB1C9" }, { name: "Mara T", tint: "#1652F0" }, { name: "Bobi L", tint: "#84B30C" }, ], }, { id: "w6", sport: "volley", title: tr("Beach volley · doubles", "Strandröplabda · páros"), time: tr("Sun · 4:30 PM", "V · 16:30"), location: tr("Kopaszi-gát · 1.4 km", "Kopaszi-gát · 1,4 km"), going: 6, left: 2, status: "going", attendees: [ { name: "Nico V", tint: "#F0498D" }, { name: "Iris H", tint: "#6A3FF0" }, ], }, ]; } function navLinks() { return [ { id: "discover", label: tr("Discover", "Felfedezés"), href: "/discover", }, { id: "edzoknek", label: tr("For coaches", "Edzőknek"), href: "/edzoknek", }, { id: "helyszineknek", label: tr("For venues", "Helyszíneknek"), href: "/helyszineknek", }, { id: "blog", label: tr("Blog", "Blog"), href: "/blog" }, { id: "about", label: tr("About", "Rólunk"), href: "/about" }, ]; } // ───────────────────── Top nav (shared) ───────────────────── function MarketingNav({ current }) { const [scrolled, setScrolled] = React.useState( () => typeof window !== "undefined" && window.scrollY > 8, ); const [menuOpen, setMenuOpen] = React.useState(false); const isMobile = useIsMobile(920); // nav links + CTA need more room than the general breakpoint React.useEffect(() => { const f = () => setScrolled(window.scrollY > 8); f(); window.addEventListener("scroll", f); return () => window.removeEventListener("scroll", f); }, []); React.useEffect(() => { if (!isMobile) setMenuOpen(false); }, [isMobile]); // Desktop-only trial: past the scroll threshold, the wordmark rolls fully into the glyph // (not scrubbed to scroll distance — a small scroll still plays the full animation). const collapse = !isMobile && scrolled ? 1 : 0; return (
{!isMobile && ( )}
{isMobile ? (
) : (
{tr("Sign in", "Bejelentkezés")} {tr("Get the app", "Töltsd le")}
)} {isMobile && menuOpen && (
{navLinks().map((l) => { const active = current === l.id; return ( {l.label} ); })}
{tr("Get the app", "Töltsd le")}
)}
); } // ───────────────────── Footer (shared) ───────────────────── function Footer() { const isMobile = useIsMobile(); const cols = [ { h: tr("Product", "Termék"), items: [ [tr("Discover", "Felfedezés"), "/discover"], [tr("Download", "Letöltés"), "/download"], ], }, { h: tr("For organizers", "Szervezőknek"), items: [ [tr("For clubs & venues", "Kluboknak és helyszíneknek"), "/helyszineknek"], [tr("Blog", "Blog"), "/blog"], ], }, { h: tr("Company", "Cég"), items: [ [tr("About", "Rólunk"), "/about"], [tr("Contact", "Kapcsolat"), "mailto:info@sportistry.app"], ], }, { h: tr("Legal", "Jogi"), items: [ [tr("Privacy", "Adatvédelem"), "/privacy"], [tr("Terms", "ÁSZF"), "/terms"], [tr("Legal Notice", "Impresszum"), "/impresszum"], [tr("Cookie settings", "Süti beállítások"), "#cookies"], ], }, ]; return ( ); } // Reusable dark glow backdrop for dark sections function DarkGlows() { return ( <>
); } // ───────────────────── Hero ───────────────────── function Hero() { const ev = webEvents(); const isMobile = useIsMobile(); return (
{tr( "Real games, real people, near you", "Valódi meccsek, valódi emberek a közeledben", )}

{tr("Get out there.", "Mozduljunk ki.")}
{tr("Together.", "Együtt.")}

{tr( "Sportistry is the easy way to find pickup games, start crews, and actually show up. No flakes. No spreadsheets. Just play.", "A Sportistry a legegyszerűbb módja, hogy spontán meccseket találj, csapatot szervezz, és tényleg ott is legyél. Nincs lemorzsolódás. Nincs táblázatkezelés. Csak a játék.", )}

{tr("Get the app", "Töltsd le az appot")} {tr("Find a game", "Keress meccset")}
{tr("Built for players who ", "Azoknak, akik ")} {tr("actually show up", "tényleg megjelennek")} {tr(".", ".")}
{isMobile ? (
) : (
)}
); } // ───────────────────── Trust / stats strip ───────────────────── function TrustStrip() { const isMobile = useIsMobile(); const stats = [ [ `${Object.keys(WEB_SPORTS).length}+`, tr("sports & counting", "sportág, és egyre több"), ], [ tr("One tap", "Egy kattintás"), tr("to join a game", "a csatlakozáshoz"), ], [tr("Free", "Ingyenes"), tr("to find & play", "keresni és játszani")], [ tr("Waitlists", "Várólisták"), tr("keep games full", "tartják tele a meccset"), ], ]; return (
{stats.map(([n, l]) => (
{n} {l}
))}
); } // ───────────────────── How it works ───────────────────── function HowItWorks() { const isMobile = useIsMobile(); const steps = [ { n: "01", icon: "search", tint: SB.blue, sport: "soccer", img: IMG.soccer, title: tr("Find a game", "Találj meccset"), desc: tr( "Browse pickup games, classes and runs near you. Filter by sport, level and free spots.", "Böngéssz spontán meccsek, edzések vagy lokációk között a közeledben. Szűrj sportág, szint és szabad helyek szerint.", ), label: "browsing the feed", }, { n: "02", icon: "bolt", tint: SB.lime, sport: "running", img: IMG.lacing, dark: true, title: tr("Tap I'm in", "Kattints a Benne vagyokra"), desc: tr( "One tap locks your spot. Smart reminders and a waitlist keep the game full and on time.", "Egy kattintás lefoglalja a helyed. Okos emlékeztetők és várólista tartják tele és időben a meccset.", ), label: "tap to join", }, { n: "03", icon: "trophy", tint: "#6A3FF0", sport: "basket", img: IMG.golden, title: tr("Show up & play", "Jelenj meg és játssz"), desc: tr( "Meet your crew at the spot. Log the result, keep your streak, do it all again next week.", "Találkozz a csapatoddal a helyszínen. Rögzítsd az eredményt, tartsd a sorozatod.", ), label: "golden-hour game", }, ]; return (
{tr("How it works", "Hogyan működik")}

{tr( "Three taps from couch to court.", "Három kattintás a kanapétól a pályáig.", )}

{steps.map((s) => (
{s.n}
{s.title}

{s.desc}

))}
); } // ───────────────────── Value props ───────────────────── function ValueProps() { const isMobile = useIsMobile(); const items = [ { icon: "bolt", tint: SB.lime, dark: true, title: tr("One tap to join", "Egy kattintás a csatlakozáshoz"), desc: tr( "Browse pickup games near you. Hit \"I'm in\". Show up. That's it.", "Böngéssz meccseket a közeledben. Kattints a „Benne vagyok”-ra. Jelenj meg. Ennyi.", ), }, { icon: "repeat", tint: SB.blue, title: tr( "Crews that don't flake", "Csapatok, amelyek nem morzsolódnak le", ), desc: tr( "Recurring groups with smart reminders and replacement waitlists.", "Visszatérő csoportok okos emlékeztetőkkel és pótló várólistával.", ), }, { icon: "shield", tint: "#6A3FF0", title: tr("Safer pickups", "Biztonságosabb meccsek"), desc: tr( "Verified profiles, skill-level filtering, no-show tracking. Real people.", "Ellenőrzött profilok, szint szerinti szűrés, lemorzsolódás-követés. Valódi emberek.", ), }, { icon: "trophy", tint: "#E27A2B", title: tr("Track your year", "Kövesd az éved"), desc: tr( "Streaks, results, achievements. Watch the games stack up.", "Sorozatok, eredmények, kitűzők. Nézd, ahogy gyűlnek a meccsek.", ), }, ]; return (
{tr("Why Sportistry", "Miért a Sportistry")}

{tr( "Built for the people who actually play.", "Azoknak, akik tényleg játszanak.", )}

{items.map((it) => (
{it.title}

{it.desc}

))}
); } // ───────────────────── Sports grid ───────────────────── // FALLBACK ONLY — the live numbers come from the API (see useSportCounts). // These were the real counts on 2026-07-28; they exist so a failed or slow // fetch renders plausible tiles instead of a grid of zeros. They will drift, // and that is fine: nothing reads them once the fetch resolves. // // The previous version of this map was hand-written marketing numbers that had // never matched the database (it claimed 16 hiking events against 1 real one). const SPORT_COUNTS_FALLBACK = { soccer: 31, yoga: 17, tennis: 17, running: 16, basket: 14, cycling: 14, padel: 13, climbing: 12, volley: 11, swimming: 9, fitness: 7, beerpong: 2, hiking: 1, badminton: 1, bouldering: 1, handball: 1, golf: 1, hockey: 1, boxing: 1, martialarts: 1, }; // Real per-sport event counts from GET /api/public-stats/sport-counts. // Unauthenticated and server-cached (5 min), so this is a cheap single call. // Counts are all-time and exclude our seed events — see the route for why. function useSportCounts() { const [counts, setCounts] = React.useState(SPORT_COUNTS_FALLBACK); React.useEffect(() => { // SITE_API_BASE comes from components.jsx, which index.html loads // before this file — see the script order there before moving it. if (typeof SITE_API_BASE !== "string") return; let alive = true; fetch(SITE_API_BASE + "/public-stats/sport-counts") .then((r) => (r.ok ? r.json() : null)) .then((d) => { if (alive && d && d.counts) setCounts(d.counts); }) .catch(() => {}); // keep the fallback — a dead API is not a blank grid return () => { alive = false; }; }, []); return counts; } // Grid shows the busiest sports as full photo tiles; the rest collapse into // a "more sports" chip row so the section stays a fixed height as the sport // list keeps growing. const FEATURED_SPORT_COUNT = 12; function SportsGrid() { const isMobile = useIsMobile(); const [showAll, setShowAll] = React.useState(false); const counts = useSportCounts(); const byCount = ([a], [b]) => (counts[b] || 0) - (counts[a] || 0); // Only a sport with a photo may be featured. A featured tile whose key is // missing from SPORT_IMG renders as a bare gradient — that was the bug // fixed on 2026-07-28, and ordering by real counts would reintroduce it // (beerpong outranks hiking and badminton but has no photo). const all = Object.entries(WEB_SPORTS); const withPhoto = all.filter(([k]) => SPORT_IMG[k]).sort(byCount); const withoutPhoto = all.filter(([k]) => !SPORT_IMG[k]).sort(byCount); const featured = withPhoto.slice(0, FEATURED_SPORT_COUNT); const rest = [...withPhoto.slice(FEATURED_SPORT_COUNT), ...withoutPhoto]; return (
{tr("What we cover", "Amit lefedünk")}

{tr( `${all.length}+ sports. More on the way.`, `${all.length}+ sportág. És egyre több.`, )}

{tr("Browse all games", "Összes meccs")}
{featured.map(([k, s]) => ( (e.currentTarget.style.transform = "translateY(-3px)") } onMouseLeave={(e) => (e.currentTarget.style.transform = "translateY(0)") } >
{SPORT_IMG[k] && ( {sportLabel(k)} )} {rest.length > 0 && (
{showAll && (
{rest.map(([k, s]) => ( (window.location.href = "/discover") } > {sportLabel(k)} ))}
)}
)}
); } // ───────────────────── Testimonials ───────────────────── function testimonials() { return [ { quote: tr( "We used to flake on our football WhatsApp every other week. Moved the crew to Sportistry and we’ve shown up 9 weeks in a row.", "Régen kéthetente lemondtuk a focit a WhatsApp-csoportban. Átköltöztettük a csapatot a Sportistry-re, és már 9 hete egyfolytában megjelenünk.", ), name: "Marco Powell", role: tr( "Captain · Bermondsey FC", "Csapatkapitány · Bermondsey FC", ), tint: "#1652F0", highlight: tr("9 weeks in a row", "9 hete egyfolytában"), }, { quote: tr( "I moved cities and knew nobody. Three pickup games later I had a regular run crew and a Tuesday padel game.", "Új városba költöztem, és senkit sem ismertem. Három meccs után már volt egy állandó futócsapatom és egy keddi padelpartim.", ), name: "Ana Reyes", role: tr("Runner · Hyde Park", "Futó · Hyde Park"), tint: "#6A3FF0", highlight: tr("a regular run crew", "egy állandó futócsapatom"), }, { quote: tr( "As a coach, filling a class used to be endless texts. Now it’s one post and a waitlist that fills itself.", "Edzőként egy óra feltöltése végtelen üzengetés volt. Most egyetlen poszt, és a várólista magától megtelik.", ), name: "Dale Okoro", role: tr("Coach · Camden Hoops", "Edző · Camden Hoops"), tint: "#E27A2B", highlight: tr( "a waitlist that fills itself", "a várólista magától megtelik", ), }, ]; } function Testimonials() { const isMobile = useIsMobile(); return (
{tr( "Real crews, real streaks", "Valódi csapatok, valódi sorozatok", )}

{tr( "People keep showing up.", "Az emberek újra meg újra megjelennek.", )}

{testimonials().map((t) => (
{[...Array(5)].map((_, i) => ( ))}

{t.quote.split(t.highlight)[0]} {t.highlight} {t.quote.split(t.highlight)[1]}

{t.name}
{t.role}
))}

{tr( "Illustrative examples of how crews use Sportistry.", "Szemléltető példák arra, hogyan használják a csapatok a Sportistryt.", )}

); } // ───────────────────── App download band ───────────────────── function AppDownloadBand() { const isMobile = useIsMobile(); return (
{tr("Play now", "Játssz most")}

{tr( "Your next game is one tap away.", "A következő meccsed egy kattintásnyira van.", )}

{tr( "Find games, RSVP in a tap, and get nudged before kickoff — free, right in your browser. The iOS and Android apps are on the way.", "Találj meccseket, jelezz vissza egy kattintással, és kapj emlékeztetőt kezdés előtt – ingyen, egyenesen a böngésződben. Az iOS és Android alkalmazások hamarosan érkeznek.", )}

{!isMobile && ( {tr("Try the web app", "Kipróbálom a webappot")} )}
); } // Simple phone mockup with a labelled screen slot function PhoneMock({ height = 380 }) { const w = height * 0.49; return (
{tr("Sunday 5-a-side", "Vasárnapi kispályás")}
{tr("Sun · 3:00 PM · 0.6 mi", "V · 15:00 · 0,9 km")}
{tr("I'm in", "Benne vagyok")}
); } // ───────────────────── FAQ ───────────────────── function faqItems() { return [ { q: tr("Is Sportistry free?", "Ingyenes a Sportistry?"), a: tr( "Yes — the app is completely free. Downloading it, finding games and joining them costs nothing.", "Igen – az app teljesen ingyenes. A letöltése, a meccskeresés és a csatlakozás semmibe sem kerül.", ), }, { q: tr( "What if people don’t show up?", "Mi van, ha valaki nem jelenik meg?", ), a: tr( "Every game tracks no-shows and runs a replacement waitlist, so a dropped spot gets filled automatically. Repeat no-shows lose their reliability rating.", "Minden meccs követi a meg nem jelenéseket és pótló várólistát működtet, így a felszabaduló hely automatikusan betöltődik. Az ismételt távolmaradás rontja a megbízhatósági pontszámot.", ), }, { q: tr( "Do I need to be good at the sport?", "Jónak kell lennem az adott sportban?", ), a: tr( 'No. Every game lists a skill level — from "first timers welcome" to "competitive" — so you always know what you’re walking into.', "Nem. Minden meccsnél fel van tüntetve a szint – a „kezdők is jöhetnek”-től a „versenyszintig” –, így mindig tudod, mire számíthatsz.", ), }, { q: tr( "Which sports and cities are live?", "Mely sportágak és városok érhetők el?", ), a: tr( "Eight sports today (soccer, basketball, tennis, running, cycling, volleyball, climbing and padel), with more cities and sports added every month.", "Jelenleg nyolc sportág (foci, kosárlabda, tenisz, futás, kerékpár, röplabda, mászás és padel), havonta bővülő városokkal és kínálattal.", ), }, { q: tr( "Can I organize my own games or crew?", "Szervezhetek saját meccset vagy csapatot?", ), a: tr( "Absolutely. Anyone can post an event in under a minute. Recurring crews, venue management and payments are built in — see For clubs & venues.", "Természetesen. Bárki feladhat eseményt egy percen belül. A visszatérő csapatok, a helyszínkezelés és a fizetés is beépítve – lásd a Kluboknak és helyszíneknek oldalt.", ), }, ]; } function FAQ() { const [open, setOpen] = React.useState(0); const items = faqItems(); const isMobile = useIsMobile(); return (
{tr("Good questions", "Jó kérdések")}

{tr( "Everything you might ask.", "Minden, amit kérdezhetsz.", )}

{items.map((f, i) => { const isOpen = open === i; return (
{isOpen && (
{f.a}
)}
); })}
); } // ───────────────────── Final CTA ───────────────────── function FinalCTA() { const isMobile = useIsMobile(); return (
{tr("Ready when you are", "Készen állunk, amikor te is")}

{tr("Your next game is", "A következő meccsed")}
{tr("one tap away.", "egy kattintásnyira.")}

{tr( "Jump into Sportistry and find a game happening near you this week.", "Vágj bele a Sportistrybe, és találj egy meccset a közeledben még a héten.", )}

{!isMobile && ( {tr("Try the web app", "Kipróbálom a webappot")} )}
); } // ───────────────────── Crews & Tournaments ───────────────────── function TournamentsCrews() { const isMobile = useIsMobile(); const cards = [ { icon: "users", tint: SB.blue, sport: "soccer", img: IMG.soccer, title: tr("Crews", "Csapatok"), desc: tr( "Your regular groups. Create a crew with your friends, invite members by @username or email, chat, and spin up recurring sessions in a tap.", "Az állandó csoportjaid. Hozz létre csapatot a barátaiddal, hívj meg tagokat @felhasználónévvel vagy emaillel, csevegj, és indíts visszatérő edzéseket egy kattintással.", ), points: [ tr("Invite-only groups", "Meghívásos csoportok"), tr("Built-in group chat", "Beépített csoportchat"), tr("Recurring games", "Visszatérő meccsek"), ], }, { icon: "trophy", tint: "#6A3FF0", sport: "basket", img: SPORT_IMG.basket, title: tr("Tournaments", "Tornák"), desc: tr( "Run a proper competition. Add teams and players, generate a knockout bracket, and play through from the quarterfinals to a crowned champion.", "Szervezz igazi versenyt. Adj hozzá csapatokat és játékosokat, generálj egyenes kieséses táblát, és játssz végig a negyeddöntőtől a győztesig.", ), points: [ tr("Single-elimination brackets", "Egyenes kieséses tábla"), tr("Teams & guest players", "Csapatok és vendégjátékosok"), tr("Live results & a champion", "Élő eredmények és győztes"), ], }, ]; return (
{tr("More than pickup", "Több mint spontán meccs")}

{tr( "Crews to play with. Tournaments to win.", "Csapatok, amikkel játszhatsz. Tornák, amiket megnyerhetsz.", )}

{cards.map((c) => (
{c.title}

{c.desc}

{c.points.map((p) => (
{p}
))}
))}
); } // ───────────────────── Home page ───────────────────── function HomePage() { return (
{/* Testimonials hidden until we have real users/quotes — see testimonials() above */}
); } Object.assign(window, { webEvents, navLinks, MarketingNav, Footer, DarkGlows, PhoneMock, Hero, TrustStrip, HowItWorks, ValueProps, SportsGrid, SPORT_COUNTS_FALLBACK, Testimonials, testimonials, AppDownloadBand, FAQ, faqItems, FinalCTA, HomePage, });