Commit
merge fix/landing-hero: full result in hero, drop marquee
commit
77fc32f
4 changed files with +6 and −58
Jump to a changed file
- src/app/globals.css +0 −13
- src/app/page.tsx +0 −3
- src/components/landing-hero.tsx +6 −7
- src/components/landing-marquee.tsx +0 −35
modified src/app/globals.css +0 −13
| @@ -113,9 +113,6 @@ | ||
| 113 | 113 | .animate-drift { |
| 114 | 114 | animation: drift 22s ease-in-out infinite; |
| 115 | 115 | } |
| 116 | - .animate-marquee { | |
| 117 | - animation: marquee 36s linear infinite; | |
| 118 | - } | |
| 119 | 116 | /* Staggered load-in reveal for the hero. */ |
| 120 | 117 | .reveal { |
| 121 | 118 | animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; |
| @@ -143,18 +140,8 @@ | ||
| 143 | 140 | } |
| 144 | 141 | } |
| 145 | 142 | |
| 146 | -@keyframes marquee { | |
| 147 | - from { | |
| 148 | - transform: translateX(0); | |
| 149 | - } | |
| 150 | - to { | |
| 151 | - transform: translateX(-50%); | |
| 152 | - } | |
| 153 | -} | |
| 154 | - | |
| 155 | 143 | @media (prefers-reduced-motion: reduce) { |
| 156 | 144 | .animate-drift, |
| 157 | - .animate-marquee, | |
| 158 | 145 | .reveal { |
| 159 | 146 | animation: none !important; |
| 160 | 147 | } |
modified src/app/page.tsx +0 −3
| @@ -2,7 +2,6 @@import { ArrowRight, Gavel, GitCompareArrows, MessagesSquare, PencilLine, Scale, | ||
| 2 | 2 | import Link from 'next/link'; |
| 3 | 3 | import { LandingBackground } from '@/components/landing-background'; |
| 4 | 4 | import { LandingHero } from '@/components/landing-hero'; |
| 5 | -import { LandingMarquee } from '@/components/landing-marquee'; | |
| 6 | 5 | import { Reveal } from '@/components/reveal'; |
| 7 | 6 | import { Button } from '@/components/ui/button'; |
| 8 | 7 | import type { DebateResult } from '@/core/types'; |
| @@ -32,8 +31,6 @@export default async function HomePage() { | ||
| 32 | 31 | <LandingBackground /> |
| 33 | 32 | {demo ? <LandingHero result={demo} /> : <MinimalHero />} |
| 34 | 33 | |
| 35 | - <LandingMarquee /> | |
| 36 | - | |
| 37 | 34 | {/* The five moves of a debate, as a colored pipeline (no boxes). */} |
| 38 | 35 | <section className="container border-t py-16 sm:py-24"> |
| 39 | 36 | <Reveal className="mx-auto max-w-2xl text-center"> |
modified src/components/landing-hero.tsx +6 −7
| @@ -102,16 +102,15 @@export function LandingHero({ result }: { result: DebateResult }) { | ||
| 102 | 102 | </span> |
| 103 | 103 | </div> |
| 104 | 104 | |
| 105 | - <div className="relative max-h-[68vh] overflow-hidden p-4 md:p-6"> | |
| 105 | + <div className="p-4 md:p-6"> | |
| 106 | 106 | <DebateConsole view={view} showActions={false} /> |
| 107 | - <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-card via-card/80 to-transparent" /> | |
| 108 | 107 | </div> |
| 108 | + </div> | |
| 109 | 109 | |
| 110 | - <div className="absolute inset-x-0 bottom-4 flex justify-center"> | |
| 111 | - <Button asChild size="sm" variant="secondary" className="shadow-lg"> | |
| 112 | - <Link href={`/demo/${result.debateId}`}>Open the full replay</Link> | |
| 113 | - </Button> | |
| 114 | - </div> | |
| 110 | + <div className="mt-5 flex justify-center"> | |
| 111 | + <Button asChild variant="outline" size="sm"> | |
| 112 | + <Link href={`/demo/${result.debateId}`}>Open the full replay</Link> | |
| 113 | + </Button> | |
| 115 | 114 | </div> |
| 116 | 115 | </div> |
| 117 | 116 | </section> |
removed src/components/landing-marquee.tsx +0 −35
| @@ -1,35 +0,0 @@ | ||
| 1 | -import { participantColor } from '@/lib/model-visuals'; | |
| 2 | - | |
| 3 | -const MODELS = [ | |
| 4 | - 'GPT-4o', | |
| 5 | - 'Claude 3.5 Sonnet', | |
| 6 | - 'Gemini 1.5 Pro', | |
| 7 | - 'Llama 3.3 70B', | |
| 8 | - 'Mistral Large', | |
| 9 | - 'Grok 2', | |
| 10 | - 'DeepSeek Chat', | |
| 11 | - 'Command R+', | |
| 12 | - 'Qwen 2.5 72B', | |
| 13 | - 'GPT-4o mini', | |
| 14 | - 'Claude 3.5 Haiku', | |
| 15 | - 'Gemini Flash', | |
| 16 | -]; | |
| 17 | - | |
| 18 | -/** An infinite marquee of model names - the council can be drawn from any of them. */ | |
| 19 | -export function LandingMarquee() { | |
| 20 | - const row = [...MODELS, ...MODELS]; | |
| 21 | - return ( | |
| 22 | - <section className="relative overflow-hidden border-y py-5"> | |
| 23 | - <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-24 bg-gradient-to-r from-background to-transparent" /> | |
| 24 | - <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-24 bg-gradient-to-l from-background to-transparent" /> | |
| 25 | - <div className="flex w-max animate-marquee items-center gap-9"> | |
| 26 | - {row.map((model, i) => ( | |
| 27 | - <span key={i} className="flex items-center gap-2.5 whitespace-nowrap text-sm text-muted-foreground"> | |
| 28 | - <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: participantColor(i) }} /> | |
| 29 | - {model} | |
| 30 | - </span> | |
| 31 | - ))} | |
| 32 | - </div> | |
| 33 | - </section> | |
| 34 | - ); | |
| 35 | -} |