feat: rebuild landing experience, content and analytics

app/components/cinematic/useHomeFragmentNavigation.ts

@@ -28,20 +28,47 @@ export function useHomeFragmentNavigation() {
     // A history restoration owns its saved position, not the URL's old fragment.
     let pending =
       navigation?.type === "back_forward" ? "" : window.location.hash;
+    let pendingTop =
+      navigation?.type !== "back_forward" && !window.location.hash;
+    if (navigation?.type !== "back_forward")
+      window.history.scrollRestoration = "manual";
 
     const resolve = () => {
-      if (!ready.current || !pending) return;
+      if (!ready.current) return;
+      if (pendingTop) {
+        pendingTop = false;
+        if (!window.location.hash)
+          window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+      }
+      if (!pending) return;
       const hash = pending;
       pending = "";
       if (hash !== window.location.hash) return;
       const target = fragmentTarget(hash);
       if (!target) return;
       focusFragment(target);
-      target.scrollIntoView({ block: "start", behavior: "instant" });
+      const padding =
+        Number.parseFloat(
+          getComputedStyle(document.documentElement).scrollPaddingTop,
+        ) || 0;
+      const margin =
+        Number.parseFloat(getComputedStyle(target).scrollMarginTop) || 0;
+      window.scrollTo({
+        top: Math.max(
+          0,
+          window.scrollY +
+            target.getBoundingClientRect().top -
+            padding -
+            margin,
+        ),
+        left: 0,
+        behavior: "instant",
+      });
     };
 
     const cancelArrival = () => {
       pending = "";
+      pendingTop = false;
     };
     const onKeyDown = (event: KeyboardEvent) => {
       if (
@@ -88,11 +115,13 @@ export function useHomeFragmentNavigation() {
         return;
       const target = fragmentTarget(url.hash);
       if (!target) return;
+      pendingTop = false;
       pending = ready.current ? "" : url.hash;
       // Capture before a mobile menu removes its activated link. Do not cancel navigation.
       focusFragment(target);
     };
     const onHashChange = () => {
+      pendingTop = false;
       if (pending && pending !== window.location.hash) cancelArrival();
       if (!ready.current) return;
       const target = fragmentTarget(window.location.hash);
@@ -109,6 +138,7 @@ export function useHomeFragmentNavigation() {
     window.addEventListener("pointerdown", cancelArrival, { passive: true });
     return () => {
       resolveArrival.current = null;
+      window.history.scrollRestoration = "auto";
       document.removeEventListener("click", onClick, true);
       window.removeEventListener("hashchange", onHashChange);
       window.removeEventListener("wheel", cancelArrival);