Terrace Onboarding Steps
A warm, earthy onboarding flow for real estate search platforms.
Features
- Step indicators — 4 numbered circles connected by a horizontal progress line
- Step cards — (1) Create Your Profile, (2) Set Preferences (current), (3) Browse Listings, (4) Schedule Viewings
- Progress visualization — Filled line shows completed steps, current step highlighted in terracotta
- Dashboard preview — Mini property listing card with AI match score, price, beds, baths, sqft
- Bottom CTA — "Begin Your Journey" button with terracotta shadow
- Dark mode — Full dark: variant support with warm dark palette
- Typography — Cardo (serif headings) + Poppins (body)
Dependencies
@/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent@/components/vue-ui/badge — Badge@/components/vue-ui/button — Button@/components/vue-ui/separator — Separatorlucide-vue-next — UserPlus, SlidersHorizontal, Search, CalendarCheck, ArrowRight, Home, MapPin, Bed, Bath, Ruler
Customization
- Steps: Edit
steps array to change titles and descriptions
- Current step: Change
currentStep value (1-4)
- Preview: Modify
previewProperty for different property details
- Colors: Swap terracotta (#C1440E) for any brand color
