const { useState, useEffect, useRef } = React; /* ============================================================ EMAILJS CONFIG — paste your credentials from emailjs.com ============================================================ */ const EMAILJS_SERVICE_ID = "service_landing_page"; const EMAILJS_TEMPLATE_ID = "template_nqobiyk"; const EMAILJS_PUBLIC_KEY = "yIz7Yqdz3HkForXn7"; /* ============================================================ ICONS — minimal stroke-only set ============================================================ */ const Icon = ({ name, size = 24, stroke = 1.5 }) => { const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", }; const paths = { whistle: <>, activity: <>, compass: <>, arrowRight: <>, instagram: <>, check: <>, spinner: <>, x: <>, menu: <>, }; return {paths[name]}; }; /* ============================================================ REVEAL — IntersectionObserver-based fade/slide ============================================================ */ const Reveal = ({ children, delay = 0, y = 24, as: Tag = "div", className = "", style = {} }) => { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0, rootMargin: "0px 0px -10% 0px" } ); io.observe(el); return () => io.disconnect(); }, []); return ( {children} ); }; /* Stagger words in a heading */ const StaggerWords = ({ text, delay = 0, perWord = 90, className = "", style = {} }) => { const [shown, setShown] = useState(false); useEffect(() => { const t = setTimeout(() => setShown(true), delay); return () => clearTimeout(t); }, [delay]); return ( {text.split(" ").map((w, i) => ( {w} ))} ); }; /* ============================================================ GOLD HORIZON RULE ============================================================ */ const GoldRule = ({ width = 120, style = {} }) => (
); const Eyebrow = ({ children, style = {} }) => (
{children}
); /* ============================================================ NAV ============================================================ */ const Nav = ({ onCTA }) => { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onS = () => setScrolled(window.scrollY > 40); window.addEventListener("scroll", onS); return () => window.removeEventListener("scroll", onS); }, []); return (
AMERICAN UNITED F · C · ESTD · 2026
); }; /* ============================================================ GEOMETRIC EAGLE WING WIREFRAME — abstract, behind hero ============================================================ */ const WingWireframe = ({ side = "left", offset = 0 }) => { // Build a fan of lines emanating from a pivot const pivotX = side === "left" ? 100 : 700; const pivotY = 380; const lines = []; const count = 14; for (let i = 0; i < count; i++) { const t = i / (count - 1); const angleStart = side === "left" ? -160 : -20; const angleEnd = side === "left" ? -200 : 20; const a = (angleStart + (angleEnd - angleStart) * t) * Math.PI / 180; const len = 280 + Math.sin(t * Math.PI) * 120; const x2 = pivotX + Math.cos(a) * len; const y2 = pivotY + Math.sin(a) * len; lines.push({ x1: pivotX, y1: pivotY, x2, y2, opacity: 0.08 + Math.sin(t * Math.PI) * 0.18 }); } return ( {lines.map((l, i) => ( ))} ); }; /* ============================================================ HERO ============================================================ */ const Hero = ({ onCTA }) => { const [loaded, setLoaded] = useState(false); useEffect(() => { const t = setTimeout(() => setLoaded(true), 80); return () => clearTimeout(t); }, []); return (
{/* Backdrop layers */}
{/* Wing wireframes */}
{/* Dark radial glow behind eagle — blends it into the navy background */}
{/* Eagle image — center, low opacity watermark, behind text */} {/* Horizon line */}
{/* Center content */}
The Eagle Is Set To Soar

{" "}
{" "}

From North to South, flying under one crest.
The future of pro soccer development.

{ e.currentTarget.style.borderColor = "var(--gold)"; e.currentTarget.style.color = "var(--gold)"; }} onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--line-strong)"; e.currentTarget.style.color = "var(--bone-dim)"; }} > The Philosophy
{/* Bottom badges */}
EST · MMXXVI
UNITED STATES OF AMERICA
CHAPTER · 001
THE INITIATION
); }; /* ============================================================ MARQUEE STRIP ============================================================ */ const Marquee = () => { const items = ["DEVELOPMENT", "★", "DISCIPLINE", "★", "DOMINANCE", "★", "PATHWAY", "★", "PRECISION", "★", "PRIDE", "★"]; const repeated = [...items, ...items, ...items]; return (
{repeated.map((t, i) => ( {t} ))}
); }; /* ============================================================ PHILOSOPHY ============================================================ */ const Philosophy = () => { const pillars = [ { no: "01", icon: "whistle", title: "Elite Coaching", body: "World-class methodologies tailored for the modern American athlete. Imported standards, native instincts.", }, { no: "02", icon: "activity", title: "High Performance", body: "Data-driven development focusing on technical, tactical, and physical dominance — measured every session.", }, { no: "03", icon: "compass", title: "The Pathway", body: "Fostering character and skill to open doors — collegiate, professional, and beyond. The pitch is the prologue.", }, ]; return (
{/* Faint geometric grid */}
The Philosophy · 一

Beyond the Pitch.

We are not building a team. We are forging a generation of athletes — technically refined, mentally relentless, and prepared for every level the game demands.

{pillars.map((p, i) => ( ))}
); }; const PhilosophyCard = ({ no, icon, title, body, isLast }) => { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: "relative", padding: "56px 40px 64px", borderRight: isLast ? "none" : "1px solid var(--line)", background: hover ? "linear-gradient(180deg, rgba(212,175,55,0.05), transparent)" : "transparent", transition: "background .5s ease", minHeight: 380, display: "flex", flexDirection: "column", cursor: "default", }} > {/* Glow on hover */}
{no} / 03

{title}

{body}

); }; /* ============================================================ PATHWAY — secondary feature, vertical timeline ============================================================ */ const Pathway = () => { const stages = [ { age: "U-13 / U-14", phase: "Foundation", note: "Technical mastery, footwork architecture, athletic base." }, { age: "U-15 / U-16", phase: "Acceleration", note: "Tactical intelligence, position specialization, scouting exposure." }, { age: "U-17 / U-18", phase: "Selection", note: "Collegiate placement, professional trials, international invitations." }, ]; return (
The Pathway · 二

Three stages.
One destination.

A deliberate progression. No shortcuts, no detours. Each stage is engineered around the demands of the next — and the realities of the modern game.

{/* Vertical line */}
{stages.map((s, i) => (
{String(i + 1).padStart(2, "0")}
{s.age}

{s.phase}

{s.note}

))}
); }; /* ============================================================ TRYOUT FORM ============================================================ */ const TryoutForm = ({ scrollTargetRef }) => { const [form, setForm] = useState({ firstName: "", lastName: "", dob: "", email: "", currentClub: "", }); const [errors, setErrors] = useState({}); const [submitting, setSubmitting] = useState(false); const [submitted, setSubmitted] = useState(false); const [submitError, setSubmitError] = useState(false); const validate = () => { const e = {}; if (!form.firstName.trim()) e.firstName = "Required"; if (!form.lastName.trim()) e.lastName = "Required"; if (!form.dob.trim()) e.dob = "Required"; else if (!/^(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])\/(19|20)\d{2}$/.test(form.dob.trim())) e.dob = "Use MM/DD/YYYY"; if (!form.email.trim()) e.email = "Required"; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) e.email = "Invalid email"; return e; }; const submit = (ev) => { ev.preventDefault(); const e = validate(); setErrors(e); if (Object.keys(e).length) return; setSubmitting(true); setSubmitError(false); const templateParams = { player_name: form.firstName + " " + form.lastName, player_dob: form.dob, parent_email: form.email, player_level: form.currentClub || "N/A", reply_to: form.email, }; emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, templateParams, { publicKey: EMAILJS_PUBLIC_KEY }) .then(() => { setSubmitting(false); setSubmitted(true); }) .catch(() => { setSubmitting(false); setSubmitError(true); }); }; const setField = (k, v) => { setForm(f => ({ ...f, [k]: v })); if (errors[k]) setErrors(er => ({ ...er, [k]: undefined })); }; return (
{/* glow */}
The Initiation · 三

2026 Tryouts
Waitlist.

Spots are strictly limited. Register your interest below to receive exclusive updates on tryout dates, locations, and club news.

{/* corner ticks */} {[ { top: -1, left: -1, b: ["top", "left"] }, { top: -1, right: -1, b: ["top", "right"] }, { bottom: -1, left: -1, b: ["bottom", "left"] }, { bottom: -1, right: -1, b: ["bottom", "right"] }, ].map((c, i) => (
))} {!submitted ? (
setField("firstName", v)} error={errors.firstName} placeholder="" /> setField("lastName", v)} error={errors.lastName} placeholder="" />
setField("dob", v)} error={errors.dob} placeholder="MM/DD/YYYY" hint="Format: MM/DD/YYYY" /> setField("email", v)} error={errors.email} placeholder="parent@email.com" /> setField("currentClub", v)} placeholder="e.g. Local U-14 Premier" /> {submitError && (

Something went wrong. Please try again or contact us directly.

)}

By submitting, you agree to receive communications from American United F.C.
Your information will not be shared with third parties.

) : ( )}
); }; const Field = ({ label, id, value, onChange, error, placeholder, type = "text", optional, hint }) => { const [focus, setFocus] = useState(false); return (
onChange(e.target.value)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} placeholder={placeholder} aria-invalid={!!error} aria-label={label} style={{ width: "100%", padding: "14px 0", background: "transparent", border: "none", borderBottom: `1px solid ${error ? "#E07B7B" : focus ? "var(--gold)" : "var(--line-strong)"}`, color: "var(--bone)", fontFamily: "Inter, sans-serif", fontSize: 15, outline: "none", transition: "border-color .25s", }} /> {hint && !error && (
{hint}
)}
); }; const SuccessState = ({ player }) => (
REGISTRATION RECEIVED

Welcome to
the future.

{player ? `Thank you, ${player}'s family. ` : ""} You are on the waitlist. Tryout dates, locations, and selection details will arrive directly in your inbox in the coming weeks.

The eagle is watching.

); /* ============================================================ FOOTER ============================================================ */ const Footer = () => ( ); /* ============================================================ APP ============================================================ */ const App = () => { const formRef = useRef(null); const scrollToForm = () => { document.getElementById("tryouts")?.scrollIntoView({ behavior: "smooth", block: "start" }); }; // Smooth scroll for anchors useEffect(() => { const onClick = (e) => { const a = e.target.closest("a[href^='#']"); if (!a) return; const id = a.getAttribute("href").slice(1); if (!id) return; const el = document.getElementById(id); if (el) { e.preventDefault(); el.scrollIntoView({ behavior: "smooth", block: "start" }); } }; document.addEventListener("click", onClick); return () => document.removeEventListener("click", onClick); }, []); return (