Ocean Travel Stats
An immersive stats overview section for travel and booking platforms.
Features
- Four stat cards — Large numbers with growth indicators and progress bars
- Ocean palette — Deep teal-blue (#0c1e2c) with aquamarine (#2dd4bf) and ocean blue (#0284c7) accents
- Gradient progress bars — Ocean blue to aquamarine gradient fill
- Regional breakdown — Six regions with booking counts and percentage bars
- Trending badges — Highlight trending regions
- Light mode — Slate-50 background with teal-600 accents
Dependencies
@/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent@/components/vue-ui/badge — Badge@/components/vue-ui/separator — Separator@/components/vue-ui/progress — Progresslucide-vue-next — Icons
Customization
- Stats: Update the stats array with your platform metrics
- Regions: Modify the regions array for your geographical data
- Colors: Adjust teal/ocean gradient for different brand palettes
