Refactor routing in App component to enhance navigation and improve error handling by integrating dynamic routes and updating the NotFound route.

src/styles/global.css

@@ -0,0 +1,168 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --color-primary: 59 130 246;
+  --color-primary-foreground: 255 255 255;
+  --color-secondary: 100 116 139;
+  --color-secondary-foreground: 255 255 255;
+  --color-background: 255 255 255;
+  --color-foreground: 15 23 42;
+  --color-muted: 248 250 252;
+  --color-muted-foreground: 100 116 139;
+  --color-border: 226 232 240;
+  --color-accent: 241 245 249;
+  --color-accent-foreground: 15 23 42;
+}
+
+[data-theme="dark"] {
+  --color-primary: 96 165 250;
+  --color-primary-foreground: 15 23 42;
+  --color-secondary: 71 85 105;
+  --color-secondary-foreground: 248 250 252;
+  --color-background: 15 23 42;
+  --color-foreground: 248 250 252;
+  --color-muted: 30 41 59;
+  --color-muted-foreground: 148 163 184;
+  --color-border: 51 65 85;
+  --color-accent: 30 41 59;
+  --color-accent-foreground: 248 250 252;
+}
+
+@layer base {
+  body {
+    background-color: rgb(var(--color-background));
+    color: rgb(var(--color-foreground));
+    @apply font-sans;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-display;
+  }
+  
+  /* Smooth scrolling */
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background-color: rgb(var(--color-muted));
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background-color: rgb(var(--color-secondary));
+    border-radius: 9999px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(var(--color-secondary) / 0.8);
+  }
+}
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50;
+  }
+  
+  .btn-primary {
+    @apply btn;
+    background-color: rgb(var(--color-primary));
+    color: rgb(var(--color-primary-foreground));
+  }
+  
+  .btn-primary:hover {
+    background-color: rgb(var(--color-primary) / 0.9);
+  }
+  
+  .btn-secondary {
+    @apply btn;
+    background-color: rgb(var(--color-secondary));
+    color: rgb(var(--color-secondary-foreground));
+  }
+  
+  .btn-secondary:hover {
+    background-color: rgb(var(--color-secondary) / 0.8);
+  }
+  
+  .btn-outline {
+    @apply btn;
+    border: 1px solid rgb(var(--color-border));
+    background-color: rgb(var(--color-background));
+    color: rgb(var(--color-foreground));
+  }
+  
+  .btn-outline:hover {
+    background-color: rgb(var(--color-accent));
+    color: rgb(var(--color-accent-foreground));
+  }
+  
+  .card {
+    @apply rounded-xl shadow-sm;
+    border: 1px solid rgb(var(--color-border));
+    background-color: rgb(var(--color-background));
+  }
+  
+  .container-custom {
+    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+  }
+
+  /* Theme-based colors */
+  .bg-background {
+    background-color: rgb(var(--color-background));
+  }
+  
+  .text-foreground {
+    color: rgb(var(--color-foreground));
+  }
+  
+  .text-muted-foreground {
+    color: rgb(var(--color-muted-foreground));
+  }
+  
+  .bg-muted {
+    background-color: rgb(var(--color-muted));
+  }
+  
+  .bg-primary {
+    background-color: rgb(var(--color-primary));
+  }
+  
+  .text-primary {
+    color: rgb(var(--color-primary));
+  }
+  
+  .text-primary-foreground {
+    color: rgb(var(--color-primary-foreground));
+  }
+  
+  .bg-accent {
+    background-color: rgb(var(--color-accent));
+  }
+  
+  .border-border {
+    border-color: rgb(var(--color-border));
+  }
+}
+
+/* Animations */
+@layer utilities {
+  .animate-on-scroll {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.6s ease-out;
+  }
+  
+  .animate-on-scroll.in-view {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}