Build the AI Growth Technologies homepage

Dark cinematic redesign: animated globe hero, stats, interactive capabilities engine, proprietary technology visuals, AI discovery, attribution journey, connections manifesto, CTA and footer. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-08 15:44:57 -04:00
parent 62539b2929
commit 5134fbfb73
17 changed files with 3242 additions and 98 deletions
@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Logo from "./logo";
+import { navLinks } from "@/content/home";
+
+export default function SiteHeader() {
+  const [scrolled, setScrolled] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    let lastY = window.scrollY;
+    const onScroll = () => {
+      const y = window.scrollY;
+      setScrolled(y > 24);
+      setHidden(y > 480 && y > lastY + 4);
+      if (y < lastY - 4 || y < 480) setHidden(false);
+      lastY = y;
+    };
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : "";
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  const classes = ["site-header", scrolled || open ? "is-scrolled" : "", hidden && !open ? "is-hidden" : ""]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <>
+      <header className={classes}>
+        <div className="wrap bar">
+          <Logo />
+          <nav className="nav" aria-label="Primary">
+            {navLinks.map((l) => (
+              <a key={l.href} href={l.href}>
+                {l.label}
+              </a>
+            ))}
+          </nav>
+          <a href="#contact" className="btn btn-solid header-cta">
+            Book a Strategy Call <span className="arrow">→</span>
+          </a>
+          <button
+            type="button"
+            className="menu-toggle"
+            aria-expanded={open}
+            aria-controls="mobile-menu"
+            aria-label={open ? "Close menu" : "Open menu"}
+            onClick={() => setOpen((v) => !v)}
+          >
+            <span />
+            <span />
+          </button>
+        </div>
+      </header>
+      <div id="mobile-menu" className={`mobile-menu${open ? " is-open" : ""}`} aria-hidden={!open}>
+        <ul>
+          {navLinks.map((l) => (
+            <li key={l.href}>
+              <a href={l.href} onClick={() => setOpen(false)} tabIndex={open ? 0 : -1}>
+                {l.label} <span aria-hidden="true">→</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+        <a
+          href="#contact"
+          className="btn btn-solid"
+          onClick={() => setOpen(false)}
+          tabIndex={open ? 0 : -1}
+        >
+          Book a Strategy Call <span className="arrow">→</span>
+        </a>
+      </div>
+    </>
+  );
+}