/* G8well marketing site, landing page sections. Composes DS primitives. */ const DS = window.G8wellDesignSystem_2a45c3; const { Button, Badge, Card, Icon, IconButton } = DS; const { useState, useEffect } = React; /* Hero carousel images. Drop your generated photos into /assets with these names and they join the rotation automatically — missing files are skipped, so the hero always shows whatever is available. */ const HERO_IMAGES = [ { src: "assets/hero-4.png", alt: "A traveller mid-stretch in the G8well airport gym, wood-framed equipment and runway beyond" }, { src: "assets/hero-5.png", alt: "A guest resting in the sauna beside a cold plunge in the G8well recovery zone" }, { src: "assets/hero-3.png", alt: "A traveller resting in a private G8well nap pod, aircraft on the tarmac outside" }, { src: "assets/hero-2.png", alt: "Fresh cold-pressed juices poured at the G8well hydration bar, airside" }, { src: "assets/hero-1.png", alt: "A traveller reclining in a G8well lounge pod, planes on the tarmac beyond" }, { src: "assets/hero-7.png", alt: "A refreshed traveller leaving a G8well lounge for the gate at golden hour" }, ]; function HeroCarousel() { const [broken, setBroken] = useState({}); const slides = HERO_IMAGES.filter((im) => !broken[im.src]); const [i, setI] = useState(0); useEffect(() => { if (slides.length <= 1) return undefined; const t = setInterval(() => setI((n) => (n + 1) % slides.length), 4500); return () => clearInterval(t); }, [slides.length]); const cur = slides.length ? i % slides.length : 0; return (
{HERO_IMAGES.map((im) => { const active = slides[cur] && slides[cur].src === im.src; return ( {im.alt} setBroken((b) => (b[im.src] ? b : { ...b, [im.src]: true }))} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: active ? 1 : 0, transition: "opacity 900ms var(--ease-out)" }} /> ); })} {slides.length > 1 ? (
{slides.map((_, n) => (
) : null}
); } function Eyebrow({ children, dark }) { return
{children}
; } function Placeholder({ label, style }) { return (
{label}
); } const SERVICES = [ { name: "Movement", icon: "activity", desc: "A full gym plus guided stretch and mobility studios to undo hours in a seat." }, { name: "Recovery", icon: "waves", desc: "Massage, compression therapy and sauna between flights." }, { name: "Sleep", icon: "moon", desc: "Private nap pods engineered for a 40-minute deep reset." }, { name: "Cold", icon: "snowflake", desc: "Cold plunge and contrast therapy to reset circulation." }, { name: "Hydrate", icon: "droplet", desc: "A functional bar built around what long-haul takes out of you." }, { name: "Refresh", icon: "bath", desc: "Showers and change rooms so you land ready, not rumpled." }, ]; const STEPS = [ { n: "01", icon: "calendar", title: "Book around your flight", body: "Tell us your itinerary. We time a reset into your layover, gate to gate." }, { n: "02", icon: "qr-code", title: "Scan in, airside", body: "Your pass opens any G8well space inside the terminal. No detour landside." }, { n: "03", icon: "sparkles", title: "Reset, then fly", body: "Move, recover, refresh. Your AI trainer adapts the plan to how you feel." }, ]; function Nav() { return ( ); } function Hero() { return (
The world's first airport wellness ecosystem

Arrive better
than you left.

A premium space inside the airport where travellers move, recover and refresh, so you step off your next flight feeling human.

{[["20 min", "average reset"], ["Airside", "inside security"], ["Gate-to-gate", "timed to your flight"]].map(([n, l]) => (
{n}
{l}
))}
); } function Category() { return (
A new category

Not a gym. Not a spa.
A new wellness category.

The pre-flight and post-flight wellness reset. Built for the way the body actually travels, not for a membership you visit twice a year.

); } function Services() { return (
Six ways to reset

Everything the body loses
in the air, given back.

{SERVICES.map((s) => (

{s.name}

{s.desc}

 ))}
); } /* ---------- App store badges (custom-drawn, "coming soon") ---------- */ function AppleMark({ size = 20 }) { return ( ); } function PlayMark({ size = 20 }) { return ( ); } function StoreBadge({ mark, top, bottom }) { return ( e.preventDefault()} title="Coming soon" style={{ display: "inline-flex", alignItems: "center", gap: 11, background: "var(--carbon-900)", color: "var(--ivory-100)", borderRadius: 12, padding: "10px 18px", textDecoration: "none", position: "relative", boxShadow: "var(--shadow-sm)" }}> {mark} {top} {bottom} Soon ); } /* ---------- App showcase — live, scrollable app inside a phone ---------- */ function AppShowcase() { const SCREEN_W = 300, SCREEN_H = 640; const SCALE = SCREEN_W / 390; // render the app at its native 390px width, scaled to the screen const features = [ ["plane", "Books itself around your flight", "Add your itinerary; the app times a reset into your layover."], ["sparkles", "An AI trainer that adapts", "A plan built around how far you've flown and how you feel."], ["qr-code", "One pass, every terminal", "Scan in airside — gate to gate, no detour landside."], ]; return (
{/* soft sage glow behind the device */}
The G8well app

Your reset,
in your pocket.

Book a session, carry your pass, and let the AI trainer plan every layover. Try it right here — scroll and tap through the real app.

{features.map(([icon, title, body]) => (
{title}
{body}
))}
} top="Download on the" bottom="App Store" /> } top="Get it on" bottom="Google Play" />
{/* Device — the live app runs inside, scrollable. The bezel's content box is sized to the screen so the black frame stays symmetric. */}