A two-column hero for a product landing page. The left side carries an announcement badge, the headline, a short pitch and an email form with a single button. The right side is a product preview drawn with plain shapes, so it loads instantly and you can swap in a screenshot later. On phones the columns stack with the text first.
export default function SplitHeroWithEmailCapture() {
return (
<section className="bg-white px-6 py-16 text-slate-900 sm:py-24">
<div className="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2">
<div>
<span className="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-700">
<span className="h-1.5 w-1.5 rounded-full bg-indigo-600" /> New: team workspaces
</span>
<h1 className="mt-5 text-4xl font-semibold tracking-tight sm:text-5xl">Plan projects without the busywork</h1>
<p className="mt-5 max-w-lg text-lg leading-relaxed text-slate-600">
Tasks, deadlines and files in one calm place. Set it up in a minute and invite your team when you are ready.
</p>
<form className="mt-8 flex max-w-md flex-col gap-3 sm:flex-row" action="#">
<label htmlFor="hero-email" className="sr-only">Email address</label>
<input id="hero-email" type="email" required placeholder="[email protected]" className="w-full rounded-lg border border-slate-300 px-4 py-3 text-sm placeholder:text-slate-400 focus:border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-600/20" />
<button type="submit" className="flex-none rounded-lg bg-indigo-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-indigo-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2">
Start free
</button>
</form>
<p className="mt-3 text-xs text-slate-500">Free for 14 days. No card needed.</p>
</div>
<div aria-hidden="true" className="rounded-2xl border border-slate-200 bg-slate-50 p-4 shadow-xl shadow-slate-200/60">
<div className="rounded-xl bg-white p-5 shadow-sm">
<div className="flex items-center justify-between">
<div className="h-3 w-28 rounded-full bg-slate-200" />
<div className="flex gap-1.5"><span className="h-6 w-6 rounded-full bg-indigo-200" /><span className="h-6 w-6 rounded-full bg-emerald-200" /><span className="h-6 w-6 rounded-full bg-amber-200" /></div>
</div>
<div className="mt-6 space-y-3">
{[["bg-emerald-500", "w-3/4"], ["bg-indigo-500", "w-2/3"], ["bg-amber-500", "w-1/2"], ["bg-slate-300", "w-3/5"]].map(([dot, width], i) => (
<div key={i} className="flex items-center gap-3 rounded-lg border border-slate-100 p-3">
<span className={`h-2.5 w-2.5 flex-none rounded-full ${dot}`} />
<div className={`h-2.5 rounded-full bg-slate-200 ${width}`} />
<div className="ml-auto h-5 w-12 flex-none rounded-full bg-slate-100" />
</div>
))}
</div>
<div className="mt-6 grid grid-cols-3 gap-3">
<div className="h-16 rounded-lg bg-indigo-50" /><div className="h-16 rounded-lg bg-emerald-50" /><div className="h-16 rounded-lg bg-amber-50" />
</div>
</div>
</div>
</div>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/split-hero-with-email-capture.json
A headline that says what the product does, one or two sentences of support, one clear action and something visual. Everything else can wait for the sections below.
Add `order-first lg:order-none` to the right column. By default the text comes first on small screens, which is usually better because the headline is what people came for.
Yes. Replace the `<form>` with two links: a primary one for the main action and a quieter secondary one, for example Start free and Watch demo.
No. It uses only core Tailwind utility classes and inline shapes, so there is nothing to install beyond Tailwind itself.
Related: Pricing Table with Monthly and Yearly Toggle, Button Set: Primary, Secondary, Ghost, Icon and Loading.
More hero sections or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.