[Refactoring] Code refactoring + general UI updated

docs-v3/assets/css/background.css

@@ -0,0 +1,48 @@
+/* ============================================
+   App Background Styles
+   Global background for dark/light modes
+   ============================================ */
+
+.app-layout {
+    @apply min-h-screen relative;
+    @apply bg-white;
+}
+
+.dark .app-layout {
+    @apply bg-gradient-to-b from-slate-950 via-gray-900 to-slate-950;
+    /* GPU optimization: use transform instead of background-attachment: fixed */
+}
+
+.app-background {
+    @apply fixed inset-0 hidden pointer-events-none;
+    /* GPU optimization: promote to own layer */
+    will-change: transform;
+    transform: translateZ(0);
+    contain: strict;
+}
+
+.dark .app-background {
+    @apply block;
+}
+
+.app-gradient-radial {
+    @apply absolute inset-0;
+    background: radial-gradient(circle at 50% 50%, rgba(120, 119, 198, 0.15), transparent 50%);
+}
+
+.app-grid-pattern {
+    @apply absolute inset-0;
+    background-image:
+        linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
+    background-size: 100px 100px;
+}
+
+/* Website section backgrounds */
+.section-dark {
+    @apply bg-slate-950;
+}
+
+.section-dark-subtle {
+    @apply bg-gray-900/50;
+}

docs-v3/assets/css/base.css

@@ -0,0 +1,50 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+html {
+    scroll-behavior: smooth;
+}
+
+/* Global cursor-pointer for all clickable elements */
+button,
+[role="button"],
+a,
+.cursor-pointer,
+input[type="submit"],
+input[type="button"],
+input[type="reset"],
+select {
+    cursor: pointer;
+}
+
+/* Fade transition */
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+/* Mobile menu transition */
+.mobile-menu-enter-active,
+.mobile-menu-leave-active {
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.mobile-menu-enter-from,
+.mobile-menu-leave-to {
+    transform: translateX(-100%);
+    opacity: 0;
+}
+
+/* Dark mode toggle animation */
+.dark-mode-toggle {
+    transition: transform 0.2s ease;
+}
+
+.dark-mode-toggle:hover {
+    transform: scale(1.05);
+}

docs-v3/assets/css/glass.css

@@ -0,0 +1,184 @@
+/* ============================================
+   Glass Effect Components
+   Cards, panels, and badges with glass morphism
+   ============================================ */
+
+/* Base glass card - transparent with blur */
+.glass-card {
+    @apply rounded-2xl border backdrop-blur-sm transition-all duration-300;
+    @apply border-gray-200 bg-gray-50/50;
+}
+
+.glass-card:hover {
+    @apply border-gray-300 bg-gray-100/50;
+}
+
+.dark .glass-card {
+    @apply border-gray-700/50 bg-gray-800/30;
+}
+
+.dark .glass-card:hover {
+    @apply border-gray-600 bg-gray-800/50;
+}
+
+/* Glass card interactive - for clickable cards */
+.glass-card-interactive {
+    @apply rounded-2xl border backdrop-blur-sm transition-all duration-300 cursor-pointer;
+    @apply border-gray-200 bg-gray-50/50;
+}
+
+.glass-card-interactive:hover {
+    @apply border-gray-300 bg-gray-100/50 shadow-lg;
+}
+
+.dark .glass-card-interactive {
+    @apply border-gray-700/50 bg-gray-800/30;
+}
+
+.dark .glass-card-interactive:hover {
+    @apply border-gray-600/80 bg-gray-800/50;
+}
+
+/* Glass card with colored accent on hover - removed color changes, using base hover effects */
+.glass-card-accent-red,
+.glass-card-accent-blue,
+.glass-card-accent-purple,
+.glass-card-accent-green {
+    /* These classes now just use the base glass-card hover effects */
+}
+
+/* Glass panel - for info boxes, alerts */
+.glass-panel {
+    @apply rounded-xl border backdrop-blur-sm p-6;
+    @apply border-gray-200 bg-gray-50/50;
+}
+
+.dark .glass-panel {
+    @apply border-gray-700/50 bg-gray-800/30;
+}
+
+.glass-panel-blue {
+    @apply rounded-xl border backdrop-blur-sm p-6;
+    @apply border-blue-200/50 bg-blue-50/50;
+}
+
+.dark .glass-panel-blue {
+    @apply border-blue-500/20 bg-blue-500/10;
+}
+
+.glass-panel-green {
+    @apply rounded-xl border backdrop-blur-sm p-6;
+    @apply border-green-200/50 bg-green-50/50;
+}
+
+.dark .glass-panel-green {
+    @apply border-green-500/20 bg-green-500/10;
+}
+
+.glass-panel-yellow {
+    @apply rounded-xl border backdrop-blur-sm p-6;
+    @apply border-yellow-200/50 bg-yellow-50/50;
+}
+
+.dark .glass-panel-yellow {
+    @apply border-yellow-500/20 bg-yellow-500/10;
+}
+
+.glass-panel-red {
+    @apply rounded-xl border backdrop-blur-sm p-6;
+    @apply border-red-200/50 bg-red-50/50;
+}
+
+.dark .glass-panel-red {
+    @apply border-red-500/20 bg-red-500/10;
+}
+
+/* Icon badge - colored icon container with gradient */
+.icon-badge {
+    @apply w-12 h-12 rounded-xl flex items-center justify-center transition-colors duration-300;
+}
+
+.icon-badge-sm {
+    @apply w-10 h-10 rounded-lg;
+}
+
+.icon-badge-lg {
+    @apply w-14 h-14 rounded-2xl;
+}
+
+/* Glass style icon badges (for dark theme) */
+.icon-badge-blue {
+    @apply bg-gradient-to-br from-blue-500/20 to-cyan-500/20 border border-blue-500/30;
+}
+
+.icon-badge-blue:hover,
+.group:hover .icon-badge-blue {
+    @apply border-blue-400/50;
+}
+
+.icon-badge-green {
+    @apply bg-gradient-to-br from-green-500/20 to-emerald-500/20 border border-green-500/30;
+}
+
+.icon-badge-green:hover,
+.group:hover .icon-badge-green {
+    @apply border-green-400/50;
+}
+
+.icon-badge-purple {
+    @apply bg-gradient-to-br from-purple-500/20 to-violet-500/20 border border-purple-500/30;
+}
+
+.icon-badge-purple:hover,
+.group:hover .icon-badge-purple {
+    @apply border-purple-400/50;
+}
+
+.icon-badge-red {
+    @apply bg-gradient-to-br from-red-500/20 to-pink-500/20 border border-red-500/30;
+}
+
+.icon-badge-red:hover,
+.group:hover .icon-badge-red {
+    @apply border-red-400/50;
+}
+
+.icon-badge-yellow {
+    @apply bg-gradient-to-br from-yellow-500/20 to-orange-500/20 border border-yellow-500/30;
+}
+
+.icon-badge-yellow:hover,
+.group:hover .icon-badge-yellow {
+    @apply border-yellow-400/50;
+}
+
+.icon-badge-cyan {
+    @apply bg-gradient-to-br from-cyan-500/20 to-blue-500/20 border border-cyan-500/30;
+}
+
+.icon-badge-cyan:hover,
+.group:hover .icon-badge-cyan {
+    @apply border-cyan-400/50;
+}
+
+.icon-badge-gray {
+    @apply bg-gradient-to-br from-gray-500/20 to-slate-500/20 border border-gray-500/30;
+}
+
+.icon-badge-gray:hover,
+.group:hover .icon-badge-gray {
+    @apply border-gray-400/50;
+}
+
+/* Arrow indicator for list items */
+.arrow-indicator {
+    @apply h-5 w-5 text-gray-400 transition-all;
+}
+
+.group:hover .arrow-indicator {
+    @apply text-gray-600 translate-x-1;
+}
+
+.dark .group:hover .arrow-indicator {
+    @apply text-gray-300;
+}

docs-v3/assets/css/main.css

@@ -1,81 +1,23 @@
-/* Custom fonts */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
+/* ============================================
+   Main CSS Entry Point
+   Imports all modular CSS files
+   ============================================ */
 
+/* Tailwind and Nuxt UI */
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-/* Tailwind v4 theme customization */
-@theme {
-  --font-sans: 'Inter', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', Monaco, Consolas, monospace;
-}
+/* Theme configuration */
+@import "./theme.css";
 
-/* Base styles */
-html {
-  scroll-behavior: smooth;
-}
+/* Base styles and transitions */
+@import "./base.css";
 
-/* Basic component styles */
-.nav-link-active {
-  color: rgb(37 99 235);
-  background-color: rgb(239 246 255);
-}
+/* Navigation styles */
+@import "./navigation.css";
 
-.dark .nav-link-active {
-  color: rgb(96 165 250);
-  background-color: rgba(59 130 246 / 0.2);
-  color: rgb(37 99 235);
-  background-color: rgb(239 246 255);
-}
+/* Background styles */
+@import "./background.css";
 
-.dark .nav-link-active {
-  color: rgb(96 165 250);
-  background-color: rgba(59 130 246 / 0.2);
-}
-
-/* Content transitions */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* Mobile menu animation */
-.mobile-menu-enter-active,
-.mobile-menu-leave-active {
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.mobile-menu-enter-from {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-
-.mobile-menu-leave-to {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-
-/* Dark mode toggle animation */
-.dark-mode-toggle {
-  transition: transform 0.2s ease;
-}
-
-.dark-mode-toggle:hover {
-  transform: scale(1.05);
-}
-
-/* Focus ring utility */
-.focus-ring {
-  @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
-
-  /* Focus ring utility */
-  .focus-ring {
-    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
-  }
-}
+/* Glass effect components */
+@import "./glass.css";