Citrus Value Proposition
An energetic, fresh value proposition section for AI and tech products.
Features
- Citrus vibrant palette — Lime (#84CC16) and tangerine (#FB923C) on white
- Google Fonts: Bricolage Grotesque + DM Sans — Bold display heading with clean body text
- Large gradient headline — Lime-to-tangerine text gradient on key phrase
- 4 key stats — Latency, uptime, daily inferences, client count with alternating colors
- 3 benefit cards — Gradient top borders, icon headers, hover glow effects
- Floating blobs — Decorative CSS circles/blobs as abstract background shapes
- Dual CTA buttons — Gradient primary + outlined secondary action
- Light/dark mode — White light, deep green (#0A1A0A) dark with bright citrus accents
- WCAG AA compliant — Sufficient contrast ratios across all modes
Dependencies
@/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent@/components/vue-ui/button — Button for CTA actions@/components/vue-ui/badge — Badge for section label@/components/vue-ui/separator — Separator between sectionslucide-vue-next — Zap, Brain, LineChart, ArrowRight, Sparkles, Shield
Customization
- Stats: Replace with your own metrics
- Benefits: Swap the 3 cards with your product's unique selling points
- Colors: Adjust lime/tangerine for your brand's energetic palette
- CTAs: Update button labels and actions
