Hero SaaS

// SaaS hero: eyebrow, headline, intro, primary button plus a copyable install
// command, three stats, and a large product image on the right.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Props = {
  eyebrow?: string;
  heading?: string;
  intro?: string;
  primary?: { label: string; href: string };
  command?: string;
  stats?: [string, string][];
  image?: string;
  imageAlt?: string;
};

export default function HeroSaas({
  eyebrow = "Design system",
  heading = "Ship polished interfaces in days, not weeks",
  intro = "Hand-crafted components for product teams and indie makers. Copy, paste and ship. No bloat.",
  primary = { label: "Browse components", href: "#" },
  command = "npm install @acme/ui",
  stats = [
    ["120+", "Components"],
    ["4.9", "Rating"],
    ["MIT", "License"],
  ],
  image = "https://images.unsplash.com/photo-1565382038303-8c62e88d119a?w=1600&q=80&auto=format&fit=crop",
  imageAlt = "Abstract purple light trails",
}: Props) {
  return (
    <section className="flex min-h-screen items-center bg-white px-6 font-sans antialiased md:px-12 lg:px-20">
      <div className="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-16 py-24 lg:grid-cols-2">
        <div>
          <div className="mb-8 flex items-center gap-3">
            <div className="h-px w-10 bg-lime-500" />
            <span className="font-mono text-xs uppercase tracking-[0.2em] text-lime-700">{eyebrow}</span>
          </div>

          <h1 className="mb-6 text-[clamp(36px,5vw,72px)] font-bold leading-[1.05] tracking-[-0.03em] text-black">{heading}</h1>
          <p className="mb-10 max-w-md text-xl leading-relaxed text-zinc-500">{intro}</p>

          <div className="mb-12 flex flex-col gap-4 sm:flex-row sm:items-center">
            <a href={primary.href} className="rounded-lg bg-lime-400 px-7 py-3.5 text-center text-sm font-semibold text-black transition-colors duration-200 hover:bg-lime-500">
              {primary.label}
            </a>
            <code className="flex items-center gap-2 font-mono text-sm text-zinc-500">
              <span className="text-zinc-400">$</span> {command}
            </code>
          </div>

          <div className="flex items-center gap-8">
            {stats.map(([num, label]) => (
              <div key={label}>
                <div className="text-4xl font-bold text-black">{num}</div>
                <div className="text-xs uppercase tracking-wider text-zinc-500">{label}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="relative h-[60vh] min-h-[360px] overflow-hidden rounded-3xl">
          <img src={image} alt={imageAlt} className="absolute inset-0 h-full w-full object-cover" />
        </div>
      </div>
    </section>
  );
}