Commit
redesign hero header with eyebrow and staggered reveal
commit
45b4491
1 changed file with +26 and −6
modified src/components/landing-hero.tsx +26 −6
| @@ -1,5 +1,6 @@ | ||
| 1 | 1 | 'use client'; |
| 2 | 2 | |
| 3 | +import { ArrowRight } from 'lucide-react'; | |
| 3 | 4 | import Link from 'next/link'; |
| 4 | 5 | import { useEffect } from 'react'; |
| 5 | 6 | import { DebateConsole } from '@/components/debate/debate-console'; |
| @@ -32,17 +33,36 @@export function LandingHero({ result }: { result: DebateResult }) { | ||
| 32 | 33 | |
| 33 | 34 | return ( |
| 34 | 35 | <section className="container py-10 md:py-14"> |
| 35 | - <div className="mx-auto mb-8 max-w-2xl text-center"> | |
| 36 | - <h1 className="font-display text-4xl font-semibold leading-[1.05] tracking-tight sm:text-6xl"> | |
| 36 | + <div className="mx-auto mb-9 max-w-2xl text-center"> | |
| 37 | + <div | |
| 38 | + className="reveal mb-5 inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.22em] text-muted-foreground" | |
| 39 | + style={{ animationDelay: '0ms' }} | |
| 40 | + > | |
| 41 | + <span className="h-1.5 w-1.5 animate-pulse-subtle rounded-full bg-emerald-500" /> | |
| 42 | + the council is in session | |
| 43 | + </div> | |
| 44 | + <h1 | |
| 45 | + className="reveal font-display text-[2.6rem] font-medium leading-[1.02] tracking-[-0.01em] sm:text-[4.25rem]" | |
| 46 | + style={{ animationDelay: '80ms' }} | |
| 47 | + > | |
| 37 | 48 | Watch models <em className="text-primary">argue</em> their way to a better answer. |
| 38 | 49 | </h1> |
| 39 | - <p className="mx-auto mt-4 max-w-xl text-muted-foreground"> | |
| 50 | + <p | |
| 51 | + className="reveal mx-auto mt-5 max-w-xl text-pretty text-lg leading-relaxed text-muted-foreground" | |
| 52 | + style={{ animationDelay: '160ms' }} | |
| 53 | + > | |
| 40 | 54 | A real debate, replaying live below. A council answers, critiques each other blind, and revises. A chairman |
| 41 | 55 | calls it. |
| 42 | 56 | </p> |
| 43 | - <div className="mt-6 flex flex-wrap items-center justify-center gap-3"> | |
| 44 | - <Button size="lg" asChild> | |
| 45 | - <Link href="/debate">Start your own</Link> | |
| 57 | + <div | |
| 58 | + className="reveal mt-7 flex flex-wrap items-center justify-center gap-3" | |
| 59 | + style={{ animationDelay: '240ms' }} | |
| 60 | + > | |
| 61 | + <Button size="lg" asChild className="group"> | |
| 62 | + <Link href="/debate"> | |
| 63 | + Start a debate | |
| 64 | + <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" /> | |
| 65 | + </Link> | |
| 46 | 66 | </Button> |
| 47 | 67 | <Button size="lg" variant="ghost" asChild> |
| 48 | 68 | <Link href="/demo">Browse the recordings</Link> |