CTA/

ダークCTA

Preview

ダークテーマのCTAセクション

Source Code
tsx
60 lines
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}