feat(docs): add custom landing page with scroll-driven demos

Replace the "land directly in the docs" experience with a dedicated
marketing landing page at `/` that sells the package and demonstrates
the library on the page itself.

The concept is "the page observes itself": every section is instrumented
with the real library, so scrolling is the demo. A live Observer HUD and
hero instrument report the active section, intersectionRatio, and
impression count as you scroll, all driven by real useInView/useOnInView.

Sections, each showing a real use-case:
- Hero with copyable install (npm/pnpm/yarn/bun) and a live instrument
- Reveal band: cards animate in on scroll (useInView + triggerOnce)
- Three-APIs scrollspy: sticky code panel follows the in-view API;
  cards are also click-to-pin, with scroll reclaiming control
- Impression strip: tiles fire once via useOnInView into a live counter
- Playground: reuses the existing ObserverDemo island
- Closing CTA + footer

Built on Blume custom pages (pages/index.astro + PageLayout). Progressive
enhancement throughout: content is fully visible with no JS, for crawlers,
and under prefers-reduced-motion; the hidden-until-seen state is applied
only by the observer after hydration. Motion uses transform/opacity.

Routing: docs/index.mdx moves to docs/overview.mdx (/overview). The Docs
tab keeps path "/" with href "/overview", preserving every existing
/api, /guides, /testing URL, the sidebar, and tab highlighting; only the
landing takes "/". logo.text is set to "" so the default PageLayout logo
no longer prints the site title beside the mark.

Verified: biome clean, design detector no findings, typecheck 0 errors,
production build (112 pages) with the landing and /overview prerendered;
checked desktop + mobile in light and dark.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: thebuilder

apps/docs/blume.config.ts

@@ -8,6 +8,9 @@ export default defineConfig({
     "A lightweight React implementation of the Intersection Observer API.",
   logo: {
     image: "/logo-horizontal.svg",
+    // The horizontal mark already carries the wordmark, so hide the extra text
+    // label the header would otherwise render beside it (empty string = hidden).
+    text: "",
   },
   analytics: {
     vercel: true,
@@ -31,7 +34,7 @@ export default defineConfig({
   },
   navigation: {
     tabs: [
-      { label: "Docs", path: "/" },
+      { label: "Docs", path: "/", href: "/overview" },
       { label: "Changelog", path: "/changelog", href: "/changelog" },
     ],
   },

apps/docs/docs/index.mdx apps/docs/docs/overview.mdxapps/docs/docs/index.mdx renamed to apps/docs/docs/overview.mdx

@@ -17,7 +17,7 @@ function LiveObserverDemo() {
     root,
     threshold,
   });
-  const ratio = entry?.intersectionRatio.toFixed(2) ?? "—";
+  const ratio = entry?.intersectionRatio.toFixed(2) ?? "n/a";
 
   return (
     <section