feat(web): teach staged rollout with scroll-triggered motion on homepage

apps/web/src/components/solutions/RolloutIllustration.astro

@@ -1,42 +1,326 @@
 ---
-const { class: className, ...props } = Astro.props
+interface Props {
+  class?: string
+  animated?: boolean
+}
+
+const { class: className, animated = false, ...props } = Astro.props
+
+const viewBox = animated ? '0 0 600 440' : '0 0 600 400'
+const cardHeight = animated ? 360 : 320
+const connectorEndY = animated ? 300 : 290
+const qaY = 80
+const betaY = animated ? 165 : 170
+const productionY = animated ? 250 : 260
 ---
-<svg viewBox="0 0 600 400" fill="none" xmlns="http://www.w3.org/2000/svg" class:list={["w-full h-auto drop-shadow-2xl", className]} {...props}>
-  <!-- Main Container -->
-  <rect x="40" y="40" width="520" height="320" rx="12" class="fill-gray-900 stroke-gray-700" stroke-width="2"/>
-
-  <!-- Connection Line -->
-  <path d="M100 110 V290" stroke="currentColor" stroke-width="2" stroke-dasharray="8 8" class="text-gray-600 opacity-50"/>
-
-  <!-- Stage 1: QA -->
-  <g transform="translate(80, 80)">
-    <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-green-500" stroke-width="2"/>
-    <path d="M12 20l6 6 12-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"/>
-    <text x="60" y="25" class="fill-gray-300 font-bold text-sm">Internal QA</text>
-    <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"/>
-    <rect x="250" y="15" width="100" height="8" rx="4" class="fill-green-500"/>
-    <text x="370" y="24" class="fill-green-500 text-xs font-mono">100%</text>
-  </g>
-
-  <!-- Stage 2: Beta -->
-  <g transform="translate(80, 170)">
-    <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-blue-500" stroke-width="2"/>
-    <path d="M12 20l6 6 12-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-blue-500"/>
-    <text x="60" y="25" class="fill-gray-300 font-bold text-sm">Beta Users</text>
-    <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"/>
-    <rect x="250" y="15" width="100" height="8" rx="4" class="fill-blue-500"/>
-    <text x="370" y="24" class="fill-blue-500 text-xs font-mono">100%</text>
-  </g>
-
-  <!-- Stage 3: Production -->
-  <g transform="translate(80, 260)">
-    <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-amber-500" stroke-width="2"/>
-    <circle cx="20" cy="20" r="8" class="fill-amber-500 animate-pulse"/>
-    <text x="60" y="25" class="fill-white font-bold text-sm">Production</text>
-    <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"/>
-    <rect x="250" y="15" width="25" height="8" rx="4" class="fill-amber-500"/>
-    <text x="370" y="24" class="fill-amber-500 text-xs font-mono">25%</text>
-  </g>
-
-</svg>
 
+<div class:list={['rollout-illustration', animated && 'rollout-illustration--animated']} data-rollout-illustration={animated ? 'true' : undefined}>
+  {
+    animated && (
+      <p class="sr-only" aria-live="polite" aria-atomic="true" data-rollout-status>
+        Progressive rollout illustration ready.
+      </p>
+    )
+  }
+
+  <svg viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" class:list={['h-auto w-full drop-shadow-2xl', className]} {...props} aria-hidden="true">
+    <rect x="40" y="40" width="520" height={cardHeight} rx="12" class="fill-gray-900 stroke-gray-700" stroke-width="2"></rect>
+
+    <path d={`M100 110 V${connectorEndY}`} stroke="currentColor" stroke-width="2" stroke-dasharray="8 8" class="text-gray-600 opacity-50"></path>
+
+    <!-- Stage 1: QA -->
+    <g transform={`translate(80, ${qaY})`}>
+      <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-green-500" stroke-width="2"></circle>
+      <path d="M12 20l6 6 12-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"></path>
+      <text x="60" y="25" class="fill-gray-300 text-sm font-bold">Internal QA</text>
+      <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"></rect>
+      <rect x="250" y="15" width="100" height="8" rx="4" class="fill-green-500"></rect>
+      <text x="360" y="24" class="fill-green-500 font-mono text-xs">100%</text>
+    </g>
+
+    <!-- Stage 2: Beta -->
+    <g transform={`translate(80, ${betaY})`}>
+      <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-blue-500" stroke-width="2"></circle>
+      <path d="M12 20l6 6 12-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-blue-500"></path>
+      <text x="60" y="25" class="fill-gray-300 text-sm font-bold">Beta Users</text>
+      <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"></rect>
+      <rect x="250" y="15" width="100" height="8" rx="4" class="fill-blue-500"></rect>
+      <text x="360" y="24" class="fill-blue-500 font-mono text-xs">100%</text>
+    </g>
+
+    <!-- Stage 3: Production -->
+    <g transform={`translate(80, ${productionY})`}>
+      <circle cx="20" cy="20" r="20" class="rollout-prod-icon-pending fill-gray-800 stroke-amber-500" stroke-width="2"></circle>
+      <circle cx="20" cy="20" r="8" class="rollout-prod-pulse fill-amber-500"></circle>
+      <g class="rollout-prod-icon-done" opacity="0">
+        <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-green-500" stroke-width="2"></circle>
+        <path d="M12 20l6 6 12-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"></path>
+      </g>
+      <text x="60" y="25" class="fill-white text-sm font-bold">Production</text>
+      <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"></rect>
+      <rect x="250" y="15" height="8" rx="4" class="rollout-prod-bar fill-amber-500" style={animated ? 'width: 10px' : 'width: 25px'}></rect>
+      <text x="360" y="24" class="rollout-prod-label fill-amber-500 font-mono text-xs">{animated ? '10%' : '25%'}</text>
+    </g>
+
+    <!-- Device cohort grid -->
+    {
+      animated && (
+        <g class="rollout-device-grid" transform="translate(80, 332)">
+          {Array.from({ length: 32 }).map((_, index) => (
+            <circle
+              cx={(index % 8) * 14 + 6}
+              cy={Math.floor(index / 8) * 14 + 6}
+              r="4"
+              class="rollout-device-dot"
+              style="fill:#1f2937;stroke:#374151"
+              data-device-index={index}
+              stroke-width="1"
+            />
+          ))}
+        </g>
+      )
+    }
+
+    <!-- Health signal -->
+    {
+      animated && (
+        <g class="rollout-health" transform="translate(248, 328)" opacity="0">
+          <rect x="0" y="0" width="132" height="40" rx="8" class="fill-green-500/10 stroke-green-500/40" stroke-width="1" />
+          <circle cx="16" cy="20" r="8" class="fill-green-500/20" />
+          <path d="M12 20l3 3 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-400" />
+          <text x="32" y="18" class="fill-green-400 text-[10px] font-semibold">
+            Crash-free
+          </text>
+          <text x="32" y="31" class="fill-green-400/90 text-[10px]">
+            Ready to expand
+          </text>
+        </g>
+      )
+    }
+
+    <!-- Rollback ready badge -->
+    {
+      animated && (
+        <g class="rollout-rollback" transform="translate(408, 56)" opacity="0">
+          <rect x="0" y="0" width="108" height="26" rx="6" class="fill-blue-500/10 stroke-blue-400/30" stroke-width="1" />
+          <text x="10" y="17" class="fill-blue-300 text-[10px] font-semibold">
+            Rollback ready
+          </text>
+        </g>
+      )
+    }
+  </svg>
+</div>
+
+<style>
+  .rollout-illustration--animated .rollout-prod-bar {
+    transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .rollout-illustration--animated .rollout-health,
+  .rollout-illustration--animated .rollout-rollback,
+  .rollout-illustration--animated .rollout-prod-icon-done {
+    transition: opacity 350ms ease;
+  }
+
+  .rollout-illustration--animated .rollout-device-dot {
+    transition:
+      fill 300ms ease,
+      stroke 300ms ease;
+  }
+
+  .rollout-illustration--animated.is-complete .rollout-prod-pulse,
+  .rollout-illustration--animated.is-complete .rollout-prod-icon-pending {
+    opacity: 0;
+  }
+
+  .rollout-illustration--animated.is-complete .rollout-prod-icon-done {
+    opacity: 1;
+  }
+
+  .rollout-illustration--animated.is-reduced .rollout-prod-bar {
+    width: 100px !important;
+    transition: none;
+  }
+
+  .rollout-illustration--animated.is-reduced .rollout-prod-label {
+    fill: #22c55e;
+  }
+
+  .rollout-illustration--animated.is-reduced .rollout-prod-label.fill-amber-500 {
+    fill: #22c55e;
+  }
+
+  .rollout-illustration--animated.is-reduced .rollout-health,
+  .rollout-illustration--animated.is-reduced .rollout-rollback,
+  .rollout-illustration--animated.is-reduced .rollout-prod-icon-done {
+    opacity: 1;
+  }
+
+  .rollout-illustration--animated.is-reduced .rollout-prod-pulse,
+  .rollout-illustration--animated.is-reduced .rollout-prod-icon-pending {
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .rollout-illustration--animated .rollout-prod-bar,
+    .rollout-illustration--animated .rollout-health,
+    .rollout-illustration--animated .rollout-rollback,
+    .rollout-illustration--animated .rollout-prod-icon-done,
+    .rollout-illustration--animated .rollout-device-dot {
+      transition: none;
+    }
+  }
+</style>
+
+<script>
+  const BAR_MAX = 100
+  const DOT_INACTIVE = { fill: '#1f2937', stroke: '#374151' }
+  const DOT_ACTIVE = { fill: '#f59e0b', stroke: '#fbbf24' }
+  const DOT_COMPLETE = { fill: '#22c55e', stroke: '#4ade80' }
+
+  function setDotColors(dot: SVGCircleElement, colors: { fill: string; stroke: string }) {
+    dot.style.fill = colors.fill
+    dot.style.stroke = colors.stroke
+  }
+
+  function announceStatus(root: HTMLElement, message: string) {
+    const status = root.querySelector<HTMLElement>('[data-rollout-status]')
+    if (status) status.textContent = message
+  }
+
+  function setProductionState(root: HTMLElement, percent: number) {
+    const bar = root.querySelector<SVGRectElement>('.rollout-prod-bar')
+    const label = root.querySelector<SVGElement>('.rollout-prod-label')
+    const dots = root.querySelectorAll<SVGCircleElement>('.rollout-device-dot')
+
+    if (bar) bar.style.width = `${(percent / 100) * BAR_MAX}px`
+    if (label) label.textContent = `${percent}%`
+
+    const activeCount = Math.round((percent / 100) * dots.length)
+    dots.forEach((dot, index) => {
+      setDotColors(dot, index < activeCount ? DOT_ACTIVE : DOT_INACTIVE)
+    })
+  }
+
+  function showHealth(root: HTMLElement) {
+    const health = root.querySelector<SVGElement>('.rollout-health')
+    if (health) health.setAttribute('opacity', '1')
+  }
+
+  function showRollback(root: HTMLElement) {
+    const badge = root.querySelector<SVGElement>('.rollout-rollback')
+    if (badge) badge.setAttribute('opacity', '1')
+  }
+
+  function highlightPlay(root: HTMLElement, index: number) {
+    const section = root.closest('[data-solution-app-examples]')
+    if (!section) return
+
+    section.querySelectorAll('[data-rollout-play]').forEach((item) => {
+      item.classList.remove('is-rollout-active')
+    })
+
+    const target = section.querySelector(`[data-rollout-play="${index}"]`)
+    target?.classList.add('is-rollout-active')
+  }
+
+  function finish(root: HTMLElement) {
+    root.classList.add('is-complete')
+    const label = root.querySelector<SVGElement>('.rollout-prod-label')
+    if (label) label.classList.replace('fill-amber-500', 'fill-green-500')
+
+    const bar = root.querySelector<SVGRectElement>('.rollout-prod-bar')
+    if (bar) bar.classList.replace('fill-amber-500', 'fill-green-500')
+
+    root.querySelectorAll<SVGCircleElement>('.rollout-device-dot').forEach((dot) => {
+      setDotColors(dot, DOT_COMPLETE)
+    })
+
+    showRollback(root)
+    highlightPlay(root, 2)
+    announceStatus(root, 'Production rollout complete at 100 percent. Rollback remains ready.')
+  }
+
+  function applyReducedState(root: HTMLElement) {
+    root.classList.add('is-reduced', 'is-complete')
+    setProductionState(root, 100)
+    showHealth(root)
+    showRollback(root)
+
+    const label = root.querySelector<SVGElement>('.rollout-prod-label')
+    if (label) label.classList.replace('fill-amber-500', 'fill-green-500')
+
+    const bar = root.querySelector<SVGRectElement>('.rollout-prod-bar')
+    if (bar) bar.classList.replace('fill-amber-500', 'fill-green-500')
+
+    root.querySelectorAll<SVGCircleElement>('.rollout-device-dot').forEach((dot) => {
+      setDotColors(dot, DOT_COMPLETE)
+    })
+
+    highlightPlay(root, 2)
+    announceStatus(root, 'Production rollout complete at 100 percent. Crash-free and rollback ready.')
+  }
+
+  function wait(ms: number) {
+    return new Promise((resolve) => window.setTimeout(resolve, ms))
+  }
+
+  async function playRollout(root: HTMLElement) {
+    if (root.dataset.rolloutPlayed === 'true') return
+    root.dataset.rolloutPlayed = 'true'
+
+    setProductionState(root, 10)
+    highlightPlay(root, 0)
+    announceStatus(root, 'Production rollout started at 10 percent of devices.')
+    await wait(900)
+
+    showHealth(root)
+    highlightPlay(root, 1)
+    announceStatus(root, 'Crash-free health check passed. Ready to expand rollout.')
+    await wait(1100)
+
+    setProductionState(root, 50)
+    announceStatus(root, 'Production rollout expanded to 50 percent of devices.')
+    await wait(700)
+
+    setProductionState(root, 100)
+    announceStatus(root, 'Production rollout expanded to 100 percent of devices.')
+    await wait(600)
+
+    finish(root)
+  }
+
+  function initRolloutIllustration(root: HTMLElement) {
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    if (reduceMotion) {
+      applyReducedState(root)
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return
+          observer.disconnect()
+          void playRollout(root)
+        })
+      },
+      { threshold: 0.45 },
+    )
+
+    observer.observe(root)
+  }
+
+  function bootRolloutIllustrations() {
+    document.querySelectorAll<HTMLElement>('[data-rollout-illustration="true"]').forEach((root) => {
+      if (root.dataset.rolloutInit === 'true') return
+      root.dataset.rolloutInit = 'true'
+      initRolloutIllustration(root)
+    })
+  }
+
+  bootRolloutIllustrations()
+  document.addEventListener('astro:page-load', bootRolloutIllustrations)
+</script>