スプリットCTA

1export function CtaSplit001() {
2  return (
3    <section className="bg-background">
4      <div className="mx-auto max-w-7xl">
5        <div className="grid min-h-[500px] lg:grid-cols-2">
6          {/* Left side - Content */}
7          <div className="flex flex-col justify-center border-b border-border/50 px-8 py-20 lg:border-b-0 lg:border-r lg:px-16 lg:py-32">
8            {/* Eyebrow */}
9            <p className="text-[10px] font-medium uppercase tracking-[0.5em] text-muted-foreground/60">
10              Next Generation Platform
11            </p>
12
13            {/* Heading */}
14            <h2 className="mt-6 text-3xl font-light tracking-tight text-foreground sm:text-4xl md:text-5xl">
15              Ready to scale
16              <br />
17              <span className="text-muted-foreground">your business?</span>
18            </h2>
19
20            {/* Description */}
21            <p className="mt-6 max-w-md text-sm font-light leading-relaxed tracking-wide text-muted-foreground">
22              Join thousands of companies who trust our platform to power their
23              growth. Start building today.
24            </p>
25
26            {/* Buttons */}
27            <div className="mt-10 flex flex-wrap gap-4">
28              <button className="border border-foreground bg-foreground px-8 py-4 text-xs font-medium uppercase tracking-[0.2em] text-background transition-all hover:bg-transparent hover:text-foreground">
29                Start Free
30              </button>
31              <button className="border border-border px-8 py-4 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-all hover:border-foreground/50 hover:text-foreground">
32                Learn More
33              </button>
34            </div>
35          </div>
36
37          {/* Right side - Stats */}
38          <div className="flex flex-col justify-center px-8 py-20 lg:px-16 lg:py-32">
39            <div className="space-y-10">
40              {/* Stat 1 */}
41              <div className="border-l border-border pl-8">
42                <p className="text-4xl font-extralight tracking-tight text-foreground">
43                  10K+
44                </p>
45                <p className="mt-2 text-[11px] uppercase tracking-[0.3em] text-muted-foreground/60">
46                  Active Users
47                </p>
48              </div>
49
50              {/* Stat 2 */}
51              <div className="border-l border-border pl-8">
52                <p className="text-4xl font-extralight tracking-tight text-foreground">
53                  99.9%
54                </p>
55                <p className="mt-2 text-[11px] uppercase tracking-[0.3em] text-muted-foreground/60">
56                  Uptime Guaranteed
57                </p>
58              </div>
59
60              {/* Stat 3 */}
61              <div className="border-l border-border pl-8">
62                <p className="text-4xl font-extralight tracking-tight text-foreground">
63                  24/7
64                </p>
65                <p className="mt-2 text-[11px] uppercase tracking-[0.3em] text-muted-foreground/60">
66                  Support Available
67                </p>
68              </div>
69            </div>
70          </div>
71        </div>
72      </div>
73    </section>
74  );
75}