Tundra Support Hero
A clean, calming hero section designed for customer support and help center platforms.
Features
- Prominent search bar — Full-width search with focus ring animation
- Ice crystal SVGs — Floating diamond and hexagonal geometric shapes
- Quick-link buttons — Live Chat, Submit Ticket, Knowledge Base shortcuts
- Support stats — Four metric cards (response time, satisfaction, availability, resolved issues)
- Gradient text — Cyan-to-teal gradient on key headline words
- Arctic palette — Icy blue (#f0f8ff) light, arctic dark (#060d14) dark
- Full dark mode — Deep navy background with glowing cyan accents
Dependencies
@/components/vue-ui/badge — Section label@/components/vue-ui/button — Quick-link buttons@/components/vue-ui/card — Stats cards@/components/vue-ui/separator — Visual dividerlucide-vue-next — Search, MessageCircle, Clock, ThumbsUp, Headphones, ArrowRight icons
Customization
- Colors: Swap cyan (#06b6d4) and teal (#0d9488) for your brand palette
- Typography: Replace Space Mono with another monospace font for accents
- Stats: Update values to reflect your actual support metrics
- Quick links: Customize navigation shortcuts for your help center
