import Link from "next/link";
import { Button } from "@/components/ui/button";

export function CtaGradientBanner() {
  return (
    <section className="relative overflow-hidden rounded-3xl border border-border bg-gradient-to-br from-primary/15 via-card to-secondary/15 px-6 py-10">
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -left-20 top-10 h-52 w-52 rounded-full bg-primary/20 blur-3xl" />
        <div className="absolute -bottom-24 right-0 h-60 w-60 rounded-full bg-secondary/20 blur-3xl" />
      </div>

      <div className="relative flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
        <div className="max-w-2xl space-y-4">
          <span className="inline-flex items-center rounded-full border border-border bg-background/70 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
            New release
          </span>
          <h2 className="text-3xl font-semibold text-foreground md:text-4xl">
            Launch your next campaign in one afternoon
          </h2>
          <p className="text-sm text-muted-foreground md:text-base">
            Grab a polished CTA banner with gradient depth, crisp typography, and
            conversion-focused spacing. Swap the copy and ship today.
          </p>
        </div>

        <div className="flex flex-wrap gap-3">
          <Button size="lg">Get the template</Button>
          <Button variant="outline" size="lg" asChild>
            <Link href="/blocks">See all blocks</Link>
          </Button>
        </div>
      </div>
    </section>
  );
}
CTA Gradient Banner

Preview

Launch your next campaign in one afternoon

Installation
