11import { PROVIDER_SHORTLIST , type SupportedOnboardingProvider } from '@open-codesign/shared' ;
2- import { Button } from '@open-codesign/ui' ;
3- import { ExternalLink , KeyRound , Rocket , Server } from 'lucide-react' ;
2+ import { ArrowRight , ExternalLink , KeyRound , Rocket , Server } from 'lucide-react' ;
43
54interface WelcomeProps {
65 onPickKey : ( ) => void ;
@@ -10,55 +9,61 @@ interface WelcomeProps {
109
1110export function Welcome ( { onPickKey, onPickFreeTier, ollamaDetected } : WelcomeProps ) {
1211 return (
13- < div className = "flex flex-col gap-6 " >
14- < div >
15- < h2 className = "text-2xl font-semibold text-[var(--color-text-primary)] mb-2 " >
16- Welcome to open-codesign
17- </ h2 >
18- < p className = "text-sm text-[var(--color-text-secondary)]" >
12+ < div className = "flex flex-col gap-[var(--space-6)] " >
13+ < div className = "flex flex-col gap-[var(--space-2)]" >
14+ < h1 className = "text-[var(--text-xl)] font-semibold text-[var(--color-text-primary)] tracking-[var(--tracking-heading)] leading-[var(--leading-heading)] " >
15+ Design with any model.
16+ </ h1 >
17+ < p className = "text-[var(--text-base)] text-[var(--color-text-secondary)] leading-[var(--leading-body )]" >
1918 Pick how you want to power your designs. You can change this later in Settings.
2019 </ p >
2120 </ div >
2221
23- < div className = "grid gap-3 " >
22+ < div className = "flex flex-col gap-[var(--space-3)] " >
2423 < PathButton
25- icon = { < Rocket className = "w-5 h-5 text-[var(--color-accent) ]" /> }
24+ icon = { < Rocket className = "w-[18px] h-[18px ]" /> }
2625 title = "Try free now"
2726 subtitle = "OpenRouter free tier — paste an OpenRouter key, then pick a free model."
2827 onClick = { onPickFreeTier }
2928 />
3029 < PathButton
31- icon = { < KeyRound className = "w-5 h-5 text-[var(--color-accent) ]" /> }
30+ icon = { < KeyRound className = "w-[18px] h-[18px ]" /> }
3231 title = "Use my API key"
3332 subtitle = "Anthropic, OpenAI, or OpenRouter. Auto-detected from the key prefix."
3433 onClick = { onPickKey }
3534 />
3635 { ollamaDetected ? (
3736 < PathButton
38- icon = { < Server className = "w-5 h-5 text-[var(--color-text-muted) ]" /> }
37+ icon = { < Server className = "w-[18px] h-[18px ]" /> }
3938 title = "Use local model (Ollama detected)"
4039 subtitle = "Coming in v0.2 — Ollama integration is on the roadmap."
4140 disabled
4241 />
4342 ) : null }
4443 </ div >
4544
46- < div className = "text-xs text-[var(--color-text-muted)] flex flex-wrap gap-x-4 gap-y-1" >
47- { (
48- Object . values ( PROVIDER_SHORTLIST ) as Array <
49- ( typeof PROVIDER_SHORTLIST ) [ SupportedOnboardingProvider ]
50- >
51- ) . map ( ( p ) => (
52- < a
53- key = { p . provider }
54- href = { p . keyHelpUrl }
55- target = "_blank"
56- rel = "noreferrer"
57- className = "inline-flex items-center gap-1 text-[var(--color-text-muted)] hover:text-[var(--color-accent)]"
58- >
59- How to get a { p . label } key < ExternalLink className = "w-3 h-3" />
60- </ a >
61- ) ) }
45+ < div className = "pt-[var(--space-2)] border-t border-[var(--color-border-subtle)] flex flex-col gap-[var(--space-2)]" >
46+ < span className = "text-[var(--text-xs)] uppercase tracking-[var(--tracking-wide)] text-[var(--color-text-muted)] font-mono" >
47+ Where to get a key
48+ </ span >
49+ < div className = "flex flex-wrap gap-x-[var(--space-4)] gap-y-[var(--space-1)]" >
50+ { (
51+ Object . values ( PROVIDER_SHORTLIST ) as Array <
52+ ( typeof PROVIDER_SHORTLIST ) [ SupportedOnboardingProvider ]
53+ >
54+ ) . map ( ( p ) => (
55+ < a
56+ key = { p . provider }
57+ href = { p . keyHelpUrl }
58+ target = "_blank"
59+ rel = "noreferrer"
60+ className = "inline-flex items-center gap-[4px] text-[var(--text-xs)] text-[var(--color-text-secondary)] hover:text-[var(--color-accent)] transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]"
61+ >
62+ { p . label }
63+ < ExternalLink className = "w-[11px] h-[11px]" />
64+ </ a >
65+ ) ) }
66+ </ div >
6267 </ div >
6368 </ div >
6469 ) ;
@@ -74,18 +79,24 @@ interface PathButtonProps {
7479
7580function PathButton ( { icon, title, subtitle, onClick, disabled } : PathButtonProps ) {
7681 return (
77- < Button
78- variant = "secondary"
79- size = "lg"
82+ < button
83+ type = "button"
8084 onClick = { onClick }
8185 disabled = { disabled }
82- className = "!h-auto !justify -start text-left py-4 "
86+ className = "group relative flex items -start gap-[var(--space-4)] w-full text-left p-[var(--space-4)] rounded-[var(--radius-lg)] bg-[var(--color-surface)] border border-[var(--color-border)] shadow-[var(--shadow-soft)] transition-[transform,box-shadow,border-color,background-color] duration-[var(--duration-base)] ease-[var(--ease-out)] hover:-translate-y-[1px] hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-card)] disabled:opacity-50 disabled:pointer-events-none "
8387 >
84- < span className = "shrink-0" > { icon } </ span >
85- < span className = "flex flex-col items-start gap-0.5" >
86- < span className = "text-sm font-medium text-[var(--color-text-primary)]" > { title } </ span >
87- < span className = "text-xs text-[var(--color-text-muted)] font-normal" > { subtitle } </ span >
88+ < span className = "shrink-0 mt-[2px] inline-flex items-center justify-center w-[34px] h-[34px] rounded-[var(--radius-md)] bg-[var(--color-accent-soft)] text-[var(--color-accent)]" >
89+ { icon }
8890 </ span >
89- </ Button >
91+ < span className = "flex flex-col gap-[2px] flex-1 min-w-0" >
92+ < span className = "text-[var(--text-base)] font-semibold text-[var(--color-text-primary)] tracking-[var(--tracking-tight)]" >
93+ { title }
94+ </ span >
95+ < span className = "text-[var(--text-xs)] text-[var(--color-text-secondary)] leading-[var(--leading-ui)]" >
96+ { subtitle }
97+ </ span >
98+ </ span >
99+ < ArrowRight className = "w-[14px] h-[14px] mt-[10px] shrink-0 text-[var(--color-text-muted)] opacity-0 -translate-x-[4px] transition-[opacity,transform] duration-[var(--duration-base)] ease-[var(--ease-out)] group-hover:opacity-100 group-hover:translate-x-0 group-hover:text-[var(--color-accent)]" />
100+ </ button >
90101 ) ;
91102}
0 commit comments