hero product preview mockup IDE app vignette screenshot hero product preview mockup screenshot IDE vignette dual-cta hero with product screenshot preview below headline app mockup hero section with fade vignette
Hero Product Preview
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/product-preview.json product-preview.html
<section class="ws-hero bg-[var(--ws-hero-bg)] pt-20 pb-0">
<div class="mx-auto max-w-5xl px-6 text-center">
<!-- Eyebrow -->
<div class="mb-5 inline-flex items-center gap-2 rounded-full border border-[var(--ws-hero-badge-border)] bg-[var(--ws-hero-badge-bg)] px-3.5 py-1.5">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-500" aria-hidden="true"></span>
<span class="text-xs font-medium text-[var(--ws-hero-badge-text)]">v3.2 just shipped — Parallel agents</span>
<a href="#" class="text-xs font-medium text-[var(--ws-hero-accent)] hover:underline">See what's new →</a>
</div>
<!-- Headline -->
<h1 class="text-balance text-4xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-5xl md:text-6xl">
Built to make you<br class="hidden sm:block">
<span class="text-[var(--ws-hero-accent)]">extraordinarily productive</span>
</h1>
<!-- Subtext -->
<p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-[var(--ws-hero-text-soft)]">
The AI editor that understands your entire codebase — not just the file you're looking at.
Write, refactor and ship faster than ever before.
</p>
<!-- CTAs -->
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
<a href="#"
class="inline-flex items-center gap-2 rounded-xl bg-[var(--ws-hero-cta-bg)] px-5 py-3 text-sm font-semibold text-[var(--ws-hero-cta-text)] shadow-sm transition-opacity hover:opacity-90">
<svg class="h-4 w-4" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1a6.5 6.5 0 110 13A6.5 6.5 0 018 1zm0 3.5v4l2.5 1.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
Download for macOS
</a>
<a href="#"
class="inline-flex items-center gap-2 rounded-xl border border-[var(--ws-hero-cta-secondary-border)] bg-[var(--ws-hero-cta-secondary-bg)] px-5 py-3 text-sm font-semibold text-[var(--ws-hero-text)] transition-colors hover:border-[var(--ws-hero-accent)]">
Try in browser
<svg class="h-4 w-4" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
<!-- Social proof -->
<p class="mt-5 text-xs text-[var(--ws-hero-text-muted)]">
Trusted by engineers at Stripe, NVIDIA, OpenAI and 50,000+ teams worldwide
</p>
</div>
<!-- Product Preview -->
<div class="relative mx-auto mt-14 max-w-6xl px-6">
<!-- Vignette fade at bottom -->
<div class="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-[var(--ws-hero-bg)] to-transparent" aria-hidden="true"></div>
<!-- Mock IDE window -->
<div class="overflow-hidden rounded-t-2xl border border-b-0 border-[var(--ws-hero-preview-border)] bg-[var(--ws-hero-preview-bg)] shadow-2xl">
<!-- Titlebar -->
<div class="flex items-center gap-2 border-b border-[var(--ws-hero-preview-border)] bg-[var(--ws-hero-preview-chrome)] px-4 py-3">
<div class="flex gap-1.5" aria-hidden="true">
<span class="h-3 w-3 rounded-full bg-red-400"></span>
<span class="h-3 w-3 rounded-full bg-yellow-400"></span>
<span class="h-3 w-3 rounded-full bg-green-400"></span>
</div>
<div class="mx-auto flex items-center gap-2 rounded-md border border-[var(--ws-hero-preview-border)] bg-[var(--ws-hero-preview-bg)] px-3 py-1">
<span class="text-xs text-[var(--ws-hero-text-muted)]">src / components / AuthModal.tsx</span>
</div>
</div>
<!-- Code area (decorative) -->
<div class="flex" aria-hidden="true" role="presentation">
<!-- Sidebar -->
<div class="hidden w-48 shrink-0 border-r border-[var(--ws-hero-preview-border)] bg-[var(--ws-hero-preview-chrome)] p-3 sm:block">
<div class="space-y-1">
<div class="h-3 w-24 rounded bg-[var(--ws-hero-preview-border)] opacity-60"></div>
<div class="h-3 w-32 rounded bg-[var(--ws-hero-preview-border)] opacity-40"></div>
<div class="mt-2 h-3 w-20 rounded bg-[var(--ws-hero-preview-border)] opacity-60"></div>
<div class="h-3 w-28 rounded bg-[var(--ws-hero-preview-border)] opacity-80 text-xs font-mono text-[var(--ws-hero-accent)]"></div>
<div class="h-3 w-24 rounded bg-[var(--ws-hero-preview-border)] opacity-40"></div>
<div class="mt-2 h-3 w-16 rounded bg-[var(--ws-hero-preview-border)] opacity-60"></div>
<div class="h-3 w-36 rounded bg-[var(--ws-hero-preview-border)] opacity-40"></div>
</div>
</div>
<!-- Code lines -->
<div class="min-h-[260px] flex-1 p-5 font-mono text-xs leading-6">
<div class="space-y-1 text-[var(--ws-hero-text-muted)]">
<div class="flex gap-4"><span class="w-6 text-right opacity-40">1</span><span class="text-violet-400">import</span><span class="text-[var(--ws-hero-text-soft)]"> { useState } from <span class="text-amber-400">'react'</span></span></div>
<div class="flex gap-4"><span class="w-6 text-right opacity-40">2</span><span></span></div>
<div class="flex gap-4"><span class="w-6 text-right opacity-40">3</span><span class="text-violet-400">export default function</span><span class="text-blue-400"> AuthModal</span><span class="text-[var(--ws-hero-text-soft)]">() {</span></div>
<div class="flex gap-4"><span class="w-6 text-right opacity-40">4</span><span class="pl-4 text-violet-400">const</span><span class="text-[var(--ws-hero-text-soft)]"> [tab, setTab] = useState<</span><span class="text-emerald-400">'login'</span> | <span class="text-emerald-400">'register'</span>>(<span class="text-emerald-400">'login'</span>)</div>
<!-- AI suggestion highlight -->
<div class="flex gap-4 rounded-r-md border-l-2 border-[var(--ws-hero-accent)] bg-[var(--ws-hero-accent)]/8 pl-1">
<span class="w-6 text-right opacity-40">5</span>
<span class="pl-4 text-violet-400">const</span>
<span class="text-[var(--ws-hero-text-soft)]"> [loading, setLoading] = useState(</span>
<span class="text-amber-400">false</span>
<span class="text-[var(--ws-hero-text-soft)]">)</span>
</div>
<div class="flex gap-4"><span class="w-6 text-right opacity-40">6</span><span></span></div>
<div class="flex gap-4"><span class="w-6 text-right opacity-40">7</span><span class="pl-4 text-violet-400">return</span><span class="text-[var(--ws-hero-text-soft)]"> (</span></div>
<div class="flex gap-4"><span class="w-6 text-right opacity-40">8</span><span class="pl-8 text-blue-400"><div</span><span class="text-amber-400"> className</span><span class="text-[var(--ws-hero-text-soft)]">=</span><span class="text-emerald-400">"modal-overlay"</span><span class="text-blue-400">></span></div>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
heroproductpreviewmockupIDEappvignettescreenshot
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Kleiner Hinweis-Badge mit Versionsnummer oder News-Link. |
| headline | Yes | Hauptüberschrift mit optionalem farbigem Akzent-Span. |
| subtext | Yes | Kurze Beschreibung unter dem Headline. |
| cta-primary | Yes | Primäre CTA-Schaltfläche (z.B. Download, Get started). |
| cta-secondary | No | Sekundäre CTA (z.B. Try in browser, Watch demo). |
| social-proof | No | Kurze Vertrauenszeile unter den CTAs. |
| product-preview | Yes | App-Mockup oder Screenshot-Block, unten angeschnitten mit Vignette. |
Hero-Sektion mit zentriertem Headline, optionalem Eyebrow-Badge und Dual-CTA. Darunter ein großes App/IDE-Mockup das am unteren Rand mit einem Token-farbigen Vignette-Gradient in den Hintergrund ausläuft. Das Preview-Element ist dekorativ und kann durch ein echtes <img> ersetzt werden. Kein padding-bottom auf der Section — der Übergang zur nächsten Sektion ist nahtlos.