const { useState: _useState1, useEffect: _useEffect1, useRef: _useRef1 } = React; // ─── HERO ───────────────────────────────────────────────────────────────── function Hero() { const { t } = useLang(); const h = t('hero'); const [vis, setVis] = _useState1(false); _useEffect1(() => { setTimeout(() => setVis(true), 80); }, []); const fi = delay => ({ opacity: vis ? 1 : 0, transform: vis ? 'translateY(0)' : 'translateY(22px)', transition: `opacity 0.7s ease ${delay}ms, transform 0.7s ease ${delay}ms` }); return (

{h.titleLine1} {h.titleAccent}

{h.subtitlePre}{h.subtitleStrong}{h.subtitlePost}

{h.ctaPrimary} {h.ctaSecondary}

{h.microcopy}

{/* Product Showcase Cluster */}
{/* Website mockup — back, large, slightly rotated */}
{/* Square Instagram — front-left */}
{/* Portrait story — front-right */}
); } // ─── 2. WHAT WE BUILD ───────────────────────────────────────────────────── function WhatWeBuild() { const { t } = useLang(); const wb = t('whatWeBuild'); const [ref, inView] = useInView(0.1); const meta = [ { zone: 'whatwebuild-website', aspect: 'website', image: 'assets/cappas-website.png', link: 'https://cappaslandscaping.com' }, { zone: 'whatwebuild-square', aspect: '1:1', image: 'assets/landscaping-services.png' }, { zone: 'whatwebuild-portrait', aspect: '9:16', image: 'assets/landscaping-social-post.png' }, ]; const cards = wb.cards.map((c, i) => ({ ...c, ...meta[i] })); return (
{wb.eyebrow}

{wb.title}

{wb.subtitle}

{wb.realClientWork}
{cards.map((c, i) => (
{c.link ? ( {c.aspect === 'website' ? : } ) : ( c.aspect === 'website' ? : )}

{c.title}

{c.body}

))}
); } // ─── VALUE BADGES ───────────────────────────────────────────────────────── function ValueBadges() { const { t } = useLang(); const vb = t('valueBadges'); const [ref, inView] = useInView(0.1); return (
{vb.items.map((label, i) => (
{label}
))}
); } // ─── TESTIMONIALS ───────────────────────────────────────────────────────── function Testimonials() { const { t } = useLang(); const ts = t('testimonials'); const [ref, inView] = useInView(0.1); const loop = [...ts.items, ...ts.items]; return (
{ts.eyebrow}

{ts.title}

{ts.subtitle}

{loop.map((item, i) => (
{Array.from({ length: 5 }).map((_, j) => ( ))}

"{item.quote}"

{item.name.split(' ').map(w => w[0]).join('').slice(0, 2)}
{item.name}
{item.role}
))}
); } window.Hero = Hero; window.WhatWeBuild = WhatWeBuild; window.ValueBadges = ValueBadges; window.Testimonials = Testimonials;