Skip to content

Commit c541158

Browse files
TheRemyyyTheRemyyy
committed
Update Home.tsx
1 parent 7f7054f commit c541158

1 file changed

Lines changed: 96 additions & 52 deletions

File tree

‎web/src/pages/Home.tsx‎

Lines changed: 96 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { NavLink } from 'react-router-dom';
1+
import { NavLink } from 'react-router-dom';
22
import { motion } from 'framer-motion';
3-
import { Zap, Database, Globe, ArrowRight, Server, ShieldCheck } from 'lucide-react';
3+
import { Zap, Database, Globe, ArrowRight, Server, ShieldCheck, Cpu, Layers, Workflow } from 'lucide-react';
44

55
export default function Home() {
66
return (
7-
<div className="min-h-screen bg-background text-zinc-100 overflow-hidden">
7+
<div className="min-h-screen bg-background text-zinc-100 overflow-hidden font-sans">
88
{/* Hero Section */}
99
<section className="relative pt-32 pb-20 px-4">
1010
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-orange-900/20 via-background to-background pointer-events-none"></div>
@@ -20,106 +20,150 @@ export default function Home() {
2020
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
2121
<span className="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
2222
</span>
23-
v1.0.0 Now Available
23+
v1.0.0 Stable Release
2424
</div>
2525

26-
<h1 className="text-4xl md:text-7xl font-bold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-br from-white via-zinc-200 to-zinc-500">
27-
The Fastest Real-Time DB <br />
28-
<span className="text-white">in the Known Universe.</span>
26+
<h1 className="text-4xl md:text-7xl font-bold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-br from-white via-zinc-200 to-zinc-500 leading-tight">
27+
The Unified Storage Engine <br />
28+
<span className="text-white">for Hyper-Scale Apps.</span>
2929
</h1>
3030

31-
<p className="text-xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
32-
Built with Rust. Zero-copy architecture. <span className="text-zinc-100 font-semibold">1M+ ops/sec</span>.
33-
NyroDB bridges the gap between in-memory caches and persistent storage.
31+
<p className="text-xl text-zinc-400 max-w-3xl mx-auto mb-10 leading-relaxed">
32+
Stop splitting your data between slow databases and fragile caches.
33+
<span className="text-zinc-100 font-semibold block mt-2">NyroDB is a zero-copy, memory-mapped engine that delivers 1M+ ops/sec with persistent reliability.</span>
3434
</p>
3535

3636
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
3737
<NavLink
3838
to="/docs/getting_started/installation"
39-
className="px-8 py-3.5 rounded-lg bg-primary hover:bg-orange-700 text-white font-semibold transition-all shadow-lg shadow-orange-500/20 flex items-center gap-2"
39+
className="px-8 py-3.5 rounded-lg bg-orange-600 hover:bg-orange-700 text-white font-semibold transition-all shadow-lg shadow-orange-500/20 flex items-center gap-2"
4040
>
41-
Get Started <ArrowRight size={18} />
41+
Build Fast <ArrowRight size={18} />
4242
</NavLink>
4343
<NavLink
4444
to="/docs"
45-
className="px-8 py-3.5 rounded-lg bg-surface border border-border hover:border-zinc-600 text-zinc-300 font-medium transition-all"
45+
className="px-8 py-3.5 rounded-lg bg-zinc-900 border border-zinc-800 hover:border-zinc-700 text-zinc-300 font-medium transition-all"
4646
>
47-
Read Documentation
47+
Explore Docs
4848
</NavLink>
4949
</div>
5050
</motion.div>
5151
</div>
5252
</section>
5353

54+
{/* About / Vision Section */}
55+
<section className="py-24 px-4 bg-zinc-950/50 border-y border-white/5">
56+
<div className="max-w-5xl mx-auto">
57+
<div className="grid md:grid-cols-2 gap-16 items-center">
58+
<div>
59+
<h2 className="text-3xl font-bold mb-6 text-white tracking-tight">Killing the Cache-Aside Complexity.</h2>
60+
<div className="space-y-4 text-zinc-400 leading-relaxed text-lg">
61+
<p>
62+
Modern infrastructure is broken. We store data in "slow" databases and then build massive, complex sync layers to keep "fast" caches (Redis/Memcached) updated.
63+
</p>
64+
<p>
65+
<span className="text-orange-400 font-medium italic">NyroDB was born to kill this pattern.</span> By combining memory-mapped files with zero-copy serialization, we've created a system that is as fast as your RAM but as reliable as your NVMe.
66+
</p>
67+
<p>
68+
Whether you're building high-frequency trading platforms or massive real-time games, NyroDB gives you a single source of truth that never lags.
69+
</p>
70+
</div>
71+
</div>
72+
<div className="grid grid-cols-2 gap-4">
73+
<div className="p-6 rounded-xl border border-zinc-800 bg-black flex flex-col items-center text-center">
74+
<span className="text-3xl font-bold text-white mb-1">1M+</span>
75+
<span className="text-xs text-zinc-500 uppercase tracking-widest">Ops/Sec</span>
76+
</div>
77+
<div className="p-6 rounded-xl border border-zinc-800 bg-black flex flex-col items-center text-center">
78+
<span className="text-3xl font-bold text-white mb-1">&lt;1μs</span>
79+
<span className="text-xs text-zinc-500 uppercase tracking-widest">Latency</span>
80+
</div>
81+
<div className="p-6 rounded-xl border border-zinc-800 bg-black flex flex-col items-center text-center">
82+
<span className="text-3xl font-bold text-white mb-1">0</span>
83+
<span className="text-xs text-zinc-500 uppercase tracking-widest">Copy Overh.</span>
84+
</div>
85+
<div className="p-6 rounded-xl border border-zinc-800 bg-black flex flex-col items-center text-center">
86+
<span className="text-3xl font-bold text-white mb-1">∞</span>
87+
<span className="text-xs text-zinc-500 uppercase tracking-widest">Scalability</span>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
</section>
93+
5494
{/* Features Grid */}
55-
<section className="py-24 px-4 border-t border-white/5">
95+
<section className="py-24 px-4">
96+
<div className="text-center mb-16">
97+
<h2 className="text-3xl font-bold mb-4">Core Architecture</h2>
98+
<p className="text-zinc-500">Built for the limits of modern hardware.</p>
99+
</div>
56100
<div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-8">
57101
<FeatureCard
58102
icon={Zap}
59-
title="Extreme Performance"
60-
desc="Capable of over 1,000,000 operations per second with sub-microsecond latency using mmap and atomic batching."
103+
title="Extreme Throughput"
104+
desc="Utilizes asynchronous batching and wait-free data structures to saturate your I/O subsystem."
61105
/>
62106
<FeatureCard
63107
icon={Globe}
64-
title="Native Real-Time"
65-
desc="Built-in WebSocket server pushes updates instantly. No external message queues (Redis/Kafka) required."
108+
title="Native WebSocket Layer"
109+
desc="A built-in pub/sub engine allows clients to subscribe to specific JSON paths and get updates in real-time."
66110
/>
67111
<FeatureCard
68112
icon={Database}
69-
title="Universal Indexing"
70-
desc="O(1) secondary lookups on any JSON field. Query by metadata instantly without schema migrations."
113+
title="O(1) Secondary Indexing"
114+
desc="NyroDB automatically indexes your JSON fields without schema definitions or heavy migration scripts."
71115
/>
72116
<FeatureCard
73117
icon={ShieldCheck}
74-
title="Production Ready"
75-
desc="ACID-compliant persistence with WAL recovery. Secure API Key authentication built-in."
118+
title="ACID Persistence"
119+
desc="Atomic, Consistent, Isolated, and Durable. Your data is safe even during power failure via WAL recovery."
76120
/>
77121
<FeatureCard
78-
icon={Server}
79-
title="Rust Powered"
80-
desc="Memory safe, thread safe, and compiled to a single binary. Zero garbage collection pauses."
122+
icon={Cpu}
123+
title="Rust & Zero-Copy"
124+
desc="Data is accessed directly via memory pointers. No serialization overhead, no GC, no compromises."
81125
/>
82126
<FeatureCard
83-
icon={ArrowRight}
84-
title="Zero-Copy Storage"
85-
desc="Data maps directly from disk to memory, bypassing user-space copy overhead entirely."
127+
icon={Layers}
128+
title="Multi-Tenant Auth"
129+
desc="Strict API-key validation and namespace isolation for secure multi-application environments."
86130
/>
87131
</div>
88132
</section>
89133

90134
{/* Code Demo */}
91-
<section className="py-20 px-4 bg-surface/30">
135+
<section className="py-20 px-4 bg-zinc-950 border-t border-white/5">
92136
<div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center gap-12">
93137
<div className="flex-1 space-y-6">
94-
<h2 className="text-3xl font-bold">Simple yet Powerful API</h2>
138+
<h2 className="text-3xl font-bold">Simple, Declarative API</h2>
95139
<p className="text-zinc-400">
96-
Interact via standard HTTP or WebSocket. Client libraries available for all major languages.
140+
NyroDB abstracts the complexity of mmap and thread-safety behind a clean REST and WebSocket interface.
97141
</p>
98142
<div className="space-y-4">
99-
<CheckItem text="RESTful endpoints for CRUD" />
100-
<CheckItem text="WebSocket Pub/Sub" />
101-
<CheckItem text="JSON Native Storage" />
143+
<CheckItem text="RESTful endpoints for instant CRUD" />
144+
<CheckItem text="Schema-less JSON native storage" />
145+
<CheckItem text="Instant pub/sub over WebSockets" />
146+
<CheckItem text="Metrics endpoint for real-time monitoring" />
102147
</div>
103148
</div>
104149

105150
<div className="flex-1 w-full relative">
106-
<div className="absolute inset-0 bg-primary/20 blur-3xl rounded-full"></div>
107-
<div className="relative bg-[#0d0d10] border border-border rounded-xl p-6 shadow-2xl font-mono text-sm overflow-hidden">
151+
<div className="absolute inset-0 bg-orange-500/10 blur-3xl rounded-full"></div>
152+
<div className="relative bg-[#09090b] border border-zinc-800 rounded-xl p-6 shadow-2xl font-mono text-sm overflow-hidden">
108153
<div className="flex gap-2 mb-4">
109154
<div className="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/50"></div>
110155
<div className="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/50"></div>
111156
<div className="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/50"></div>
112157
</div>
113158
<div className="text-zinc-400">
114-
<span className="text-purple-400">POST</span> /insert/user <span className="text-zinc-600">HTTP/1.1</span><br />
159+
<span className="text-purple-400">POST</span> /insert/metrics <span className="text-zinc-600">HTTP/1.1</span><br />
115160
<span className="text-blue-400">Content-Type:</span> application/json<br />
116-
<span className="text-blue-400">x-api-key:</span> secret_key<br />
117161
<br />
118-
<span className="text-zinc-300">{`{`}</span><br />
119-
&nbsp;&nbsp;<span className="text-green-400">"id"</span>: <span className="text-orange-400">1024</span>,<br />
120-
&nbsp;&nbsp;<span className="text-green-400">"email"</span>: <span className="text-yellow-300">"nyro@db.io"</span>,<br />
121-
&nbsp;&nbsp;<span className="text-green-400">"role"</span>: <span className="text-yellow-300">"admin"</span><br />
122-
<span className="text-zinc-300">{`}`}</span>
162+
<span className="text-zinc-300">{{}</span><br />
163+
&nbsp;&nbsp;<span className="text-green-400">"service"</span>: <span className="text-yellow-300">"auth-node-1"</span>,<br />
164+
&nbsp;&nbsp;<span className="text-green-400">"tps"</span>: <span className="text-orange-400">1250000</span>,<br />
165+
&nbsp;&nbsp;<span className="text-green-400">"status"</span>: <span className="text-yellow-300">"healthy"</span><br />
166+
<span className="text-zinc-300">{}}</span>
123167
</div>
124168
</div>
125169
</div>
@@ -129,23 +173,23 @@ export default function Home() {
129173
);
130174
}
131175

132-
function FeatureCard({ icon: Icon, title, desc }: { icon: any, title: string, desc: string }) {
176+
function FeatureCard({ icon: Icon, title, desc }: { icon: any, title: string, desc: string }) {
133177
return (
134-
<div className="p-6 rounded-xl bg-surface/40 border border-white/5 hover:border-primary/50 transition-colors group">
135-
<div className="w-12 h-12 rounded-lg bg-surface flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
136-
<Icon className="text-zinc-400 group-hover:text-primary transition-colors" size={24} />
178+
<div className="p-8 rounded-xl bg-zinc-900/40 border border-zinc-800 hover:border-orange-500/50 transition-all group">
179+
<div className="w-12 h-12 rounded-lg bg-zinc-900 flex items-center justify-center mb-6 group-hover:bg-orange-500/10 transition-colors border border-zinc-800 group-hover:border-orange-500/20">
180+
<Icon className="text-zinc-500 group-hover:text-orange-400 transition-colors" size={24} />
137181
</div>
138-
<h3 className="text-lg font-bold text-white mb-2">{title}</h3>
139-
<p className="text-sm text-zinc-400 leading-relaxed">{desc}</p>
182+
<h3 className="text-xl font-bold text-white mb-3 tracking-tight">{title}</h3>
183+
<p className="text-zinc-400 leading-relaxed">{desc}</p>
140184
</div>
141185
);
142186
}
143187

144188
function CheckItem({ text }: { text: string }) {
145189
return (
146190
<div className="flex items-center gap-3">
147-
<div className="w-5 h-5 rounded-full bg-green-500/20 flex items-center justify-center">
148-
<div className="w-1.5 h-1.5 rounded-full bg-green-500"></div>
191+
<div className="w-5 h-5 rounded-full bg-orange-500/10 border border-orange-500/20 flex items-center justify-center">
192+
<div className="w-1.5 h-1.5 rounded-full bg-orange-500"></div>
149193
</div>
150194
<span className="text-zinc-300">{text}</span>
151195
</div>

0 commit comments

Comments
 (0)