63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { ArrowRight, Rocket, Users, Wallet } from 'lucide-react'
|
|
import { Button } from '../../components/ui'
|
|
|
|
type WelcomeStepProps = {
|
|
name: string
|
|
onNext: () => void
|
|
}
|
|
|
|
const STEPS_TO_SETUP = [
|
|
{
|
|
icon: Wallet,
|
|
title: 'Conectá tu cuenta de cobro',
|
|
description: 'Mercado Pago o Stripe, en modo prueba por ahora.',
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: 'Creá tu primer grupo',
|
|
description: 'Días, horario, precio y cupo de tu clase.',
|
|
},
|
|
{
|
|
icon: Rocket,
|
|
title: 'Empezá a cobrar',
|
|
description: 'Todo listo para sumar miembros y cobrar al instante.',
|
|
},
|
|
]
|
|
|
|
export function WelcomeStep({ name, onNext }: WelcomeStepProps) {
|
|
return (
|
|
<section className="space-y-6">
|
|
<header className="space-y-2 text-center">
|
|
<span className="mx-auto flex size-14 items-center justify-center rounded-2xl bg-accent-soft">
|
|
<Rocket className="size-7 text-accent" />
|
|
</span>
|
|
<h1 className="text-2xl font-bold text-primary">¡Hola, {name}!</h1>
|
|
<p className="text-sm text-foreground/60">
|
|
Vamos a configurar tu cuenta en 3 pasos. Vas a tardar menos de 5 minutos.
|
|
</p>
|
|
</header>
|
|
|
|
<ol className="space-y-3">
|
|
{STEPS_TO_SETUP.map(({ icon: Icon, title, description }) => (
|
|
<li
|
|
key={title}
|
|
className="flex items-center gap-3 rounded-xl border border-border bg-surface p-4"
|
|
>
|
|
<span className="rounded-lg bg-accent-soft p-2">
|
|
<Icon className="size-5 text-accent" />
|
|
</span>
|
|
<div>
|
|
<p className="text-sm font-semibold text-primary">{title}</p>
|
|
<p className="text-xs text-foreground/60">{description}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
|
|
<Button variant="primary" size="md" className="w-full" onClick={onNext}>
|
|
Comenzar
|
|
<ArrowRight className="size-4" />
|
|
</Button>
|
|
</section>
|
|
)
|
|
} |