feat(site): a second hero action, pointing at the recording

The hero asked for one thing: pipe a script into your shell. The reader
who wants to see it work first had no way to get there without scrolling
the whole page, and the recording that answers them was already sitting
in the Install section.

An outline button rather than a filled one, and below the command rather
than beside it, because copying the install line is still the thing this
page is for. It targets the player on this page rather than /docs/setup,
so the question is answered without losing the page.

Walkthrough takes an optional id for this; scroll-mt-20 on it clears the
sticky header so the jump lands on the player and not under the bar.

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

Author: karngyan

site/src/components/walkthrough.tsx

@@ -33,13 +33,16 @@ import { cn } from '@/lib/utils'
 export function Walkthrough({
   align = 'left',
   className,
+  id,
 }: {
   /** Follows the section it lands in, the same way InstallBlock does. */
   align?: 'left' | 'center'
   className?: string
+  /** Set when something on the page links to the player. */
+  id?: string
 }) {
   return (
-    <figure className={className}>
+    <figure id={id} className={className}>
       <div className="relative aspect-video overflow-hidden rounded-xl bg-zinc-950 ring-1 ring-zinc-950/10 dark:ring-white/10">
         <MuxPlayer
           playbackId={WALKTHROUGH_PLAYBACK_ID}

site/src/routes/index.tsx

@@ -1,16 +1,17 @@
 import { Fragment } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
-import { ArrowRight, Cloud, HardDrive, Lock, Plus, Smartphone } from 'lucide-react'
+import { ArrowRight, Cloud, HardDrive, Lock, Play, Plus, Smartphone } from 'lucide-react'
 
 import { CopyCommand } from '@/components/copy-command'
 import { FleetWindow, PhoneFrame } from '@/components/mock/fleet'
 import { SwitcherWindow } from '@/components/mock/switcher'
 import { MockTerminal, ok, output, prompt } from '@/components/mock/terminal'
 import { SiteFooter } from '@/components/site-footer'
 import { SiteHeader } from '@/components/site-header'
+import { Button } from '@/components/ui/button'
 import { Walkthrough } from '@/components/walkthrough'
 import { GithubMark } from '@/components/wordmark'
-import { BREW_CMD, INSTALL_CMD, REPO_URL } from '@/lib/site'
+import { BREW_CMD, INSTALL_CMD, REPO_URL, WALKTHROUGH_RUNTIME } from '@/lib/site'
 
 export const Route = createFileRoute('/')({
   component: Home,
@@ -138,6 +139,29 @@ function InstallBlock({ align = 'left' }: { align?: 'left' | 'center' }) {
   )
 }
 
+/**
+ * The hero's second action, and deliberately the quieter one.
+ *
+ * Copying the install line is the thing this page is for, so the command keeps
+ * the loud treatment and this gets an outline. It points at the recording
+ * further down the page rather than at /docs/setup: the reader who wants to
+ * see it work before running a script into their shell is answered in place,
+ * without losing the page they were on.
+ */
+function WatchWalkthrough() {
+  return (
+    <Button asChild variant="outline" size="lg" className="mt-8">
+      <a href="#walkthrough">
+        <Play className="size-4" aria-hidden="true" />
+        Watch the setup walkthrough
+        <span className="font-mono text-sm tabular-nums text-muted-foreground">
+          {WALKTHROUGH_RUNTIME}
+        </span>
+      </a>
+    </Button>
+  )
+}
+
 /**
  * The two halves of the claim in one picture: the fleet on a machine, and the
  * ringed row of it open on a phone. They sit beside each other rather than
@@ -175,6 +199,7 @@ function Hero() {
           <div className="w-full">
             <InstallBlock align="center" />
           </div>
+          <WatchWalkthrough />
         </div>
         <div className="mt-16 lg:mt-20">
           <ProofMock />
@@ -445,8 +470,12 @@ function Install() {
           {/* Full width, the way the switcher above sits full width in a
               section that is otherwise columns. The caption is centred with
               the rest of this section rather than left aligned, since it is
-              the only line here that would have read off axis. */}
-          <Walkthrough align="center" className="mt-10 w-full" />
+              the only line here that would have read off axis.
+
+              The id is the hero button's target, and scroll-mt clears the
+              sticky header so the jump lands on the player rather than under
+              the bar. */}
+          <Walkthrough align="center" id="walkthrough" className="mt-10 w-full scroll-mt-20" />
           <div className="w-full">
             <InstallBlock align="center" />
           </div>