CTAヒーロー

1export function HeroCta001() {
2  return (
3    <section className="relative min-h-screen bg-background">
4      {/* コーナードット装飾 */}
5      <div className="absolute left-6 top-6 h-1 w-1 rounded-full bg-foreground/40" />
6      <div className="absolute right-6 top-6 h-1 w-1 rounded-full bg-foreground/40" />
7      <div className="absolute bottom-6 left-6 h-1 w-1 rounded-full bg-foreground/40" />
8      <div className="absolute bottom-6 right-6 h-1 w-1 rounded-full bg-foreground/40" />
9
10      {/* Background pattern */}
11      <div
12        className="absolute inset-0 opacity-[0.02] dark:opacity-[0.04]"
13        style={{
14          backgroundImage: `radial-gradient(circle at 1px 1px, hsl(var(--foreground)) 1px, transparent 0)`,
15          backgroundSize: "32px 32px",
16        }}
17      />
18
19      <div className="relative mx-auto flex min-h-screen max-w-5xl flex-col items-center justify-center px-6 py-24 text-center">
20        {/* Label */}
21        <div className="mb-12">
22          <div className="inline-flex items-center gap-3 border border-border px-5 py-2.5">
23            <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400/70" />
24            <span className="text-[10px] font-medium uppercase tracking-[0.3em] text-muted-foreground">
25              Limited Offer
26            </span>
27          </div>
28        </div>
29
30        {/* Main heading */}
31        <h1 className="mb-6 text-4xl font-light tracking-tight text-foreground sm:text-5xl md:text-6xl lg:text-7xl">
32          Start building today
33        </h1>
34
35        {/* Subheading */}
36        <p className="mb-12 max-w-lg text-lg text-muted-foreground">
37          Get 50% off your first year. No credit card required.
38          Cancel anytime.
39        </p>
40
41        {/* Primary CTA - Large and prominent */}
42        <div className="mb-8 w-full max-w-md">
43          <button className="group w-full border border-border bg-foreground px-8 py-5 transition-all hover:bg-foreground/95">
44            <span className="text-sm font-medium uppercase tracking-[0.25em] text-background">
45              Get Started Free
46            </span>
47            <div className="mt-2 text-[10px] uppercase tracking-[0.2em] text-background/70">
48              No credit card required
49            </div>
50          </button>
51        </div>
52
53        {/* Secondary CTA */}
54        <button className="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:text-foreground">
55          <svg
56            className="h-4 w-4"
57            fill="none"
58            stroke="currentColor"
59            viewBox="0 0 24 24"
60          >
61            <path
62              strokeLinecap="round"
63              strokeLinejoin="round"
64              strokeWidth={1.5}
65              d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
66            />
67            <path
68              strokeLinecap="round"
69              strokeLinejoin="round"
70              strokeWidth={1.5}
71              d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
72            />
73          </svg>
74          Watch 2 min demo
75        </button>
76
77        {/* Divider */}
78        <div className="my-16 h-px w-24 bg-border" />
79
80        {/* Features list */}
81        <div className="flex flex-wrap justify-center gap-x-10 gap-y-4">
82          {[
83            "Unlimited projects",
84            "24/7 Support",
85            "99.9% Uptime",
86            "Enterprise security",
87          ].map((feature) => (
88            <div
89              key={feature}
90              className="flex items-center gap-2 text-[11px] uppercase tracking-[0.15em] text-muted-foreground"
91            >
92              <svg
93                className="h-3.5 w-3.5"
94                fill="none"
95                stroke="currentColor"
96                viewBox="0 0 24 24"
97              >
98                <path
99                  strokeLinecap="round"
100                  strokeLinejoin="round"
101                  strokeWidth={1.5}
102                  d="M5 13l4 4L19 7"
103                />
104              </svg>
105              {feature}
106            </div>
107          ))}
108        </div>
109
110        {/* Bottom testimonial */}
111        <div className="absolute bottom-16 left-1/2 -translate-x-1/2">
112          <div className="flex flex-col items-center gap-4">
113            <div className="flex -space-x-2">
114              {[1, 2, 3, 4, 5].map((i) => (
115                <div
116                  key={i}
117                  className="flex h-8 w-8 items-center justify-center border border-border bg-muted text-[10px] text-muted-foreground"
118                >
119                  {String.fromCharCode(64 + i)}
120                </div>
121              ))}
122            </div>
123            <span className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
124              Join 10,000+ developers
125            </span>
126          </div>
127        </div>
128      </div>
129    </section>
130  );
131}