feat: rebuild marketing site with full component suite and preview

marketing-site/lib/useReveal.js

@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+
+/**
+ * Scroll-reveal for elements with the `.reveal` class.
+ * Above-the-fold content should NOT use `.reveal` (it must be visible instantly);
+ * this is for sections below the fold. A failsafe guarantees nothing stays hidden.
+ */
+export default function useReveal() {
+  useEffect(() => {
+    const els = document.querySelectorAll(".reveal");
+    if (!("IntersectionObserver" in window)) {
+      els.forEach((el) => el.classList.add("in"));
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            e.target.classList.add("in");
+            io.unobserve(e.target);
+          }
+        });
+      },
+      { rootMargin: "0px 0px -8% 0px", threshold: 0.08 }
+    );
+    els.forEach((el) => io.observe(el));
+    const failsafe = setTimeout(
+      () => els.forEach((el) => el.classList.add("in")),
+      1600
+    );
+    return () => {
+      io.disconnect();
+      clearTimeout(failsafe);
+    };
+  }, []);
+}