ai hero split two-column chat preview landing-page ai hero split two-column chat preview mockup landing split AI hero with chat preview two-column hero for AI product
AI Hero Split
Fetch pattern JSON:
curl https://webspire.de/patterns/ai-hero/split.json split.html
<section class="ws-ai-hero bg-[var(--ws-ai-hero-bg)]">
<div class="mx-auto max-w-7xl">
<div class="grid min-h-[80vh] lg:grid-cols-2">
<!-- Content -->
<div class="flex flex-col justify-center px-6 py-20 lg:px-12 lg:py-28">
<p class="inline-flex w-fit items-center gap-2 rounded-full border border-[var(--ws-ai-hero-border)] px-4 py-1.5 text-xs font-medium uppercase tracking-[0.15em] text-[var(--ws-ai-hero-accent)]">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" /></svg>
Powered by AI
</p>
<h1 class="mt-6 text-balance text-4xl font-bold tracking-tight text-[var(--ws-ai-hero-text)] sm:text-5xl lg:text-6xl">Build faster with AI</h1>
<p class="mt-5 max-w-lg text-pretty text-lg text-[var(--ws-ai-hero-text-soft)]">Transform your workflow with intelligent automation. Ask anything, generate content, and ship products in record time.</p>
<div class="mt-8 flex flex-wrap gap-3">
<a href="#" class="rounded-xl bg-[var(--ws-ai-hero-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-ai-hero-action-text)] transition hover:opacity-90">Get started free</a>
<a href="#" class="rounded-xl border border-[var(--ws-ai-hero-border)] bg-[var(--ws-ai-hero-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-ai-hero-text-soft)] transition hover:opacity-80">Watch demo</a>
</div>
<div class="mt-10 flex items-center gap-6 text-sm text-[var(--ws-ai-hero-text-soft)]">
<div class="flex items-center gap-2">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
No credit card
</div>
<div class="flex items-center gap-2">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
14-day trial
</div>
</div>
</div>
<!-- Mock chat interface -->
<div class="hidden items-center justify-center bg-gradient-to-br from-slate-100 via-slate-50 to-slate-100 p-8 lg:flex">
<div class="w-full max-w-sm space-y-3">
<!-- Chat header -->
<div class="rounded-t-2xl border border-[var(--ws-ai-hero-border)] bg-[var(--ws-color-surface)] p-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--ws-ai-hero-accent)] text-xs font-bold text-[var(--ws-ai-hero-action-text)]" aria-hidden="true">AI</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-ai-hero-text)]">AI Assistant</p>
<p class="text-xs text-[var(--ws-ai-hero-text-soft)]">Online</p>
</div>
</div>
</div>
<!-- Messages -->
<div class="space-y-3 border-x border-[var(--ws-ai-hero-border)] bg-[var(--ws-color-surface)] p-4">
<!-- User message -->
<div class="flex justify-end">
<div class="max-w-[75%] rounded-2xl rounded-br-md bg-[var(--ws-ai-hero-action-bg)] px-4 py-2.5 text-sm text-[var(--ws-ai-hero-action-text)]">How can I improve my landing page?</div>
</div>
<!-- AI message -->
<div class="flex justify-start">
<div class="max-w-[75%] rounded-2xl rounded-bl-md border border-[var(--ws-ai-hero-border)] bg-slate-50 px-4 py-2.5 text-sm text-[var(--ws-ai-hero-text)]">Focus on a clear value proposition, add social proof, and use a strong CTA above the fold.</div>
</div>
<!-- User message -->
<div class="flex justify-end">
<div class="max-w-[75%] rounded-2xl rounded-br-md bg-[var(--ws-ai-hero-action-bg)] px-4 py-2.5 text-sm text-[var(--ws-ai-hero-action-text)]">Show me an example.</div>
</div>
</div>
<!-- Chat input -->
<div class="rounded-b-2xl border border-[var(--ws-ai-hero-border)] bg-[var(--ws-color-surface)] p-3">
<div class="flex items-center gap-2 rounded-xl bg-slate-50 px-3 py-2">
<span class="flex-1 text-sm text-slate-400">Type a message...</span>
<svg class="h-4 w-4 text-[var(--ws-ai-hero-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aiherosplittwo-columnchatpreviewlanding-page
Slots
| Name | Required | Description |
|---|---|---|
| badge | No | Powered by AI badge above headline. |
| headline | Yes | Main value proposition headline. |
| subtitle | Yes | Supporting description paragraph. |
| actions | Yes | Primary and secondary CTA buttons. |
| proof | No | Trust indicators below buttons. |
| chatPreview | Yes | Mock chat interface on the right column. |
Two-column AI hero. Left column has badge, headline, subtitle, dual CTA buttons, and trust indicators. Right column shows a mock chat interface with user and AI messages. Chat preview hidden on mobile for clean responsive stacking. Min-height 80vh.