グラデーションヒーロー

1export function HeroGradient001() {
2  return (
3    <section className="relative min-h-screen overflow-hidden bg-black">
4      {/* 背景グラデーション */}
5      <div className="absolute inset-0 bg-gradient-to-br from-violet-600/30 via-transparent to-cyan-500/30" />
6      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-violet-900/20 via-transparent to-transparent" />
7
8      {/* グリッドパターン */}
9      <div
10        className="absolute inset-0 opacity-20"
11        style={{
12          backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
13                           linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
14          backgroundSize: "64px 64px",
15        }}
16      />
17
18      {/* コンテンツ */}
19      <div className="relative mx-auto flex min-h-screen max-w-6xl flex-col items-center justify-center px-4 py-24 text-center sm:px-6 lg:px-8">
20        {/* バッジ */}
21        <div className="mb-8 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/80 backdrop-blur-sm">
22          <span className="relative flex h-2 w-2">
23            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-cyan-400 opacity-75" />
24            <span className="relative inline-flex h-2 w-2 rounded-full bg-cyan-500" />
25          </span>
26          Now Available
27        </div>
28
29        {/* 見出し */}
30        <h1 className="mb-6 bg-gradient-to-b from-white to-white/60 bg-clip-text text-3xl font-bold tracking-tight text-transparent sm:text-5xl md:text-6xl lg:text-7xl">
31          Build faster with
32          <br />
33          <span className="bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text">
34            modern UI
35          </span>
36        </h1>
37
38        {/* 説明文 */}
39        <p className="mb-10 max-w-2xl text-lg text-white/60 sm:text-xl">
40          Create stunning websites in minutes with our collection of beautifully
41          designed, production-ready components.
42        </p>
43
44        {/* CTA ボタン */}
45        <div className="flex flex-col gap-4 sm:flex-row">
46          <button className="group relative inline-flex items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-violet-500 to-cyan-500 px-8 py-3 font-medium text-white transition-all hover:scale-105">
47            <span className="relative z-10">Get Started</span>
48            <div className="absolute inset-0 bg-gradient-to-r from-violet-600 to-cyan-600 opacity-0 transition-opacity group-hover:opacity-100" />
49          </button>
50          <button className="inline-flex items-center justify-center rounded-full border border-white/20 bg-white/5 px-8 py-3 font-medium text-white backdrop-blur-sm transition-all hover:bg-white/10">
51            Learn More →
52          </button>
53        </div>
54
55        {/* 装飾的な要素 */}
56        <div className="absolute -left-32 top-1/4 h-64 w-64 rounded-full bg-violet-500/30 blur-[128px]" />
57        <div className="absolute -right-32 bottom-1/4 h-64 w-64 rounded-full bg-cyan-500/30 blur-[128px]" />
58      </div>
59    </section>
60  );
61}