import { ArrowRight, Package, ShieldCheck, Sparkles, Star } from "lucide-react";
import { Button } from "@sisyphos-ui/react";
// Use the GitHub mark you ship in your own icon set; the package
// doesn't bundle brand icons (and shouldn't — they're trademarks).

export function CtaBanner() {
  return (
    <section className="relative overflow-hidden bg-black px-6 py-32 text-center text-white">
      {/* Top + bottom accent lines */}
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-orange-500/60 to-transparent" />
      <div className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-orange-500/30 to-transparent" />

      <div className="relative mx-auto flex max-w-3xl flex-col items-center">
        <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-orange-300">
          <Sparkles className="size-3.5" />
          Ready when you are
        </span>

        <h2 className="mt-6 text-balance text-6xl font-bold leading-tight tracking-tight">
          Build the thing.{" "}
          <span className="bg-gradient-to-r from-orange-300 via-orange-500 to-orange-300 bg-clip-text text-transparent">
            Ship the thing.
          </span>
        </h2>
        <p className="mt-5 max-w-lg text-balance text-zinc-400">
          One npm install, one stylesheet, three frameworks. Stop yak-shaving
          your starter kit — start shipping the product.
        </p>

        <div className="mt-9 flex gap-3">
          <Button size="lg" endIcon={<ArrowRight className="size-4" />}>
            Get started
          </Button>
          <a
            href="https://github.com/your/repo"
            className="inline-flex h-12 items-center justify-center gap-2 rounded-md border border-white/15 bg-white/5 px-5 text-sm font-semibold text-white transition-colors hover:bg-white/10"
          >
            Star on GitHub
          </a>
        </div>

        {/* Trust strip */}
        <div className="mt-10 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-xs text-zinc-500">
          <span className="inline-flex items-center gap-1.5">
            <Star className="size-3.5 fill-amber-400 text-amber-400" />
            <span className="text-zinc-300">4.9</span> on Product Hunt
          </span>
          <span className="size-1 rounded-full bg-zinc-700" />
          <span className="inline-flex items-center gap-1.5">
            <Package className="size-3.5" />
            <span className="text-zinc-300">33</span> components
          </span>
          <span className="size-1 rounded-full bg-zinc-700" />
          <span className="inline-flex items-center gap-1.5">
            <ShieldCheck className="size-3.5" />
            MIT & forever
          </span>
        </div>
      </div>
    </section>
  );
}
Components used

Used in templates
