// Home page const { useState, useEffect, useRef } = React; function Hero() { const { t } = useI18n(); return ( {/* Background video — YouTube */} {/* content */} — {t.home.heroEyebrow} {t.home.heroTitleA} {t.home.heroTitleB} {t.home.heroTitleC} {t.home.heroSub} {t.home.heroCta1} → {t.home.heroCta2} {t.home.heroScroll} ); } function MetricsStrip() { const { t } = useI18n(); return ( {t.home.metrics.map((m, i) => ( {m.k} {m.v} ))} ); } function Manifesto() { const { t } = useI18n(); return ( {t.home.manifestoEyebrow} {t.home.manifestoTitle} {t.home.manifestoBody} {t.home.manifestoCols.map((c, i) => ( 0{i+1} {c.h} {c.b} ))} ); } function ServicesTeaser() { const { t } = useI18n(); const teaser = t.services.items.slice(0, 8); return ( {t.home.servicesEyebrow} {t.home.servicesTitle} {teaser.map((s, i) => ( {s.tag} {s.t} {s.d} → ))} {t.home.servicesView} → ); } function FeaturedWork() { const { t } = useI18n(); const items = t.projects.items.slice(0, 4); return ( {t.home.featuredEyebrow} {t.home.featuredTitle} {t.home.featuredSub} {items.map((p, i) => { const spans = [ { col: '1 / span 7', aspect: '4/3' }, { col: '8 / span 5', aspect: '3/4' }, { col: '1 / span 5', aspect: '3/4' }, { col: '6 / span 7', aspect: '4/3' }, ][i]; return ( {p.img ? : } {p.loc} · {p.year} {p.t} ); })} {t.home.featuredAll} → ); } function Process() { const { t } = useI18n(); return ( {t.home.processEyebrow} {t.home.processTitle} {t.home.processSteps.map((s, i) => ( { e.currentTarget.style.background = 'var(--kdc-navy-900)'; e.currentTarget.style.color = 'var(--bone-50)'; }} onMouseLeave={e => { e.currentTarget.style.background = 'var(--surface)'; e.currentTarget.style.color = ''; }} > {s.n} {s.h} {s.b} ))} ); } function BigCta() { const { t } = useI18n(); return ( — {t.home.ctaEyebrow} {t.home.ctaTitle} {t.home.ctaSub} {t.home.ctaBtn} → {t.home.ctaCall} ); } function Home() { return ( ); } // styling for service rows const homeStyles = document.createElement('style'); homeStyles.textContent = ` .service-row { display: grid; grid-template-columns: 80px 1fr 2fr 40px; gap: 32px; padding: clamp(20px, 2.4vw, 32px) 0; align-items: baseline; border-bottom: 1px solid var(--line); color: var(--ink); transition: background var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease); } .service-row:hover { padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; background: var(--bg-alt); } .service-row-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-3); } .service-row-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.4vw, 38px); letter-spacing: -0.01em; line-height: 1.1; } .service-row-desc { color: var(--ink-2); font-size: 15px; line-height: 1.5; } .service-row-arr { font-family: var(--font-mono); font-size: 16px; color: var(--ink-3); transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .service-row:hover .service-row-arr { transform: translateX(6px); color: var(--ink); } .proj-card { display: block; color: var(--ink); overflow: hidden; } .proj-card-img { overflow: hidden; position: relative; } .proj-card-img > * { transition: transform var(--dur-slow) var(--ease); } .proj-card:hover .proj-card-img > * { transform: scale(1.04); } .proj-card-meta { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 0; } .proj-card-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -0.01em; } @media (max-width: 880px) { .service-row { grid-template-columns: 60px 1fr 20px; } .service-row-desc { display: none; } .proj-card[style*="grid-column"] { grid-column: 1 / -1 !important; } } `; document.head.appendChild(homeStyles); ReactDOM.createRoot(document.getElementById('root')).render();
{t.home.heroSub}
{t.home.manifestoBody}
{t.home.featuredSub}
{t.home.ctaSub}