ダークCTA

1export function CtaDark001() {
2  return (
3    <section className="relative overflow-hidden bg-background py-40">
4      {/* Subtle radial gradient background */}
5      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-muted/40 via-background to-background" />
6
7      {/* Minimal decorative lines */}
8      <div className="absolute left-0 top-1/2 h-px w-1/4 -translate-y-1/2 bg-gradient-to-r from-transparent via-border/50 to-transparent" />
9      <div className="absolute right-0 top-1/2 h-px w-1/4 -translate-y-1/2 bg-gradient-to-l from-transparent via-border/50 to-transparent" />
10
11      <div className="relative mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
12        {/* Small top decorative element */}
13        <div className="mx-auto mb-12 flex items-center justify-center gap-4">
14          <span className="h-px w-12 bg-border" />
15          <span className="h-2 w-2 rotate-45 border border-border" />
16          <span className="h-px w-12 bg-border" />
17        </div>
18
19        {/* Heading */}
20        <h2 className="text-4xl font-extralight tracking-tight text-foreground sm:text-5xl md:text-6xl lg:text-7xl">
21          Experience
22          <br />
23          <span className="mt-2 block font-light italic tracking-wide text-muted-foreground">
24            the difference
25          </span>
26        </h2>
27
28        {/* Description */}
29        <p className="mx-auto mt-10 max-w-lg text-sm font-light leading-loose tracking-wider text-muted-foreground/60">
30          Crafted with precision. Designed for the future. Built to last.
31          Join the evolution.
32        </p>
33
34        {/* CTA Button */}
35        <div className="mt-14">
36          <button className="group relative overflow-hidden border border-border bg-transparent px-12 py-5 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground transition-all duration-500 hover:border-foreground/50 hover:text-foreground">
37            <span className="relative z-10">Begin Your Journey</span>
38            <div className="absolute inset-0 -translate-x-full bg-muted transition-transform duration-500 group-hover:translate-x-0" />
39          </button>
40        </div>
41
42        {/* Bottom element */}
43        <div className="mt-16 flex items-center justify-center gap-8 text-[10px] uppercase tracking-[0.4em] text-muted-foreground/50">
44          <span>Free to start</span>
45          <span className="h-1 w-1 rounded-full bg-border" />
46          <span>No limits</span>
47          <span className="h-1 w-1 rounded-full bg-border" />
48          <span>Cancel anytime</span>
49        </div>
50
51        {/* Small bottom decorative element */}
52        <div className="mx-auto mt-12 flex items-center justify-center gap-4">
53          <span className="h-px w-12 bg-border" />
54          <span className="h-2 w-2 rotate-45 border border-border" />
55          <span className="h-px w-12 bg-border" />
56        </div>
57      </div>
58    </section>
59  );
60}