ai hero landing-page chatbot saas product ai hero landing chat input saas product trust AI product landing page hero hero section with chat input
AI Hero Base
Fetch pattern JSON:
curl https://webspire.de/patterns/ai-hero/base.json base.html
<section class="ws-ai-hero bg-[var(--ws-ai-hero-bg)]">
<div class="mx-auto max-w-4xl px-6 py-24 text-center sm:py-32">
<!-- Badge -->
<p class="mb-6 inline-flex items-center gap-2 rounded-full border border-[var(--ws-ai-hero-border)] bg-[var(--ws-ai-hero-bg)] 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>
<!-- Headline -->
<h1 class="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="mx-auto mt-6 max-w-2xl 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>
<!-- Chat input -->
<div class="mx-auto mt-10 max-w-xl">
<div class="flex items-center gap-2 rounded-2xl border border-[var(--ws-ai-hero-border)] bg-[var(--ws-ai-hero-bg)] p-2 shadow-lg">
<input type="text" placeholder="Ask anything..." aria-label="Ask anything" class="flex-1 bg-transparent px-4 py-3 text-base text-[var(--ws-ai-hero-text)] placeholder:text-[var(--ws-ai-hero-text-soft)] focus:outline-none" />
<button type="button" class="flex-shrink-0 rounded-xl bg-[var(--ws-ai-hero-action-bg)] px-5 py-3 text-sm font-semibold text-[var(--ws-ai-hero-action-text)] transition hover:opacity-90" aria-label="Send message">
<svg class="h-5 w-5" 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>
</button>
</div>
</div>
<!-- Trust indicators -->
<div class="mt-12 flex flex-wrap items-center justify-center gap-8 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>
10k+ users
</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>
99.9% uptime
</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>
SOC 2
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aiherolanding-pagechatbotsaasproduct
Slots
| Name | Required | Description |
|---|---|---|
| badge | No | Powered by AI badge above headline. |
| headline | Yes | Main value proposition headline. |
| subtitle | Yes | Supporting description paragraph. |
| input | Yes | Chat-style input with send button. |
| trust | No | Trust indicator items below the input. |
Base variant for the AI Hero family. Centered layout with a Powered by AI badge, bold headline, subtitle, prominent chat-style input bar, and three trust indicators. Designed for AI product landing pages.