Skip to content

Commit 5726e05

Browse files
ErebuzzzErebuzzz
committed
Updated Docs component: enhanced UI with new color scheme, improved layout, and added features grid for better user experience
1 parent 7a7532f commit 5726e05

1 file changed

Lines changed: 58 additions & 13 deletions

File tree

‎frontend/src/components/Docs.tsx‎

Lines changed: 58 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,11 @@ const NavItem: React.FC<{
8282
onClick={onClick}
8383
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left text-sm transition-all duration-200 ${
8484
active
85-
? 'bg-brand-500/10 text-brand-400 font-medium shadow-[0_0_15px_-3px_rgba(99,102,241,0.2)]'
85+
? 'bg-emerald-500/10 text-emerald-400 font-medium shadow-[0_0_15px_-3px_rgba(52,211,153,0.2)]'
8686
: 'text-slate-400 hover:text-white hover:bg-white/5'
8787
}`}
8888
>
89-
<span className={`transition-colors duration-200 ${active ? 'text-brand-400' : 'text-slate-500 group-hover:text-slate-300'}`}>{icon}</span>
89+
<span className={`transition-colors duration-200 ${active ? 'text-emerald-400' : 'text-slate-500 group-hover:text-slate-300'}`}>{icon}</span>
9090
{label}
9191
</button>
9292
);
@@ -194,27 +194,72 @@ export const Docs: React.FC<DocsProps> = ({ onBack }) => {
194194
transition={{ duration: 0.3 }}
195195
>
196196
{activeSection === 'overview' && (
197-
<div className="space-y-12">
197+
<div className="space-y-16">
198198
<div>
199199
<h1 className="text-4xl md:text-5xl font-display font-medium text-white mb-6">Introduction</h1>
200-
<p className="text-lg text-slate-400 leading-relaxed font-light max-w-2xl">
200+
<p className="text-lg text-slate-400 leading-relaxed font-light">
201201
CodeShield is a secure, intelligent coding assistant designed to protect your codebase from malicious patterns and poor practices. It acts as a firewall for your code generation workflow.
202202
</p>
203203
</div>
204204

205+
{/* Features Grid */}
205206
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
206207
{[
207208
{ title: 'TrustGate', desc: 'Secure Sandbox', icon: <ShieldIcon /> },
208209
{ title: 'StyleForge', desc: 'Auto-formatting', icon: <WandIcon /> },
209210
{ title: 'ContextVault', desc: 'State Memory', icon: <DatabaseIcon /> },
210211
].map((feature, i) => (
211-
<div key={i} className="p-6 rounded-2xl bg-white/[0.02] border border-white/5 hover:border-brand-500/30 transition-colors group">
212-
<div className="mb-4 text-brand-400 group-hover:scale-110 transition-transform origin-left">{feature.icon}</div>
212+
<div key={i} className="p-6 rounded-2xl bg-white/[0.02] border border-white/5 hover:border-emerald-500/30 transition-colors group">
213+
<div className="mb-4 text-emerald-400 group-hover:scale-110 transition-transform origin-left">{feature.icon}</div>
213214
<h3 className="text-lg font-medium text-white mb-2">{feature.title}</h3>
214215
<p className="text-sm text-slate-400">{feature.desc}</p>
215216
</div>
216217
))}
217218
</div>
219+
220+
{/* How It Works Diagram */}
221+
<div>
222+
<h2 className="text-2xl font-display font-medium text-white mb-8">How It Works</h2>
223+
<div className="relative">
224+
{/* Connecting Line */}
225+
<div className="absolute left-[19px] top-8 bottom-8 w-0.5 bg-gradient-to-b from-emerald-500/50 via-emerald-500/20 to-transparent hidden md:block"></div>
226+
227+
<div className="space-y-8">
228+
{[
229+
{
230+
title: "Ingestion",
231+
desc: "CodeShield intercepts generated code from your LLM or manual input.",
232+
icon: <ApiIcon />
233+
},
234+
{
235+
title: "Security Scan (TrustGate)",
236+
desc: "Code is executed in an isolated sandbox to detect malicious behavior, network calls, or dangerous imports.",
237+
icon: <ShieldIcon />
238+
},
239+
{
240+
title: "Style Adaptation (StyleForge)",
241+
desc: "The system analyzes your project's existing files to apply consistent naming conventions and formatting rules.",
242+
icon: <WandIcon />
243+
},
244+
{
245+
title: "Delivery",
246+
desc: "The verified, safe, and styled code is returned to your editor, ready for production.",
247+
icon: <CheckIcon />
248+
}
249+
].map((step, i) => (
250+
<div key={i} className="relative flex gap-6 group">
251+
<div className="relative z-10 shrink-0 w-10 h-10 rounded-full bg-[#0d1117] border border-white/10 flex items-center justify-center text-slate-400 group-hover:text-emerald-400 group-hover:border-emerald-500/50 transition-colors shadow-lg">
252+
{step.icon}
253+
</div>
254+
<div className="pt-1">
255+
<h3 className="text-white font-medium mb-1 group-hover:text-emerald-400 transition-colors">{step.title}</h3>
256+
<p className="text-sm text-slate-400 leading-relaxed font-light">{step.desc}</p>
257+
</div>
258+
</div>
259+
))}
260+
</div>
261+
</div>
262+
</div>
218263
</div>
219264
)}
220265

@@ -236,7 +281,7 @@ export const Docs: React.FC<DocsProps> = ({ onBack }) => {
236281
"Network isolation in sandboxed execution containers"
237282
].map((item, i) => (
238283
<li key={i} className="flex items-start gap-3 text-slate-400 bg-white/[0.01] p-3 rounded-lg border border-white/5">
239-
<span className="text-brand-400 mt-1"><CheckIcon /></span>
284+
<span className="text-emerald-400 mt-1"><CheckIcon /></span>
240285
{item}
241286
</li>
242287
))}
@@ -280,7 +325,7 @@ def dangerous_operation():
280325
{ title: "Conflict Prevention", desc: "Ensures new identifiers don't clash with existing ones." }
281326
].map((item, i) => (
282327
<div key={i} className="p-4 rounded-xl bg-white/[0.02] border border-white/5">
283-
<strong className="text-brand-400 block mb-1">{item.title}</strong>
328+
<strong className="text-emerald-400 block mb-1">{item.title}</strong>
284329
<span className="text-slate-400 text-sm">{item.desc}</span>
285330
</div>
286331
))}
@@ -316,18 +361,18 @@ def dangerous_operation():
316361
<div>
317362
<h1 className="text-4xl font-display font-medium text-white mb-4">ContextVault</h1>
318363
<p className="text-lg text-slate-400 leading-relaxed font-light">
319-
ContextVault acts like a "Save Game" for your development workflow. It captures your entire mental state—open files, cursor positions, and notes—so you can switch tasks without losing focus.
364+
ContextVault acts like a "Save Game" for your development workflow. It captures your entire mental state: open files, cursor positions, and notes, so you can switch tasks without losing focus.
320365
</p>
321366
</div>
322367

323368
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
324-
<div className="p-6 rounded-2xl bg-gradient-to-br from-indigo-500/10 to-purple-500/5 border border-indigo-500/10">
325-
<div className="text-indigo-400 mb-3"><DatabaseIcon /></div>
369+
<div className="p-6 rounded-2xl bg-gradient-to-br from-emerald-500/10 to-teal-500/5 border border-emerald-500/10">
370+
<div className="text-emerald-400 mb-3"><DatabaseIcon /></div>
326371
<h3 className="text-white font-medium mb-2">State Persistence</h3>
327372
<p className="text-sm text-slate-400 leading-relaxed">Saves open files, active tabs, and exact cursor locations to a local SQLite database.</p>
328373
</div>
329-
<div className="p-6 rounded-2xl bg-gradient-to-br from-emerald-500/10 to-teal-500/5 border border-emerald-500/10">
330-
<div className="text-emerald-400 mb-3"><WandIcon /></div>
374+
<div className="p-6 rounded-2xl bg-gradient-to-br from-teal-500/10 to-emerald-500/5 border border-teal-500/10">
375+
<div className="text-teal-400 mb-3"><WandIcon /></div>
331376
<h3 className="text-white font-medium mb-2">Instant Restore</h3>
332377
<p className="text-sm text-slate-400 leading-relaxed">One-click restoration brings your IDE back to the exact moment you left off.</p>
333378
</div>

0 commit comments

Comments
 (0)