グラデーションCTA

1export function CtaGradient001() {
2  return (
3    <section className="relative overflow-hidden bg-white py-24 dark:bg-zinc-950">
4      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
5        {/* CTA カード */}
6        <div className="relative overflow-hidden rounded-3xl bg-gradient-to-r from-violet-600 to-indigo-600 p-8 text-center sm:p-12 md:p-16">
7          {/* 装飾的な要素 */}
8          <div className="absolute -left-16 -top-16 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
9          <div className="absolute -bottom-16 -right-16 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
10
11          {/* グリッドパターン */}
12          <div
13            className="absolute inset-0 opacity-10"
14            style={{
15              backgroundImage: `radial-gradient(circle at 1px 1px, white 1px, transparent 0)`,
16              backgroundSize: "32px 32px",
17            }}
18          />
19
20          {/* コンテンツ */}
21          <div className="relative">
22            <h2 className="mb-4 text-2xl font-bold text-white sm:text-3xl md:text-4xl lg:text-5xl">
23              Ready to get started?
24            </h2>
25            <p className="mx-auto mb-8 max-w-2xl text-lg text-white/80">
26              Join thousands of developers building amazing products with our
27              components. Start your free trial today.
28            </p>
29
30            {/* ボタン */}
31            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
32              <button className="inline-flex h-12 items-center justify-center rounded-full bg-white px-8 font-semibold text-violet-600 transition-transform hover:scale-105">
33                Start Free Trial
34              </button>
35              <button className="inline-flex h-12 items-center justify-center rounded-full border-2 border-white/30 px-8 font-semibold text-white transition-colors hover:bg-white/10">
36                Talk to Sales
37              </button>
38            </div>
39
40            {/* 補足テキスト */}
41            <p className="mt-6 text-sm text-white/60">
42              No credit card required • 14-day free trial • Cancel anytime
43            </p>
44          </div>
45        </div>
46      </div>
47    </section>
48  );
49}