Dusk Travel Testimonials
An atmospheric testimonial block designed for travel and hospitality platforms.
Features
- Sunset gradient — Purple-to-orange gradient background with atmospheric radial overlays
- Glassmorphism cards — Semi-transparent cards with backdrop blur for depth
- Avatar system — Shadcn Avatar with AvatarImage and AvatarFallback for each reviewer
- Star ratings — Filled star icons for visual rating display
- Trip badges — MapPin icon with trip name for context
- Stats bar — Key metrics displayed above the testimonial grid
- Noise texture — SVG fractal noise for organic film-grain feel
- Responsive — 1-column mobile, 2-column tablet, 3-column desktop
- Accessible — aria-labels on ratings, alt text on avatars, semantic blockquotes
Dependencies
@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/card — Shadcn-Vue Card, CardContent@/components/vue-ui/avatar — Shadcn-Vue Avatar, AvatarImage, AvatarFallback@/components/vue-ui/separator — Shadcn-Vue Separatorlucide-vue-next — Star, Quote, MapPin icons
Customization
- Testimonials: Replace quote objects with your customer reviews
- Gradient: Adjust the background linear-gradient stops for different moods
- Stats: Update the metrics bar with your real numbers
- Avatars: Add real avatarUrl paths or keep the initial fallbacks
