components/cta-band.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import Link from "next/link";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function CtaBand({
  title = "Request access to The Agentic Cloud.",
  body = "Invitation-based. An outcomes partner will assess whether your operating thesis, your lake, and our attention-free runtime are prepared to compound.",
}: {
  title?: string;
  body?: string;
}) {
  return (
    <section className="border-t border-white/10 px-5 py-20 sm:px-8 md:py-24">
      <div className="relative mx-auto flex max-w-6xl flex-col items-start justify-between gap-8 overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-violet-600/25 via-fuchsia-600/15 to-cyan-500/15 px-6 py-10 shadow-[0_0_80px_oklch(0.6_0.2_305/0.25)] sm:px-10 md:flex-row md:items-center">
        <div className="pointer-events-none absolute -right-10 -top-16 size-56 rounded-full bg-fuchsia-500/30 blur-3xl" />
        <div className="pointer-events-none absolute -bottom-16 -left-10 size-56 rounded-full bg-cyan-400/20 blur-3xl" />
        <div className="relative max-w-xl">
          <h2 className="font-heading text-3xl leading-tight text-foreground md:text-4xl">
            {title}
          </h2>
          <p className="mt-3 text-sm leading-relaxed text-muted-foreground md:text-base">
            {body}
          </p>
        </div>
        <Link
          href="/request-access"
          className={cn(buttonVariants(), "relative h-11 shrink-0 px-5 text-sm")}
        >
          Request access
        </Link>
      </div>
    </section>
  );
}