// Home page — full of sections like a slide deck const { useEffect: useEffectH, useState: useStateH, useRef: useRefH } = React; function HomePage() { const { t } = useLang(); const { setRoute } = useRoute(); const h = t.home; return (
); } // ───────────────────────── HERO ───────────────────────── // Helper: split text into per-character spans with staggered animation. function KineticLine({ text, baseDelay = 0, perChar = 28, className = "", style = {} }) { const words = text.split(" "); let charIndex = 0; return ( {words.map((word, wordIndex) => ( {word.split("").map((ch) => { const delay = baseDelay + charIndex * perChar; charIndex += 1; return ( {ch} ); })} {wordIndex < words.length - 1 ?   : null} ))} ); } // Helper: rotating word that cycles through a list, with in/out animation. function RotatingWord({ words, interval = 2800, className = "", style = {} }) { const [idx, setIdx] = useStateH(0); const [phase, setPhase] = useStateH("in"); // "in" -> "out" -> swap -> "in" useEffectH(() => { let outTimer, swapTimer; const loop = setInterval(() => { setPhase("out"); outTimer = setTimeout(() => { setIdx(i => (i + 1) % words.length); setPhase("in"); }, 420); }, interval); return () => { clearInterval(loop); clearTimeout(outTimer); clearTimeout(swapTimer); }; }, [words.length, interval]); return ( {words[idx]} ); } function HeroSection() { const { t, lang } = useLang(); const { setRoute } = useRoute(); const h = t.home; const [pointer, setPointer] = useStateH({ x: 0, y: 0 }); const handleMove = (event) => { const rect = event.currentTarget.getBoundingClientRect(); const x = ((event.clientX - rect.left) / rect.width - 0.5) * 12; const y = ((event.clientY - rect.top) / rect.height - 0.5) * 8; setPointer({ x, y }); }; return (
setPointer({ x: 0, y: 0 })} style={{ position: "relative", minHeight: "94svh", background: "var(--graphite)", color: "var(--ivory)", overflow: "hidden", "--mx": `${pointer.x}px`, "--my": `${pointer.y}px`, }} >
EW / VG / STRATEGY SYSTEM {new Date().getFullYear()}
{h.eyebrow}

{h.heroSub}

{h.heroDesc}
{h.heroMeta.map((item, i) => (
{item}
))}
{t.cta.scroll}
); } function HeroIntro() { return (
Eastwest Vanguard
); } function WhySection() { const { t } = useLang(); const h = t.home; return (
{/* Right-edge gilded landscape decoration — more visible */}
{/* Subtle gold accent dot pattern at top */}
{h.whySection}

{h.whyTitle}

{h.whyDesc}
{h.whyItems.map((it, i) => ( ))}
); } function WhyRow({ item, last }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "grid", gridTemplateColumns: "auto 1fr 1.4fr auto", gap: 48, padding: "36px 0", borderBottom: last ? "none" : "1px solid var(--line)", alignItems: "baseline", cursor: "pointer", transition: "background 200ms, margin-left 200ms", background: hover ? "rgba(201,162,74,0.04)" : "transparent", marginLeft: hover ? 12 : 0, }}>
{item.n}

{item.t}

{item.d}

→
); } // ───────────────────────── SERVICES ───────────────────────── function ServicesSection() { const { t } = useLang(); const { setRoute } = useRoute(); const h = t.home; const parRef = useParallax(18); return (
{/* Cross-sea bridge silhouette — narrow band in the clean bottom area, never under cards/text */}
{/* Warm corner glow (east) */}
{/* Cool corner glow (west) */}
{h.servicesSection}

{h.servicesTitle}

{h.servicesDesc}
{h.services.map((svc, i) => ( ))}
); } function ServiceCard({ svc, idx }) { const { t } = useLang(); const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ padding: "48px 44px", background: hover ? "rgba(110,131,125,0.12)" : "rgba(26,32,36,0.94)", transition: "background 240ms, transform 240ms", transform: hover ? "translateY(-2px)" : "translateY(0)", minHeight: 320, display: "flex", flexDirection: "column", }}>
0{idx} / 04
{hover ? `${t.cta.engage} →` : ""}

{svc.k}

); } // ───────────────────────── ADVANTAGE ───────────────────────── function AdvantageSection() { const { t, lang } = useLang(); const h = t.home; return (
{/* Modern ink wash — subtle full-section texture */}
{/* Decorative giant numeral */}
4
{h.advSection}

{lang === "zh" ? ( 我们的 独特
优势。 ) : ( Our unique
advantage. )}

{h.advLead}

{h.advItems.map((item, i) => (
0{i + 1}
{item}
))}

"{h.advFoot}"
); } // ───────────────────────── IMPACT ───────────────────────── function ImpactSection() { const { t } = useLang(); const h = t.home; const parRef = useParallax(34); return (
{/* Distant night-market lantern photograph as base atmosphere */}
{/* Auspicious clouds at top */}
{/* Lighter navy tint — let warmth come through */}
{/* Lantern dots — kept on top of imagery for sparkle */}
{Array.from({ length: 30 }).map((_, i) => { const x = (i * 137) % 100; const y = (i * 73) % 100; const s = 1 + ((i * 17) % 3); return
; })}
{h.impactSection}

{h.impactTitle}

{h.impactDesc}
{h.impactStats.map((s, i) => (
{s.l}
 ))}
); } // ───────────────────────── CASE STUDIES ───────────────────────── function CaseSection() { const { t } = useLang(); const { setRoute } = useRoute(); const h = t.home; return (
{h.caseSection}

{h.caseTitle}

{h.caseDesc}
{h.cases.map((c, i) => ( ))}
); } function CaseCard({ c, idx }) { const [hover, setHover] = useState(false); // Real photo per case + tonal gradient overlay for color rhythm const images = [ { img: "uploads/ewv-case-restaurant-luxury.jpg", tint: "linear-gradient(180deg, rgba(17,22,26,0.02) 0%, rgba(17,22,26,0.36) 100%)" }, { img: "uploads/ewv-case-retail-luxury.jpg", tint: "linear-gradient(180deg, rgba(17,22,26,0.04) 0%, rgba(110,131,125,0.32) 100%)" }, { img: "uploads/ewv-case-culture-luxury.jpg", tint: "linear-gradient(180deg, rgba(17,22,26,0.02) 0%, rgba(124,70,64,0.28) 100%)" }, { img: "uploads/ewv-case-forum-luxury.jpg", tint: "linear-gradient(180deg, rgba(17,22,26,0.04) 0%, rgba(17,22,26,0.34) 100%)" }, ]; const visual = images[idx % images.length]; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ border: "1px solid var(--line)", background: "var(--paper)", transition: "transform 220ms, box-shadow 220ms", transform: hover ? "translateY(-6px)" : "translateY(0)", boxShadow: hover ? "0 24px 40px -20px rgba(10,24,48,0.22)" : "none", cursor: "pointer", overflow: "hidden", }}> {/* Visual */}
{c.tag}
0{idx + 1}
{/* Body */}

{c.t}

{c.r}
→
); } // ───────────────────────── CTA ───────────────────────── function CTASection() { const { t } = useLang(); const { setRoute } = useRoute(); const h = t.home; const parRef = useParallax(30); return (
{/* Conference / negotiation photo — root of the "closing" experience */}
{/* Lighter navy gradient — let conference image show through */}
{/* Decorative east/west glow split */}

{h.ctaTitle.map((line, i) => (
{line}
))}

{h.ctaSub}
); } Object.assign(window, { HomePage, });