); } /* hexagon save-glyph chip used as a decorative motif */ function HexMark({ size = 40, fill = "var(--sh-honey)", glyph = true }) { return ( {glyph && } ); } /* ----------------------------------------------------------------- * * Top navigation * ----------------------------------------------------------------- */ const NAV_LINKS = [ { label: "Services", href: "services.html" }, { label: "Work", href: "case-study.html" }, { label: "About", href: "index.html#approach" }, { label: "Journal", href: "index.html#faq" }, ]; function Nav({ active = "" }) { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (

{open && (

{NAV_LINKS.map((l) => ( {l.label} ))} Sign in

)}

); } /* ----------------------------------------------------------------- * * Logo marquee (warm-white trust band) * ----------------------------------------------------------------- */ function WordmarkLogo({ children }) { return ( {children} ); } function Marquee({ items, label }) { const row = [...items, ...items]; return (

{label && (

{label}

)}

{row.map((it, i) => {it})}

); } /* ----------------------------------------------------------------- * * CTA band (reused across pages) * ----------------------------------------------------------------- */ function CTABand({ kicker = "Ready when you are", title = "Let’s build your hive.", body = "Tell us what you want to grow. We’ll send back a sharp, honest plan within two working days — no pitch theatre.", primary = "Start a project", href = "contact.html" }) { return (

{kicker}

{title}

{body}

You won’t be charged yet.

); } /* ----------------------------------------------------------------- * * Footer * ----------------------------------------------------------------- */ const FOOTER_COLS = [ { head: "Studio", links: ["Services", "Our work", "About the hive", "Journal", "Careers"] }, { head: "Capabilities", links: ["Brand & identity", "Performance marketing", "Web & product", "Content & SEO", "Social & creative"] }, { head: "Company", links: ["Contact", "Partnerships", "Press kit", "Privacy", "Terms"] }, ]; function Footer() { return ( ); } /* shared responsive + animation CSS injected once */ function injectSharedCSS() { if (document.getElementById("sh-shared-css")) return; const s = document.createElement("style"); s.id = "sh-shared-css"; s.textContent = ` @keyframes sh-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .sh-marquee-track { animation: sh-marquee-scroll 32s linear infinite; } .sh-marquee:hover .sh-marquee-track { animation-play-state: paused; } @keyframes sh-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .sh-reveal { opacity: 0; } .sh-reveal.sh-in { animation: sh-rise 640ms cubic-bezier(.16,.84,.44,1) forwards; } @media (prefers-reduced-motion: reduce) { .sh-marquee-track { animation: none; } .sh-reveal, .sh-reveal.sh-in { opacity: 1 !important; animation: none !important; } } @media (max-width: 900px) { .sh-nav-links { display: none !important; } .sh-nav-login { display: none !important; } .sh-nav-burger { display: inline-flex !important; } .sh-footer-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 560px) { .sh-footer-grid { grid-template-columns: 1fr !important; } } `; document.head.appendChild(s); } /* scroll-reveal: add .sh-in when .sh-reveal enters viewport */ function useScrollReveal() { React.useEffect(() => { const els = document.querySelectorAll(".sh-reveal"); if (!("IntersectionObserver" in window)) { els.forEach((e) => e.classList.add("sh-in")); return; } const io = new IntersectionObserver((entries) => { entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("sh-in"); io.unobserve(en.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }); els.forEach((e) => io.observe(e)); return () => io.disconnect(); }); } Object.assign(window, { DS, Icon, Container, Eyebrow, Honeycomb, HexMark, Nav, Marquee, WordmarkLogo, CTABand, Footer, injectSharedCSS, useScrollReveal, });