/* global React, ReactDOM */ const { useState, useEffect, useRef } = React; // ========================================================================= // PoloDeck — Water polo referee assessment landing page // Tokens lifted directly from PoloDeck Design System v1.0 (RD-42 Phase 1) // ========================================================================= const T = { ink: { 900: "#0a2540", 700: "#1a3656", 500: "#4a5e7a", 400: "#7a8ba5", 300: "#a8b3c4" }, paper: { bg: "#fbfaf5", card: "#ffffff", sunken: "#f5f3ec", warm: "#faf7ed" }, accent: { 700: "#0d3a7a", 500: "#1b4fa8", 300: "#4a7fd4", tint: "#eaf0fb" }, success: { fg: "#0d7f3f", bg: "#ecf7ef", line: "#c5e4cf" }, warning: { fg: "#a66d00", bg: "#fbf4e4", line: "#ecd9a8" }, danger: { fg: "#a91e1e", bg: "#fbecec", line: "#ecc5c5" }, neutral: { fg: "#4a5e7a", bg: "#f1f0ea", line: "#dcdacf" }, border: { subtle: "#ebe7da", medium: "#d5cfbc" }, shadow: { subtle: "0 1px 2px rgba(10,37,64,0.04), 0 0 0 1px rgba(10,37,64,0.04)", card: "0 1px 3px rgba(10,37,64,0.06), 0 0 0 1px rgba(10,37,64,0.04)", lifted: "0 4px 12px rgba(10,37,64,0.08), 0 0 0 1px rgba(10,37,64,0.04)" }, font: { sans: "'IBM Plex Sans', -apple-system, system-ui, sans-serif", mono: "'IBM Plex Mono', 'SF Mono', Menlo, monospace" } }; const APP_URL = "https://game.polodeck.app"; // ----- Atoms ----- const Eyebrow = ({ children, tone = T.ink[400], style }) => {children}; const Mono = ({ children, style }) => {children}; const Pill = ({ tone = "neutral", children, style }) => { const t = T[tone]; return ( {children}); }; const Btn = ({ variant = "primary", children, onClick, href, style }) => { const base = { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: T.font.sans, fontSize: 15, fontWeight: 600, letterSpacing: "-0.005em", padding: "13px 22px", borderRadius: 12, border: "1px solid transparent", cursor: "pointer", textDecoration: "none", transition: "all 120ms ease-out" }; const variants = { primary: { background: T.accent[500], color: "#fff" }, ghost: { background: "transparent", color: T.ink[900], border: `1px solid ${T.border.medium}` }, onDark: { background: "#fff", color: T.accent[700] } }; const Tag = href ? "a" : "button"; return ( { if (variant === "primary") e.currentTarget.style.background = T.accent[700]; if (variant === "ghost") e.currentTarget.style.background = T.paper.sunken; }} onMouseLeave={(e) => { if (variant === "primary") e.currentTarget.style.background = T.accent[500]; if (variant === "ghost") e.currentTarget.style.background = "transparent"; }} style={{ ...base, ...variants[variant], ...style }}> {children}); }; // ========================================================================= // Nav // ========================================================================= const Nav = () => { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return (
Currently in beta testing
); }; // PoloDeck mark — scoreboard + ball + trajectory. Sourced from the // brand-kit mark-only SVG (uploads/PoloDeck Logo/favicon/mark-only.svg). const Logo = ({ size = 32, mono = false }) => { const stroke = mono ? "#FFFFFF" : "#0B1F3A"; const ball = mono ? "#0B1F3A" : "#FFD23F"; const water = mono ? "#FFFFFF" : "#1E6FBA"; const trail = mono ? "#FFFFFF" : "#E63946"; return ( {/* Scoreboard frame */} {/* Scoreboard grid */} {/* Waterline */} {/* Ball trajectory */} {/* Water polo ball */} ); }; // PoloDeck full lockup — mark + wordmark, sourced from the brand-kit // polodeck-lockup-full-color.svg (viewBox 272×164). const Lockup = ({ height = 96, variant = "full-color", cropped = false }) => { const stroke = variant === "white" ? "#FFFFFF" : "#0B1F3A"; const ballFill = variant === "full-color" ? "#FFD23F" : variant === "white" ? "#0B1F3A" : "#FFFFFF"; const water = variant === "full-color" ? "#1E6FBA" : stroke; const trail = variant === "full-color" ? "#E63946" : stroke; const text = stroke; // Tight viewBox crops the brand-kit's safe-area padding so the mark fills the // available height — used in chrome (nav, footer) where the surrounding // layout already provides breathing room. const vb = cropped ? "50 32 172 116" : "0 0 272 164"; return ( PoloDeck ); }; // ========================================================================= // Hero // ========================================================================= const Hero = () =>
The water polo real-time match review & data platform

Capture the game. Coach the moment. Develop both players & referees.

PoloDeck is the pool-side companion for Coaches & Delegates to build world-class players & referees. Capture every key event in the pool and every referee decision in real time, then turn the record into clear, development-focused feedback — for referees, teams and athletes alike. The game moves too fast for memory; PoloDeck makes structured review easy.

Try PoloDeck free → document.querySelector("#how")?.scrollIntoView({ behavior: "smooth" })}> See how it works
; const Divider = () =>
; const Stat = ({ n, label }) =>
{n}
{label}
; // ---- Phone mockup (Actions tab mid-game) ---- const PhoneMockup = () =>
{/* soft halo */}
{/* notch */}
{/* status bar */}
9:41●●●● 5G ▮
{/* game header */}
NSW Premier League · QF Q3 · 4:12
vs
{/* tabs */}
{["Setup", "Actions", "Score", "Notes", "Assess"].map((t, i) =>
{t}
)}
{/* action tiles */}
{/* action log header */}
Action log · this quarter 11 entries
{/* log rows */}
{/* home indicator */}
; const TeamScore = ({ name, score, right }) =>
{name.slice(0, 1)}
{name}
{score}
; const ActionTile = ({ color, label }) =>
{label}
Tap to log
; const LogRow = ({ type, tone, team, cap, time, note }) => { const t = T[tone]; return (
{type} · {team} · #{cap}
{tone === "success" ? "Correct" : tone === "warning" ? "Unsure" : "Incorrect"}
{time} {note &&
{note}
}
); }; // ========================================================================= // Features grid // ========================================================================= const Features = () => { const cards = [ { icon: "📋", t: "Capture the whole game live", d: "Goals, major fouls, penalties, turnovers, no-calls, cards, timeouts, incidents \u2014 logged in two taps with cap number, quarter and time. Voice dictation on every note so you never fall behind the action. Your game data should help you win in the game, not just for the next one." }, { icon: "⭐", t: "Research-based referee assessment", d: "Rate referees across positioning, communication, decision-making and game management with behaviour-anchored scales. Self-assessment sits side-by-side with delegate assessment. Informed by research from World Aquatics, FIFA & World Rugby." }, { icon: "🎬", t: "Coach the moment", d: "Coaches turn the match record into teachable moments. Every event is timestamped and tagged \u2014 review specific phases with players, attach feedback, and build a development thread that runs across games and seasons." }, { icon: "📈", t: "A development history that compounds", d: "Players, referees and teams accumulate a structured record over time. Dashboards show correct-decision %, assessment trends, action-type breakdowns and weighted overalls \u2014 every game adds to the picture." }, { icon: "📱", t: "Mobile-first, works offline", d: "All in the palm of your hand \u2014 no laptops needed. Log an entire game with voice recording for easy in-game use. Works offline, so patchy wifi inside a venue won\u2019t lose your work." }, { icon: "🔗", t: "Share without accounts", d: "Lock a game and generate a secure, read-only link. Referees, coaches and players see their report in any browser \u2014 no login, no friction \u2014 and feedback flows immediately, not days later." }]; return (
What it does

Built for the rhythm of a live game and the work that comes after.

Every feature is designed for how the whole game actually works, one-handed, pool-side, at match pace, then with complete game analysis at your finger tips immediate following the game for review.

{cards.map((c, i) =>
{c.icon}

{c.t}

0{i + 1}

{c.d}

)}
); }; // ========================================================================= // Who it's for // ========================================================================= const WhoItsFor = () => { const roles = [ { tag: "Delegate", t: "Run the match record", d: "Create and manage games. Log every decision and incident in real time. Assess referees across the four-domain framework. Lock and share secure reports.", bullets: ["Live decision logging", "Referee assessment", "Locked share reports"] }, { tag: "Referee", t: "Own your development", d: "Self-assess across the same four-domain framework. Compare your view of the game with the delegate's, side-by-side, with verbatim notes against the moments that mattered.", bullets: ["Self-assessment", "Joint match review", "Decision history"] }, { tag: "Coach", t: "Win the game, develop your team", d: "You or your manager/assistant coach track the game live. Using the live scoreboard to perform at your best. Tag teachable moments, attach feedback to specific phases, and build a development thread for every player on the squad.", bullets: ["Tagged review", "Teachable moments", "Player development log"] }, { tag: "Player", t: "See your game, season by season", d: "Open coach-shared feedback in any browser. Review key moments. Build a structured development history that travels with you across games, clubs and seasons.", bullets: ["Coach feedback inbox", "Personal moments review", "Career development history"] }]; return (
Who it's for

One match record. Four points of view.

PoloDeck captures the game once, then surfaces it to the right person in the right shape — for assessment, coaching, or personal review.

{roles.map((r) =>
{r.tag}

{r.t}

{r.d}

    {r.bullets.map((b) =>
  • →{b}
    • )}
)}
); }; // ========================================================================= // How it works (4 steps) // ========================================================================= const HowItWorks = () => { const steps = [ { n: "01", t: "Set up the game", d: "Teams, referees, pool, age group, gender. Pre-loaded competitions save time." }, { n: "02", t: "Log decisions live", d: "Two taps per action during play. Foul alerts, scorecard, cap tracking — all automatic. Log an entire game from start to penalty shootout." }, { n: "03", t: "Complete assessment", d: "After the match, rate each referee across four domains with quick behaviour anchors. Or share feedback and stats directly with your team." }, { n: "04", t: "Lock & share", d: "Generate a secure read-only report link. The referees & players gets a specific, actionable game debrief." }]; return (
How it works

From first whistle to shared report.

{steps.map((s, i) =>
{i < 3 &&
}
{s.n}

{s.t}

{s.d}

)}
); }; // ========================================================================= // Assessment preview (interactive demo) // ========================================================================= const AssessmentPreview = () => { const domains = [ { id: "positioning", label: "Positioning", desc: "Movement, sightlines, anticipation, recovery after a phase change." }, { id: "communication", label: "Communication", desc: "Whistle clarity, signals, voice, dialogue with players and partner." }, { id: "decisions", label: "Decision-making", desc: "Accuracy and consistency across the four action types and game pressure." }, { id: "management", label: "Game management", desc: "Tempo, escalation, card discipline, control of contested phases." }]; const [active, setActive] = useState("decisions"); const a = domains.find((d) => d.id === active); return (
Referee development 4-domain framework

Structured assessments. Behaviour-anchored.

Based on the leading referee development research from FIFA, World Rugby & World Aquatics. Self-assessment sits side-by-side with delegate assessment so referees can see exactly where their view differs.

{domains.map((d, i) => )}
); }; const RatingScale = ({ value, color = T.accent[500] }) =>
{[1, 2, 3, 4, 5].map((n) =>
{n}
)}
; const AssessmentCard = ({ domain }) => { const ratings = { positioning: { delegate: 4, ref: 3, anchor: "Strong sightline through middle phases; lost track on the late 6-on-5 reset." }, communication: { delegate: 3, ref: 4, anchor: "Whistle clear. Could be louder in player dialogue during contested resets." }, decisions: { delegate: 4, ref: 3, anchor: "Major fouls 92% correct. Two missed holds in Q3 but recovered well after time-out." }, management: { delegate: 5, ref: 4, anchor: "Calm escalation on Q4 brawl. Card discipline appropriate — kept the tempo without letting it slip." } }; const r = ratings[domain.id]; return (
Assessment · {domain.label} Locked · 24 Apr 2026
Delegate
{r.anchor}
Referee self-assessment
"Felt my positioning slipped late. Want to work on Q3 conditioning."
Gap {r.delegate > r.ref ? "+" : ""}{r.delegate - r.ref}
Trend · last 5 games
Weighted overall {(r.delegate * 1.6 + 1).toFixed(1)} / 10
); }; const Sparkline = ({ values }) => { const max = Math.max(...values); return ( `${i / (values.length - 1) * 100},${24 - v / max * 22}`).join(" ")} /> {values.map((v, i) => )} ); }; // ========================================================================= // About // ========================================================================= const About = () =>
About

Built by the Community, for our game.

PoloDeck was built in Australia by leading referees and coaches with over 30 years of water polo experience. Sick and tired of not getting real-time, evidence-based feedback and insight, and frustrated by paper-based, after-the-fact assessments that seemed out of touch with the game.

Every feature has been tested in live water polo games and the feedback process has been validated by experienced referees, delegates, coaches & players. The goal is simple: replace memory and hand-scribbled notes with structured, respectful, evidence-based feedback that actually helps everyone develop in the game.

Made in Sydney · Used on real games every weekend
; // ========================================================================= // Pricing (placeholder — coming soon) // ========================================================================= const Pricing = () =>
Pricing

Pricing coming soon.

Join now to be an early tester. Free during the soak period — help shape the platform that's defining how referees develop.

{[ { name: "Early tester", note: "Available now", features: ["Unlimited games", "All four assessment domains", "Locked share reports", "Voice dictation", "Priority feedback channel"], cta: "Try free", featured: true }, { name: "Club", note: "Q3 2026", features: ["Everything in Early tester", "Up to 10 delegates", "Multi-referee dashboards", "Club-level competitions", "Branded report links"], cta: "Join waitlist" }, { name: "Federation", note: "Q4 2026", features: ["Everything in Club", "Master delegate view", "State / region hierarchy", "Bulk import / SSO", "Annual development reports"], cta: "Talk to us" }]. map((t) =>
{t.name} {t.note}
{t.featured ? "Free" : "TBD"} {t.featured ? "during beta testing" : ""}
    {t.features.map((f) =>
  • ✓{f}
    • )}
{t.cta} →
)}
; // ========================================================================= // FAQ // ========================================================================= const FAQ = () => { const items = [ ["Do I need to install anything?", "No. PoloDeck is a Progressive Web App — it runs in any modern browser. On iOS or Android you can add it to your home screen for a fullscreen, app-like experience, but a regular browser tab works just as well."], ["Does it really work offline at the pool?", "Yes. Everything you log saves to your phone first, then syncs to the cloud when you get a connection. Patchy wifi inside venues won't lose your work — even if you log a whole game offline, it'll sync the moment you're back online."], ["What does the referee actually see?", "When you lock a game, PoloDeck generates a secure read-only link. The referee opens it in any browser — no login, no account — and sees their full report: every logged decision, your verdicts, the four-domain assessment, and trend over time."], ["What's the assessment based on?", "The four-domain framework — positioning, communication, decision-making, game management — is informed by published referee development research from World Aquatics, FIFA and World Rugby. Each domain has behaviour-anchored scales rather than a vague 1–10."], ["Who has access to my data?", "Only you and the referees you explicitly share locked reports with. Games are private to your account by default. We don't sell data or run ads."], ["Will it work for water polo formats outside Australia?", "Yes. The data model handles any FINA / World Aquatics ruleset. Competition presets are configurable, so a federation can roll out their own age groups, periods and shot-clock variants."]]; const [open, setOpen] = useState(0); return (
Questions

Asked & answered.

{items.map(([q, a], i) =>

{a}

)}
); }; // ========================================================================= // Contact (collapsible form) // ========================================================================= const Contact = () => { const [open, setOpen] = useState(false); const [sent, setSent] = useState(false); return (
{sent ?
✓ Message sent
Thanks. We'll be in touch within 24 hours.
:
{e.preventDefault();setSent(true);}} style={{ display: "grid", gap: 14 }}>