Split Product Hero

Heroes 1

About

A split-layout product hero with a serif headline, dual call-to-action buttons, a compact trusted-by logo row, and a layered stat-card illustration.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Split Product Hero to your project and fits it to your theme.

Code

How Split Product Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Hero06 } from "@/components/ui/hero-06";

export default function Hero06Demo() {
  return (
    <Hero06
      title="Ship your best work,"
      highlight="without the busywork."
      description="One workspace to plan, build, and launch. No context switching, no clutter."
      animation="subtle"
      primaryCTA={{
        ctaEnabled: true,
        text: "Start for free",
        link: "",
        variant: "default",
      }}
      secondaryCTA={{
        ctaEnabled: true,
        text: "Book a demo",
        link: "",
        variant: "outline",
      }}
      logosLabel="Trusted by fast-moving teams"
      logos={["Acme", "Globex", "Initech", "Umbrella"]}
    />
  );
}