Mosaic Events FAQ
A vibrant, tile-inspired FAQ block designed for events and entertainment platforms.
Features
- Category tabs — Pill-styled tabs filtering FAQ items by topic (General, Tickets, Venue, Payment)
- Colorful border accents — Each FAQ card has a thick left border cycling through a palette of 5 colors
- Numbered indicators — Color-matched circular badges numbering each question
- Gradient heading — Multi-color gradient text effect on the hero word
- Geometric decorations — Floating mosaic shapes (squares, circles) as background accents
- Hover interaction — Cards shift right with shadow on hover
- Light/dark mode — Off-white (#fafafa) light / dark charcoal (#121214) dark
Dependencies
lucide-vue-next — HelpCircle, Calendar, Ticket, MapPin, CreditCard, Users icons@/components/vue-ui/card — Card, CardHeader, CardTitle, CardContent@/components/vue-ui/badge — Badge@/components/vue-ui/separator — Separator@/components/vue-ui/tabs — Tabs, TabsList, TabsTrigger, TabsContent
Customization
- FAQ content: Replace
faqItems array with your event-specific questions and answers
- Categories: Update
categories to match your FAQ topics
- Color palette: Modify
accentColors array to change the cycling border colors
- Fonts: Bricolage Grotesque and Crimson Text loaded via Google Fonts
