ビデオヒーロー

1export function HeroVideo001() {
2  return (
3    <section className="relative min-h-screen overflow-hidden bg-background">
4      {/* コーナードット装飾 */}
5      <div className="absolute left-8 top-8 z-10 h-1.5 w-1.5 rounded-full bg-foreground/40" />
6      <div className="absolute right-8 top-8 z-10 h-1.5 w-1.5 rounded-full bg-foreground/40" />
7      <div className="absolute bottom-8 left-8 z-10 h-1.5 w-1.5 rounded-full bg-foreground/40" />
8      <div className="absolute bottom-8 right-8 z-10 h-1.5 w-1.5 rounded-full bg-foreground/40" />
9
10      {/* Video Background Placeholder */}
11      <div className="absolute inset-0">
12        <div className="absolute inset-0 bg-muted/80" />
13        <div
14          className="absolute inset-0 opacity-20"
15          style={{
16            backgroundImage: `radial-gradient(circle at 50% 50%, hsl(var(--foreground) / 0.1) 0%, transparent 50%)`,
17          }}
18        />
19      </div>
20
21      {/* Play Button */}
22      <div className="absolute inset-0 flex items-center justify-center">
23        <button className="group flex h-20 w-20 items-center justify-center border border-border transition-all hover:border-foreground/40 hover:scale-105">
24          <svg
25            className="ml-1 h-6 w-6 text-muted-foreground transition-colors group-hover:text-foreground"
26            fill="currentColor"
27            viewBox="0 0 24 24"
28          >
29            <path d="M8 5v14l11-7z" />
30          </svg>
31        </button>
32      </div>
33
34      {/* Content */}
35      <div className="relative flex min-h-screen flex-col items-center justify-center px-6 py-24 text-center">
36        <div className="mx-auto max-w-3xl">
37          {/* Badge */}
38          <div className="mb-12">
39            <div className="inline-flex items-center gap-3 border border-border px-5 py-2">
40              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400/80" />
41              <span className="text-[10px] font-medium uppercase tracking-[0.3em] text-muted-foreground">
42                Now Available Worldwide
43              </span>
44            </div>
45          </div>
46
47          {/* Heading */}
48          <h1 className="text-3xl font-light tracking-tight text-foreground sm:text-5xl md:text-6xl lg:text-7xl">
49            The future of
50            <br />
51            <span className="text-muted-foreground">digital experiences</span>
52          </h1>
53
54          {/* Description */}
55          <p className="mx-auto mt-8 max-w-lg text-base leading-relaxed text-muted-foreground">
56            Transform the way you create, collaborate, and connect. Our
57            platform empowers teams to build extraordinary things together.
58          </p>
59
60          {/* CTA Buttons */}
61          <div className="mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row">
62            <button className="inline-flex items-center gap-2 border border-border bg-foreground px-8 py-4 text-xs font-medium uppercase tracking-[0.2em] text-background transition-all hover:bg-foreground/90">
63              Get Started
64              <svg
65                className="h-3.5 w-3.5"
66                fill="none"
67                stroke="currentColor"
68                viewBox="0 0 24 24"
69              >
70                <path
71                  strokeLinecap="round"
72                  strokeLinejoin="round"
73                  strokeWidth={1.5}
74                  d="M14 5l7 7m0 0l-7 7m7-7H3"
75                />
76              </svg>
77            </button>
78            <button className="inline-flex items-center gap-2 border border-border px-8 py-4 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-all hover:border-foreground/30 hover:text-foreground">
79              <svg
80                className="h-4 w-4"
81                fill="none"
82                stroke="currentColor"
83                viewBox="0 0 24 24"
84              >
85                <path
86                  strokeLinecap="round"
87                  strokeLinejoin="round"
88                  strokeWidth={1.5}
89                  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"
90                />
91                <path
92                  strokeLinecap="round"
93                  strokeLinejoin="round"
94                  strokeWidth={1.5}
95                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
96                />
97              </svg>
98              Watch Video
99            </button>
100          </div>
101
102          {/* Scroll Indicator */}
103          <div className="absolute bottom-12 left-1/2 -translate-x-1/2">
104            <div className="flex flex-col items-center gap-3">
105              <span className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground/60">
106                Scroll
107              </span>
108              <div className="h-10 w-px bg-gradient-to-b from-foreground/30 to-transparent" />
109            </div>
110          </div>
111        </div>
112      </div>
113    </section>
114  );
115}