feat: Implement frontend production deployment and enhance admin dashboard functionality

frontend/src/app/globals.css

@@ -59,3 +59,67 @@
     --chart-5: 340 75% 55%;
   }
 }
+
+@layer utilities {
+  /* Enhanced Glassmorphism Effects */
+  .glass-light {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+
+  .glass-dark {
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+
+  .glass-strong {
+    backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+    -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+    box-shadow: 0 35px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+
+  .glass-subtle {
+    backdrop-filter: blur(16px) saturate(150%) brightness(105%);
+    -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(105%);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+
+  .glass-card {
+    @apply glass-light dark:glass-dark rounded-xl transition-all duration-300;
+  }
+
+  .glass-navbar {
+    @apply glass-strong rounded-none;
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  .dark .glass-navbar {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
+
+@layer components {
+  /* Enhanced Card Components */
+  .enhanced-card {
+    @apply glass-card p-6 hover:shadow-glass-xl transform hover:-translate-y-1 transition-all duration-300;
+  }
+
+  .enhanced-navbar {
+    @apply glass-navbar border-b border-white/20 dark:border-black/20;
+  }
+
+  .enhanced-dropdown {
+    @apply glass-strong rounded-xl border border-white/20 dark:border-white/10;
+    background: rgba(255, 255, 255, 0.8);
+  }
+
+  .dark .enhanced-dropdown {
+    background: rgba(0, 0, 0, 0.8);
+  }
+}

frontend/src/components/ui/card.tsx

@@ -9,9 +9,16 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border bg-white/70 dark:bg-black/70 text-card-foreground shadow-glass backdrop-blur-xl",
+      "border-white/20 dark:border-white/10",
+      "hover:shadow-glass-lg transform hover:-translate-y-1 transition-all duration-300",
       className
     )}
+    style={{
+      backdropFilter: 'blur(20px) saturate(180%) brightness(110%)',
+      WebkitBackdropFilter: 'blur(20px) saturate(180%) brightness(110%)',
+      boxShadow: '0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1)',
+    }}
     {...props}
   />
 ))