Gradient Modern SaaS

Create a gradient-heavy modern SaaS landing page. The design should be energetic, contemporary, and conversion-focused with rich gradient backgrounds and colorful accents.

Design Requirements

Backgrounds: Dark base (#0f0f1a) with vibrant gradient sections (#6366f1 → #ec4899)

Gradient Usage: Hero background gradient, gradient text headings, gradient border cards, gradient CTA buttons

Color Palette: Dark backgrounds with gradient accents, white/light text, gradient-bordered elements

Typography: Plus Jakarta Sans, extra-bold for headings, gradient text effect on key headlines

Shapes: Abstract gradient blob shapes as background decorations, mesh gradient overlays

Sections to Include

Hero — Large gradient text headline, subtext, two CTA buttons with gradient backgrounds, floating product mockup

Logos Bar — "Trusted by" section with grayscale company logos

Features — 3-column grid with gradient-bordered cards, each with icon, title, description

Product Demo — Large centered screenshot/mockup with gradient glow effect behind it

Testimonials — Carousel of testimonial cards with gradient accent borders

Pricing — 3-tier pricing with gradient "popular" badge, comparison table

CTA Section — Full-width gradient background, centered headline and email signup

Footer — Dark footer with columns, newsletter, social links

Technical Details

CSS gradient text: background-clip: text with -webkit-text-fill-color: transparent

Animated gradient backgrounds (slow color shift via CSS animation)

Responsive with mobile-first approach

Performance: Use CSS gradients, avoid heavy images where possible