feat(ai): add AI Fundamentals module with 11 interactive sections

- Add AI feature module with Introduction, ML Lifecycle, Feature Engineering,
  Neural Networks, Loss Functions, Gradient Descent, Backpropagation,
  Generalization, Training vs Inference, Word Embeddings, RAG Pipeline
- Add rose/fuchsia/violet theme colors for AI module
- Wire routing in App.tsx, Header.tsx, and Sidebar.tsx
- All sections include interactive SVG visualizations with controls

Author: mnaimfaizy

src/App.tsx

@@ -27,6 +27,7 @@ const BigOPage = lazy(() => import('./features/bigo'));
 const PythonPage = lazy(() => import('./features/python'));
 const SystemDesignPage = lazy(() => import('./features/systemdesign'));
 const TypeScriptPage = lazy(() => import('./features/typescript'));
+const AIFundamentalsPage = lazy(() => import('./features/ai'));
 
 const App: React.FC = () => {
   // Initialize analytics on app mount
@@ -154,6 +155,14 @@ const App: React.FC = () => {
                             </SuspenseRoute>
                           }
                         />
+                        <Route
+                          path="/ai"
+                          element={
+                            <SuspenseRoute>
+                              <AIFundamentalsPage />
+                            </SuspenseRoute>
+                          }
+                        />
                       </Routes>
                     </main>
                   </div>

src/components/Header.tsx

@@ -14,6 +14,7 @@ import {
   ChevronDown,
   BookOpen,
   Boxes,
+  Brain,
 } from 'lucide-react';
 import { useUI } from '../shared/contexts';
 
@@ -109,6 +110,12 @@ const Header: React.FC = () => {
           icon: <GitBranch className="w-4 h-4" />,
           description: 'Version control mastery',
         },
+        {
+          label: 'AI Fundamentals',
+          path: '/ai',
+          icon: <Brain className="w-4 h-4" />,
+          description: 'AI & Machine Learning fundamentals',
+        },
       ],
     },
   ];
@@ -172,6 +179,7 @@ const Header: React.FC = () => {
     if (path === '/git') return 'text-orange-600 bg-orange-50';
     if (path === '/datastructures' || path === '/systemdesign') return 'text-blue-600 bg-blue-50';
     if (path === '/bigo') return 'text-purple-600 bg-purple-50';
+    if (path === '/ai') return 'text-rose-600 bg-rose-50';
     return 'text-gray-700 hover:bg-gray-50';
   };
 

src/components/Sidebar.tsx

@@ -52,6 +52,13 @@ const getThemeColorClass = (
       buttonHover: 'hover:text-emerald-600',
       border: 'border-emerald-100',
     },
+    rose: {
+      active: 'bg-rose-100 text-rose-800 border-rose-500',
+      hover: 'hover:bg-rose-50 hover:text-rose-700',
+      buttonActive: 'text-rose-600 hover:text-rose-700',
+      buttonHover: 'hover:text-rose-600',
+      border: 'border-rose-100',
+    },
   };
 
   const colors = colorMap[theme.primary] || colorMap.blue;
@@ -299,6 +306,19 @@ const sidebarSections: Record<string, Array<SidebarItem>> = {
     { label: 'Best Practices', path: '/typescript?section=Best%20Practices' },
     { label: 'Migration Guide', path: '/typescript?section=Migration%20Guide' },
   ],
+  '/ai': [
+    { label: 'Introduction', path: '/ai?section=Introduction' },
+    { label: 'ML Lifecycle', path: '/ai?section=ML%20Lifecycle' },
+    { label: 'Feature Engineering', path: '/ai?section=Feature%20Engineering' },
+    { label: 'Neural Networks', path: '/ai?section=Neural%20Networks' },
+    { label: 'Loss Functions', path: '/ai?section=Loss%20Functions' },
+    { label: 'Gradient Descent', path: '/ai?section=Gradient%20Descent' },
+    { label: 'Backpropagation', path: '/ai?section=Backpropagation' },
+    { label: 'Generalization', path: '/ai?section=Generalization' },
+    { label: 'Training vs Inference', path: '/ai?section=Training%20vs%20Inference' },
+    { label: 'Word Embeddings', path: '/ai?section=Word%20Embeddings' },
+    { label: 'RAG Pipeline', path: '/ai?section=RAG%20Pipeline' },
+  ],
   '/': [],
   '/about': [],
 };
@@ -323,7 +343,9 @@ const Sidebar: React.FC = () => {
     | 'bigo'
     | 'python'
     | 'systemdesign'
-    | 'typescript' => {
+    | 'typescript'
+    | 'ai' => {
+    if (path.includes('/ai')) return 'ai';
     if (path.includes('javascript')) return 'javascript';
     if (path.includes('python')) return 'python';
     if (path.includes('react')) return 'react';

src/features/ai/AIFundamentalsPage.tsx

@@ -0,0 +1,55 @@
+import React, { Suspense } from 'react';
+import { useLocation } from 'react-router-dom';
+
+// Lazy load section components for better performance
+import Introduction from './components/sections/Introduction';
+const MLLifecycle = React.lazy(() => import('./components/sections/MLLifecycle'));
+const FeatureEngineering = React.lazy(() => import('./components/sections/FeatureEngineering'));
+const NeuralNetworks = React.lazy(() => import('./components/sections/NeuralNetworks'));
+const LossFunctions = React.lazy(() => import('./components/sections/LossFunctions'));
+const GradientDescent = React.lazy(() => import('./components/sections/GradientDescent'));
+const Backpropagation = React.lazy(() => import('./components/sections/Backpropagation'));
+const Generalization = React.lazy(() => import('./components/sections/Generalization'));
+const TrainingVsInference = React.lazy(() => import('./components/sections/TrainingVsInference'));
+const WordEmbeddings = React.lazy(() => import('./components/sections/WordEmbeddings'));
+const RAGPipeline = React.lazy(() => import('./components/sections/RAGPipeline'));
+
+const sectionComponents: Record<string, React.ComponentType> = {
+  Introduction,
+  'ML Lifecycle': MLLifecycle,
+  'Feature Engineering': FeatureEngineering,
+  'Neural Networks': NeuralNetworks,
+  'Loss Functions': LossFunctions,
+  'Gradient Descent': GradientDescent,
+  Backpropagation,
+  Generalization,
+  'Training vs Inference': TrainingVsInference,
+  'Word Embeddings': WordEmbeddings,
+  'RAG Pipeline': RAGPipeline,
+};
+
+function useQuery(): URLSearchParams {
+  return new URLSearchParams(useLocation().search);
+}
+
+const AIFundamentalsPage: React.FC = () => {
+  const query = useQuery();
+  const section = query.get('section') || 'Introduction';
+  const Component = sectionComponents[section] || Introduction;
+
+  return (
+    <div className="p-4 sm:p-6">
+      <Suspense
+        fallback={
+          <div className="flex items-center justify-center h-64">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-rose-600"></div>
+          </div>
+        }
+      >
+        <Component />
+      </Suspense>
+    </div>
+  );
+};
+
+export default AIFundamentalsPage;