Commit
restyle demo page as an editorial replay list
commit
6d1f967
1 changed file with +32 and −34
modified src/app/demo/page.tsx +32 −34
| @@ -1,6 +1,5 @@ | ||
| 1 | -import { ArrowRight, Play, Sparkles } from 'lucide-react'; | |
| 1 | +import { ArrowRight } from 'lucide-react'; | |
| 2 | 2 | import Link from 'next/link'; |
| 3 | -import { Badge } from '@/components/ui/badge'; | |
| 4 | 3 | import { Button } from '@/components/ui/button'; |
| 5 | 4 | import { displayNameForModel } from '@/core/types'; |
| 6 | 5 | import { listDemoDebates } from '@/db/repositories'; |
| @@ -17,50 +16,49 @@export default async function DemoPage() { | ||
| 17 | 16 | } |
| 18 | 17 | |
| 19 | 18 | return ( |
| 20 | - <div className="container max-w-4xl py-10"> | |
| 21 | - <div className="mb-8 space-y-2 text-center"> | |
| 22 | - <Badge variant="outline" className="gap-1.5"> | |
| 23 | - <Play className="h-3.5 w-3.5 text-primary" /> Recorded debates | |
| 24 | - </Badge> | |
| 25 | - <h1 className="text-3xl font-semibold">Watch a real debate replay</h1> | |
| 26 | - <p className="mx-auto max-w-xl text-sm text-muted-foreground"> | |
| 27 | - These are real multi-model debates, recorded and replayed through the full UI - streaming, critique matrix, | |
| 28 | - revision diffs, and all. No account or API key needed. | |
| 19 | + <div className="container max-w-3xl py-12 sm:py-16"> | |
| 20 | + <div className="space-y-3 pb-10"> | |
| 21 | + <p className="font-mono text-xs uppercase tracking-[0.22em] text-muted-foreground">recorded debates</p> | |
| 22 | + <h1 className="font-display text-3xl font-medium tracking-tight sm:text-4xl"> | |
| 23 | + Watch a council <em className="text-primary">argue</em>. | |
| 24 | + </h1> | |
| 25 | + <p className="max-w-xl text-sm leading-relaxed text-muted-foreground"> | |
| 26 | + Real multi-model debates, recorded and replayed through the full UI - streaming, critique matrix, revision | |
| 27 | + diffs, and all. No account or API key needed. | |
| 29 | 28 | </p> |
| 30 | 29 | </div> |
| 31 | 30 | |
| 32 | 31 | {demos.length === 0 ? ( |
| 33 | - <div className="rounded-xl border border-dashed p-10 text-center text-sm text-muted-foreground"> | |
| 32 | + <div className="border-t py-10 text-sm text-muted-foreground"> | |
| 34 | 33 | No demo debates seeded yet. Run <code className="font-mono">pnpm db:seed</code> to add them. |
| 35 | 34 | </div> |
| 36 | 35 | ) : ( |
| 37 | - <div className="grid gap-4 sm:grid-cols-2"> | |
| 36 | + <ul className="divide-y border-t"> | |
| 38 | 37 | {demos.map((d) => ( |
| 39 | - <Link | |
| 40 | - key={d.id} | |
| 41 | - href={`/demo/${d.id}`} | |
| 42 | - className="group flex flex-col justify-between rounded-xl border bg-card p-5 transition-colors hover:border-primary/50" | |
| 43 | - > | |
| 44 | - <div> | |
| 45 | - <div className="mb-2 flex items-center gap-2"> | |
| 46 | - <Sparkles className="h-4 w-4 text-primary" /> | |
| 47 | - <Badge variant="secondary">{d.roundsCompleted} rounds</Badge> | |
| 48 | - <Badge variant="secondary">{formatUsd(d.totalCostUsd)}</Badge> | |
| 38 | + <li key={d.id}> | |
| 39 | + <Link href={`/demo/${d.id}`} className="group flex items-center gap-6 py-7"> | |
| 40 | + <div className="min-w-0 flex-1"> | |
| 41 | + <h2 className="font-display text-xl font-medium leading-snug tracking-tight sm:text-2xl"> | |
| 42 | + {d.question} | |
| 43 | + </h2> | |
| 44 | + <p className="mt-2 font-mono text-xs text-muted-foreground"> | |
| 45 | + {d.models.map(displayNameForModel).join(' · ')} | |
| 46 | + <span className="text-muted-foreground/60"> | |
| 47 | + {' '} | |
| 48 | + · {d.roundsCompleted} rounds · {formatUsd(d.totalCostUsd)} | |
| 49 | + </span> | |
| 50 | + </p> | |
| 49 | 51 | </div> |
| 50 | - <h2 className="font-medium leading-snug">{d.question}</h2> | |
| 51 | - <p className="mt-2 text-xs text-muted-foreground"> | |
| 52 | - {d.models.map(displayNameForModel).join(' · ')} | |
| 53 | - </p> | |
| 54 | - </div> | |
| 55 | - <div className="mt-4 flex items-center gap-1 text-sm font-medium text-primary"> | |
| 56 | - Replay <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" /> | |
| 57 | - </div> | |
| 58 | - </Link> | |
| 52 | + <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border text-muted-foreground transition-colors group-hover:border-primary group-hover:text-primary"> | |
| 53 | + <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" /> | |
| 54 | + </span> | |
| 55 | + </Link> | |
| 56 | + </li> | |
| 59 | 57 | ))} |
| 60 | - </div> | |
| 58 | + </ul> | |
| 61 | 59 | )} |
| 62 | 60 | |
| 63 | - <div className="mt-10 text-center"> | |
| 61 | + <div className="border-t pt-8"> | |
| 64 | 62 | <Button asChild> |
| 65 | 63 | <Link href="/debate">Run your own debate</Link> |
| 66 | 64 | </Button> |