// HelloReader site components — uses tokens from assets/tokens.css // Phone frames fork the ReadMe UI kit (Cover, FolderTabs, SearchPill, HeroBanner, etc.) const { useState, useEffect, useRef } = React; // ----- Confetti squares motif (decorative, sparse) ----- function ConfettiSquares({ seed = 1, count = 14, style = {} }) { // Deterministic pseudo-random const rand = (n) => { const x = Math.sin(seed * 9301 + n * 49297) * 233280; return x - Math.floor(x); }; const squares = Array.from({ length: count }, (_, i) => { const size = 8 + rand(i) * 18; const filled = rand(i + 100) > 0.45; const yellow = rand(i + 200) > 0.3; return { size, top: rand(i + 1) * 100, left: rand(i + 2) * 100, rot: rand(i + 3) * 45 - 22, filled, color: yellow ? "#FED605" : "#FFE96B", }; }); return (
{squares.map((s, i) => (
))}
); } // ----- Logo ----- function Logo({ size = 28 }) { return (
HelloReader
); } // ----- Language switcher ----- function LangSwitcher({ lang, onChange }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []); const langs = [ { code: "en", short: "EN", label: "English" }, { code: "zh", short: "中", label: "中文" }, { code: "vi", short: "VN", label: "Tiếng Việt" }, { code: "th", short: "TH", label: "ภาษาไทย" }, { code: "id", short: "ID", label: "Indonesia" }, ]; const cur = langs.find(l => l.code === lang); return (
{open && (
{langs.map(l => ( ))}
)}
); } // ----- Top nav ----- function TopNav({ lang, setLang, t }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const h = () => setScrolled(window.scrollY > 20); h(); window.addEventListener("scroll", h, { passive: true }); return () => window.removeEventListener("scroll", h); }, []); useEffect(() => { // Prevent body scroll when mobile menu is open document.body.style.overflow = menuOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); const links = [ { href: "#about", label: t.nav.about }, { href: "#product", label: t.nav.product }, { href: "#content", label: t.nav.content }, { href: "#partners", label: t.nav.partners }, { href: "#contact", label: t.nav.contact }, ]; return ( ); } // ----- Animated counter ----- function Counter({ to, suffix = "", duration = 1800, prefix = "" }) { const [v, setV] = useState(0); const ref = useRef(null); const started = useRef(false); useEffect(() => { const run = () => { if (started.current) return; started.current = true; const start = performance.now(); const tick = (now) => { const p = Math.min(1, (now - start) / duration); // easeOutQuart const eased = 1 - Math.pow(1 - p, 4); setV(to * eased); if (p < 1) requestAnimationFrame(tick); else setV(to); // guarantee exact final value }; requestAnimationFrame(tick); }; const obs = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) run(); }); }, { threshold: 0.15 }); if (ref.current) obs.observe(ref.current); // Fallback: if the observer never fires (layout quirks, fast scroll, // language switch re-mount), still settle on the final value. const fallback = setTimeout(run, 2500); return () => { obs.disconnect(); clearTimeout(fallback); }; }, [to, duration]); let display; if (to >= 1000000) display = (v / 1000000).toFixed(v === to ? 1 : 1) + "M"; else if (to >= 1000) display = Math.round(v / 1000) + "K"; else if (to % 1 !== 0) display = v.toFixed(1); else display = Math.round(v).toString(); return {prefix}{display}{suffix}; } // ----- Hero stats ----- function StatBlock({ value, label }) { return (
{value}
{label}
); } // ----- Section wrapper ----- function Section({ id, children, style = {}, screenLabel }) { return (
{children}
); } function Eyebrow({ children, color = "#FF7A1A" }) { return (
{children}
); } // ----- Phone frame wrapping forked ReadMe screens ----- function PhoneFrame({ children, label, tilt = 0, scale = 1 }) { return (
{/* notch */}
9:41
{children}
{label}
); } // ----- Mini ReadMe screens for the phone frames ----- // We scale down the full screens to fit nicely function MiniDiscover({ t }) { return (
{}} />
); } function MiniLibrary({ t }) { return (
{t.product.phoneLabel2}
Reading
47 mins today
OPEN SVIP
Sign in daily for rewards
); } function MiniReader({ t }) { return (
Chapter 12 · The Ballroom 36%

She turned the page. The ballroom lights caught on Lucien's cufflinks — gold, like everything else he owned.

"You came," he said, and there was no trace of surprise in his voice.

Jenny smoothed the hem of her borrowed gown. The silk felt cold against her palms.

"I didn't come for you."

"No?" He stepped closer, and the chandelier caught fire in his eyes.

¥
Next chapter locked
Borrow for free today!
); } // Real Play Store marketing shot — already includes phone framing + brand chrome. function RealShot({ src, label, tilt = 0 }) { return (
{label}
{label}
); } Object.assign(window, { ConfettiSquares, Logo, LangSwitcher, TopNav, Counter, StatBlock, Section, Eyebrow, PhoneFrame, RealShot, MiniDiscover, MiniLibrary, MiniReader, });