Replace composability demo with agent anatomy walkthrough

packages/shared/doctor.config.json

@@ -3,7 +3,10 @@
   "ignore": {
     "overrides": [
       {
-        "files": ["marketing/components/landing/composable-workbench/**"],
+        "files": [
+          "marketing/components/landing/agent-anatomy/**",
+          "marketing/components/landing/landing-primitives.tsx"
+        ],
         "rules": [
           "react-doctor/design-no-em-dash-in-jsx-text",
           "react-doctor/design-no-redundant-padding-axes",

packages/shared/marketing/components/landing-home-page.tsx

@@ -1,11 +1,13 @@
 'use client'
 
-import { LandingComposableWorkbench } from '@outname/shared/marketing/components/landing/composable-workbench/landing-composable-workbench'
-import { LandingChatShowcase } from '@outname/shared/marketing/components/landing/landing-chat-showcase'
+import { LandingAgentAnatomy } from '@outname/shared/marketing/components/landing/agent-anatomy/landing-agent-anatomy'
+import { LandingBindings } from '@outname/shared/marketing/components/landing/landing-bindings'
+import { LandingFinalCta } from '@outname/shared/marketing/components/landing/landing-final-cta'
 import { LandingFooter } from '@outname/shared/marketing/components/landing/landing-footer'
-import { LandingHeartbeatCloser } from '@outname/shared/marketing/components/landing/landing-heartbeat-closer'
 import { LandingHeroDemo } from '@outname/shared/marketing/components/landing/landing-hero-demo'
 import { LandingNav } from '@outname/shared/marketing/components/landing/landing-nav'
+import { LandingPrimitives } from '@outname/shared/marketing/components/landing/landing-primitives'
+import { LandingProduction } from '@outname/shared/marketing/components/landing/landing-production'
 import { useReducedMotion } from 'motion/react'
 
 export function LandingHomePage() {
@@ -16,10 +18,24 @@ export function LandingHomePage() {
     <main className="relative isolate overflow-x-clip bg-background text-foreground">
       <LandingNav />
 
+      {/* 1 — Positioning, command, and the directory artifact */}
       <LandingHeroDemo shouldReduceMotion={reduceMotionFlag} />
-      <LandingChatShowcase shouldReduceMotion={reduceMotionFlag} />
-      <LandingComposableWorkbench shouldReduceMotion={reduceMotionFlag} />
-      <LandingHeartbeatCloser shouldReduceMotion={reduceMotionFlag} />
+
+      {/* 2 — An agent is a directory: overview + alternating file walkthrough */}
+      <LandingAgentAnatomy shouldReduceMotion={reduceMotionFlag} />
+
+      {/* 3 — What you bind around the folder */}
+      <LandingBindings shouldReduceMotion={reduceMotionFlag} />
+
+      {/* 4 — What it's built on */}
+      <LandingPrimitives shouldReduceMotion={reduceMotionFlag} />
+
+      {/* 5 — Production, proven live in stacked cards */}
+      <LandingProduction shouldReduceMotion={reduceMotionFlag} />
+
+      {/* 6 — Final call to action */}
+      <LandingFinalCta shouldReduceMotion={reduceMotionFlag} />
+
       <LandingFooter />
     </main>
   )

packages/shared/marketing/components/landing/agent-anatomy/agent-file-tree.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import {
+  type AgentTreeNode,
+  type AnatomyStepId,
+  agentSlug,
+  agentTree,
+  type FileOwner,
+} from '@outname/shared/marketing/data/agent-anatomy'
+import { cn } from '@outname/ui/lib/utils'
+import { FileTextIcon, FolderIcon } from 'lucide-react'
+
+const DEPTH_INDENT_REM = 0.75
+
+const ownerDot: Record<FileOwner, string> = {
+  agent: 'border border-current opacity-50',
+  shared: 'bg-current opacity-50',
+  user: 'bg-brand',
+}
+
+function rowClasses(active: boolean, interactive: boolean) {
+  return cn(
+    'ease flex w-full items-center gap-2 border-l-2 py-1.5 pr-3 text-left font-mono text-xs tracking-normal transition-colors duration-150',
+    active
+      ? 'border-brand bg-foreground text-background'
+      : 'border-transparent text-muted-foreground',
+    interactive && !active && 'hover:bg-muted hover:text-foreground'
+  )
+}
+
+function TreeRow({
+  active,
+  node,
+  onSelectStep,
+}: {
+  active: boolean
+  node: AgentTreeNode
+  onSelectStep?: (id: AnatomyStepId) => void
+}) {
+  const Icon = node.kind === 'dir' ? FolderIcon : FileTextIcon
+  const isStepNode = Boolean(node.stepId)
+  const paddingLeft = `${node.depth * DEPTH_INDENT_REM + 0.5}rem`
+
+  const inner = (
+    <>
+      <Icon
+        className={cn(
+          'size-3.5 shrink-0',
+          active ? 'text-background' : 'text-muted-foreground'
+        )}
+      />
+      <span
+        className={cn(
+          'truncate',
+          active && 'font-semibold',
+          !(active || isStepNode) && 'opacity-70'
+        )}
+      >
+        {node.label}
+      </span>
+      {node.owner ? (
+        <span
+          aria-hidden
+          className={cn('ml-auto size-2 shrink-0', ownerDot[node.owner])}
+        />
+      ) : null}
+    </>
+  )
+
+  return (
+    <li>
+      {node.stepId && onSelectStep ? (
+        <button
+          className={rowClasses(active, true)}
+          onClick={() => onSelectStep(node.stepId as AnatomyStepId)}
+          style={{ paddingLeft }}
+          type="button"
+        >
+          {inner}
+        </button>
+      ) : (
+        <span className={rowClasses(active, false)} style={{ paddingLeft }}>
+          {inner}
+        </span>
+      )}
+    </li>
+  )
+}
+
+export function AgentFileTree({
+  activeStepId,
+  className,
+  onSelectStep,
+}: {
+  activeStepId?: AnatomyStepId
+  className?: string
+  onSelectStep?: (id: AnatomyStepId) => void
+}) {
+  return (
+    <div className={cn('border border-border bg-background', className)}>
+      <div className="flex items-center gap-2 border-border border-b px-4 py-3">
+        <span aria-hidden className="size-2.5 shrink-0 bg-brand" />
+        <span className="truncate font-mono text-xs tracking-normal">
+          {agentSlug}/
+        </span>
+        <span className="swiss-label ml-auto text-muted-foreground">
+          sandbox
+        </span>
+      </div>
+      <ul className="py-2">
+        {agentTree.map((node) => (
+          <TreeRow
+            active={Boolean(node.stepId && node.stepId === activeStepId)}
+            key={node.id}
+            node={node}
+            onSelectStep={onSelectStep}
+          />
+        ))}
+      </ul>
+      <div className="flex items-center gap-4 border-border border-t px-4 py-2.5 font-mono text-[10px] text-muted-foreground tracking-normal">
+        <span className="flex items-center gap-1.5">
+          <span aria-hidden className="size-2 bg-brand" /> you author
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span
+            aria-hidden
+            className="size-2 border border-muted-foreground opacity-50"
+          />{' '}
+          agent writes
+        </span>
+      </div>
+    </div>
+  )
+}

packages/shared/marketing/components/landing/agent-anatomy/constants.ts

@@ -0,0 +1,25 @@
+import type { AnatomyStepId } from '@outname/shared/marketing/data/agent-anatomy'
+import {
+  BrainIcon,
+  CalendarIcon,
+  ContactIcon,
+  ListChecksIcon,
+  type LucideIcon,
+  MoonIcon,
+  ScrollTextIcon,
+  SparklesIcon,
+  TargetIcon,
+  UserIcon,
+} from 'lucide-react'
+
+export const stepIcons: Record<AnatomyStepId, LucideIcon> = {
+  calendar: CalendarIcon,
+  dreams: MoonIcon,
+  goals: TargetIcon,
+  identity: ContactIcon,
+  instructions: ScrollTextIcon,
+  memory: BrainIcon,
+  soul: SparklesIcon,
+  tasks: ListChecksIcon,
+  user: UserIcon,
+}

packages/shared/marketing/components/landing/agent-anatomy/landing-agent-anatomy.tsx

@@ -0,0 +1,162 @@
+'use client'
+
+import { CodeWindow } from '@outname/shared/marketing/components/landing/code-window'
+import {
+  revealVariants,
+  staggerVariants,
+} from '@outname/shared/marketing/components/landing/landing-motion'
+import {
+  type AnatomyStepId,
+  agentTree,
+  anatomySteps,
+  ownerLabel,
+} from '@outname/shared/marketing/data/agent-anatomy'
+import { Badge } from '@outname/ui/components/ui/badge'
+import { cn } from '@outname/ui/lib/utils'
+import {
+  AnimatePresence,
+  domAnimation,
+  LazyMotion,
+  m as motion,
+} from 'motion/react'
+import { useEffect, useRef, useState } from 'react'
+import { AgentFileTree } from './agent-file-tree'
+import { stepIcons } from './constants'
+
+const CYCLE_MS = 2800
+const fileNameByNode = new Map(agentTree.map((node) => [node.id, node.label]))
+
+function FileViewer({ activeId }: { activeId: AnatomyStepId }) {
+  const step =
+    anatomySteps.find((entry) => entry.id === activeId) ?? anatomySteps[0]
+  const Icon = stepIcons[step.id]
+  const fileName = fileNameByNode.get(step.node) ?? step.node
+  const total = String(anatomySteps.length).padStart(2, '0')
+
+  return (
+    <div className="min-h-[26rem] lg:min-h-[30rem]">
+      <AnimatePresence initial={false} mode="wait">
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -6 }}
+          initial={{ opacity: 0, y: 6 }}
+          key={step.id}
+          transition={{ duration: 0.26, ease: [0.16, 1, 0.3, 1] }}
+        >
+          <CodeWindow
+            code={step.code}
+            filename={fileName}
+            label={`${step.index} / ${total}`}
+          />
+          <div className="mt-6 flex items-start gap-4">
+            <span className="grid size-9 shrink-0 place-items-center border border-border bg-brand text-brand-foreground">
+              <Icon className="size-4" />
+            </span>
+            <div className="min-w-0">
+              <h3 className="font-semibold text-xl tracking-tight md:text-2xl">
+                {step.title}
+              </h3>
+              <p className="mt-2 max-w-md text-muted-foreground text-sm leading-relaxed">
+                {step.caption}
+              </p>
+              <div className="mt-4 flex flex-wrap items-center gap-2">
+                <Badge
+                  className={cn(
+                    step.owner === 'user' &&
+                      'border-transparent bg-brand text-brand-foreground'
+                  )}
+                  variant={step.owner === 'user' ? 'default' : 'outline'}
+                >
+                  {ownerLabel[step.owner]}
+                </Badge>
+                <span className="swiss-label text-muted-foreground">
+                  {step.note}
+                </span>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  )
+}
+
+export function LandingAgentAnatomy({
+  shouldReduceMotion,
+}: {
+  shouldReduceMotion: boolean
+}) {
+  const [activeId, setActiveId] = useState<AnatomyStepId>(anatomySteps[0].id)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  useEffect(() => {
+    if (shouldReduceMotion) {
+      return
+    }
+    timerRef.current = setInterval(() => {
+      setActiveId((current) => {
+        const index = anatomySteps.findIndex((entry) => entry.id === current)
+        return anatomySteps[(index + 1) % anatomySteps.length].id
+      })
+    }, CYCLE_MS)
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current)
+      }
+    }
+  }, [shouldReduceMotion])
+
+  const handleSelect = (id: AnatomyStepId) => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current)
+      timerRef.current = null
+    }
+    setActiveId(id)
+  }
+
+  return (
+    <section
+      className="px-4 py-20 sm:px-6 md:px-10 md:py-28 lg:px-12"
+      id="anatomy"
+    >
+      <LazyMotion features={domAnimation}>
+        <motion.div
+          className="mx-auto max-w-7xl"
+          initial={shouldReduceMotion ? false : 'hidden'}
+          variants={staggerVariants}
+          viewport={{ margin: '-80px', once: true }}
+          whileInView="visible"
+        >
+          <motion.div
+            className="grid gap-5 border-border border-t pt-5 md:grid-cols-[minmax(0,0.82fr)_minmax(0,1fr)] md:items-end"
+            variants={revealVariants}
+          >
+            <div>
+              <p className="swiss-label text-muted-foreground">
+                The mental model
+              </p>
+              <h2 className="mt-4 text-balance font-semibold text-3xl leading-tight tracking-tight md:text-4xl">
+                An agent is a directory.
+              </h2>
+            </div>
+            <p className="max-w-2xl text-muted-foreground leading-relaxed">
+              Nine canonical markdown files in a sandbox, each with a job. Some
+              you author; the rest it keeps current itself. Open one.
+            </p>
+          </motion.div>
+
+          <motion.div
+            className="mt-10 grid gap-5 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)] lg:items-start"
+            variants={revealVariants}
+          >
+            <AgentFileTree
+              activeStepId={activeId}
+              onSelectStep={handleSelect}
+            />
+            <FileViewer activeId={activeId} />
+          </motion.div>
+        </motion.div>
+      </LazyMotion>
+    </section>
+  )
+}