// ChaiShai marketing site — uses real app screenshots inside iPhone frames. const { useState, useEffect, useRef } = React; /* ============================================================ useMobile — single source of truth for breakpoint behavior ============================================================ */ function useMobile(breakpoint = 820) { const [isMobile, setIsMobile] = useState(() => typeof window !== "undefined" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches ); useEffect(() => { const mq = window.matchMedia(`(max-width: ${breakpoint}px)`); const onChange = e => setIsMobile(e.matches); setIsMobile(mq.matches); if (mq.addEventListener) mq.addEventListener("change", onChange); else mq.addListener(onChange); return () => { if (mq.removeEventListener) mq.removeEventListener("change", onChange); else mq.removeListener(onChange); }; }, [breakpoint]); return isMobile; } /* ============================================================ IPHONE SHELL — displays a real screenshot ============================================================ */ function IPhoneShell({ src, alt = "", scale = 1, className = "", showIsland = true }) { // base 360x780 const W = 360, H = 780; return (
{/* outer bezel */}
{/* rim highlight */}
{/* screen */}
{src ? ( {alt} ) : null} {/* dynamic island floating overlay */} {showIsland && (
)}
); } /* ============================================================ ICONS ============================================================ */ function ChaiCupIcon({ size = 16, color = "currentColor" }) { return ( ); } function AppleGlyph({ size = 16, color = "currentColor" }) { return ( ); } /* ============================================================ REVEAL ON SCROLL ============================================================ */ function Reveal({ children, className = "", stagger = false, as: As = "div", ...rest }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { el.classList.add("in"); io.unobserve(el); } }); }, { threshold: 0.15, rootMargin: "0px 0px -8% 0px" }); io.observe(el); return () => io.disconnect(); }, []); return {children}; } /* ============================================================ NAV ============================================================ */ function Nav() { const isMobile = useMobile(); return (
Chai Shai
); } function BrandMark({ size = 24 }) { // gradient pink→coral circle with cup return (
); } /* ============================================================ HERO ============================================================ */ function Hero() { const isMobile = useMobile(); return (

Your story starts
over a cup of chai.

Swipe less. Sit across from more. A match score, the days they’re free, and one tap to say Let’s Chai—the rest happens at a real table.

Launching Soon See how it works ›
); } function Heart() { return ( ); } function FloatingChip({ children, side = "left", top = "30%", delay = 0 }) { const ref = useRef(null); useEffect(() => { const t = setTimeout(() => ref.current?.classList.add("in"), delay); return () => clearTimeout(t); }, [delay]); const horizontal = side === "left" ? { left: "calc(50% - 280px)" } : { right: "calc(50% - 280px)" }; return (
{children}
); } /* ============================================================ HIGHLIGHTS ============================================================ */ function Highlights() { const items = [ { kicker: "01", stat: "Meet, don’t just match.", label: "A path to chai, not another lost thread." }, { kicker: "02", stat: "Resonant introductions.", label: "Profiles shaped by values and how you love." }, { kicker: "03", stat: "Room to be yourself.", label: "Privacy and respect built into every step." }, ]; return (
{items.map((h) => (
{h.kicker}
{h.stat}

{h.label}

))}
); } /* ============================================================ PINNED SCROLL SHOWCASE ============================================================ */ function PinnedShowcase() { const sectionRef = useRef(null); const [activeIdx, setActiveIdx] = useState(0); const isMobile = useMobile(); const features = [ { eyebrow: "Discovery", title: "Built to decide.", body: "Every profile is big, bold, and beautifully clean. A real percentage Match, the days they’re free for chai, and the interests you share—everything you need to choose. Let’s Chai, or pass. No retries.", bullets: [ "Big, bold profiles", "Percentage Match · Days available · Shared interests", "Chai or pass. No undo.", ], src: "uploads/Discovery.PNG", }, { eyebrow: "Matches", title: "Your yeses, together.", body: "When you both tap Let’s Chai, you match. Matches lives in one calm list—your people, ready when you are, with a gentle Meet-or-Lose timer keeping the spark from going stale.", bullets: [ "Mutual Let’s Chai = a match", "One list, no clutter", "A timer that respects the moment", ], src: "uploads/matches.PNG", }, { eyebrow: "Chats", title: "Every chat, on the clock.", body: "Your conversations live in one clean, beautifully organized inbox. Each thread carries the time you have left before the match expires—so you always know what to open first, and when to make the plan.", bullets: [ "Organized and beautifully clean", "Time remaining on every match", "Always know what’s next", ], src: "uploads/chats.PNG", }, { eyebrow: "Ghost Court", title: "Closure, by design.", body: "When a chat goes quiet, Ghost Court privately asks the other person what happened—and shares their answer with you. One tap to file. One time per chat. Never public. Never scored. Just a kinder way to ask.", bullets: [ "One-tap to file", "Private and one-time", "Never public, never scored", ], src: "uploads/Ghost_Court.PNG", }, { eyebrow: "Verdict", title: "Their answer, on a card.", body: "They have 72 hours to reply. Their words come back to you on a single verdict card. If they don’t reply, the silence itself becomes the answer—and you get to move on with grace.", bullets: [ "72-hour response window", "Their words, your closure", "Closure either way", ], src: "uploads/Ghost_Court_Verdict.PNG", }, { eyebrow: "Meet or Lose", title: "Seven days to chai.", body: "Every match comes with a seven-day countdown—by design. Long enough for a real conversation. Short enough to keep things from drifting into forever-chat. Make a plan, or set the slot free for someone who will.", bullets: [ "7-day countdown on every match", "Long enough for a real conversation", "Short enough to stay honest", ], src: "uploads/Expired_chat.PNG", }, { eyebrow: "Chai Dates", title: "From spark to plan.", body: "Pick a time you’re both free. Pick a café near you both. Confirm in a tap. The date lands on your Chai Dates so you arrive with butterflies, not doubt.", bullets: [ "Times you’re both free", "Cafés near you both", "Confirm in a tap", ], src: "uploads/calendar.png", }, ]; useEffect(() => { if (isMobile) return; // mobile uses a stacked layout — no scroll tracking const section = sectionRef.current; if (!section) return; const onScroll = () => { const rect = section.getBoundingClientRect(); const total = section.offsetHeight - window.innerHeight; const progress = Math.min(1, Math.max(0, -rect.top / total)); const idx = Math.min(features.length - 1, Math.floor(progress * features.length)); setActiveIdx(idx); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [isMobile]); /* -------- Mobile layout: single column, phone inline with each step -------- */ if (isMobile) { return (
{features.map((f, i) => (

{f.title}

{f.body}

    {f.bullets.map(b => (
  • {b}
    • ))}
))}
); } /* -------- Desktop layout: sticky phone, scroll-tied step changes -------- */ return (
{/* sticky iPhone */}
{features.map((f, i) => (
))}
{/* steps */}
{features.map((f, i) => (

{f.title}

{f.body}

    {f.bullets.map(b => (
  • {b}
    • ))}
))}
); } /* ============================================================ ONBOARDING BAND (dark, with hero login screen) ============================================================ */ function OnboardingBand() { return (

Getting started

When the vibe is right,
you just know.

Sign up in a tap. Tell us how you love, what a great first meeting looks like, and a few things you’re into. We’ll bring you people worth your time.

{[ { n: "30s", l: "to create your profile" }, { n: "3 prompts", l: "that actually go deep" }, { n: "Zero", l: "ads in your feed, ever" }, ].map(s => (
{s.n}
{s.l}
))}
); } /* ============================================================ PERKS GRID ============================================================ */ function PerksGrid() { const isMobile = useMobile(); const perks = [ { t: "Bold by design.", d: "Beautifully clean, beautifully bold. The app gets out of your way so you can show up as yourself.", k: "bold" }, { t: "7 days. Make them count.", d: "Every match carries a seven-day timer—by design. Long enough for a real conversation. Short enough to stay honest.", k: "clock" }, { t: "Plans, in the chat.", d: "Pick a time, pick a café, confirm—without ever leaving the conversation.", k: "schedule" }, { t: "Ghosting, with a reply.", d: "Ghost Court privately asks the other side what happened. One tap. One time per chat.", k: "ghost" }, { t: "A calendar made for chai.",d: "Every confirmed date lands in the app. No more juggling your iPhone calendar.", k: "calendar" }, { t: "Verified. For free.", d: "Identity verification is built in, and it doesn’t cost a thing. Show up sure.", k: "verify" }, ]; const icon = (k) => { const stroke = { fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" }; switch (k) { case "bold": return ; case "clock": return ; case "schedule": return ; case "ghost": return ; case "calendar": return ; case "verify": return ; default: return null; } }; return (

Good vibes, better matches,
best chai.

{perks.map((p) => (
{icon(p.k)}
{p.t}

{p.d}

))}
); } /* ============================================================ STORIES BAND ============================================================ */ function StoriesBand() { return (

Stories worth telling

The best chapters start with the first sip.

The second cup, the long walk after, the “see you Friday.” When you find yours, we’d love to celebrate you — and inspire the next brave hello.

); } /* ============================================================ DOWNLOAD BAND ============================================================ */ function DownloadBand() { const isMobile = useMobile(); return (

Your next chai date is one tap away.

); } /* ============================================================ FOOTER ============================================================ */ function Footer() { return ( ); } /* ============================================================ PRICING — one price, every feature, no tiers ============================================================ */ function PriceCard({ name, term, was, savings, after, featured = false }) { return (
{featured && (
Best value
)}
{name}
{term}
{was} Free
Launch promo — limited
{savings && (
{savings}
)}
{after}
); } function Pricing() { const isMobile = useMobile(); return (

One price. Every feature.
No tiers.

No Plus, no Premium, no Gold. No paywalled swipes, no boosts to buy. One membership unlocks everything Chai Shai does — the same for everyone.

Everything included. No tiers, ever.

No special features locked behind an upgrade. Every member gets the full Chai Shai experience — and every feature we ship next — at no extra cost.

{[ "Ghost Court", "Chai Dates", "7-day Meet-or-Lose timer", "Identity verification", "In-app date calendar", "Match scoring", "All future updates", ].map(c => ( {c} ))}
); } /* ============================================================ APP ============================================================ */ function App() { return ( <>