Gradient banner

import { Button } from "@cronus-ui/ui";
import { ArrowRight } from "lucide-react";

export function CtaBannerBlock() {
  return (
    <section className="relative overflow-hidden bg-gradient-primary px-6 py-16 sm:py-20">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute -start-24 -top-24 size-72 rounded-full bg-primary-foreground/15 blur-3xl"
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute -bottom-28 -end-20 size-80 rounded-full bg-primary-foreground/10 blur-3xl"
      />
      <div className="relative mx-auto flex max-w-5xl flex-col items-center gap-8 text-center lg:flex-row lg:justify-between lg:text-start">
        <div className="max-w-2xl">
          <h2 className="text-balance font-display text-3xl font-semibold tracking-tight text-primary-foreground sm:text-4xl">
            Ship your next launch on Cronus.
          </h2>
          <p className="mt-3 text-balance text-lg text-primary-foreground/80">
            Every block, theme, and primitive wired together — production-ready from day one.
          </p>
        </div>
        <div className="flex shrink-0 flex-col gap-3 sm:flex-row">
          <Button variant="secondary" size="lg">
            Start free trial
            <ArrowRight aria-hidden="true" />
          </Button>
          <Button
            variant="outline"
            size="lg"
            className="border-primary-foreground/40 bg-transparent text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground"
          >
            Talk to sales
          </Button>
        </div>
      </div>
    </section>
  );
}