スプリットヒーロー

1import Image from "next/image";
2import Link from "next/link";
3
4export function HeroSplit001() {
5  return (
6    <section className="min-h-screen bg-white dark:bg-zinc-950">
7      <div className="grid min-h-screen lg:grid-cols-2">
8        {/* Left Content */}
9        <div className="flex flex-col justify-center px-4 py-16 sm:px-6 lg:px-12 lg:py-24 xl:px-24">
10          <div className="mx-auto max-w-xl">
11            {/* Badge */}
12            <div className="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 dark:border-indigo-900 dark:bg-indigo-950">
13              <span className="h-2 w-2 rounded-full bg-indigo-500" />
14              <span className="text-sm font-medium text-indigo-700 dark:text-indigo-300">
15                New Release v2.0
16              </span>
17            </div>
18
19            {/* Heading */}
20            <h1 className="mt-6 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl lg:text-6xl dark:text-white">
21              Build products
22              <br />
23              <span className="text-indigo-600 dark:text-indigo-400">
24                people love
25              </span>
26            </h1>
27
28            {/* Description */}
29            <p className="mt-6 text-lg leading-relaxed text-gray-600 dark:text-gray-400">
30              Create beautiful, responsive interfaces with our comprehensive
31              design system. Ship faster with pre-built components and intuitive
32              workflows.
33            </p>
34
35            {/* CTA Buttons */}
36            <div className="mt-10 flex flex-col gap-4 sm:flex-row">
37              <Link
38                href="#"
39                className="inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-600 px-6 py-3 text-base font-medium text-white shadow-lg shadow-indigo-500/30 transition-all hover:bg-indigo-700 hover:shadow-xl hover:shadow-indigo-500/40"
40              >
41                Get Started Free
42                <svg
43                  className="h-4 w-4"
44                  fill="none"
45                  stroke="currentColor"
46                  viewBox="0 0 24 24"
47                >
48                  <path
49                    strokeLinecap="round"
50                    strokeLinejoin="round"
51                    strokeWidth={2}
52                    d="M14 5l7 7m0 0l-7 7m7-7H3"
53                  />
54                </svg>
55              </Link>
56              <Link
57                href="#"
58                className="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 transition-all hover:bg-gray-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-gray-300 dark:hover:bg-zinc-800"
59              >
60                <svg
61                  className="h-5 w-5"
62                  fill="none"
63                  stroke="currentColor"
64                  viewBox="0 0 24 24"
65                >
66                  <path
67                    strokeLinecap="round"
68                    strokeLinejoin="round"
69                    strokeWidth={2}
70                    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"
71                  />
72                  <path
73                    strokeLinecap="round"
74                    strokeLinejoin="round"
75                    strokeWidth={2}
76                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
77                  />
78                </svg>
79                Watch Demo
80              </Link>
81            </div>
82
83            {/* Social Proof */}
84            <div className="mt-12 flex items-center gap-8">
85              <div className="flex -space-x-3">
86                {[
87                  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face",
88                  "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",
89                  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face",
90                  "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",
91                ].map((src, i) => (
92                  <Image
93                    key={i}
94                    src={src}
95                    alt=""
96                    width={40}
97                    height={40}
98                    className="rounded-full border-2 border-white object-cover dark:border-zinc-950"
99                  />
100                ))}
101              </div>
102              <div>
103                <div className="flex items-center gap-1">
104                  {[...Array(5)].map((_, i) => (
105                    <svg
106                      key={i}
107                      className="h-4 w-4 text-yellow-400"
108                      fill="currentColor"
109                      viewBox="0 0 20 20"
110                    >
111                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
112                    </svg>
113                  ))}
114                </div>
115                <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
116                  <span className="font-semibold text-gray-900 dark:text-white">
117                    2,000+
118                  </span>{" "}
119                  happy customers
120                </p>
121              </div>
122            </div>
123          </div>
124        </div>
125
126        {/* Right Image */}
127        <div className="relative hidden lg:block">
128          <div className="absolute inset-0 bg-gradient-to-br from-indigo-500 to-purple-600" />
129          <Image
130            src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=1600&fit=crop"
131            alt="Team collaboration"
132            fill
133            className="object-cover opacity-30 mix-blend-overlay"
134          />
135
136          {/* Floating Card */}
137          <div className="absolute bottom-12 left-12 right-12 rounded-2xl bg-white/10 p-6 backdrop-blur-lg">
138            <div className="flex items-center gap-4">
139              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-white/20">
140                <svg
141                  className="h-6 w-6 text-white"
142                  fill="none"
143                  stroke="currentColor"
144                  viewBox="0 0 24 24"
145                >
146                  <path
147                    strokeLinecap="round"
148                    strokeLinejoin="round"
149                    strokeWidth={2}
150                    d="M13 10V3L4 14h7v7l9-11h-7z"
151                  />
152                </svg>
153              </div>
154              <div>
155                <p className="text-sm text-white/70">Development Speed</p>
156                <p className="text-2xl font-bold text-white">3x faster</p>
157              </div>
158            </div>
159          </div>
160        </div>
161      </div>
162    </section>
163  );
164}