ビデオヒーロー

1import Image from "next/image";
2import Link from "next/link";
3
4export function HeroVideo001() {
5  return (
6    <section className="relative min-h-screen overflow-hidden bg-black">
7      {/* Video Background Placeholder */}
8      <div className="absolute inset-0">
9        <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black" />
10        <Image
11          src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1920&h=1080&fit=crop"
12          alt="Background"
13          fill
14          className="object-cover"
15          priority
16        />
17        {/* Play Button Overlay */}
18        <div className="absolute inset-0 flex items-center justify-center">
19          <button className="group flex h-20 w-20 items-center justify-center rounded-full bg-white/20 backdrop-blur transition-all hover:bg-white/30 hover:scale-110">
20            <svg
21              className="h-8 w-8 text-white ml-1"
22              fill="currentColor"
23              viewBox="0 0 24 24"
24            >
25              <path d="M8 5v14l11-7z" />
26            </svg>
27          </button>
28        </div>
29      </div>
30
31      {/* Content */}
32      <div className="relative flex min-h-screen flex-col items-center justify-center px-4 py-24 text-center">
33        <div className="mx-auto max-w-4xl">
34          {/* Badge */}
35          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-2 backdrop-blur">
36            <span className="h-2 w-2 animate-pulse rounded-full bg-green-400" />
37            <span className="text-sm font-medium text-white">
38              Now Available Worldwide
39            </span>
40          </div>
41
42          {/* Heading */}
43          <h1 className="text-3xl font-bold tracking-tight text-white sm:text-5xl md:text-6xl lg:text-7xl">
44            The future of
45            <br />
46            <span className="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
47              digital experiences
48            </span>
49          </h1>
50
51          {/* Description */}
52          <p className="mx-auto mt-6 max-w-2xl text-lg text-white/70">
53            Transform the way you create, collaborate, and connect. Our
54            platform empowers teams to build extraordinary things together.
55          </p>
56
57          {/* CTA Buttons */}
58          <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
59            <Link
60              href="#"
61              className="inline-flex items-center gap-2 rounded-full bg-white px-8 py-4 font-semibold text-gray-900 shadow-lg transition-all hover:bg-gray-100"
62            >
63              Get Started Free
64              <svg
65                className="h-5 w-5"
66                fill="none"
67                stroke="currentColor"
68                viewBox="0 0 24 24"
69              >
70                <path
71                  strokeLinecap="round"
72                  strokeLinejoin="round"
73                  strokeWidth={2}
74                  d="M14 5l7 7m0 0l-7 7m7-7H3"
75                />
76              </svg>
77            </Link>
78            <Link
79              href="#"
80              className="inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/5 px-8 py-4 font-semibold text-white backdrop-blur transition-all hover:bg-white/10"
81            >
82              <svg
83                className="h-5 w-5"
84                fill="none"
85                stroke="currentColor"
86                viewBox="0 0 24 24"
87              >
88                <path
89                  strokeLinecap="round"
90                  strokeLinejoin="round"
91                  strokeWidth={2}
92                  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"
93                />
94                <path
95                  strokeLinecap="round"
96                  strokeLinejoin="round"
97                  strokeWidth={2}
98                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
99                />
100              </svg>
101              Watch Video
102            </Link>
103          </div>
104
105          {/* Scroll Indicator */}
106          <div className="absolute bottom-8 left-1/2 -translate-x-1/2">
107            <div className="flex flex-col items-center gap-2">
108              <span className="text-xs text-white/50">Scroll to explore</span>
109              <div className="h-12 w-6 rounded-full border border-white/30">
110                <div className="mx-auto mt-2 h-2 w-1 animate-bounce rounded-full bg-white" />
111              </div>
112            </div>
113          </div>
114        </div>
115      </div>
116    </section>
117  );
118}