CTA/

シンプルCTA

Preview

シンプルなテキストとボタンのCTAセクション

Source Code
tsx
45 lines
1export function CtaSimple001() {
2 return (
3 <section className="bg-background py-20">
4 <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
5 {/* Simple centered content */}
6 <div className="text-center">
7 {/* One line heading */}
8 <h2 className="text-xl font-light tracking-wide text-foreground sm:text-2xl">
9 Ready to get started?{" "}
10 <span className="text-muted-foreground">Create your free account.</span>
11 </h2>
12
13 {/* Inline CTA */}
14 <div className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
15 <button className="w-full border border-foreground bg-foreground px-8 py-3.5 text-[11px] font-medium uppercase tracking-[0.2em] text-background transition-all hover:bg-transparent hover:text-foreground sm:w-auto">
16 Sign Up Free
17 </button>
18 <span className="hidden text-muted-foreground/50 sm:inline">or</span>
19 <button className="w-full text-xs tracking-wide text-muted-foreground underline underline-offset-4 transition-colors hover:text-foreground sm:w-auto">
20 Contact Sales
21 </button>
22 </div>
23 </div>
24
25 {/* Minimal divider */}
26 <div className="mx-auto mt-12 h-px w-24 bg-border" />
27
28 {/* Bottom links */}
29 <div className="mt-8 flex flex-wrap items-center justify-center gap-6 text-[11px] tracking-wide text-muted-foreground/60">
30 <a href="#" className="transition-colors hover:text-foreground">
31 Terms of Service
32 </a>
33 <span className="h-1 w-1 rounded-full bg-border" />
34 <a href="#" className="transition-colors hover:text-foreground">
35 Privacy Policy
36 </a>
37 <span className="h-1 w-1 rounded-full bg-border" />
38 <a href="#" className="transition-colors hover:text-foreground">
39 Contact
40 </a>
41 </div>
42 </div>
43 </section>
44 );
45}