feat(web): hero redesign — cycling step rotator + full-width video section

Restructures the landing page above-the-fold into two distinct sections:

1. **Hero — left copy + cycling tile, no static stack of three blocks**
   New `<HeroStepRotator>` (Framer Motion client component) shows ONE
   tile centred in the column, cycling prompt.txt → build.log →
   claude_desktop_config.json every 3.5s. Auto-advance pauses on hover
   and exposes a 3-dot tablist so users can jump to any step. The active
   dot grows wide with an accent glow.

   Mouse interaction: spring-smoothed 3D tilt on rotateX/rotateY plus a
   radial glow that translates toward the cursor — both driven by motion
   values, so the transforms stay on the GPU compositor instead of
   re-rendering on every mousemove. `useReducedMotion()` strips the
   tilt + glow translation and collapses the page transition to an
   instant cross-fade (the rotation itself still advances — it's content,
   not decoration).

   Hero padding tightened (py-12/14/16 vs py-14/20/28) so the video
   section below is teased above the fold. New scroll cue ("see it run"
   + animated chevron) sits at the bottom of the hero, anchored to
   #flow.

2. **Flow video — full-width edge-to-edge under the hero (new section)**
   The hero.mp4 / hero.webm pair moves out of the "How it works"
   section into its own #flow section. No max-w wrapper — it spans the
   viewport with `w-full aspect-video`, so on a 1080p monitor the video
   gets the full 1920px width. Adds a subtle radial vignette so the
   black edges blend into the page chrome.

3. **"How it works" — now lean**
   Video removed (it's the flow section now). Just the three textual
   cards as supporting copy.

Adds `framer-motion@11.18.2` to apps/web/package.json. Build passes
typecheck + Next.js production build with no new warnings; LCP path is
untouched since the rotator is client-hydrated after first paint and
Framer Motion is tree-shaken to the components we import.

Note: visitors with `prefers-reduced-motion: reduce` will still see the
video's poster instead of autoplay — Chrome blocks the network fetch
entirely for autoplay media when reduced-motion is set. The flow video
remains visible for the rest, and the step rotator continues to cycle
its content (with instant cross-fade instead of slide+scale).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/components/hero-step-rotator.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import {
+  AnimatePresence,
+  motion,
+  useMotionValue,
+  useReducedMotion,
+  useSpring,
+  useTransform,
+} from 'framer-motion';
+import { useEffect, useRef, useState } from 'react';
+
+interface Step {
+  label: string; // file-name badge top-left
+  badge: string; // "01 · Describe" badge top-right
+  code: string;
+}
+
+const STEPS: Step[] = [
+  {
+    label: 'prompt.txt',
+    badge: '01 · Describe',
+    code: `Create an MCP server that searches our Notion workspace.
+Tools: search_pages, get_page_content.
+Auth: NOTION_API_KEY.`,
+  },
+  {
+    label: 'build.log',
+    badge: '02 · Generate',
+    code: `> Generating spec...               OK  (2 tools)
+> Static checks                    OK
+> Building image bmm-mcp-notion    OK  17.2s
+> Deploying container              OK
+> Live at https://notion-x9.mcp.buildmymcpserver.com
+> First request: 401 → token → 200 OK`,
+  },
+  {
+    label: 'claude_desktop_config.json',
+    badge: '03 · Connect',
+    code: `{
+  "mcpServers": {
+    "notion": {
+      "url": "https://notion-x9.mcp.buildmymcpserver.com/mcp",
+      "auth": "oauth2"
+    }
+  }
+}`,
+  },
+];
+
+const AUTO_MS = 3500;
+
+/**
+ * Hero step rotator — single centered tile cycling through three states.
+ *
+ * Replaces the old static stack of three code blocks. Auto-advances every
+ * 3.5s, pauses on hover, jumps instantly when the user clicks a dot.
+ *
+ * Mouse interaction: the tile reacts with a subtle 3D tilt driven by spring-
+ * smoothed motion values, plus a radial glow that translates toward the
+ * cursor. Both are disabled when `prefers-reduced-motion: reduce` is set —
+ * the rotation is content-essential and still advances, but the transition
+ * collapses to an instant cross-fade and the tilt/glow are stripped out.
+ */
+export function HeroStepRotator() {
+  const [step, setStep] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const reduced = useReducedMotion();
+
+  // Mouse motion values for tilt + glow translation. `mx` and `my` are
+  // raw cursor offsets (-1..1); the `*Spring` versions add the smoothing
+  // so the tilt doesn't jitter on every mousemove event.
+  const mx = useMotionValue(0);
+  const my = useMotionValue(0);
+  const mxSpring = useSpring(mx, { damping: 22, stiffness: 200 });
+  const mySpring = useSpring(my, { damping: 22, stiffness: 200 });
+  const rotateX = useTransform(mySpring, [-1, 1], reduced ? [0, 0] : [6, -6]);
+  const rotateY = useTransform(mxSpring, [-1, 1], reduced ? [0, 0] : [-8, 8]);
+  // Glow translates rather than re-rendering background-position — keeps
+  // it on the GPU compositor instead of pegging the main thread.
+  const glowDx = useTransform(mxSpring, [-1, 1], reduced ? [0, 0] : [-140, 140]);
+  const glowDy = useTransform(mySpring, [-1, 1], reduced ? [0, 0] : [-110, 110]);
+
+  useEffect(() => {
+    if (paused) return;
+    const t = setTimeout(() => setStep((s) => (s + 1) % STEPS.length), AUTO_MS);
+    return () => clearTimeout(t);
+  }, [step, paused]);
+
+  function onMove(e: React.MouseEvent<HTMLDivElement>) {
+    const r = containerRef.current?.getBoundingClientRect();
+    if (!r) return;
+    const x = Math.max(-1, Math.min(1, ((e.clientX - r.left) / r.width) * 2 - 1));
+    const y = Math.max(-1, Math.min(1, ((e.clientY - r.top) / r.height) * 2 - 1));
+    mx.set(x);
+    my.set(y);
+  }
+  function onEnter() {
+    setPaused(true);
+  }
+  function onLeave() {
+    setPaused(false);
+    mx.set(0);
+    my.set(0);
+  }
+
+  const current = STEPS[step]!;
+
+  return (
+    <div className="flex flex-col items-center gap-5">
+      <div
+        ref={containerRef}
+        className="relative w-full max-w-md"
+        style={{ perspective: 1200 }}
+        onMouseEnter={onEnter}
+        onMouseLeave={onLeave}
+        onMouseMove={onMove}
+      >
+        <AnimatePresence mode="wait" initial={false}>
+          <motion.div
+            key={step}
+            initial={reduced ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: 12 }}
+            animate={reduced ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 }}
+            exit={reduced ? { opacity: 0 } : { opacity: 0, scale: 0.97, y: -8 }}
+            transition={{ duration: reduced ? 0.15 : 0.5, ease: [0.16, 1, 0.3, 1] }}
+            style={{ rotateX, rotateY, transformStyle: 'preserve-3d' }}
+            className="relative overflow-hidden rounded-lg border border-[--color-border-strong] bg-[--color-bg-elevated] shadow-2xl shadow-black/50"
+          >
+            {/* Cursor-following glow — sits behind the content, additive. */}
+            <motion.div
+              aria-hidden
+              className="pointer-events-none absolute inset-0"
+              style={{
+                background:
+                  'radial-gradient(circle 260px at center, rgba(99,102,241,0.32), transparent 70%)',
+                x: glowDx,
+                y: glowDy,
+              }}
+            />
+            <div className="relative flex items-center justify-between border-b border-[--color-border] px-4 py-2.5">
+              <span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
+                {current.label}
+              </span>
+              <span className="mono text-[10.5px] tracking-[0.16em] text-[--color-accent]">
+                {current.badge}
+              </span>
+            </div>
+            <pre className="mono relative overflow-x-auto px-4 py-4 text-[12.5px] leading-relaxed text-[--color-fg]">
+              <code>{current.code}</code>
+            </pre>
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      {/* Step indicator — accent dot is wider + glows so the active step
+          reads at a glance. Buttons stay clickable so users can jump. */}
+      <div className="flex items-center gap-2" role="tablist" aria-label="Hero flow steps">
+        {STEPS.map((s, i) => (
+          <button
+            key={s.badge}
+            type="button"
+            role="tab"
+            aria-selected={i === step}
+            aria-label={`Jump to ${s.badge}`}
+            onClick={() => setStep(i)}
+            className={`h-1.5 rounded-full transition-all duration-300 ${
+              i === step
+                ? 'w-9 bg-[--color-accent] shadow-[0_0_10px_rgba(99,102,241,0.65)]'
+                : 'w-1.5 bg-[--color-border-strong] hover:bg-[--color-fg-subtle]'
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}