feat(web): design overhaul

This commit is contained in:
Aman Varshney
2025-07-20 19:37:41 +05:30
parent 81975cfef4
commit 87d4362c6d
31 changed files with 1844 additions and 733 deletions

View File

@@ -26,11 +26,11 @@ export default function ShowcaseItem({
const projectId = `PROJECT_${String(index + 1).padStart(3, "0")}`;
return (
<div className="terminal-block-hover flex h-full flex-col overflow-hidden rounded border border-border bg-background">
<div className="border-border border-b bg-muted/20 px-3 py-2">
<div className="flex h-full flex-col overflow-hidden rounded border border-border">
<div className="border-border border-b px-3 py-2">
<div className="flex items-center gap-2">
<File className="h-3 w-3 text-primary" />
<span className="font-mono font-semibold text-foreground text-xs">
<span className=" font-semibold text-foreground text-xs">
{projectId}.PROJECT
</span>
<div className="ml-auto flex items-center gap-2 text-muted-foreground text-xs">
@@ -52,17 +52,15 @@ export default function ShowcaseItem({
</div>
<div className="flex flex-1 flex-col p-4">
<h3 className="mb-2 font-bold font-mono text-lg text-primary">
{title}
</h3>
<h3 className="mb-2 font-bold text-lg text-primary">{title}</h3>
<p className="mb-4 flex-grow font-mono text-muted-foreground text-sm leading-relaxed">
<p className="mb-4 flex-grow text-muted-foreground text-sm leading-relaxed">
{description}
</p>
<div className="mb-4">
<div className="mb-2 flex items-center gap-2">
<span className="font-mono text-muted-foreground text-xs">
<span className=" text-muted-foreground text-xs">
DEPENDENCIES:
</span>
</div>
@@ -70,7 +68,7 @@ export default function ShowcaseItem({
{tags.map((tag) => (
<span
key={tag}
className="rounded border border-border bg-muted/30 px-2 py-1 font-mono text-foreground text-xs transition-colors hover:bg-muted/50"
className="rounded border border-border bg-muted/30 px-2 py-1 text-foreground text-xs transition-colors hover:bg-muted/50"
>
{tag}
</span>
@@ -85,7 +83,7 @@ export default function ShowcaseItem({
href={liveUrl}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 rounded border border-border bg-primary/10 px-3 py-2 font-mono text-primary text-sm transition-all hover:bg-primary/20 hover:text-primary"
className="flex items-center gap-2 rounded border border-border bg-primary/10 px-3 py-2 text-primary text-sm transition-all hover:bg-primary/20 hover:text-primary"
>
<Monitor className="h-3 w-3" />
<span>LAUNCH_DEMO.EXE</span>
@@ -97,7 +95,7 @@ export default function ShowcaseItem({
href={sourceUrl}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 rounded border border-border bg-muted/20 px-3 py-2 font-mono text-muted-foreground text-sm transition-all hover:bg-muted/40 hover:text-foreground"
className="flex items-center gap-2 rounded border border-border px-3 py-2 text-muted-foreground text-sm transition-all hover:bg-muted/40 hover:text-foreground"
>
<Github className="h-3 w-3" />
<span>VIEW_SOURCE.GIT</span>
@@ -109,12 +107,12 @@ export default function ShowcaseItem({
<div className="border-border border-t pt-2">
<div className="flex items-center gap-2 text-xs">
<span className="text-primary">$</span>
<span className="font-mono text-muted-foreground">
<span className=" text-muted-foreground">
echo &quot;Status: READY&quot;
</span>
<div className="ml-auto flex items-center gap-1">
<div className="h-1 w-1 animate-pulse rounded-full bg-green-400" />
<span className="font-mono text-green-400 text-xs">ONLINE</span>
<span className=" text-green-400 text-xs">ONLINE</span>
</div>
</div>
</div>