ミニマルCTA

1export function CtaMinimal001() {
2  return (
3    <section className="bg-background py-32">
4      <div className="mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
5        {/* Eyebrow */}
6        <p className="text-[11px] font-medium uppercase tracking-[0.4em] text-muted-foreground">
7          Start for free
8        </p>
9
10        {/* Heading */}
11        <h2 className="mt-8 text-3xl font-light tracking-tight text-foreground sm:text-4xl md:text-5xl">
12          Ready to get started?
13        </h2>
14
15        {/* Description */}
16        <p className="mx-auto mt-6 max-w-xl text-base font-light leading-relaxed tracking-wide text-muted-foreground">
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-12 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 border border-border bg-transparent px-5 py-3.5 text-sm tracking-wide text-foreground placeholder-muted-foreground/60 transition-colors focus:border-foreground/50 focus:outline-none"
27          />
28          <button
29            type="submit"
30            className="border border-foreground bg-foreground px-7 py-3.5 text-xs font-medium uppercase tracking-[0.2em] text-background transition-all hover:bg-transparent hover:text-foreground"
31          >
32            Get Started
33          </button>
34        </form>
35
36        {/* Trust Indicators */}
37        <div className="mt-10 flex flex-wrap items-center justify-center gap-8 text-xs tracking-[0.15em] text-muted-foreground/60">
38          <div className="flex items-center gap-2">
39            <span className="h-1 w-1 rounded-full bg-muted-foreground/60" />
40            Free 14-day trial
41          </div>
42          <div className="flex items-center gap-2">
43            <span className="h-1 w-1 rounded-full bg-muted-foreground/60" />
44            No credit card required
45          </div>
46          <div className="flex items-center gap-2">
47            <span className="h-1 w-1 rounded-full bg-muted-foreground/60" />
48            Cancel anytime
49          </div>
50        </div>
51      </div>
52    </section>
53  );
54}