Midnight AI Navigation
A sci-fi inspired AI product navigation and landing block with violet/cyan palette on deep purple-black.
Features
- Full navigation bar — Logo with AI badge, nav links with dropdowns, search with ⌘K shortcut
- User section — Notification bell with indicator, avatar with gradient fallback
- Mobile menu — Responsive hamburger toggle for smaller screens
- Hero section — Bold headline with gradient text, beta badge, dual CTA buttons
- Tabbed content — Three tabs: Platform Features (4 cards), AI Models (3 metric cards), Scale (stats grid)
- Glowing effects — Hover glow on cards and avatar border
- Background effects — Radial gradients and subtle grid overlay
- Trusted by — Company logos strip and system status badge
- Color palette — Deep purple-black bg, violet-500/400 primary, cyan-500/400 secondary
Dependencies
@/components/vue-ui/button — Button@/components/vue-ui/badge — Badge@/components/vue-ui/avatar — Avatar, AvatarFallback@/components/vue-ui/separator — Separator@/components/vue-ui/tabs — Tabs, TabsContent, TabsList, TabsTrigger
Customization
- Nav links: Update the
navLinks array for your product sections
- Features: Modify
platformFeatures with your platform capabilities
- Models: Customize
heroCards with your AI model metrics
- Colors: Adjust violet/cyan accent colors to match your brand
