Amber Hero Split
A striking AI product hero block with a split two-column layout and warm amber/gold color palette.
Features
- Split layout — Content on the left, decorative visualization on the right
- Neural network SVG — Animated node visualization with connection lines
- Amber gradient palette — Warm gold/amber tones on dark charcoal
- Capability badges — Highlight key AI features
- Dual CTA buttons — Primary "Start Free Trial" and secondary "Watch Demo"
- Floating metric cards — Stats overlay on the visualization
- Responsive — Stacks vertically on mobile, side-by-side on desktop
- Dark mode support — Optimized for dark backgrounds with dark: variants
Dependencies
lucide-react — Sparkles, Play, ArrowRight, Brain, Cpu icons@/components/ui/badge — Shadcn Badge@/components/ui/button — Shadcn Button
Customization
- Colors: Adjust amber gradient stops for brand alignment
- Capabilities: Edit the capabilities array for your product features
- Stats: Update the stats array with real metrics
- Visualization: Replace the SVG neural network with your own graphic
