Added routes

apps/web/src/features/onboarding/WelcomeStep.tsx

@@ -0,0 +1,63 @@
+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>
+  )
+}