yvg/pounce
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Terminal Design an Landing Page Stil angepasst
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
Details
CI / Frontend Build (push) Has been cancelled
Details
CI / Backend Lint (push) Has been cancelled
Details
CI / Backend Tests (push) Has been cancelled
Details
CI / Docker Build (push) Has been cancelled
Details
CI / Security Scan (push) Has been cancelled
Details
Deploy / Build & Push Images (push) Has been cancelled
Details
Deploy / Deploy to Server (push) Has been cancelled
Details
Deploy / Notify (push) Has been cancelled
Details

Browse Source 
- CommandCenterLayout: Brutalist/Technical Look (#020202 bg, Noise-Overlay, scharfe Ecken)
- Sidebar: Mono-Fonts, Border-Left für aktive Links, eckigere UI
- Top Bar: Minimalistischer, dunklere Farben, weniger Blur
- Notifications & Search Modal: Technischer Look mit schärferen Kanten
- User Card: Eckiger, weniger rund
- Konsistente Verwendung von white/[0.08] für Borders wie Landing Page
This commit is contained in:
Yves Gugger
2025-12-12 21:00:18 +01:00
parent 5a1d3f2847
commit 545df1bcba
1 changed files with 100 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
frontend/src/components/Sidebar.tsx
View File

@ -151,36 +151,33 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
<>
{/* Logo Section */}
<div className={clsx(
"relative h-20 flex items-center border-b border-white/5",
collapsed ? "justify-center px-2" : "px-4"
"relative h-20 flex items-center border-b border-white/[0.08]",
collapsed ? "justify-center px-2" : "px-6"
)}>
<Link href="/" className="flex items-center gap-3 group">
<Link href="/" className="flex items-center gap-4 group w-full">
<div className={clsx(
"relative flex items-center justify-center transition-all duration-300",
collapsed ? "w-10 h-10" : "w-12 h-12"
collapsed ? "w-8 h-8" : "w-10 h-10"
)}>
{/* Glow effect behind logo - Reduced intensity for cleanliness */}
<div className="absolute inset-0 bg-emerald-500/10 blur-xl rounded-full scale-150 opacity-30 group-hover:opacity-60 transition-opacity" />
{/* Minimalist Glow */}
<div className="absolute inset-0 bg-accent/20 blur-lg rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
<Image
src="/pounce-puma.png"
alt="pounce"
width={48}
height={48}
className={clsx(
"relative object-contain transition-all",
collapsed ? "w-8 h-8" : "w-10 h-10"
)}
width={40}
height={40}
className="relative object-contain"
/>
</div>
{!collapsed && (
<div className="flex flex-col">
<span
className="text-lg font-bold tracking-[0.12em] text-white group-hover:text-emerald-400 transition-colors"
className="text-lg font-bold tracking-[0.05em] text-white"
style={{ fontFamily: 'var(--font-display), Georgia, serif' }}
>
POUNCE
</span>
<span className="text-[10px] text-zinc-500 tracking-wider uppercase">
<span className="text-[10px] text-white/30 tracking-[0.2em] uppercase font-mono">
Terminal
</span>
</div>
@ -189,15 +186,17 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
</div>
{/* Main Navigation */}
<nav className="flex-1 py-6 px-3 overflow-y-auto scrollbar-hide">
<nav className="flex-1 py-8 px-4 overflow-y-auto scrollbar-hide space-y-8">
{/* SECTION 1: Discover */}
<div className={clsx("mb-6", collapsed ? "px-1" : "px-2")}>
<div>
{!collapsed && (
<p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest mb-3 pl-2">
Discover
</p>
<div className="flex items-center gap-2 mb-4 px-2">
<div className="w-1 h-1 bg-accent rounded-full" />
<p className="text-[10px] font-mono font-bold text-white/40 uppercase tracking-widest">
Discover
</p>
</div>
)}
{collapsed && <div className="h-px bg-white/5 mb-3 w-4 mx-auto" />}
<div className="space-y-1">
{discoverItems.map((item) => (
@ -206,26 +205,21 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
href={item.href}
onClick={() => setMobileOpen(false)}
className={clsx(
"group relative flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200",
"group relative flex items-center gap-3 px-3 py-2 transition-all duration-200",
isActive(item.href)
? "text-emerald-400 bg-emerald-500/[0.08]"
: "text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.03]"
? "text-white bg-white/[0.03] border-l-2 border-accent"
: "text-white/50 hover:text-white hover:bg-white/[0.02] border-l-2 border-transparent"
)}
title={collapsed ? item.label : undefined}
>
{isActive(item.href) && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
)}
<item.icon className={clsx(
"w-4 h-4 transition-all duration-300",
isActive(item.href)
? "text-emerald-400"
: "group-hover:text-zinc-200"
isActive(item.href) ? "text-accent" : "text-white/40 group-hover:text-white"
)} />
{!collapsed && (
<span className={clsx(
"text-xs font-semibold tracking-wide transition-colors",
isActive(item.href) ? "text-emerald-400" : "text-zinc-400 group-hover:text-zinc-200"
"text-xs font-mono tracking-wide uppercase transition-colors",
isActive(item.href) ? "text-white" : "text-white/50 group-hover:text-white"
)}>
{item.label}
</span>
@ -236,13 +230,15 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
</div>
{/* SECTION 2: Manage */}
<div className={clsx("", collapsed ? "px-1" : "px-2")}>
<div>
{!collapsed && (
<p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest mb-3 pl-2">
Manage
</p>
<div className="flex items-center gap-2 mb-4 px-2">
<div className="w-1 h-1 bg-accent rounded-full" />
<p className="text-[10px] font-mono font-bold text-white/40 uppercase tracking-widest">
Manage
</p>
</div>
)}
{collapsed && <div className="h-px bg-white/5 mb-3 w-4 mx-auto" />}
<div className="space-y-1">
{manageItems.map((item) => {
@ -255,35 +251,28 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
{...(!isDisabled && { href: item.href })}
onClick={() => !isDisabled && setMobileOpen(false)}
className={clsx(
"group relative flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200",
"group relative flex items-center gap-3 px-3 py-2 transition-all duration-200",
isDisabled
? "opacity-50 cursor-not-allowed"
? "opacity-40 cursor-not-allowed border-l-2 border-transparent"
: isActive(item.href)
? "text-emerald-400 bg-emerald-500/[0.08]"
: "text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.03]"
? "text-white bg-white/[0.03] border-l-2 border-accent"
: "text-white/50 hover:text-white hover:bg-white/[0.02] border-l-2 border-transparent"
)}
title={isDisabled ? "Upgrade to Tycoon to unlock" : collapsed ? item.label : undefined}
>
{!isDisabled && isActive(item.href) && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
)}
<div className="relative">
<item.icon className={clsx(
"w-4 h-4 transition-all duration-300",
isDisabled ? "text-zinc-600" : isActive(item.href) ? "text-emerald-400" : "group-hover:text-zinc-200"
isDisabled ? "text-white/20" : isActive(item.href) ? "text-accent" : "text-white/40 group-hover:text-white"
)} />
{item.badge && typeof item.badge === 'number' && !isDisabled && (
<span className="absolute -top-1.5 -right-1.5 w-3.5 h-3.5 bg-emerald-500 text-black
text-[9px] font-bold rounded-full flex items-center justify-center
shadow-[0_0_8px_rgba(16,185,129,0.4)]">
{item.badge > 9 ? '•' : item.badge}
</span>
<span className="absolute -top-1 -right-1 w-1.5 h-1.5 bg-accent rounded-full animate-pulse" />
)}
</div>
{!collapsed && (
<span className={clsx(
"text-xs font-semibold tracking-wide transition-colors flex-1",
isDisabled ? "text-zinc-600" : isActive(item.href) ? "text-emerald-400" : "text-zinc-400 group-hover:text-zinc-200"
"text-xs font-mono tracking-wide uppercase transition-colors flex-1",
isDisabled ? "text-white/30" : isActive(item.href) ? "text-white" : "text-white/50 group-hover:text-white"
)}>
{item.label}
</span>
@ -296,13 +285,15 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
</div>
{/* SECTION 3: Monetize */}
<div className={clsx("mt-6", collapsed ? "px-1" : "px-2")}>
<div>
{!collapsed && (
<p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest mb-3 pl-2">
Monetize
</p>
<div className="flex items-center gap-2 mb-4 px-2">
<div className="w-1 h-1 bg-accent rounded-full" />
<p className="text-[10px] font-mono font-bold text-white/40 uppercase tracking-widest">
Monetize
</p>
</div>
)}
{collapsed && <div className="h-px bg-white/5 mb-3 w-4 mx-auto" />}
<div className="space-y-1">
{monetizeItems.map((item) => (
@ -311,34 +302,31 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
href={item.href}
onClick={() => setMobileOpen(false)}
className={clsx(
"group relative flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200",
"group relative flex items-center gap-3 px-3 py-2 transition-all duration-200",
isActive(item.href)
? "text-emerald-400 bg-emerald-500/[0.08]"
: "text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.03]"
? "text-white bg-white/[0.03] border-l-2 border-accent"
: "text-white/50 hover:text-white hover:bg-white/[0.02] border-l-2 border-transparent"
)}
title={collapsed ? item.label : undefined}
>
{isActive(item.href) && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
)}
<div className="relative">
<item.icon className={clsx(
"w-4 h-4 transition-all duration-300",
isActive(item.href)
? "text-emerald-400"
: "group-hover:text-zinc-200"
? "text-accent"
: "text-white/40 group-hover:text-white"
)} />
</div>
{!collapsed && (
<span className={clsx(
"text-xs font-semibold tracking-wide transition-colors flex-1",
isActive(item.href) ? "text-emerald-400" : "text-zinc-400 group-hover:text-zinc-200"
"text-xs font-mono tracking-wide uppercase transition-colors flex-1",
isActive(item.href) ? "text-white" : "text-white/50 group-hover:text-white"
)}>
{item.label}
</span>
)}
{item.isNew && !collapsed && (
<span className="px-1.5 py-0.5 text-[8px] font-bold uppercase tracking-wider bg-emerald-500/20 text-emerald-400 rounded">
<span className="px-1.5 py-0.5 text-[8px] font-mono font-bold uppercase tracking-wider bg-accent/20 text-accent border border-accent/20">
New
</span>
)}
@ -349,17 +337,17 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
</nav>
{/* Bottom Section */}
<div className="border-t border-white/5 py-4 px-3 space-y-1">
<div className="border-t border-white/[0.08] p-4 space-y-1 bg-[#020202]">
{/* Admin Link */}
{user?.is_admin && (
<Link
href="/admin"
onClick={() => setMobileOpen(false)}
className="group flex items-center gap-3 px-3 py-2.5 rounded-lg text-amber-500/80 hover:text-amber-400 hover:bg-amber-500/10 transition-all"
className="group flex items-center gap-3 px-3 py-2 text-amber-500/60 hover:text-amber-400 transition-all"
title={collapsed ? "Admin Panel" : undefined}
>
<Shield className="w-4 h-4" />
{!collapsed && <span className="text-xs font-semibold tracking-wide">Admin</span>}
{!collapsed && <span className="text-xs font-mono tracking-wide uppercase">Admin</span>}
</Link>
)}
@ -370,77 +358,77 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
href={item.href}
onClick={() => setMobileOpen(false)}
className={clsx(
"group flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all",
"group flex items-center gap-3 px-3 py-2 transition-all",
isActive(item.href)
? "text-emerald-400 bg-emerald-500/[0.08]"
: "text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.03]"
? "text-white"
: "text-white/40 hover:text-white"
)}
title={collapsed ? item.label : undefined}
>
<item.icon className="w-4 h-4" />
{!collapsed && <span className="text-xs font-semibold tracking-wide">{item.label}</span>}
{!collapsed && <span className="text-xs font-mono tracking-wide uppercase">{item.label}</span>}
</Link>
))}
{/* User Card */}
{/* User Card - Technical */}
<div className={clsx(
"mt-4 border border-white/5 rounded-xl bg-zinc-900/50",
collapsed ? "p-2 bg-transparent border-none" : "p-3"
"mt-6 border border-white/[0.08] bg-white/[0.02]",
collapsed ? "p-2 border-none bg-transparent" : "p-4"
)}>
{collapsed ? (
<div className="flex justify-center">
<div className="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
<TierIcon className="w-4 h-4 text-emerald-400" />
<div className="w-8 h-8 border border-accent/20 bg-accent/5 flex items-center justify-center">
<TierIcon className="w-4 h-4 text-accent" />
</div>
</div>
) : (
<>
<div className="flex items-center gap-3 mb-3">
<div className="w-9 h-9 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center flex-shrink-0">
<TierIcon className="w-4 h-4 text-emerald-400" />
<div className="flex items-center gap-3 mb-4">
<div className="w-8 h-8 border border-accent/20 bg-accent/5 flex items-center justify-center shrink-0">
<TierIcon className="w-4 h-4 text-accent" />
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-bold text-white truncate">
<div className="flex-1 min-w-0 overflow-hidden">
<p className="text-xs font-bold text-white truncate font-mono uppercase tracking-wider">
{user?.name || user?.email?.split('@')[0]}
</p>
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5 mt-0.5">
<span className={clsx(
"text-[10px] uppercase tracking-wider font-bold",
"text-[10px] uppercase tracking-widest font-mono",
tierName === 'Tycoon' ? "text-amber-400" :
tierName === 'Trader' ? "text-emerald-400" :
"text-zinc-500"
tierName === 'Trader' ? "text-accent" :
"text-white/40"
)}>
{tierName}
</span>
{tierName === 'Tycoon' && <Sparkles className="w-2.5 h-2.5 text-amber-400" />}
</div>
</div>
</div>
{/* Usage bar */}
<div className="space-y-1.5">
<div className="flex items-center justify-between text-[10px] font-medium text-zinc-500">
{/* Usage bar - Sharp */}
<div className="space-y-2">
<div className="flex items-center justify-between text-[10px] font-mono uppercase tracking-wider text-white/30">
<span>Usage</span>
<span>{subscription?.domains_used || 0}/{subscription?.domain_limit || 5}</span>
</div>
<div className="h-1 bg-zinc-800 rounded-full overflow-hidden">
<div className="h-px bg-white/10 w-full">
<div
className="h-full bg-emerald-500 rounded-full transition-all duration-500"
className="h-full bg-accent transition-all duration-500 relative"
style={{
width: `${Math.min(((subscription?.domains_used || 0) / (subscription?.domain_limit || 5)) * 100, 100)}%`
}}
/>
>
<div className="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-1 bg-accent shadow-[0_0_5px_rgba(16,185,129,0.8)]" />
</div>
</div>
</div>
{tierName === 'Scout' && (
<Link
href="/pricing"
className="mt-3 flex items-center justify-center gap-2 w-full py-2
bg-emerald-500 text-black text-[10px] font-bold uppercase tracking-wider rounded-lg
hover:bg-emerald-400 transition-colors"
className="mt-4 flex items-center justify-center gap-2 w-full py-2
border border-accent/20 bg-accent/5 text-accent text-[10px] font-bold uppercase tracking-[0.2em]
hover:bg-accent hover:text-black transition-all"
>
<CreditCard className="w-3 h-3" />
Upgrade
</Link>
)}
@ -454,11 +442,11 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
logout()
setMobileOpen(false)
}}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-zinc-500 hover:text-red-400 hover:bg-red-500/10 transition-all"
className="w-full flex items-center gap-3 px-3 py-2 text-white/30 hover:text-white transition-all group"
title={collapsed ? "Sign out" : undefined}
>
<LogOut className="w-4 h-4" />
{!collapsed && <span className="text-xs font-semibold tracking-wide">Sign out</span>}
<LogOut className="w-4 h-4 group-hover:text-red-400 transition-colors" />
{!collapsed && <span className="text-xs font-mono tracking-wide uppercase group-hover:text-red-400 transition-colors">Sign out</span>}
</button>
</div>
@ -466,9 +454,9 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
<button
onClick={toggleCollapsed}
className={clsx(
"hidden lg:flex absolute -right-3 top-24 w-6 h-6 bg-zinc-900 border border-zinc-800 rounded-full",
"items-center justify-center text-zinc-500 hover:text-white",
"hover:border-zinc-700 transition-all shadow-xl z-50"
"hidden lg:flex absolute -right-3 top-24 w-6 h-6 bg-[#020202] border border-white/10",
"items-center justify-center text-white/40 hover:text-white",
"hover:border-white/30 transition-all z-50"
)}
>
{collapsed ? <ChevronRight className="w-3 h-3" /> : <ChevronLeft className="w-3 h-3" />}
@ -481,8 +469,8 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
{/* Mobile Menu Button */}
<button
onClick={() => setMobileOpen(true)}
className="lg:hidden fixed top-4 left-4 z-50 w-10 h-10 bg-zinc-900/90 backdrop-blur border border-white/10
rounded-lg flex items-center justify-center text-zinc-400 hover:text-white
className="lg:hidden fixed top-4 left-4 z-50 w-10 h-10 bg-[#020202] border border-white/10
flex items-center justify-center text-white/60 hover:text-white
transition-all shadow-lg"
>
<Menu className="w-5 h-5" />
@ -491,7 +479,7 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
{/* Mobile Overlay */}
{mobileOpen && (
<div
className="lg:hidden fixed inset-0 z-40 bg-black/80 backdrop-blur-sm"
className="lg:hidden fixed inset-0 z-40 bg-black/90 backdrop-blur-sm"
onClick={() => setMobileOpen(false)}
/>
)}
@ -500,7 +488,7 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
<aside
className={clsx(
"lg:hidden fixed left-0 top-0 bottom-0 z-50 w-[280px] flex flex-col",
"bg-zinc-950 border-r border-white/5",
"bg-[#020202] border-r border-white/[0.08]",
"transition-transform duration-300 ease-out",
mobileOpen ? "translate-x-0" : "-translate-x-full"
)}
@ -508,7 +496,7 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
<button
onClick={() => setMobileOpen(false)}
className="absolute top-5 right-4 w-8 h-8 flex items-center justify-center
text-zinc-500 hover:text-white transition-colors"
text-white/40 hover:text-white transition-colors"
>
<X className="w-5 h-5" />
</button>
@ -519,8 +507,8 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
<aside
className={clsx(
"hidden lg:flex fixed left-0 top-0 bottom-0 z-40 flex-col",
"bg-zinc-950/95 backdrop-blur-xl", // Darker background
"border-r border-white/5", // Thinner border
"bg-[#020202] backdrop-blur-xl", // Pitch black
"border-r border-white/[0.08]", // Subtle border
"transition-all duration-300 ease-out",
collapsed ? "w-[72px]" : "w-[240px]" // Slightly narrower
)}