Origami Events Onboarding
A geometric, paper-fold inspired onboarding wizard for event creation.
Features
- 4-step wizard — Event Details, Venue, Tickets, Launch
- Progress bar — Dynamic percentage with step-based progress
- Clickable steps — Navigate directly to any step via step indicators
- Step indicators — Circle icons with check marks for completed steps
- Form fields — Contextual inputs per step (dates, venue, pricing)
- Launch review — Summary card on final step with publish button
- Origami triangles — Decorative SVG triangle patterns in background
- Poppins font — Clean geometric headings
- Lavender palette — Soft purple-50 light, deep purple-950 dark
- Dark mode — Full dark variant with preserved purple accents
- Responsive — Stacks to single column, hides step labels on mobile
Dependencies
@/components/vue-ui/badge — Badge@/components/vue-ui/button — Button@/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter@/components/vue-ui/input — Input@/components/vue-ui/label — Label@/components/vue-ui/progress — Progress@/components/vue-ui/separator — Separatorlucide-vue-next — CalendarDays, MapPin, Ticket, Rocket, ArrowLeft, ArrowRight, Check, Sparkles
Customization
- Steps: Modify
steps array to change wizard flow
