センターCTA

1export function CtaCentered001() {
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        {/* Decorative element */}
6        <div className="mx-auto mb-10 h-px w-16 bg-border" />
7
8        {/* Eyebrow */}
9        <p className="text-[11px] font-medium uppercase tracking-[0.5em] text-muted-foreground/60">
10          The future is here
11        </p>
12
13        {/* Main heading */}
14        <h2 className="mt-8 text-4xl font-extralight tracking-tight text-foreground sm:text-5xl md:text-6xl lg:text-7xl">
15          Build something
16          <br />
17          <span className="font-light italic text-muted-foreground">extraordinary</span>
18        </h2>
19
20        {/* Description */}
21        <p className="mx-auto mt-8 max-w-xl text-base font-light leading-relaxed tracking-wide text-muted-foreground">
22          We believe in the power of simplicity. Our platform helps you create
23          stunning experiences without the complexity.
24        </p>
25
26        {/* Single CTA button */}
27        <div className="mt-12">
28          <button className="group relative inline-flex items-center gap-4 border border-border bg-transparent px-10 py-5 text-xs font-medium uppercase tracking-[0.25em] text-muted-foreground transition-all hover:border-foreground hover:text-foreground">
29            <span>Get Started</span>
30            <svg
31              className="h-4 w-4 transition-transform group-hover:translate-x-1"
32              fill="none"
33              stroke="currentColor"
34              viewBox="0 0 24 24"
35            >
36              <path
37                strokeLinecap="round"
38                strokeLinejoin="round"
39                strokeWidth={1.5}
40                d="M17 8l4 4m0 0l-4 4m4-4H3"
41              />
42            </svg>
43          </button>
44        </div>
45
46        {/* Footer note */}
47        <p className="mt-10 text-[11px] tracking-[0.2em] text-muted-foreground/50">
48          Free forever — No credit card needed
49        </p>
50
51        {/* Decorative element */}
52        <div className="mx-auto mt-16 h-px w-16 bg-border" />
53      </div>
54    </section>
55  );
56}