Commit
redesign how-it-works into a colored stage pipeline
commit
d37aedd
1 changed file with +32 and −16
modified src/app/page.tsx +32 −16
| @@ -1,4 +1,4 @@ | ||
| 1 | -import { ChevronRight, Gavel, GitCompareArrows, MessagesSquare, PencilLine, Scale, Users } from 'lucide-react'; | |
| 1 | +import { Gavel, GitCompareArrows, MessagesSquare, PencilLine, Scale, Users } from 'lucide-react'; | |
| 2 | 2 | import Link from 'next/link'; |
| 3 | 3 | import { LandingBackground } from '@/components/landing-background'; |
| 4 | 4 | import { LandingHero } from '@/components/landing-hero'; |
| @@ -9,11 +9,11 @@import { listDemoDebates, loadDebateResult } from '@/db/repositories'; | ||
| 9 | 9 | export const dynamic = 'force-dynamic'; |
| 10 | 10 | |
| 11 | 11 | const STEPS = [ |
| 12 | - { icon: MessagesSquare, label: 'Answer', color: 'var(--stage-answer)' }, | |
| 13 | - { icon: Scale, label: 'Critique, blind', color: 'var(--stage-critique)' }, | |
| 14 | - { icon: PencilLine, label: 'Revise or defend', color: 'var(--stage-revision)' }, | |
| 15 | - { icon: Users, label: 'Check agreement', color: 'var(--stage-answer)' }, | |
| 16 | - { icon: Gavel, label: 'Synthesize', color: 'var(--stage-synthesis)' }, | |
| 12 | + { icon: MessagesSquare, title: 'Answer', desc: 'Each model answers independently, in parallel.', color: 'var(--stage-answer)' }, | |
| 13 | + { icon: Scale, title: 'Critique', desc: 'They score each other, blind to authorship.', color: 'var(--stage-critique)' }, | |
| 14 | + { icon: PencilLine, title: 'Revise', desc: 'Fix what the critiques got right, or defend it.', color: 'var(--stage-revision)' }, | |
| 15 | + { icon: Users, title: 'Converge', desc: 'A fast model checks how far apart they still are.', color: 'var(--stage-answer)' }, | |
| 16 | + { icon: Gavel, title: 'Synthesize', desc: 'A chairman writes the verdict and the dissent.', color: 'var(--stage-synthesis)' }, | |
| 17 | 17 | ]; |
| 18 | 18 | |
| 19 | 19 | export default async function HomePage() { |
| @@ -30,19 +30,35 @@export default async function HomePage() { | ||
| 30 | 30 | <LandingBackground /> |
| 31 | 31 | {demo ? <LandingHero result={demo} /> : <MinimalHero />} |
| 32 | 32 | |
| 33 | - {/* Thin explainer strip - the five beats of a debate, inline, no boxes. */} | |
| 34 | - <section className="container border-t py-10"> | |
| 35 | - <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-3 text-sm"> | |
| 33 | + {/* The five moves of a debate, as a colored pipeline (no boxes). */} | |
| 34 | + <section className="container border-t py-16 sm:py-24"> | |
| 35 | + <div className="mx-auto max-w-2xl text-center"> | |
| 36 | + <p className="font-mono text-xs uppercase tracking-[0.22em] text-muted-foreground">how a debate unfolds</p> | |
| 37 | + <h2 className="mt-3 font-display text-3xl font-medium tracking-tight sm:text-4xl"> | |
| 38 | + Five moves from question to verdict | |
| 39 | + </h2> | |
| 40 | + </div> | |
| 41 | + <ol className="relative mx-auto mt-14 grid max-w-5xl gap-y-10 sm:grid-cols-5 sm:gap-x-4"> | |
| 42 | + <div | |
| 43 | + aria-hidden | |
| 44 | + className="absolute left-[10%] right-[10%] top-6 hidden h-px bg-gradient-to-r from-stage-answer/50 via-stage-revision/50 to-stage-synthesis/50 sm:block" | |
| 45 | + /> | |
| 36 | 46 | {STEPS.map((step, i) => ( |
| 37 | - <div key={step.label} className="flex items-center gap-2"> | |
| 38 | - <span className="flex items-center gap-1.5 text-muted-foreground"> | |
| 39 | - <step.icon className="h-4 w-4" style={{ color: `hsl(${step.color})` }} strokeWidth={1.75} /> | |
| 40 | - {step.label} | |
| 47 | + <li key={step.title} className="relative flex flex-col items-center px-2 text-center"> | |
| 48 | + <span | |
| 49 | + className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-background" | |
| 50 | + style={{ borderColor: `hsl(${step.color})`, color: `hsl(${step.color})` }} | |
| 51 | + > | |
| 52 | + <step.icon className="h-5 w-5" strokeWidth={1.75} /> | |
| 53 | + </span> | |
| 54 | + <span className="mt-4 font-mono text-[10px] uppercase tracking-widest text-muted-foreground/70"> | |
| 55 | + Step {i + 1} | |
| 41 | 56 | </span> |
| 42 | - {i < STEPS.length - 1 && <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/40" />} | |
| 43 | - </div> | |
| 57 | + <h3 className="mt-1 font-semibold">{step.title}</h3> | |
| 58 | + <p className="mt-1.5 max-w-[15rem] text-sm leading-relaxed text-muted-foreground">{step.desc}</p> | |
| 59 | + </li> | |
| 44 | 60 | ))} |
| 45 | - </div> | |
| 61 | + </ol> | |
| 46 | 62 | </section> |
| 47 | 63 | |
| 48 | 64 | <footer className="container flex items-center justify-between border-t py-8 text-sm text-muted-foreground"> |