イメージCTA

1import Image from "next/image";
2import Link from "next/link";
3
4export function CtaImage001() {
5  return (
6    <section className="relative overflow-hidden bg-background py-32">
7      {/* Background Image with Overlay */}
8      <div className="absolute inset-0">
9        <Image
10          src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&h=1080&fit=crop"
11          alt="Team collaboration"
12          fill
13          className="object-cover opacity-10 dark:opacity-20"
14        />
15        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/80 to-background" />
16      </div>
17
18      {/* Content */}
19      <div className="relative mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
20        <div className="mx-auto max-w-2xl text-center">
21          {/* Eyebrow */}
22          <span className="inline-flex items-center gap-3 text-[11px] font-medium uppercase tracking-[0.4em] text-muted-foreground">
23            <span className="h-px w-8 bg-border" />
24            Limited Time Offer
25            <span className="h-px w-8 bg-border" />
26          </span>
27
28          {/* Heading */}
29          <h2 className="mt-10 text-3xl font-light tracking-tight text-foreground sm:text-4xl md:text-5xl lg:text-6xl">
30            Ready to transform
31            <br />
32            <span className="text-muted-foreground">your workflow?</span>
33          </h2>
34
35          {/* Description */}
36          <p className="mt-8 text-base font-light leading-relaxed tracking-wide text-muted-foreground">
37            Join thousands of teams who have already made the switch. Start your
38            free trial today and see the difference.
39          </p>
40
41          {/* CTA Buttons */}
42          <div className="mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row">
43            <Link
44              href="#"
45              className="inline-flex items-center gap-3 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"
46            >
47              Start Free Trial
48              <svg
49                className="h-4 w-4"
50                fill="none"
51                stroke="currentColor"
52                viewBox="0 0 24 24"
53              >
54                <path
55                  strokeLinecap="round"
56                  strokeLinejoin="round"
57                  strokeWidth={1.5}
58                  d="M14 5l7 7m0 0l-7 7m7-7H3"
59                />
60              </svg>
61            </Link>
62            <Link
63              href="#"
64              className="inline-flex items-center gap-3 border border-border bg-transparent px-8 py-4 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-all hover:border-foreground/50 hover:text-foreground"
65            >
66              <svg
67                className="h-4 w-4"
68                fill="none"
69                stroke="currentColor"
70                viewBox="0 0 24 24"
71              >
72                <path
73                  strokeLinecap="round"
74                  strokeLinejoin="round"
75                  strokeWidth={1.5}
76                  d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
77                />
78                <path
79                  strokeLinecap="round"
80                  strokeLinejoin="round"
81                  strokeWidth={1.5}
82                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
83                />
84              </svg>
85              Watch Demo
86            </Link>
87          </div>
88
89          {/* Trust Badges */}
90          <div className="mt-16 flex flex-wrap items-center justify-center gap-12 border-t border-border/50 pt-12">
91            <div className="text-center">
92              <p className="text-2xl font-light tracking-tight text-foreground">14 days</p>
93              <p className="mt-1 text-[11px] uppercase tracking-[0.3em] text-muted-foreground/60">Free trial</p>
94            </div>
95            <div className="text-center">
96              <p className="text-2xl font-light tracking-tight text-foreground">No credit card</p>
97              <p className="mt-1 text-[11px] uppercase tracking-[0.3em] text-muted-foreground/60">Required</p>
98            </div>
99            <div className="text-center">
100              <p className="text-2xl font-light tracking-tight text-foreground">Cancel</p>
101              <p className="mt-1 text-[11px] uppercase tracking-[0.3em] text-muted-foreground/60">Anytime</p>
102            </div>
103          </div>
104        </div>
105      </div>
106    </section>
107  );
108}