ミニマルCTA

1export function CtaMinimal001() {
2  return (
3    <section className="bg-white py-24 dark:bg-zinc-950">
4      <div className="mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
5        {/* Eyebrow */}
6        <p className="text-sm font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-400">
7          Start for free
8        </p>
9
10        {/* Heading */}
11        <h2 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl dark:text-white">
12          Ready to get started?
13        </h2>
14
15        {/* Description */}
16        <p className="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
17          Join over 10,000+ teams using our platform to build better products
18          faster. No credit card required.
19        </p>
20
21        {/* Email Input & Button */}
22        <form className="mx-auto mt-10 flex max-w-md flex-col gap-3 sm:flex-row">
23          <input
24            type="email"
25            placeholder="Enter your email"
26            className="flex-1 rounded-lg border border-gray-300 bg-white px-4 py-3 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white dark:placeholder-gray-500"
27          />
28          <button
29            type="submit"
30            className="rounded-lg bg-indigo-600 px-6 py-3 font-medium text-white shadow-lg shadow-indigo-500/30 transition-all hover:bg-indigo-700 hover:shadow-xl hover:shadow-indigo-500/40"
31          >
32            Get Started
33          </button>
34        </form>
35
36        {/* Trust Indicators */}
37        <div className="mt-8 flex flex-wrap items-center justify-center gap-6 text-sm text-gray-500 dark:text-gray-400">
38          <div className="flex items-center gap-2">
39            <svg
40              className="h-5 w-5 text-green-500"
41              fill="none"
42              stroke="currentColor"
43              viewBox="0 0 24 24"
44            >
45              <path
46                strokeLinecap="round"
47                strokeLinejoin="round"
48                strokeWidth={2}
49                d="M5 13l4 4L19 7"
50              />
51            </svg>
52            Free 14-day trial
53          </div>
54          <div className="flex items-center gap-2">
55            <svg
56              className="h-5 w-5 text-green-500"
57              fill="none"
58              stroke="currentColor"
59              viewBox="0 0 24 24"
60            >
61              <path
62                strokeLinecap="round"
63                strokeLinejoin="round"
64                strokeWidth={2}
65                d="M5 13l4 4L19 7"
66              />
67            </svg>
68            No credit card required
69          </div>
70          <div className="flex items-center gap-2">
71            <svg
72              className="h-5 w-5 text-green-500"
73              fill="none"
74              stroke="currentColor"
75              viewBox="0 0 24 24"
76            >
77              <path
78                strokeLinecap="round"
79                strokeLinejoin="round"
80                strokeWidth={2}
81                d="M5 13l4 4L19 7"
82              />
83            </svg>
84            Cancel anytime
85          </div>
86        </div>
87      </div>
88    </section>
89  );
90}