landing-page hero dark-mode gradient trust marketing saas hero dark gradient orbs trust logos stats above-the-fold dark hero section with trust indicators bold landing page intro with gradient background
Hero Dark
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/dark.json dark.html
<section class="ws-hero relative isolate overflow-hidden bg-[var(--ws-hero-bg)]">
<!-- Decorative gradient orbs -->
<div class="absolute inset-0 -z-10">
<div class="absolute -left-1/4 -top-1/3 h-[50rem] w-[50rem] rounded-full bg-indigo-600/25 blur-[128px]"></div>
<div class="absolute -bottom-1/4 -right-1/4 h-[45rem] w-[45rem] rounded-full bg-violet-500/20 blur-[128px]"></div>
<div class="absolute left-1/2 top-1/4 h-[35rem] w-[35rem] -translate-x-1/2 rounded-full bg-cyan-500/10 blur-[128px]"></div>
</div>
<div class="mx-auto max-w-4xl px-6 py-24 text-center sm:py-32 lg:py-40">
<!-- Badge -->
<p class="mb-6 inline-flex rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium uppercase tracking-[0.2em] text-indigo-200 backdrop-blur">Introducing v2.0</p>
<!-- Headline -->
<h1 class="text-balance text-4xl font-extrabold tracking-tight text-white sm:text-6xl lg:text-7xl">
Ship faster with<br class="hidden sm:inline"> production-ready patterns.
</h1>
<!-- Body -->
<p class="mx-auto mt-6 max-w-2xl text-pretty text-lg leading-relaxed text-[var(--ws-hero-text-soft)] sm:text-xl">
Beautiful, accessible UI sections you can copy, paste, and customize. No dependencies, no lock-in — just clean Tailwind code you own.
</p>
<!-- Actions -->
<div class="mt-10 flex flex-wrap justify-center gap-4">
<a href="#" class="rounded-xl bg-white px-6 py-3.5 text-sm font-semibold text-slate-900 shadow-lg shadow-white/10 transition hover:bg-slate-100">Get Started</a> <!-- ws-ok -->
<a href="#" class="rounded-xl border border-white/20 bg-white/5 px-6 py-3.5 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/10">View Documentation</a>
</div>
</div>
<!-- Trust indicators -->
<div class="border-t border-white/10 bg-white/[0.02]">
<div class="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-x-12 gap-y-6 px-6 py-8">
<p class="w-full text-center text-xs font-medium uppercase tracking-[0.2em] text-[var(--ws-hero-text-muted)] sm:w-auto">Trusted by teams at</p>
<svg class="h-6 text-[var(--ws-hero-text-muted)]" viewBox="0 0 120 24" fill="currentColor" aria-label="Company A"><rect x="0" y="4" width="16" height="16" rx="4"/><rect x="22" y="9" width="40" height="6" rx="3"/></svg>
<svg class="h-6 text-[var(--ws-hero-text-muted)]" viewBox="0 0 120 24" fill="currentColor" aria-label="Company B"><circle cx="12" cy="12" r="8"/><rect x="26" y="9" width="44" height="6" rx="3"/></svg>
<svg class="h-6 text-[var(--ws-hero-text-muted)]" viewBox="0 0 120 24" fill="currentColor" aria-label="Company C"><polygon points="12,2 22,22 2,22"/><rect x="28" y="9" width="36" height="6" rx="3"/></svg>
<svg class="h-6 text-[var(--ws-hero-text-muted)]" viewBox="0 0 120 24" fill="currentColor" aria-label="Company D"><rect x="2" y="2" width="20" height="20" rx="10"/><rect x="28" y="9" width="42" height="6" rx="3"/></svg>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Flagship Published
landing-pageherodark-modegradienttrustmarketingsaas
Slots
| Name | Required | Description |
|---|---|---|
| badge | No | Optional pre-heading label or tag. |
| headline | Yes | Main value proposition in large bold type. |
| body | Yes | Supporting subtitle or product explanation. |
| actions | Yes | Primary (light) and secondary (ghost) CTAs. |
| trust | No | Trust indicators row — logos, stats, or social proof. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| align | 'center' | center | Content is center-aligned by design. |
| maxWidth | string | max-w-4xl | Container max width utility for text content. |
Enhanced dark variant for the Hero family. Extends hero/base with a slate-950 background, decorative gradient orbs, and a trust indicator row for social proof.