landing-page hero image screenshot product hero media screenshot mockup conversion hero with screenshot product landing hero with visual
Hero With Image
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/with-image.json with-image.html
<section class="ws-hero relative isolate overflow-hidden bg-[var(--ws-hero-bg)] text-[var(--ws-hero-text)]">
<div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-indigo-500/20 via-transparent to-cyan-400/20"></div>
<div class="mx-auto grid max-w-7xl gap-10 px-6 py-20 lg:grid-cols-2 lg:items-center lg:py-28">
<div class="relative z-10">
<p class="mb-4 inline-flex rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-[var(--ws-hero-text-soft)]">Hero With Image</p>
<h1 class="text-balance text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">Show the product where decisions happen.</h1>
<p class="mt-5 max-w-xl text-pretty text-lg text-[var(--ws-hero-text-soft)]">A balanced hero variant with clear hierarchy and a dedicated media slot for screenshots, mockups, or analytics snapshots.</p>
<div class="mt-8 flex flex-wrap gap-3">
<a href="#" class="rounded-xl bg-cyan-300 px-5 py-3 text-sm font-semibold text-slate-900 transition hover:bg-cyan-200">Book demo</a>
<a href="#" class="rounded-xl border border-white/20 bg-white/5 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:bg-white/10">Explore docs</a>
</div>
</div>
<div class="relative z-10">
<div class="rounded-2xl border border-white/15 bg-white/5 p-4 shadow-2xl backdrop-blur">
<div class="flex aspect-[3/2] w-full items-center justify-center rounded-xl bg-gradient-to-br from-cyan-200 to-cyan-300" aria-label="Dashboard preview">
<svg class="h-12 w-12 text-[var(--ws-hero-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" /></svg>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
landing-pageheroimagescreenshotproduct
Slots
| Name | Required | Description |
|---|---|---|
| headline | Yes | Main value proposition. |
| body | Yes | Supporting paragraph. |
| actions | Yes | CTA group. |
| media | Yes | Screenshot or mockup panel. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| imageAlt | string | Dashboard preview | Accessible alt text for hero media image. |
Use this when the product visual itself is part of the message and should be visible above the fold.