Split Hero

headline x visual

A two-column hero — eyebrow, big headline, subhead, dual CTA on the left; a product visual on the right.

herotwo-columncta

New

Ship your site in an afternoon.

Components, blocks, and funnels — ready to copy into any client build.

Get startedLearn more

Code

hero-split.tsx

export function SplitHero() {
  return (
    <section className="mx-auto grid max-w-6xl gap-10 px-6 py-24 md:grid-cols-2 md:items-center">
      <div className="space-y-5">
        <p className="text-xs uppercase tracking-wider text-muted-foreground">New</p>
        <h1 className="text-5xl font-semibold tracking-tight">Ship your site in an afternoon.</h1>
        <p className="text-muted-foreground">Components, blocks, and funnels — ready to copy into any client build.</p>
        <div className="flex gap-3">
          <a className="rounded-full bg-foreground px-5 py-2.5 text-background">Get started</a>
          <a className="rounded-full border border-border px-5 py-2.5">Learn more</a>
        </div>
      </div>
      <div className="aspect-[4/3] rounded-2xl border border-border bg-muted" />
    </section>
  );
}

Use it in another build

Drop this section into a page, keep your project tokens, and it themes itself. Or tell Claude Code: “add the Split Hero section and fill it with my copy.”