From 545df1bcbaf30b6f605daf2f4f8ab4dc1b8d4cff Mon Sep 17 00:00:00 2001
From: Yves Gugger <guggeryves@hotmail.com>
Date: Fri, 12 Dec 2025 21:00:18 +0100
Subject: [PATCH] feat: Terminal Design an Landing Page Stil angepasst
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 frontend/src/components/Sidebar.tsx | 212 +++++++++++++---------------
 1 file changed, 100 insertions(+), 112 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index d2ceaf9..6994edf 100755
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -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
         )}