イメージCTA

1import Image from "next/image";
2import Link from "next/link";
3
4export function CtaImage001() {
5  return (
6    <section className="relative overflow-hidden bg-gray-900 py-24">
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"
14        />
15        <div className="absolute inset-0 bg-gray-900/80" />
16      </div>
17
18      {/* Content */}
19      <div className="relative mx-auto max-w-7xl 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-2 rounded-full border border-indigo-400/30 bg-indigo-500/10 px-4 py-1 text-sm font-medium text-indigo-300">
23            <span className="h-2 w-2 rounded-full bg-indigo-400" />
24            Limited Time Offer
25          </span>
26
27          {/* Heading */}
28          <h2 className="mt-6 text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl">
29            Ready to transform
30            <br />
31            your workflow?
32          </h2>
33
34          {/* Description */}
35          <p className="mt-6 text-lg leading-relaxed text-gray-300">
36            Join thousands of teams who have already made the switch. Start your
37            free trial today and see the difference.
38          </p>
39
40          {/* CTA Buttons */}
41          <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
42            <Link
43              href="#"
44              className="inline-flex items-center gap-2 rounded-lg bg-white px-8 py-4 font-semibold text-gray-900 shadow-lg transition-all hover:bg-gray-100 hover:shadow-xl"
45            >
46              Start Free Trial
47              <svg
48                className="h-5 w-5"
49                fill="none"
50                stroke="currentColor"
51                viewBox="0 0 24 24"
52              >
53                <path
54                  strokeLinecap="round"
55                  strokeLinejoin="round"
56                  strokeWidth={2}
57                  d="M14 5l7 7m0 0l-7 7m7-7H3"
58                />
59              </svg>
60            </Link>
61            <Link
62              href="#"
63              className="inline-flex items-center gap-2 rounded-lg border border-white/20 bg-white/5 px-8 py-4 font-semibold text-white backdrop-blur transition-all hover:bg-white/10"
64            >
65              <svg
66                className="h-5 w-5"
67                fill="none"
68                stroke="currentColor"
69                viewBox="0 0 24 24"
70              >
71                <path
72                  strokeLinecap="round"
73                  strokeLinejoin="round"
74                  strokeWidth={2}
75                  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"
76                />
77                <path
78                  strokeLinecap="round"
79                  strokeLinejoin="round"
80                  strokeWidth={2}
81                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
82                />
83              </svg>
84              Watch Demo
85            </Link>
86          </div>
87
88          {/* Trust Badges */}
89          <div className="mt-12 flex flex-wrap items-center justify-center gap-8 border-t border-white/10 pt-8">
90            <div className="text-center">
91              <p className="text-2xl font-bold text-white">14 days</p>
92              <p className="text-sm text-gray-400">Free trial</p>
93            </div>
94            <div className="text-center">
95              <p className="text-2xl font-bold text-white">No credit card</p>
96              <p className="text-sm text-gray-400">Required</p>
97            </div>
98            <div className="text-center">
99              <p className="text-2xl font-bold text-white">Cancel</p>
100              <p className="text-sm text-gray-400">Anytime</p>
101            </div>
102          </div>
103        </div>
104      </div>
105    </section>
106  );
107}