Skip to content

Commit 2194191

Browse files
mythzmythz
committed
new hero
1 parent 21c5092 commit 2194191

File tree

1 file changed

+78
-15
lines changed

1 file changed

+78
-15
lines changed

‎app/(home)/page.tsx‎

Lines changed: 78 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,40 @@ export default function HomePage() {
1111
return (
1212
<main className="flex flex-col min-h-[calc(100vh-4rem)]">
1313

14+
15+
1416
{/* Hero Section - Dark Theme */}
15-
<section className="relative w-full bg-[#0f172a] text-white overflow-hidden">
16-
{/* Dynamic Background */}
17-
<div className="absolute inset-0 -z-10">
18-
<div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-sky-900/20 to-slate-900/20" />
19-
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-blue-500/10 rounded-full blur-[120px] animate-pulse" />
20-
<div className="absolute bottom-0 right-0 w-[800px] h-[600px] bg-cyan-500/10 rounded-full blur-[100px]" />
17+
<section className="relative w-full bg-slate-950 border-b border-white/10 overflow-hidden">
18+
19+
{/* 1. Full Width Background Effects */}
20+
21+
{/* Grid Pattern */}
22+
<div className="absolute inset-0 opacity-20 pointer-events-none">
23+
<svg className="h-full w-full" aria-hidden="true">
24+
<defs>
25+
<pattern id="hero-grid" width="40" height="40" patternUnits="userSpaceOnUse">
26+
<path d="M0 40L40 0H20L0 20M40 40V20L20 40" stroke="#0ea5e9" strokeWidth="1" fill="none" opacity="0.1" />
27+
</pattern>
28+
</defs>
29+
<rect width="100%" height="100%" fill="url(#hero-grid)" />
30+
</svg>
2131
</div>
2232

23-
<div className="max-w-6xl mx-auto px-4 py-20 md:py-32 relative z-10 text-center">
33+
{/* Ambient Glows */}
34+
<div className="absolute top-0 left-1/4 h-96 w-96 rounded-full bg-blue-600/20 blur-[100px] pointer-events-none"></div>
35+
<div className="absolute bottom-0 right-1/4 h-96 w-96 rounded-full bg-cyan-500/10 blur-[100px] pointer-events-none"></div>
2436

25-
{/* React Atom Animation Effect */}
26-
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 -z-10 opacity-40 pointer-events-none">
27-
<div className="w-[600px] h-[600px] border border-cyan-400/20 rounded-full animate-[spin_10s_linear_infinite]" />
28-
<div className="absolute top-0 left-0 w-[600px] h-[600px] border border-cyan-400/20 rounded-full animate-[spin_15s_linear_infinite_reverse] rotate-45" />
29-
<div className="absolute top-0 left-0 w-[600px] h-[600px] border border-cyan-400/20 rounded-full animate-[spin_20s_linear_infinite] -rotate-45" />
30-
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-cyan-400/20 rounded-full blur-md animate-pulse" />
31-
</div>
37+
{/* Spinning React Logo Watermark (Positioned absolutely to the right) */}
38+
<svg className="absolute -right-20 top-20 h-[600px] w-[600px] text-cyan-500/5 animate-[spin_60s_linear_infinite] pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.5">
39+
<circle cx="12" cy="12" r="2"></circle>
40+
<ellipse rx="10" ry="4.5" transform="rotate(60 12 12)"></ellipse>
41+
<ellipse rx="10" ry="4.5" transform="rotate(120 12 12)"></ellipse>
42+
<ellipse rx="10" ry="4.5"></ellipse>
43+
</svg>
3244

33-
<div className="space-y-6">
45+
{/* 2. Main Content Container */}
46+
<div className="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 pt-20 pb-16 md:py-32">
47+
<div className="text-center space-y-6">
3448
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-cyan-500/30 bg-cyan-500/10 text-sm font-medium text-cyan-300 shadow-[0_0_10px_rgba(34,211,238,0.2)] animate-fade-in-up">
3549
<span className="relative flex h-2 w-2">
3650
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
@@ -71,6 +85,55 @@ export default function HomePage() {
7185
</div>
7286
</div>
7387
</div>
88+
89+
{/* 3. Feature Grid / Footer (Full Width Strip) */}
90+
<div className="relative border-t border-white/5 bg-white/[0.02] backdrop-blur-sm">
91+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
92+
<dl className="grid grid-cols-1 gap-y-8 py-10 sm:grid-cols-3 sm:gap-x-8 lg:gap-x-12">
93+
94+
{/* Feature 1 */}
95+
<div className="relative pl-14">
96+
<dt className="text-base font-semibold leading-7 text-white">
97+
<div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-500/10 border border-cyan-500/20">
98+
<span className="text-cyan-400 font-mono text-xs font-bold">01</span>
99+
</div>
100+
AI Ready
101+
</dt>
102+
<dd className="mt-2 text-base leading-7 text-slate-400">
103+
Start from well-known React templates tuned for rich, data-driven and AI-generated user interfaces.
104+
</dd>
105+
</div>
106+
107+
{/* Feature 2 */}
108+
<div className="relative pl-14">
109+
<dt className="text-base font-semibold leading-7 text-white">
110+
<div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-500/10 border border-cyan-500/20">
111+
<span className="text-cyan-400 font-mono text-xs font-bold">02</span>
112+
</div>
113+
End-to-end Type Safety
114+
</dt>
115+
<dd className="mt-2 text-base leading-7 text-slate-400">
116+
From C# DTOs in .NET to TypeScript DTOs in React for confident refactors without context switching.
117+
</dd>
118+
</div>
119+
120+
{/* Feature 3 */}
121+
<div className="relative pl-14">
122+
<dt className="text-base font-semibold leading-7 text-white">
123+
<div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-cyan-500/10 border border-cyan-500/20">
124+
<span className="text-cyan-400 font-mono text-xs font-bold">03</span>
125+
</div>
126+
Zero-Ambiguity APIs
127+
</dt>
128+
<dd className="mt-2 text-base leading-7 text-slate-400">
129+
Consistent API integrations eliminates guesswork, giving AI the perfect context to generate accurate implementations.
130+
</dd>
131+
</div>
132+
133+
</dl>
134+
</div>
135+
</div>
136+
74137
</section>
75138

76139
{/* Body Content - Light/Default Theme */}

0 commit comments

Comments
 (0)