シンプルCTA

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}