ダークヒーロー

1export function HeroDark001() {
2  return (
3    <section className="relative min-h-screen bg-background">
4      {/* コーナードット装飾 */}
5      <div className="absolute left-10 top-10 h-1.5 w-1.5 rounded-full bg-foreground/30" />
6      <div className="absolute right-10 top-10 h-1.5 w-1.5 rounded-full bg-foreground/30" />
7      <div className="absolute bottom-10 left-10 h-1.5 w-1.5 rounded-full bg-foreground/30" />
8      <div className="absolute bottom-10 right-10 h-1.5 w-1.5 rounded-full bg-foreground/30" />
9
10      {/* Subtle noise texture overlay */}
11      <div
12        className="absolute inset-0 opacity-[0.015] dark:opacity-[0.025]"
13        style={{
14          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
15        }}
16      />
17
18      {/* Border frame */}
19      <div className="pointer-events-none absolute inset-8 border border-border/50" />
20
21      <div className="relative mx-auto flex min-h-screen max-w-6xl flex-col justify-between px-6 py-16 sm:px-12 lg:px-16">
22        {/* Top section */}
23        <div className="flex items-start justify-between">
24          <div>
25            <span className="text-[10px] font-medium uppercase tracking-[0.4em] text-muted-foreground/60">
26              Digital Experiences
27            </span>
28          </div>
29          <div>
30            <span className="text-[10px] font-medium uppercase tracking-[0.4em] text-muted-foreground/60">
31              2024
32            </span>
33          </div>
34        </div>
35
36        {/* Main content */}
37        <div className="py-12">
38          {/* Large heading - ultra minimal */}
39          <h1 className="mb-12 text-5xl font-extralight leading-[1.1] tracking-tight text-foreground sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl">
40            Into
41            <br />
42            <span className="text-muted-foreground">the void</span>
43          </h1>
44
45          {/* Description + CTA row */}
46          <div className="flex flex-col justify-between gap-12 lg:flex-row lg:items-end">
47            <p className="max-w-sm text-base leading-relaxed text-muted-foreground">
48              Where darkness meets design. We create immersive digital
49              experiences that push the boundaries of aesthetic minimalism.
50            </p>
51
52            <div className="flex items-center gap-8">
53              <button className="group flex items-center gap-4 border-b border-border pb-2 transition-colors hover:border-foreground/40">
54                <span className="text-xs uppercase tracking-[0.2em] text-muted-foreground group-hover:text-foreground">
55                  Enter
56                </span>
57                <svg
58                  className="h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-1 group-hover:text-foreground"
59                  fill="none"
60                  stroke="currentColor"
61                  viewBox="0 0 24 24"
62                >
63                  <path
64                    strokeLinecap="round"
65                    strokeLinejoin="round"
66                    strokeWidth={1}
67                    d="M14 5l7 7m0 0l-7 7m7-7H3"
68                  />
69                </svg>
70              </button>
71            </div>
72          </div>
73        </div>
74
75        {/* Bottom section */}
76        <div className="flex flex-col gap-8 sm:flex-row sm:items-end sm:justify-between">
77          {/* Stats */}
78          <div className="flex gap-12">
79            {[
80              { value: "01", label: "Studios" },
81              { value: "47", label: "Projects" },
82              { value: "12", label: "Awards" },
83            ].map((stat) => (
84              <div key={stat.label}>
85                <div className="text-2xl font-extralight text-foreground/70">
86                  {stat.value}
87                </div>
88                <div className="mt-1 text-[9px] uppercase tracking-[0.2em] text-muted-foreground/50">
89                  {stat.label}
90                </div>
91              </div>
92            ))}
93          </div>
94
95          {/* Scroll indicator */}
96          <div className="flex items-center gap-4">
97            <span className="text-[9px] uppercase tracking-[0.3em] text-muted-foreground/40">
98              Scroll
99            </span>
100            <div className="h-12 w-px bg-gradient-to-b from-foreground/20 to-transparent" />
101          </div>
102        </div>
103      </div>
104    </section>
105  );
106}