グラデーションCTA

1export function CtaGradient001() {
2  return (
3    <section className="relative overflow-hidden bg-background py-32">
4      {/* Subtle gradient overlay */}
5      <div className="absolute inset-0 bg-gradient-to-b from-muted/50 via-transparent to-muted/50" />
6
7      {/* Subtle grid pattern */}
8      <div
9        className="absolute inset-0 opacity-[0.03] dark:opacity-[0.03]"
10        style={{
11          backgroundImage: `linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)`,
12          backgroundSize: "64px 64px",
13        }}
14      />
15
16      <div className="relative mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
17        {/* Eyebrow */}
18        <p className="mb-6 text-center text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
19          Start building today
20        </p>
21
22        {/* Heading */}
23        <h2 className="mb-6 text-center text-3xl font-light tracking-tight text-foreground sm:text-4xl md:text-5xl lg:text-6xl">
24          Ready to get started?
25        </h2>
26
27        {/* Description */}
28        <p className="mx-auto mb-12 max-w-2xl text-center text-lg font-light leading-relaxed tracking-wide text-muted-foreground">
29          Join thousands of developers building amazing products with our
30          components. Start your free trial today.
31        </p>
32
33        {/* Buttons */}
34        <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
35          <button className="inline-flex h-12 items-center justify-center border border-foreground bg-foreground px-8 text-sm font-medium uppercase tracking-[0.2em] text-background transition-all hover:bg-transparent hover:text-foreground">
36            Start Free Trial
37          </button>
38          <button className="inline-flex h-12 items-center justify-center border border-border bg-transparent px-8 text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground transition-all hover:border-foreground/50 hover:text-foreground">
39            Talk to Sales
40          </button>
41        </div>
42
43        {/* Footer text */}
44        <p className="mt-10 text-center text-xs tracking-[0.2em] text-muted-foreground/60">
45          No credit card required — 14-day free trial — Cancel anytime
46        </p>
47
48        {/* Subtle bottom border */}
49        <div className="mx-auto mt-16 h-px w-32 bg-gradient-to-r from-transparent via-border to-transparent" />
50      </div>
51    </section>
52  );
53}