refactor: restructure navigation and module layout

Reorganize navigation and module structure based on new requirements.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

app/globals.css

@@ -4,14 +4,14 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 240 10% 98%;
     --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
+    --card: 240 10% 100%;
     --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
+    --popover: 240 10% 100%;
     --popover-foreground: 240 10% 3.9%;
     --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
+    --primary-foreground: 240 5.9% 98%;
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
     --muted: 240 4.8% 95.9%;
@@ -23,26 +23,26 @@
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
+    --radius: 0.75rem;
   }
 
   .dark {
     --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
+    --foreground: 240 5.9% 98%;
     --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
+    --card-foreground: 240 5.9% 98%;
     --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
+    --popover-foreground: 240 5.9% 98%;
+    --primary: 240 5.9% 98%;
     --primary-foreground: 240 5.9% 10%;
     --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
+    --secondary-foreground: 240 5.9% 98%;
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
     --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
+    --accent-foreground: 240 5.9% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive-foreground: 240 5.9% 98%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
@@ -53,7 +53,140 @@
   * {
     @apply border-border;
   }
+
+  html {
+    @apply scroll-smooth;
+  }
+
   body {
-    @apply bg-background text-foreground;
+    @apply bg-gradient-to-br from-blue-50 via-white to-purple-50 text-foreground min-h-screen;
+    background-attachment: fixed;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .dark body {
+    @apply bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900;
+  }
+
+  @media (max-width: 768px) {
+    body {
+      background-attachment: scroll;
+    }
+  }
+}
+
+@layer components {
+  .glass {
+    @apply backdrop-blur-md border border-white/20;
+    background-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  }
+
+  .glass-light {
+    @apply backdrop-blur-sm border border-white/30;
+    background-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.2);
+  }
+
+  .glass-heavy {
+    @apply backdrop-blur-xl border border-white/40;
+    background-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 0 16px 64px 0 rgba(31, 38, 135, 0.5);
+  }
+
+  .glass-dark {
+    @apply backdrop-blur-md border border-white/10;
+    background-color: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+  }
+
+  @media (max-width: 768px) {
+    .glass {
+      @apply backdrop-blur-sm;
+      background-color: rgba(255, 255, 255, 0.15);
+    }
+
+    .glass-light {
+      @apply backdrop-blur-sm;
+      background-color: rgba(255, 255, 255, 0.25);
+    }
+
+    .glass-heavy {
+      @apply backdrop-blur-md;
+      background-color: rgba(255, 255, 255, 0.35);
+    }
+  }
+
+  .glass-card {
+    @apply glass rounded-2xl p-6 transition-all duration-300;
+  }
+
+  .glass-card:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
+  @media (max-width: 768px) {
+    .glass-card {
+      @apply p-4 rounded-xl;
+    }
+  }
+
+  .glass-nav {
+    @apply glass-light rounded-2xl transition-all duration-300;
+  }
+
+  .glass-button {
+    @apply glass-light rounded-xl px-4 py-2 transition-all duration-300;
+  }
+
+  .glass-button:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+    transform: scale(1.05);
+  }
+
+  @media (max-width: 768px) {
+    .glass-button {
+      @apply px-6 py-3 text-base;
+      min-height: 44px;
+    }
+  }
+
+  .glass-input {
+    @apply glass-light rounded-xl px-4 py-2 transition-all duration-300;
+  }
+
+  .glass-input:focus {
+    background-color: rgba(255, 255, 255, 0.3);
+    @apply ring-2 ring-white/50;
+  }
+
+  @media (max-width: 768px) {
+    .glass-input {
+      @apply px-4 py-3 text-base;
+      min-height: 44px;
+    }
+  }
+
+  .safe-area-top {
+    padding-top: env(safe-area-inset-top);
+  }
+
+  .safe-area-bottom {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .safe-area-left {
+    padding-left: env(safe-area-inset-left);
+  }
+
+  .safe-area-right {
+    padding-right: env(safe-area-inset-right);
+  }
+}
+
+@media (max-width: 768px) {
+  .overflow-scroll {
+    -webkit-overflow-scrolling: touch;
   }
 }