グラデーションヒーロー

1export function HeroGradient001() {
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      {/* Subtle gradient overlay */}
11      <div className="absolute inset-0 bg-gradient-to-b from-muted/50 via-transparent to-background" />
12
13      {/* コンテンツ */}
14      <div className="relative mx-auto flex min-h-screen max-w-5xl flex-col items-center justify-center px-6 py-24 text-center">
15        {/* ラベル */}
16        <div className="mb-12">
17          <span className="text-[11px] font-medium uppercase tracking-[0.3em] text-muted-foreground">
18            Design System
19          </span>
20        </div>
21
22        {/* 見出し */}
23        <h1 className="mb-8 text-4xl font-light tracking-tight text-foreground sm:text-5xl md:text-6xl lg:text-7xl">
24          Build interfaces that
25          <br />
26          <span className="text-muted-foreground">inspire and engage</span>
27        </h1>
28
29        {/* 説明文 */}
30        <p className="mb-12 max-w-xl text-base leading-relaxed tracking-wide text-muted-foreground">
31          A refined collection of components crafted with precision.
32          Minimal aesthetics, maximum impact.
33        </p>
34
35        {/* CTA ボタン */}
36        <div className="flex flex-col gap-4 sm:flex-row">
37          <button className="inline-flex items-center justify-center border border-border bg-foreground px-8 py-3 text-sm font-medium uppercase tracking-[0.2em] text-background transition-all hover:bg-foreground/90">
38            Get Started
39          </button>
40          <button className="inline-flex items-center justify-center border border-border px-8 py-3 text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground transition-all hover:border-foreground/30 hover:text-foreground">
41            Learn More
42          </button>
43        </div>
44
45        {/* 区切り線 */}
46        <div className="mt-24 h-px w-24 bg-border" />
47
48        {/* フッターテキスト */}
49        <div className="mt-8">
50          <span className="text-[11px] font-medium uppercase tracking-[0.3em] text-muted-foreground/60">
51            Trusted by 10,000+ developers worldwide
52          </span>
53        </div>
54      </div>
55    </section>
56  );
57}