ヒーロー/

グラデーションヒーロー

Preview

美しいグラデーション背景を使用したモダンなヒーローセクション

Source Code
tsx
57 lines
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}