CTA Banner

import Link from "next/link";
import { ArrowRight } from "lucide-react";

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

export default function CtaBanner() {
  return (
    <section className="bg-foreground text-background">
      <div className="mx-auto flex w-full max-w-6xl flex-col items-start gap-6 px-6 py-16 sm:flex-row sm:items-center sm:justify-between sm:py-20">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            Ready when you are
          </h2>
          <p className="mt-2 max-w-md text-background/70">
            Join 4,000+ teams already shipping faster. Set up takes less than
            two minutes.
          </p>
        </div>
        <Button
          size="lg"
          variant="secondary"
          className="shrink-0 bg-background text-foreground hover:bg-background/90"
          render={<Link href="#" />}
        >
          Get started
          <ArrowRight data-icon="inline-end" />
        </Button>
      </div>
    </section>
  );
}