// Those Days — homepage. Full-bleed cover + serious editorial sections. // Sections: I Those Days · II Intro · III What we do · IV Who we are · V Contact. function BarcelonaMark() { return (
Barcelona 41.39° N · 2.16° E
); } const Homepage = () => { const root = React.useRef(null); const { brand, intro, whatWeDo, founders, contact } = window.SITE; useScrollReveals(root); // Toggle .over-cover on the root while the dark cover is still in view, // so the sticky nav switches to paper-on-dark only over the hero. React.useEffect(() => { const el = root.current; if (!el) return; const onScroll = () => { const threshold = window.innerHeight - 80; // approx nav height el.classList.toggle('over-cover', window.scrollY < threshold); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); // Team carousel — prev/next buttons + click-and-drag panning React.useEffect(() => { const rail = document.querySelector('.team-rail'); if (!rail) return; const card = rail.querySelector('article'); const step = () => (card ? card.getBoundingClientRect().width + 28 : 360); const prev = document.querySelector('[data-team-nav="prev"]'); const next = document.querySelector('[data-team-nav="next"]'); const onPrev = () => rail.scrollBy({ left: -step(), behavior: 'smooth' }); const onNext = () => rail.scrollBy({ left: step(), behavior: 'smooth' }); prev && prev.addEventListener('click', onPrev); next && next.addEventListener('click', onNext); // Pointer drag-to-scroll let isDown = false, startX = 0, startScroll = 0, moved = 0; const onDown = (e) => { if (e.target.closest('a,button')) return; isDown = true; moved = 0; startX = e.clientX; startScroll = rail.scrollLeft; rail.classList.add('is-dragging'); rail.setPointerCapture && rail.setPointerCapture(e.pointerId); }; const onMove = (e) => { if (!isDown) return; const dx = e.clientX - startX; moved = Math.max(moved, Math.abs(dx)); rail.scrollLeft = startScroll - dx; }; const onUp = () => { isDown = false; rail.classList.remove('is-dragging'); }; rail.addEventListener('pointerdown', onDown); rail.addEventListener('pointermove', onMove); rail.addEventListener('pointerup', onUp); rail.addEventListener('pointercancel', onUp); rail.addEventListener('pointerleave', onUp); // Swallow clicks that happen at the end of a drag so links don't fire const onClickCapture = (e) => { if (moved > 6) { e.preventDefault(); e.stopPropagation(); } }; rail.addEventListener('click', onClickCapture, true); return () => { prev && prev.removeEventListener('click', onPrev); next && next.removeEventListener('click', onNext); rail.removeEventListener('pointerdown', onDown); rail.removeEventListener('pointermove', onMove); rail.removeEventListener('pointerup', onUp); rail.removeEventListener('pointercancel', onUp); rail.removeEventListener('pointerleave', onUp); rail.removeEventListener('click', onClickCapture, true); }; }, []); const indicatorItems = [ { id: 'cover-story', label: 'I · Those Days' }, { id: 'what-we-do', label: 'II · What we do' }, { id: 'we-work-with', label: 'III · We work with' }, { id: 'founders', label: 'IV · Our team' }, { id: 'contact', label: 'V · Contact' }, ]; // Real partner / client logos + a few placeholders to fill the grid. // All marks are forced to black via `filter: brightness(0)` for a unified look. const logos = [ { name: 'A Day\u2019s March', src: 'assets/partners/a-days-march.png', maxH: 26 }, { name: 'Drumelia Real Estate', src: 'assets/partners/drumelia.png', maxH: 104 }, { name: 'Moyagi', src: 'assets/partners/moyagi.png', maxH: 38 }, { name: 'Warner Music', src: 'assets/partners/warner.webp', maxH: 90 }, { name: 'Dorchester Collection', src: 'assets/partners/dorchester.png', maxH: 96 }, { name: 'Vanbruun', src: 'assets/partners/vanbruun.png', maxH: 32 }, { name: 'Universal Music Group', src: 'assets/partners/universal.png', maxH: 100 }, { name: 'Alo', src: 'assets/partners/alo.png', maxH: 58 }, { name: '\u2014', placeholder: true }, ]; return (
{/* ========== NAV (transparent over cover) ========== */} {/* ========== COVER — full viewport ========== */}
{/* Animated placeholder until a real video file is provided */}
{/* ========== I — THOSE DAYS (cover-story + intro merged) ========== */}
Those Days I · Intro

For brands and artists shaping culture.

{/* Manifesto-as-heading — full-width, light weight for editorial calm */}

{intro.body[1]}

{intro.body[0]}

{intro.body[2]}

{brand.ctas.map((c) => ( {c.label} {c.primary ? '↗' : '→'} ))}
{/* ========== III · WHAT WE DO ========== */}
What we do

Two units, one roof.

{whatWeDo.pods.map((pod, i) => (

{pod.name}

{pod.lede}
))}
{/* ========== IV — WE WORK WITH ========== */}
Partners

Clients & partners.

A selection of clients we've worked with.

{logos.map((l, i) => (
{ if (l.placeholder) return; e.currentTarget.style.opacity = 1; e.currentTarget.style.background = TD.paperWarm; }} onMouseLeave={(e) => { if (l.placeholder) return; e.currentTarget.style.opacity = 0.62; e.currentTarget.style.background = 'transparent'; }} > {l.placeholder ? ( Coming soon ) : ( {l.name} )}
))}
{/* ========== V — OUR TEAM ========== */}
Our team
Drag or scroll

{founders.heading}

{ if (el) window.__teamRail = el; }} className="team-rail reveal" style={{ display: 'flex', gap: 28, justifyContent: 'flex-start', maxWidth: 1352, margin: '0 auto', overflowX: 'auto', scrollSnapType: 'x mandatory', padding: '0 56px 24px', scrollPaddingLeft: 56, scrollbarWidth: 'thin', }} > {founders.people.map((f, i) => ( ))} {/* trailing flex spacer so the last card can snap-align flush */}
{/* ========== VI — CONTACT ========== */}
Contact

Let’s talk.

{brand.city}
{brand.socials.map((s) => ( {s} ))}
{/* ========== FOOTER ========== */}
); }; window.Homepage = Homepage; window.LayoutA = Homepage;