センターヒーロー

1export function HeroCentered001() {
2  return (
3    <section className="relative min-h-screen bg-background">
4      {/* コーナードット装飾 */}
5      <div className="absolute left-8 top-8 h-1.5 w-1.5 rounded-full bg-foreground/40" />
6      <div className="absolute right-8 top-8 h-1.5 w-1.5 rounded-full bg-foreground/40" />
7      <div className="absolute bottom-8 left-8 h-1.5 w-1.5 rounded-full bg-foreground/40" />
8      <div className="absolute bottom-8 right-8 h-1.5 w-1.5 rounded-full bg-foreground/40" />
9
10      {/* Center lines decoration */}
11      <div className="absolute inset-x-0 top-1/2 h-px bg-border/50" />
12      <div className="absolute inset-y-0 left-1/2 w-px bg-border/50" />
13
14      {/* メインコンテンツ */}
15      <div className="relative mx-auto flex min-h-screen max-w-4xl flex-col items-center justify-center px-6 py-24">
16        {/* Top label */}
17        <div className="absolute top-24 left-1/2 -translate-x-1/2">
18          <span className="text-[10px] font-medium uppercase tracking-[0.4em] text-muted-foreground/60">
19            Est. 2024
20          </span>
21        </div>
22
23        <div className="text-center">
24          {/* 見出し */}
25          <h1 className="mb-6 text-4xl font-light tracking-tight text-foreground sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl">
26            Centered
27          </h1>
28
29          {/* サブ見出し */}
30          <div className="mb-8 flex items-center justify-center gap-4">
31            <div className="h-px w-12 bg-border" />
32            <span className="text-sm font-light tracking-[0.3em] text-muted-foreground">
33              DESIGN STUDIO
34            </span>
35            <div className="h-px w-12 bg-border" />
36          </div>
37
38          {/* 説明文 */}
39          <p className="mx-auto mb-12 max-w-md text-base leading-relaxed text-muted-foreground">
40            We craft digital experiences that are minimal, elegant, and
41            purposefully designed for the modern web.
42          </p>
43
44          {/* Single CTA */}
45          <button className="inline-flex items-center justify-center border border-border bg-muted/50 px-10 py-4 text-xs font-medium uppercase tracking-[0.25em] text-foreground/80 transition-all hover:bg-muted hover:text-foreground">
46            Explore Work
47          </button>
48        </div>
49
50        {/* Bottom info */}
51        <div className="absolute bottom-24 left-1/2 -translate-x-1/2">
52          <div className="flex items-center gap-8">
53            <div className="text-center">
54              <div className="text-xl font-light text-foreground/70">150+</div>
55              <div className="mt-1 text-[9px] uppercase tracking-[0.2em] text-muted-foreground/60">
56                Projects
57              </div>
58            </div>
59            <div className="h-6 w-px bg-border" />
60            <div className="text-center">
61              <div className="text-xl font-light text-foreground/70">12</div>
62              <div className="mt-1 text-[9px] uppercase tracking-[0.2em] text-muted-foreground/60">
63                Awards
64              </div>
65            </div>
66            <div className="h-6 w-px bg-border" />
67            <div className="text-center">
68              <div className="text-xl font-light text-foreground/70">8</div>
69              <div className="mt-1 text-[9px] uppercase tracking-[0.2em] text-muted-foreground/60">
70                Years
71              </div>
72            </div>
73          </div>
74        </div>
75      </div>
76    </section>
77  );
78}