// Case card + Work / Services / Sprint / Contact views const VW_NS = window.DeckhausDesignSystem_ca5964; function CaseCard({ c, onClick }) { const { Badge } = VW_NS; return ( { e.preventDefault(); (onClick || (() => window.DH_NAV("work")))(); }} className="dh-card dh-card--interactive dh-card--flush" style={{ display: "block", textDecoration: "none" }}>
{c.fig ? Fig. {c.fig} : null}
{c.status ? {c.status} : null} {c.client}
{c.kind} {c.year}

{c.title}

{c.blurb}

 ); } function PageHead({ eyebrow, title, sub }) { const { Eyebrow } = VW_NS; return (
{eyebrow}

{title}

{sub ?

{sub}

: null}
); } function PitchMosaic({ slides, tone, hover }) { const tiltRef = React.useRef(null); const onMove = (e) => { const el = tiltRef.current; if (!el) return; if (!(window.matchMedia && window.matchMedia("(pointer:fine)").matches)) return; const r = el.getBoundingClientRect(); const rx = ((e.clientY - r.top) / r.height - 0.5) * -8; const ry = ((e.clientX - r.left) / r.width - 0.5) * 10; el.style.transform = `rotateX(${(hover ? 4 : 14) + rx}deg) rotateZ(${hover ? 0 : -10}deg) rotateY(${ry}deg) scale(${hover ? 1.02 : 1})`; }; const reset = () => { const el = tiltRef.current; if (el) el.style.transform = ""; }; const pool = slides.concat(slides).slice(0, 9); return (
{pool.map((img, k) => (
))}
); } function RotateThumb({ imgs, hover }) { const [i, setI] = React.useState(0); React.useEffect(() => { if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const t = setInterval(() => setI(p => (p + 1) % imgs.length), 2600); return () => clearInterval(t); }, [imgs.length]); return (
{imgs.map((img, k) => ( ))}
{imgs.map((img, k) => ( ))}
); } function CaseRow({ c, i, onOpen }) { const { Button } = VW_NS; const flip = i % 2 === 1; const [hover, setHover] = React.useState(false); return (
{/* visual */} { e.preventDefault(); onOpen(); }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ order: flip ? 2 : 1, display: "block", textDecoration: "none" }}>
{c.deck || c.mosaic ? ( ) : c.rotate ? ( ) : c.img ? ( {c.client ) : (
)} {c.deck || c.mosaic ? {/* text */}
{String(i + 1).padStart(2, "0")} · {c.sector} {c.year}

{c.client} — {c.title}

{c.blurb}

); } function WorkView() { const { Button } = VW_NS; const cases = window.DH_DATA.cases; return (
{cases.map((c, i) => window.DH_NAV("case", c.slug)} />)}

More work shared on request — under NDA until launch.

); } // Mini rotating cover reel — a slim horizontal capsule; pieces are cropped (Slidor-style) function WinReel({ imgs, pos }) { const [i, setI] = React.useState(0); React.useEffect(() => { if (!imgs || imgs.length < 2) return; if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const t = setInterval(() => setI(p => (p + 1) % imgs.length), 1500); return () => clearInterval(t); }, [imgs]); return (
{(imgs || []).map((src, k) => ( ))}
); } function PillarRow({ l, i, includes, benefit }) { const ref = React.useRef(null); const glowRef = React.useRef(null); const onMove = (e) => { const el = ref.current, g = glowRef.current; if (!el || !g) return; if (!(window.matchMedia && window.matchMedia("(pointer:fine)").matches)) return; const r = el.getBoundingClientRect(); g.style.setProperty("--gx", (e.clientX - r.left) + "px"); g.style.setProperty("--gy", (e.clientY - r.top) + "px"); }; const enter = () => { const el = ref.current, g = glowRef.current; if (g) g.style.opacity = "1"; if (el) el.style.borderTopColor = "var(--lime-500)"; }; const leave = () => { const el = ref.current, g = glowRef.current; if (g) g.style.opacity = "0"; if (el) el.style.borderTopColor = "var(--border-default)"; }; // mini "window" preview — a rotating reel of real sample pieces per pillar const preview = { "Strategic Presentations": { tag: "Pitch deck", label: "Presentation covers", pos: "center", imgs: ["assets/work/covers/paris-masters.png", "assets/work/covers/michelin.png", "assets/work/covers/tedx.png", "assets/work/covers/moncler.png", "assets/work/covers/rolex-daytona.png", "assets/work/covers/preventive.png"] }, "Content Systems": { tag: "Content system", label: "Content pieces", pos: "center top", imgs: ["assets/work/content-systems/mango.png", "assets/work/content-systems/on.png", "assets/work/content-systems/rolex.png"] }, "Brand Experiences": { tag: "Event", label: "Event moments", pos: "center", imgs: ["assets/work/lacoste/ev-photocall.png", "assets/work/lacoste/ev-cocktail2.png", "assets/work/lacoste/merch.png", "assets/work/lacoste/ev-stage.png", "assets/work/lacoste/badges.png", "assets/work/lacoste/moodboard.png"] }, }; const pv = preview[l.title] || preview["Strategic Presentations"]; return (
); } function ServicesView() { const { Eyebrow, Button } = VW_NS; const D = window.DH_DATA; // The 8 detailed offerings, mapped under the 3 strategic pillars const includes = { "Strategic Presentations": ["Sales & pitch decks", "Executive presentations", "Corporate reports", "PowerPoint template systems"], "Content Systems": ["LinkedIn carousels", "Campaign & social templates", "Monthly visual production", "Reusable content libraries"], "Brand Experiences": ["Visual identities", "Launches & activations", "Event & screen design", "Digital brand moments"], }; const pillarLine = { "Strategic Presentations": "Win the room.", "Content Systems": "Stay unmistakable.", "Brand Experiences": "Own the moment.", }; // Hero triptych — one art-directed panel per scale const PresPanel = () => (