ミニマルヒーロー

1export function HeroMinimal001() {
2  return (
3    <section className="relative min-h-screen bg-background">
4      {/* コーナードット装飾 */}
5      <div className="absolute left-6 top-6 h-1 w-1 rounded-full bg-foreground/30" />
6      <div className="absolute right-6 top-6 h-1 w-1 rounded-full bg-foreground/30" />
7      <div className="absolute bottom-6 left-6 h-1 w-1 rounded-full bg-foreground/30" />
8      <div className="absolute bottom-6 right-6 h-1 w-1 rounded-full bg-foreground/30" />
9
10      {/* メインコンテンツ */}
11      <div className="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center px-6 py-24">
12        <div className="text-center">
13          {/* ラベル */}
14          <div className="mb-16">
15            <span className="text-[10px] font-medium uppercase tracking-[0.4em] text-muted-foreground">
16              Minimal Design
17            </span>
18          </div>
19
20          {/* 見出し */}
21          <h1 className="mb-8 text-3xl font-light tracking-tight text-foreground sm:text-4xl md:text-5xl lg:text-6xl">
22            Simplicity is the
23            <br />
24            ultimate sophistication
25          </h1>
26
27          {/* 説明文 */}
28          <p className="mx-auto mb-12 max-w-md text-base leading-relaxed text-muted-foreground">
29            Less is more. Focus on what matters most with our minimal design
30            approach that puts your content first.
31          </p>
32
33          {/* CTA ボタン */}
34          <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
35            <button className="inline-flex h-12 items-center justify-center border border-border bg-foreground px-8 text-xs font-medium uppercase tracking-[0.2em] text-background transition-colors hover:bg-foreground/90">
36              Start Building
37            </button>
38            <button className="inline-flex h-12 items-center justify-center border border-border px-8 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:border-foreground/30 hover:text-foreground">
39              View Examples
40            </button>
41          </div>
42        </div>
43
44        {/* 装飾的な区切り線 */}
45        <div className="mt-24 flex items-center gap-6">
46          <div className="h-px w-16 bg-border" />
47          <span className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground/60">
48            Trusted by 10,000+ developers
49          </span>
50          <div className="h-px w-16 bg-border" />
51        </div>
52
53        {/* ロゴクラウド（プレースホルダー） */}
54        <div className="mt-10 flex flex-wrap items-center justify-center gap-10">
55          {["Vercel", "Linear", "Notion", "Figma"].map((company) => (
56            <div
57              key={company}
58              className="text-[11px] font-medium uppercase tracking-[0.2em] text-muted-foreground/50"
59            >
60              {company}
61            </div>
62          ))}
63        </div>
64      </div>
65    </section>
66  );
67}