Azure Testimonial Wall
A travel-themed testimonial section with ocean-blue gradients and masonry card layout.
Features
- Azure palette — Ocean blue (#0077B6) gradients with sandy beige (#F5DEB3) accents
- Masonry layout — 3-column staggered grid with offset middle column
- Tilted cards — Subtle rotation that straightens on hover for playful interaction
- Star ratings — Gold-filled stars with sandy beige tones
- Trip badges — Color-coded trip type labels per testimonial
- Quote marks — Large decorative Quote icon as watermark
- Avatar initials — Color-coded fallback avatars with role labels
- Location pins — MapPin icon with city/country labels
- Aggregate rating — Stacked avatars with overall score
- Dark mode — Deep ocean (#0a2540) with lighter azure (#4db8e8) accents
Dependencies
@/components/vue-ui/card — Testimonial card composition@/components/vue-ui/avatar — User avatar with fallback initials@/components/vue-ui/badge — Trip type badges@/components/vue-ui/separator — Section dividerslucide-vue-next — Star, Quote, MapPin, Plane icons
Customization
- Testimonials: Edit the
testimonials array for your customer reviews
- Colors: Replace #0077B6 (azure) and #F5DEB3 (sandy) for different palettes
- Ratings: Adjust
rating property (1-5) per testimonial
- Layout: Modify column distribution logic for different grid arrangements
