Moderne SaaS mit Farbverlauf

Create a gradient-led modern SaaS landing page: a dark canvas where saturated gradients carry the energy. Gradients should behave like light sources and signals, not wallpaper.

Brief

Subject: Relay — on-call alert routing for small engineering teams

Write real product copy: the name, what it does in one sentence, feature names, integrations, prices, customer quotes with roles. No "Supercharge your workflow" filler

Design Requirements

Base: Dark background (#0b1016) lit by a gradient from #22d3ee to #a3e635

Where gradients go: the glow behind the hero product, primary buttons, a hairline gradient border on the recommended pricing tier, and gradient text on at most one whole headline (never a single word or half a headline). Everything else stays calm and neutral

Typography: Space Grotesk; extra-bold, tightly tracked headlines; body in a lighter weight at a comfortable size

Product visual: Build a convincing product UI in HTML/CSS (e.g. an alert timeline, a routing-rule editor) — never a grey rectangle

Sections to Include

Hero — Clear headline, subtext, primary gradient CTA plus a secondary text CTA, and the product UI floating on a soft gradient glow beside the copy — visible in the first viewport, not pushed below it

Logos Bar — "Used by" row of 5–6 invented company wordmarks in muted grey

Features — Three features with real detail; the most important one gets a larger panel with a mini UI demo

Product Demo — Large product view with annotated callouts explaining what you're looking at

Testimonials — Two or three quotes with name, role and company

Pricing — Three tiers plus a short comparison table; the recommended tier gets the gradient border

CTA Section — Gradient band with a headline and email signup

Footer — Link columns, status and social links

Technical Details

Gradient text via background-clip: text with a solid-colour fallback

One slow animated gradient (the hero glow) — nothing else loops

Mobile-first responsive layout; CSS gradients and inline SVG, no heavy images

Visible focus states; respect prefers-reduced-motion

No pill "eyebrow" badges above headings and no grid of identical icon cards