ミニマルヒーロー

1export function HeroMinimal001() {
2  return (
3    <section className="min-h-screen bg-white dark:bg-zinc-950">
4      <div className="mx-auto flex min-h-screen max-w-4xl flex-col items-center justify-center px-6 py-24">
5        {/* メインコンテンツ */}
6        <div className="text-center">
7          {/* 見出し */}
8          <h1 className="mb-6 text-3xl font-semibold tracking-tight text-zinc-900 sm:text-4xl md:text-5xl lg:text-6xl dark:text-zinc-100">
9            Simplicity is the
10            <br />
11            ultimate sophistication
12          </h1>
13
14          {/* 説明文 */}
15          <p className="mx-auto mb-10 max-w-xl text-lg text-zinc-600 dark:text-zinc-400">
16            Less is more. Focus on what matters most with our minimal design
17            approach that puts your content first.
18          </p>
19
20          {/* CTA ボタン */}
21          <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
22            <button className="inline-flex h-12 items-center justify-center rounded-md bg-zinc-900 px-8 font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200">
23              Start Building
24            </button>
25            <button className="inline-flex h-12 items-center justify-center rounded-md border border-zinc-200 bg-white px-8 font-medium text-zinc-900 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100 dark:hover:bg-zinc-900">
26              View Examples
27            </button>
28          </div>
29        </div>
30
31        {/* 装飾的な区切り線 */}
32        <div className="mt-24 flex items-center gap-4">
33          <div className="h-px w-12 bg-zinc-200 dark:bg-zinc-800" />
34          <span className="text-sm text-zinc-400 dark:text-zinc-600">
35            Trusted by 10,000+ developers
36          </span>
37          <div className="h-px w-12 bg-zinc-200 dark:bg-zinc-800" />
38        </div>
39
40        {/* ロゴクラウド（プレースホルダー） */}
41        <div className="mt-8 flex flex-wrap items-center justify-center gap-8 opacity-50">
42          {["Company A", "Company B", "Company C", "Company D"].map(
43            (company) => (
44              <div
45                key={company}
46                className="text-sm font-medium text-zinc-400 dark:text-zinc-600"
47              >
48                {company}
49              </div>
50            )
51          )}
52        </div>
53      </div>
54    </section>
55  );
56}