From 8ffff3506480ff30ed56641a0c52464c672b1d2b Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Fri, 31 Oct 2025 21:51:30 +0530
Subject: [PATCH 01/15] Fixed dark mode inconsistency

---
 src/App.jsx              |  2 ++
 src/components/Books.jsx | 49 ++++++++++++++++++++++++----------------
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 233c7fb..ca4e480 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -30,6 +30,8 @@ const App = () => {
           <Route path="/books" element={<Books />} />
           <Route path="/journey" element={<Journey />} />
           <Route path="/questionbank" element={<QuestionBank />} />
+          <Route path="/privacy" element={<HomePage />} />
+          <Route path="/terms" element={<HomePage />} />
           <Route path="*" element={<Error404 />} />
         </Routes>
       </div>
diff --git a/src/components/Books.jsx b/src/components/Books.jsx
index ecbbe9a..e853c21 100644
--- a/src/components/Books.jsx
+++ b/src/components/Books.jsx
@@ -102,15 +102,18 @@ const Books = () => {
           <div className="flex flex-col md:flex-row gap-4 mb-8">
             <div className="relative flex-1">
               <div className="absolute inset-y-0 left-3 flex items-center pointer-events-none">
-                <Search className="w-5 h-5 text-gray-400" />
+                <Search className={`w-5 h-5 ${darkMode ? 'text-gray-500' : 'text-gray-400'}`} />
               </div>
               <input
                 type="text"
                 placeholder="Search by title or author..."
-                className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 
-                          bg-white dark:bg-gray-800 text-gray-900 dark:text-white
+                className={`w-full pl-10 pr-4 py-3 rounded-xl border 
+                          ${darkMode 
+                            ? 'border-gray-700 bg-gray-800 text-white placeholder-gray-400' 
+                            : 'border-gray-200 bg-white text-gray-900 placeholder-gray-500'
+                          }
                           shadow-sm focus:ring-2 focus:ring-blue-600 focus:border-transparent
-                          transition-all duration-200"
+                          transition-all duration-200`}
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
@@ -120,10 +123,12 @@ const Books = () => {
                 <button
                   key={category}
                   onClick={() => setSelectedCategory(category)}
-                  className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap
+                  className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all
                             ${selectedCategory === category
                               ? 'bg-blue-600 text-white'
-                              : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
+                              : darkMode
+                                ? 'bg-gray-800 text-gray-300 hover:bg-gray-700 border border-gray-700'
+                                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                             }`}
                 >
                   {category.charAt(0).toUpperCase() + category.slice(1)}
@@ -142,16 +147,19 @@ const Books = () => {
               {filteredBooks.map((book, index) => (
                 <div
                   key={index}
-                  className={`bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md 
-                             transition-all duration-200 border border-gray-200 dark:border-gray-700`}
+                  className={`rounded-xl shadow-sm hover:shadow-md transition-all duration-200
+                             ${darkMode 
+                               ? 'bg-gray-800 border border-gray-700' 
+                               : 'bg-white border border-gray-200'
+                             }`}
                 >
                   <div className="p-6">
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
-                        <h3 className="font-semibold text-lg mb-2 line-clamp-2">
+                        <h3 className={`font-semibold text-lg mb-2 line-clamp-2 ${darkMode ? 'text-white' : 'text-gray-900'}`}>
                           {book.title}
                         </h3>
-                        <p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
+                        <p className={`text-sm mb-4 ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                           by {book.author}
                         </p>
                       </div>
@@ -163,7 +171,7 @@ const Books = () => {
                       href={book.link}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline"
+                      className={`inline-flex items-center gap-2 hover:underline ${darkMode ? 'text-blue-400' : 'text-blue-600'}`}
                     >
                       <span>Read Book</span>
                       <ExternalLink className="w-4 h-4" />
@@ -186,16 +194,19 @@ const Books = () => {
               {filteredArticles.map((article, index) => (
                 <div
                   key={index}
-                  className={`bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md 
-                             transition-all duration-200 border border-gray-200 dark:border-gray-700`}
+                  className={`rounded-xl shadow-sm hover:shadow-md transition-all duration-200
+                             ${darkMode 
+                               ? 'bg-gray-800 border border-gray-700' 
+                               : 'bg-white border border-gray-200'
+                             }`}
                 >
                   <div className="p-6">
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
-                        <h3 className="font-semibold text-lg mb-2 line-clamp-2">
+                        <h3 className={`font-semibold text-lg mb-2 line-clamp-2 ${darkMode ? 'text-white' : 'text-gray-900'}`}>
                           {article.title}
                         </h3>
-                        <p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
+                        <p className={`text-sm mb-4 ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                           by {article.author}
                         </p>
                       </div>
@@ -207,7 +218,7 @@ const Books = () => {
                       href={article.link}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline"
+                      className={`inline-flex items-center gap-2 hover:underline ${darkMode ? 'text-blue-400' : 'text-blue-600'}`}
                     >
                       <span>Read Article</span>
                       <ExternalLink className="w-4 h-4" />
@@ -222,8 +233,8 @@ const Books = () => {
           {filteredBooks.length === 0 && filteredArticles.length === 0 && (
             <div className="text-center py-12">
               <div className="text-5xl mb-4">🔍</div>
-              <h3 className="text-xl font-semibold mb-2">No resources found</h3>
-              <p className="text-gray-600 dark:text-gray-400">
+              <h3 className={`text-xl font-semibold mb-2 ${darkMode ? 'text-white' : 'text-gray-900'}`}>No resources found</h3>
+              <p className={darkMode ? 'text-gray-400' : 'text-gray-600'}>
                 Try adjusting your search or filter to find what you're looking for.
               </p>
             </div>
@@ -236,4 +247,4 @@ const Books = () => {
   );
 };
 
-export default Books;
+export default Books;
\ No newline at end of file

From f7c5b5d48e727644709cece03a79ae4f69d7198b Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Fri, 31 Oct 2025 22:37:59 +0530
Subject: [PATCH 02/15] Resolved errors

---
 src/App.jsx                      |  6 ++--
 src/components/Books.jsx         |  2 +-
 src/components/PrivacyPolicy.jsx | 48 ++++++++++++++++++++++++++++++++
 src/components/TermsOfUse.jsx    | 48 ++++++++++++++++++++++++++++++++
 4 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 src/components/PrivacyPolicy.jsx
 create mode 100644 src/components/TermsOfUse.jsx

diff --git a/src/App.jsx b/src/App.jsx
index ca4e480..db7f08b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,6 +10,8 @@ import HomePage from './components/HomePage';
 import Books from './components/Books';
 import Journey from './components/Journey';
 import QuestionBank from './components/QuestionBank';
+import PrivacyPolicy from './components/PrivacyPolicy';
+import TermsOfUse from './components/TermsOfUse';
 import ReactGA from 'react-ga4';
 const trackingId = import.meta.env.VITE_APP_GA_TRACKING_ID;
 if (trackingId) {
@@ -30,8 +32,8 @@ const App = () => {
           <Route path="/books" element={<Books />} />
           <Route path="/journey" element={<Journey />} />
           <Route path="/questionbank" element={<QuestionBank />} />
-          <Route path="/privacy" element={<HomePage />} />
-          <Route path="/terms" element={<HomePage />} />
+          <Route path="/privacy" element={<PrivacyPolicy />} />
+          <Route path="/terms" element={<TermsOfUse />} />
           <Route path="*" element={<Error404 />} />
         </Routes>
       </div>
diff --git a/src/components/Books.jsx b/src/components/Books.jsx
index e853c21..569ee08 100644
--- a/src/components/Books.jsx
+++ b/src/components/Books.jsx
@@ -110,7 +110,7 @@ const Books = () => {
                 className={`w-full pl-10 pr-4 py-3 rounded-xl border 
                           ${darkMode 
                             ? 'border-gray-700 bg-gray-800 text-white placeholder-gray-400' 
-                            : 'border-gray-200 bg-white text-gray-900 placeholder-gray-500'
+                            : 'border-gray-200 bg-white text-gray-900 placeholder-gray-400'
                           }
                           shadow-sm focus:ring-2 focus:ring-blue-600 focus:border-transparent
                           transition-all duration-200`}
diff --git a/src/components/PrivacyPolicy.jsx b/src/components/PrivacyPolicy.jsx
new file mode 100644
index 0000000..c32aa32
--- /dev/null
+++ b/src/components/PrivacyPolicy.jsx
@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react';
+import Navbar from './Navbar';
+import Footer from './Footer';
+import { Helmet } from 'react-helmet';
+
+const PrivacyPolicy = () => {
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    const savedDarkMode = localStorage.getItem('darkMode') === 'true';
+    setDarkMode(savedDarkMode);
+    document.documentElement.classList.toggle('dark', savedDarkMode);
+  }, []);
+
+  const toggleDarkMode = () => {
+    const newDarkMode = !darkMode;
+    setDarkMode(newDarkMode);
+    document.documentElement.classList.toggle('dark', newDarkMode);
+    localStorage.setItem('darkMode', newDarkMode.toString());
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Privacy Policy | mldl.study</title>
+        <meta name="description" content="Privacy Policy for mldl.study." />
+      </Helmet>
+
+      <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+
+      <div className={`min-h-screen ${darkMode ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
+        <div className="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-blue-400">
+            Privacy Policy
+          </h1>
+          <div className={`prose dark:prose-invert lg:prose-xl mx-auto mt-8 ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
+            <p>This is a placeholder for the Privacy Policy page. Content will be added here soon.</p>
+            <p>We are committed to protecting your privacy. This policy will outline how we collect, use, and safeguard your information.</p>
+          </div>
+        </div>
+      </div>
+
+      <Footer darkMode={darkMode} />
+    </>
+  );
+};
+
+export default PrivacyPolicy;
\ No newline at end of file
diff --git a/src/components/TermsOfUse.jsx b/src/components/TermsOfUse.jsx
new file mode 100644
index 0000000..c069b7c
--- /dev/null
+++ b/src/components/TermsOfUse.jsx
@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react';
+import Navbar from './Navbar';
+import Footer from './Footer';
+import { Helmet } from 'react-helmet';
+
+const TermsOfUse = () => {
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    const savedDarkMode = localStorage.getItem('darkMode') === 'true';
+    setDarkMode(savedDarkMode);
+    document.documentElement.classList.toggle('dark', savedDarkMode);
+  }, []);
+
+  const toggleDarkMode = () => {
+    const newDarkMode = !darkMode;
+    setDarkMode(newDarkMode);
+    document.documentElement.classList.toggle('dark', newDarkMode);
+    localStorage.setItem('darkMode', newDarkMode.toString());
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Terms of Use | mldl.study</title>
+        <meta name="description" content="Terms of Use for mldl.study." />
+      </Helmet>
+
+      <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+
+      <div className={`min-h-screen ${darkMode ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
+        <div className="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-blue-400">
+            Terms of Use
+          </h1>
+          <div className={`prose dark:prose-invert lg:prose-xl mx-auto mt-8 ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
+            <p>This is a placeholder for the Terms of Use page. Content will be added here soon.</p>
+            <p>By using this website, you will be agreeing to the terms and conditions outlined in this document.</p>
+          </div>
+        </div>
+      </div>
+
+      <Footer darkMode={darkMode} />
+    </>
+  );
+};
+
+export default TermsOfUse;
\ No newline at end of file

From 412e3be0278b4142ea584e4cee49ccef64429d12 Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Sat, 1 Nov 2025 10:37:55 +0530
Subject: [PATCH 03/15] Resolved errors regarding darkmode

---
 src/components/Books.jsx         | 18 +++---------------
 src/components/Journey.jsx       | 17 +++++------------
 src/components/PrivacyPolicy.jsx | 18 +++---------------
 src/components/TermsOfUse.jsx    | 18 +++---------------
 src/components/useDarkMode.js    | 23 +++++++++++++++++++++++
 5 files changed, 37 insertions(+), 57 deletions(-)
 create mode 100644 src/components/useDarkMode.js

diff --git a/src/components/Books.jsx b/src/components/Books.jsx
index 569ee08..0edac34 100644
--- a/src/components/Books.jsx
+++ b/src/components/Books.jsx
@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import ReactGA from 'react-ga4';
 import { Book, ExternalLink, Search } from 'lucide-react';
 import Navbar from './Navbar';
 import Footer from './Footer';
 import { Helmet } from 'react-helmet';
+import useDarkMode from './useDarkMode';
 
 const books = [
   { title: 'Hands-On Machine Learning with Scikit-Learn, Keras, and TensorFlow', author: 'Aurélien Géron', link: 'https://www.bayanbox.ir/view/9006149947423722897/Hands-On-Machine-Learning-with-Scikit-Learn-Keras-and-TensorFlow.pdf', category: 'Machine Learning' },
@@ -31,23 +32,10 @@ const articles = [
 const Books = () => {
   ReactGA.send({ hitType: 'pageview', page: window.location.pathname });
 
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, toggleDarkMode] = useDarkMode();
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedCategory, setSelectedCategory] = useState('all');
 
-  useEffect(() => {
-    const savedDarkMode = localStorage.getItem('darkMode') === 'true';
-    setDarkMode(savedDarkMode);
-    document.documentElement.classList.toggle('dark', savedDarkMode);
-  }, []);
-
-  const toggleDarkMode = () => {
-    const newDarkMode = !darkMode;
-    setDarkMode(newDarkMode);
-    document.documentElement.classList.toggle('dark', newDarkMode);
-    localStorage.setItem('darkMode', newDarkMode);
-  };
-
   const categories = ['all', ...new Set([...books, ...articles].map(item => item.category))];
 
   const filteredBooks = books.filter(book => 
diff --git a/src/components/Journey.jsx b/src/components/Journey.jsx
index a274fbb..e65ccc5 100644
--- a/src/components/Journey.jsx
+++ b/src/components/Journey.jsx
@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react'; // Keep useEffect for RedditEmbed
 import ReactGA from 'react-ga4';
 import { Helmet } from 'react-helmet';
 import { ArrowRight, Users, Rocket, Star, Trophy, Heart, Target, Zap } from 'lucide-react';
 import Navbar from './Navbar';
 import Footer from './Footer';
+import useDarkMode from './useDarkMode';
 
 const journeyData = [
   {
@@ -109,21 +110,13 @@ const RedditEmbed = ({ url }) => {
 
 const Journey = () => {
   ReactGA.send({ hitType: 'pageview', page: window.location.pathname });
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, baseToggleDarkMode] = useDarkMode();
   const [isTransitioning, setIsTransitioning] = useState(false);
 
-  useEffect(() => {
-    const savedDarkMode = localStorage.getItem('darkMode') === 'true';
-    setDarkMode(savedDarkMode);
-    document.documentElement.classList.toggle('dark', savedDarkMode);
-  }, []);
-
   const toggleDarkMode = () => {
     setIsTransitioning(true);
-    const newDarkMode = !darkMode;
-    setDarkMode(newDarkMode);
-    document.documentElement.classList.toggle('dark', newDarkMode);
-    localStorage.setItem('darkMode', newDarkMode);
+    // We wrap the original toggle to add our transition logic
+    baseToggleDarkMode();
     setTimeout(() => setIsTransitioning(false), 300);
   };
 
diff --git a/src/components/PrivacyPolicy.jsx b/src/components/PrivacyPolicy.jsx
index c32aa32..e2e4647 100644
--- a/src/components/PrivacyPolicy.jsx
+++ b/src/components/PrivacyPolicy.jsx
@@ -1,23 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import Navbar from './Navbar';
 import Footer from './Footer';
 import { Helmet } from 'react-helmet';
+import useDarkMode from './useDarkMode';
 
 const PrivacyPolicy = () => {
-  const [darkMode, setDarkMode] = useState(false);
-
-  useEffect(() => {
-    const savedDarkMode = localStorage.getItem('darkMode') === 'true';
-    setDarkMode(savedDarkMode);
-    document.documentElement.classList.toggle('dark', savedDarkMode);
-  }, []);
-
-  const toggleDarkMode = () => {
-    const newDarkMode = !darkMode;
-    setDarkMode(newDarkMode);
-    document.documentElement.classList.toggle('dark', newDarkMode);
-    localStorage.setItem('darkMode', newDarkMode.toString());
-  };
+  const [darkMode, toggleDarkMode] = useDarkMode();
 
   return (
     <>
diff --git a/src/components/TermsOfUse.jsx b/src/components/TermsOfUse.jsx
index c069b7c..30d5e5b 100644
--- a/src/components/TermsOfUse.jsx
+++ b/src/components/TermsOfUse.jsx
@@ -1,23 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import Navbar from './Navbar';
 import Footer from './Footer';
 import { Helmet } from 'react-helmet';
+import useDarkMode from './useDarkMode';
 
 const TermsOfUse = () => {
-  const [darkMode, setDarkMode] = useState(false);
-
-  useEffect(() => {
-    const savedDarkMode = localStorage.getItem('darkMode') === 'true';
-    setDarkMode(savedDarkMode);
-    document.documentElement.classList.toggle('dark', savedDarkMode);
-  }, []);
-
-  const toggleDarkMode = () => {
-    const newDarkMode = !darkMode;
-    setDarkMode(newDarkMode);
-    document.documentElement.classList.toggle('dark', newDarkMode);
-    localStorage.setItem('darkMode', newDarkMode.toString());
-  };
+  const [darkMode, toggleDarkMode] = useDarkMode();
 
   return (
     <>
diff --git a/src/components/useDarkMode.js b/src/components/useDarkMode.js
new file mode 100644
index 0000000..49de5f3
--- /dev/null
+++ b/src/components/useDarkMode.js
@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+const useDarkMode = () => {
+  const [darkMode, setDarkMode] = useState(() => {
+    // Initialize state from localStorage, or default to false
+    const savedMode = localStorage.getItem('darkMode');    // Default to dark mode on first visit, otherwise respect saved preference.
+    return savedMode === null ? true : savedMode === 'true';
+  });
+
+  useEffect(() => {
+    // Update class on <html> and save to localStorage when darkMode changes
+    document.documentElement.classList.toggle('dark', darkMode);
+    localStorage.setItem('darkMode', String(darkMode));
+  }, [darkMode]);
+
+  const toggleDarkMode = () => {
+    setDarkMode(prevMode => !prevMode);
+  };
+
+  return [darkMode, toggleDarkMode];
+};
+
+export default useDarkMode;
\ No newline at end of file

From 7bcb75136f0d74da4f58195d6bf1ce017001717c Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Sun, 2 Nov 2025 19:03:38 +0530
Subject: [PATCH 04/15] Resolved errors in useDarkMode.js

---
 src/components/useDarkMode.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/useDarkMode.js b/src/components/useDarkMode.js
index 49de5f3..6826dc1 100644
--- a/src/components/useDarkMode.js
+++ b/src/components/useDarkMode.js
@@ -2,9 +2,16 @@ import { useState, useEffect } from 'react';
 
 const useDarkMode = () => {
   const [darkMode, setDarkMode] = useState(() => {
-    // Initialize state from localStorage, or default to false
-    const savedMode = localStorage.getItem('darkMode');    // Default to dark mode on first visit, otherwise respect saved preference.
-    return savedMode === null ? true : savedMode === 'true';
+    // Check if window is defined to avoid SSR errors.
+    if (typeof window === 'undefined') {
+      // On the server, we can't access localStorage. Default to dark mode.
+      return true;
+    }
+
+    // On the client, initialize state from localStorage.
+    const savedMode = window.localStorage.getItem('darkMode');
+    // Default to dark mode on a first visit (when savedMode is null).
+    return savedMode === null ? true : savedMode === 'true'; // savedMode is a string
   });
 
   useEffect(() => {

From 7a3ef662ba2b789d0e94ac987329b71757bd4b1a Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Mon, 3 Nov 2025 17:52:07 +0530
Subject: [PATCH 05/15] Updated useDarkMode hook

---
 src/components/DeepLearningRoadmap.jsx    | 15 ++-----------
 src/components/GenerativeAIRoadmap.jsx    | 17 +++-----------
 src/components/HomePage.jsx               | 20 +++--------------
 src/components/Journey.jsx                |  5 ++---
 src/components/MachineLearningRoadmap.jsx | 14 ++----------
 src/components/PrerequisiteRoadmap.jsx    | 14 ++----------
 src/components/QuestionBank.jsx           | 27 +++--------------------
 7 files changed, 17 insertions(+), 95 deletions(-)

diff --git a/src/components/DeepLearningRoadmap.jsx b/src/components/DeepLearningRoadmap.jsx
index 70a4853..fbe627b 100644
--- a/src/components/DeepLearningRoadmap.jsx
+++ b/src/components/DeepLearningRoadmap.jsx
@@ -4,6 +4,7 @@ import Navbar from './Navbar';
 import categorizedDLVideos from '../../categorizedDLContent'; 
 import Modal from './Modal';
 import ReactGA from 'react-ga4';
+import useDarkMode from './useDarkMode';
 import Footer from './Footer';
 
 const topics = [
@@ -27,7 +28,7 @@ const DeepLearningRoadmap = () => {
   ReactGA.send({ hitType: 'pageview', page: window.location.pathname });
 
   const [selectedTopic, setSelectedTopic] = useState(null);
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, toggleDarkMode] = useDarkMode();
   const [hoveredTopic, setHoveredTopic] = useState(null);
   const [isMobile, setIsMobile] = useState(false);
   const [topicProgress, setTopicProgress] = useState({});
@@ -45,10 +46,6 @@ const DeepLearningRoadmap = () => {
         setTopicProgress(parsedProgress);
       }
 
-      const savedDarkMode = localStorage.getItem('darkMode') === 'true';
-      setDarkMode(savedDarkMode);
-      document.documentElement.classList.toggle('dark', savedDarkMode);
-
       const checkMobile = () => {
         setIsMobile(window.innerWidth < 768);
       };
@@ -149,14 +146,6 @@ const DeepLearningRoadmap = () => {
       console.error('Error saving progress:', error);
     }
   };
-  
-  // Toggle dark mode and persist in localStorage
-  const toggleDarkMode = () => {
-    const newDarkMode = !darkMode;
-    setDarkMode(newDarkMode);
-    document.documentElement.classList.toggle('dark', newDarkMode);
-    localStorage.setItem('darkMode', newDarkMode);
-  };
 
   const overallProgress = calculateOverallProgress();
 
diff --git a/src/components/GenerativeAIRoadmap.jsx b/src/components/GenerativeAIRoadmap.jsx
index c063271..3c7c601 100644
--- a/src/components/GenerativeAIRoadmap.jsx
+++ b/src/components/GenerativeAIRoadmap.jsx
@@ -5,6 +5,7 @@ import Modal from './Modal';
 import Navbar from './Navbar';
 import ReactGA from 'react-ga4';
 import genai from "../../categorizedGenAIContent";
+import useDarkMode from './useDarkMode';
 import Footer from './Footer';
 
 const topics = [
@@ -25,7 +26,7 @@ const GenerativeAIRoadmap = () => {
   ReactGA.send({ hitType: 'pageview', page: window.location.pathname });
 
   const [selectedTopic, setSelectedTopic] = useState(null);
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, toggleDarkMode] = useDarkMode();
   const [hoveredTopic, setHoveredTopic] = useState(null);
   const [isMobile, setIsMobile] = useState(false);
   const [topicProgress, setTopicProgress] = useState({});
@@ -43,10 +44,6 @@ const GenerativeAIRoadmap = () => {
         setTopicProgress(parsedProgress);
       }
 
-      const savedDarkMode = localStorage.getItem('darkMode') === 'true';
-      setDarkMode(savedDarkMode);
-      document.documentElement.classList.toggle('dark', savedDarkMode);
-
       const checkMobile = () => {
         setIsMobile(window.innerWidth < 768);
       };
@@ -147,14 +144,6 @@ const GenerativeAIRoadmap = () => {
       console.error('Error saving progress:', error);
     }
   };
-  
-  // Toggle dark mode and persist in localStorage
-  const toggleDarkMode = () => {
-    const newDarkMode = !darkMode;
-    setDarkMode(newDarkMode);
-    document.documentElement.classList.toggle('dark', newDarkMode);
-    localStorage.setItem('darkMode', newDarkMode);
-  };
 
   const overallProgress = calculateOverallProgress();
 
@@ -355,7 +344,7 @@ const GenerativeAIRoadmap = () => {
         <link rel="canonical" href="https://mldl.study/genai" />
       </Helmet>
 
-      <Navbar darkMode={darkMode} toggleDarkMode={() => setDarkMode(!darkMode)} isTransitioning={false} />
+      <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} isTransitioning={false} />
 
       <div className={`min-h-screen ${darkMode ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
         <div className="container mx-auto px-4 py-8">
diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
index 64ef6eb..a7119db 100644
--- a/src/components/HomePage.jsx
+++ b/src/components/HomePage.jsx
@@ -5,6 +5,7 @@ import { Sun, Moon, ChevronDown, ChevronUp, X, GitBranch, BookOpen, Map, ArrowRi
 import Navbar from './Navbar';
 import { Helmet } from 'react-helmet';
 import Footer from './Footer';
+import useDarkMode from './useDarkMode';
 
 // FAQ Data
 const FAQ_DATA = [
@@ -107,25 +108,13 @@ const FAQItem = ({ question, answer, isOpen, onClick, darkMode }) => (
 // Home Page Component
 const HomePage = () => {
   ReactGA.send({ hitType: 'pageview', page: window.location.pathname });
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, baseToggleDarkMode] = useDarkMode();
   const [isTransitioning, setIsTransitioning] = useState(false);
   const [openFAQs, setOpenFAQs] = useState({});
   const [isContributionModalOpen, setIsContributionModalOpen] = useState(false);
   const [activeRoadmap, setActiveRoadmap] = useState(null);
 
   useEffect(() => {
-    const savedDarkMode = localStorage.getItem('darkMode');
-    // If no preference is saved (first visit), default to dark mode
-    const shouldUseDarkMode = savedDarkMode === null ? true : savedDarkMode === 'true';
-    
-    setDarkMode(shouldUseDarkMode);
-    document.documentElement.classList.toggle('dark', shouldUseDarkMode);
-    
-    // Save the default preference if it's a first visit
-    if (savedDarkMode === null) {
-      localStorage.setItem('darkMode', 'true');
-    }
-  
     // Check if modal has been shown before
     const hasSeenModal = localStorage.getItem('contributionModalSeen');
     if (!hasSeenModal) {
@@ -138,10 +127,7 @@ const HomePage = () => {
 
   const toggleDarkMode = () => {
     setIsTransitioning(true);
-    const newDarkMode = !darkMode;
-    setDarkMode(newDarkMode);
-    document.documentElement.classList.toggle('dark', newDarkMode);
-    localStorage.setItem('darkMode', newDarkMode);
+    baseToggleDarkMode();
     setTimeout(() => setIsTransitioning(false), 300);
   };
 
diff --git a/src/components/Journey.jsx b/src/components/Journey.jsx
index e65ccc5..6eeb2a9 100644
--- a/src/components/Journey.jsx
+++ b/src/components/Journey.jsx
@@ -110,13 +110,12 @@ const RedditEmbed = ({ url }) => {
 
 const Journey = () => {
   ReactGA.send({ hitType: 'pageview', page: window.location.pathname });
-  const [darkMode, baseToggleDarkMode] = useDarkMode();
+  const [darkMode, toggleDarkModeHook] = useDarkMode();
   const [isTransitioning, setIsTransitioning] = useState(false);
 
   const toggleDarkMode = () => {
     setIsTransitioning(true);
-    // We wrap the original toggle to add our transition logic
-    baseToggleDarkMode();
+    toggleDarkModeHook();
     setTimeout(() => setIsTransitioning(false), 300);
   };
 
diff --git a/src/components/MachineLearningRoadmap.jsx b/src/components/MachineLearningRoadmap.jsx
index 8ab9442..a7be09e 100644
--- a/src/components/MachineLearningRoadmap.jsx
+++ b/src/components/MachineLearningRoadmap.jsx
@@ -3,6 +3,7 @@ import { Helmet } from 'react-helmet';
 import Navbar from './Navbar';
 import categorizedVideos from '../../categorizedMLContent';
 import Modal from './Modal';
+import useDarkMode from './useDarkMode';
 import Footer from './Footer';
 
 const topics = [
@@ -25,7 +26,7 @@ const connections = [
 
 const MachineLearningRoadmap = () => {
   const [selectedTopic, setSelectedTopic] = useState(null);
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, toggleDarkMode] = useDarkMode();
   const [topicProgress, setTopicProgress] = useState({});
   const [searchTerm, setSearchTerm] = useState('');
   const [filteredTopics, setFilteredTopics] = useState(topics);
@@ -43,10 +44,6 @@ const MachineLearningRoadmap = () => {
         setTopicProgress(parsedProgress);
       }
 
-      const savedDarkMode = localStorage.getItem('darkMode') === 'true';
-      setDarkMode(savedDarkMode);
-      document.documentElement.classList.toggle('dark', savedDarkMode);
-
       // Check if mobile
       const checkMobile = () => {
         setIsMobile(window.innerWidth < 768);
@@ -88,13 +85,6 @@ const MachineLearningRoadmap = () => {
     setFilteredTopics(filtered);
   }, [searchTerm, sortBy, topicProgress]);
 
-  const toggleDarkMode = () => {
-    const newDarkMode = !darkMode;
-    setDarkMode(newDarkMode);
-    document.documentElement.classList.toggle('dark', newDarkMode);
-    localStorage.setItem('darkMode', newDarkMode);
-  };
-
   const calculateTopicProgress = (topicName) => {
     const topicVideos = categorizedVideos[topicName] || [];
     if (topicVideos.length === 0) return 0;
diff --git a/src/components/PrerequisiteRoadmap.jsx b/src/components/PrerequisiteRoadmap.jsx
index 4a858d1..310a075 100644
--- a/src/components/PrerequisiteRoadmap.jsx
+++ b/src/components/PrerequisiteRoadmap.jsx
@@ -4,6 +4,7 @@ import Navbar from './Navbar';
 import categorizedVideos from '../../categorizedPrerequisiteContent';
 import Modal from './Modal';
 import ReactGA from 'react-ga4';
+import useDarkMode from './useDarkMode';
 import Footer from './Footer';
 
 const topics = [
@@ -25,7 +26,7 @@ const PrerequisiteRoadmap = () => {
   ReactGA.send({ hitType: 'pageview', page: window.location.pathname });
 
   const [selectedTopic, setSelectedTopic] = useState(null);
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, toggleDarkMode] = useDarkMode();
   const [hoveredTopic, setHoveredTopic] = useState(null);
   const [isMobile, setIsMobile] = useState(false);
   const [topicProgress, setTopicProgress] = useState({});
@@ -42,10 +43,6 @@ const PrerequisiteRoadmap = () => {
         setTopicProgress(parsedProgress);
       }
 
-      const savedDarkMode = localStorage.getItem('darkMode') === 'true';
-      setDarkMode(savedDarkMode);
-      document.documentElement.classList.toggle('dark', savedDarkMode);
-
       const checkMobile = () => {
         setIsMobile(window.innerWidth < 768);
       };
@@ -84,13 +81,6 @@ const PrerequisiteRoadmap = () => {
     setFilteredTopics(filtered);
   }, [searchTerm, sortBy, topicProgress]);
 
-  const toggleDarkMode = () => {
-    const newDarkMode = !darkMode;
-    setDarkMode(newDarkMode);
-    document.documentElement.classList.toggle('dark', newDarkMode);
-    localStorage.setItem('darkMode', newDarkMode);
-  };
-
   const calculateTopicProgress = (topicName) => {
     const topicVideos = categorizedVideos[topicName] || [];
     if (topicVideos.length === 0) return 0;
diff --git a/src/components/QuestionBank.jsx b/src/components/QuestionBank.jsx
index b0d56d1..b636eba 100644
--- a/src/components/QuestionBank.jsx
+++ b/src/components/QuestionBank.jsx
@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { Code2, Database, Brain, Cpu, BarChart3, GitBranch, ArrowLeft, RotateCcw, Sparkles, Award } from 'lucide-react';
+import { Code2, Database, Brain, Cpu, BarChart3, GitBranch, ArrowLeft, RotateCcw, Sparkles } from 'lucide-react';
 import Navbar from './Navbar';
 import '../App.css';
+import useDarkMode from './useDarkMode';
 import Footer from './Footer';
 
 const QuestionBank = () => {
+  const [darkMode, toggleDarkMode] = useDarkMode();
   const [selectedTopic, setSelectedTopic] = useState(null);
   const [questions, setQuestions] = useState([]);
   const [currentQuestion, setCurrentQuestion] = useState(0);
@@ -13,18 +15,6 @@ const QuestionBank = () => {
   const [score, setScore] = useState({ correct: 0, attempted: 0 });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [darkMode, setDarkMode] = useState(() => {
-    const saved = localStorage.getItem('darkMode');
-    return saved ? JSON.parse(saved) : false;
-  });
-
-  const toggleDarkMode = () => {
-    setDarkMode(prev => {
-      const newMode = !prev;
-      localStorage.setItem('darkMode', JSON.stringify(newMode));
-      return newMode;
-    });
-  };
 
   const topics = [
     { 
@@ -71,17 +61,6 @@ const QuestionBank = () => {
       borderDark: 'border-indigo-500/30',
       iconColor: 'text-indigo-600'
     },
-    { 
-      id: 'rl', 
-      name: 'Reinforcement Learning', 
-      icon: Award, 
-      color: 'from-red-500 to-orange-500',
-      bgLight: 'bg-red-50',
-      bgDark: 'bg-red-900/20',
-      borderLight: 'border-red-200',
-      borderDark: 'border-red-500/30',
-      iconColor: 'text-red-600'
-    },
     { 
       id: 'genai', 
       name: 'Generative AI', 

From 5188707bd180d086f6dbdb960566615afedaca1e Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Mon, 3 Nov 2025 17:59:49 +0530
Subject: [PATCH 06/15] Added back-to-top button

---
 src/components/BackToTopButton.jsx        | 43 +++++++++++++++++++++++
 src/components/DeepLearningRoadmap.jsx    |  2 ++
 src/components/GenerativeAIRoadmap.jsx    |  2 ++
 src/components/HomePage.jsx               |  2 ++
 src/components/Journey.jsx                |  3 ++
 src/components/MachineLearningRoadmap.jsx |  2 ++
 src/components/PrerequisiteRoadmap.jsx    |  2 ++
 src/components/QuestionBank.jsx           |  3 ++
 src/components/ResearchPaper.jsx          |  2 ++
 9 files changed, 61 insertions(+)
 create mode 100644 src/components/BackToTopButton.jsx

diff --git a/src/components/BackToTopButton.jsx b/src/components/BackToTopButton.jsx
new file mode 100644
index 0000000..794246f
--- /dev/null
+++ b/src/components/BackToTopButton.jsx
@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { ArrowUp } from 'lucide-react';
+
+const BackToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Show button when page is scrolled down
+  const toggleVisibility = () => {
+    if (window.scrollY > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  // Scroll to top smoothly
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <button
+      className={`fixed bottom-8 right-8 z-50 p-3 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-lg hover:from-blue-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition-all duration-300 ${isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-90'}`}
+      onClick={scrollToTop}
+      aria-label="Go to top"
+    >
+      <ArrowUp className="w-6 h-6" />
+    </button>
+  );
+};
+
+export default BackToTopButton;
\ No newline at end of file
diff --git a/src/components/DeepLearningRoadmap.jsx b/src/components/DeepLearningRoadmap.jsx
index fbe627b..436b3ee 100644
--- a/src/components/DeepLearningRoadmap.jsx
+++ b/src/components/DeepLearningRoadmap.jsx
@@ -5,6 +5,7 @@ import categorizedDLVideos from '../../categorizedDLContent';
 import Modal from './Modal';
 import ReactGA from 'react-ga4';
 import useDarkMode from './useDarkMode';
+import BackToTopButton from './BackToTopButton';
 import Footer from './Footer';
 
 const topics = [
@@ -420,6 +421,7 @@ const DeepLearningRoadmap = () => {
         />
       )}
 
+      <BackToTopButton />
       <Footer darkMode={darkMode} />
     </>
   );
diff --git a/src/components/GenerativeAIRoadmap.jsx b/src/components/GenerativeAIRoadmap.jsx
index 3c7c601..fd85040 100644
--- a/src/components/GenerativeAIRoadmap.jsx
+++ b/src/components/GenerativeAIRoadmap.jsx
@@ -6,6 +6,7 @@ import Navbar from './Navbar';
 import ReactGA from 'react-ga4';
 import genai from "../../categorizedGenAIContent";
 import useDarkMode from './useDarkMode';
+import BackToTopButton from './BackToTopButton';
 import Footer from './Footer';
 
 const topics = [
@@ -486,6 +487,7 @@ const GenerativeAIRoadmap = () => {
         />
       )}
 
+      <BackToTopButton />
       <Footer darkMode={darkMode} />
     </>
   );
diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
index a7119db..04d2397 100644
--- a/src/components/HomePage.jsx
+++ b/src/components/HomePage.jsx
@@ -6,6 +6,7 @@ import Navbar from './Navbar';
 import { Helmet } from 'react-helmet';
 import Footer from './Footer';
 import useDarkMode from './useDarkMode';
+import BackToTopButton from './BackToTopButton';
 
 // FAQ Data
 const FAQ_DATA = [
@@ -521,6 +522,7 @@ const HomePage = () => {
           </div>
         </main>
       </div>
+      <BackToTopButton />
       <Footer darkMode={darkMode} />
     </>
   );
diff --git a/src/components/Journey.jsx b/src/components/Journey.jsx
index 6eeb2a9..e47a1e9 100644
--- a/src/components/Journey.jsx
+++ b/src/components/Journey.jsx
@@ -4,6 +4,7 @@ import { Helmet } from 'react-helmet';
 import { ArrowRight, Users, Rocket, Star, Trophy, Heart, Target, Zap } from 'lucide-react';
 import Navbar from './Navbar';
 import Footer from './Footer';
+import BackToTopButton from './BackToTopButton';
 import useDarkMode from './useDarkMode';
 
 const journeyData = [
@@ -228,6 +229,8 @@ const Journey = () => {
         </main>
       </div>
 
+      <BackToTopButton />
+
       <Footer darkMode={darkMode} />
     </>
   );
diff --git a/src/components/MachineLearningRoadmap.jsx b/src/components/MachineLearningRoadmap.jsx
index a7be09e..c0b2acd 100644
--- a/src/components/MachineLearningRoadmap.jsx
+++ b/src/components/MachineLearningRoadmap.jsx
@@ -4,6 +4,7 @@ import Navbar from './Navbar';
 import categorizedVideos from '../../categorizedMLContent';
 import Modal from './Modal';
 import useDarkMode from './useDarkMode';
+import BackToTopButton from './BackToTopButton';
 import Footer from './Footer';
 
 const topics = [
@@ -414,6 +415,7 @@ const MachineLearningRoadmap = () => {
         />
       )}
 
+      <BackToTopButton />
       <Footer darkMode={darkMode} />
     </>
   );
diff --git a/src/components/PrerequisiteRoadmap.jsx b/src/components/PrerequisiteRoadmap.jsx
index 310a075..e702037 100644
--- a/src/components/PrerequisiteRoadmap.jsx
+++ b/src/components/PrerequisiteRoadmap.jsx
@@ -5,6 +5,7 @@ import categorizedVideos from '../../categorizedPrerequisiteContent';
 import Modal from './Modal';
 import ReactGA from 'react-ga4';
 import useDarkMode from './useDarkMode';
+import BackToTopButton from './BackToTopButton';
 import Footer from './Footer';
 
 const topics = [
@@ -419,6 +420,7 @@ const PrerequisiteRoadmap = () => {
         />
       )}
 
+      <BackToTopButton />
       <Footer darkMode={darkMode} />
     </>
   );
diff --git a/src/components/QuestionBank.jsx b/src/components/QuestionBank.jsx
index b636eba..fa06a8f 100644
--- a/src/components/QuestionBank.jsx
+++ b/src/components/QuestionBank.jsx
@@ -3,6 +3,7 @@ import { Code2, Database, Brain, Cpu, BarChart3, GitBranch, ArrowLeft, RotateCcw
 import Navbar from './Navbar';
 import '../App.css';
 import useDarkMode from './useDarkMode';
+import BackToTopButton from './BackToTopButton';
 import Footer from './Footer';
 
 const QuestionBank = () => {
@@ -227,6 +228,7 @@ const QuestionBank = () => {
           </div>
         </div>
 
+        <BackToTopButton />
         <Footer darkMode={darkMode} />
       </>
     );
@@ -472,6 +474,7 @@ const QuestionBank = () => {
         </div>
       </div>
 
+      <BackToTopButton />
       <Footer darkMode={darkMode} />
     </>
   );
diff --git a/src/components/ResearchPaper.jsx b/src/components/ResearchPaper.jsx
index b193b25..a50a452 100644
--- a/src/components/ResearchPaper.jsx
+++ b/src/components/ResearchPaper.jsx
@@ -3,6 +3,7 @@ import { Book, ExternalLink, ChevronDown, ChevronUp, Search } from 'lucide-react
 import researchPapers from "../../categorizedRPContent";
 import Navbar from './Navbar';
 import { Helmet } from 'react-helmet';
+import BackToTopButton from './BackToTopButton';
 import Footer from './Footer';
 
 const ResearchPaper = () => {
@@ -227,6 +228,7 @@ const ResearchPaper = () => {
         </div>
       </div>
 
+      <BackToTopButton />
       <Footer darkMode={darkMode} />
     </>
   );

From aae1803f0ae173d9a65552c002dcbe574255df66 Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Mon, 3 Nov 2025 18:31:49 +0530
Subject: [PATCH 07/15] Added custom cursor

---
 public/cursor.svg | 10 ++++++++++
 src/App.css       | 12 +++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 public/cursor.svg

diff --git a/public/cursor.svg b/public/cursor.svg
new file mode 100644
index 0000000..3894d42
--- /dev/null
+++ b/public/cursor.svg
@@ -0,0 +1,10 @@
+<svg width="54" height="54" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+            <feDropShadow dx="2" dy="2" stdDeviation="2.5" flood-color="#4338CA" flood-opacity="0.7" />
+        </filter>
+    </defs>
+    <g filter="url(#shadow)" transform="rotate(-45 16 16)">
+        <path d="M12.433 4.03516C12.914 3.11405 14.086 3.11405 14.567 4.03516L21.094 16.941C21.196 17.132 21.263 17.33 21.289 17.525C21.403 18.43 20.135 18.708 19.297 18.255L13.195 15.19C12.632 14.908 11.368 14.908 10.805 15.19L4.703 18.255C3.865 18.708 2.597 18.43 2.711 17.525C2.737 17.33 2.804 17.132 2.906 16.941L12.433 4.03516Z" stroke="white" stroke-width="1.5" stroke-linejoin="round" fill="#4338CA"/>
+    </g>
+</svg>
diff --git a/src/App.css b/src/App.css
index cc740ca..431e9c2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,10 +1,20 @@
-/* Remove the restrictive max-width and padding */
 #root {
   width: 100%;
   margin: 0;
   padding: 0;
 }
 
+/* Custom Cursor Styles */
+html {
+  /* The hotspot (0 0) is the top-left corner of the SVG. */
+  cursor: url('/cursor.svg') 0 0, auto;
+}
+
+/* Use a different cursor for interactive elements */
+a, button, [role="button"], input[type="submit"], input[type="button"], .cursor-pointer {
+  cursor: url('/cursor.svg') 0 0, pointer;
+}
+
 .logo {
   height: 6em;
   padding: 1.5em;

From fc164480bba1cc61a96d0005318a139c97dccd6f Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Mon, 3 Nov 2025 18:41:41 +0530
Subject: [PATCH 08/15] Fixed cursor such that it appears everywhere

---
 src/App.css | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index 431e9c2..9c454dd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,16 +4,11 @@
   padding: 0;
 }
 
-/* Custom Cursor Styles */
-html {
-  /* The hotspot (0 0) is the top-left corner of the SVG. */
-  cursor: url('/cursor.svg') 0 0, auto;
+/* Force custom cursor globally */
+* {
+  cursor: url('/cursor.svg') 4 0, auto !important;
 }
 
-/* Use a different cursor for interactive elements */
-a, button, [role="button"], input[type="submit"], input[type="button"], .cursor-pointer {
-  cursor: url('/cursor.svg') 0 0, pointer;
-}
 
 .logo {
   height: 6em;

From cd273a1715055af6c65afd4d7d6d6a85f8f3e034 Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Mon, 3 Nov 2025 18:54:26 +0530
Subject: [PATCH 09/15] Added icons in front of the 100% Free
 Community-Driven... subtitle

---
 src/components/HomePage.jsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
index 04d2397..d357324 100644
--- a/src/components/HomePage.jsx
+++ b/src/components/HomePage.jsx
@@ -237,11 +237,18 @@ const HomePage = () => {
             <p className={`text-lg mb-8 max-w-xl mx-auto ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
               Transform from beginner to AI professional with structured learning paths designed for practical, hands-on mastery.
             </p>
-            <div className='flex justify-center items-center space-x-2'>
+            <div className='flex flex-wrap justify-center items-center gap-x-6 gap-y-2'>
               <span className="text-sm text-blue-600 dark:text-blue-400 font-medium inline-flex items-center">
-                <span className="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400 mr-2"></span>100% Free
-                <span className="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400 mx-2"></span>Community-Driven
-                <span className="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400 mx-2"></span>Real-World Skills
+                <Zap className="w-4 h-4 mr-1.5" />
+                100% Free
+              </span>
+              <span className="text-sm text-blue-600 dark:text-blue-400 font-medium inline-flex items-center">
+                <Users className="w-4 h-4 mr-1.5" />
+                Community-Driven
+              </span>
+              <span className="text-sm text-blue-600 dark:text-blue-400 font-medium inline-flex items-center">
+                <BookOpen className="w-4 h-4 mr-1.5" />
+                Real-World Skills
               </span>
             </div>
           </header>

From 369755cecb0a76c80fa4a7515a7ba2613ba7d519 Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Mon, 3 Nov 2025 19:12:24 +0530
Subject: [PATCH 10/15] Added scroll-based animations and hover effects to
 homepage

---
 src/components/HomePage.jsx     | 133 ++++++++++++++++++++++----------
 src/components/QuestionBank.jsx |  19 +++--
 2 files changed, 107 insertions(+), 45 deletions(-)

diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
index d357324..f027262 100644
--- a/src/components/HomePage.jsx
+++ b/src/components/HomePage.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import ReactGA from 'react-ga4';
 import { Sun, Moon, ChevronDown, ChevronUp, X, GitBranch, BookOpen, Map, ArrowRight, Sparkles, Zap, Book, Code, Brain, Clock, Globe, Users } from 'lucide-react';
 import Navbar from './Navbar';
+import { motion } from 'framer-motion';
 import { Helmet } from 'react-helmet';
 import Footer from './Footer';
 import useDarkMode from './useDarkMode';
@@ -106,6 +107,29 @@ const FAQItem = ({ question, answer, isOpen, onClick, darkMode }) => (
   </div>
 );
 
+// Animation Variants for scroll-based animations
+const sectionVariants = {
+  hidden: { opacity: 0, y: 50 },
+  visible: { 
+    opacity: 1, 
+    y: 0,
+    transition: { duration: 0.6, ease: "easeOut" }
+  }
+};
+
+const cardVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: (i) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut",
+    },
+  }),
+};
+
 // Home Page Component
 const HomePage = () => {
   ReactGA.send({ hitType: 'pageview', page: window.location.pathname });
@@ -219,25 +243,45 @@ const HomePage = () => {
       />
       
       <div className={`min-h-screen flex flex-col transition-colors duration-300 ${darkMode ? 'bg-black text-white' : 'bg-slate-50 text-gray-900'}`}>
-        <Navbar 
-          darkMode={darkMode} 
-          toggleDarkMode={toggleDarkMode} 
-          isTransitioning={isTransitioning}
-        />
+        <motion.div
+          initial={{ y: -100 }}
+          animate={{ y: 0 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
+        >
+          <Navbar 
+            darkMode={darkMode} 
+            toggleDarkMode={toggleDarkMode} 
+            isTransitioning={isTransitioning}
+          />
+        </motion.div>
     
         <main className="flex-grow flex flex-col items-center justify-center px-4 py-12">
           {/* Hero Section */}
-          <header className="text-center mb-16 max-w-3xl mx-auto">
-            <div className="inline-block mb-4 px-4 py-1 rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 text-white text-sm font-medium">
+          <motion.header 
+            className="text-center mb-16 max-w-3xl mx-auto"
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+          >
+            <motion.div 
+              className="inline-block mb-4 px-4 py-1 rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 text-white text-sm font-medium"
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ delay: 0.2, duration: 0.5 }}
+            >
               AI Learning Roadmap
-            </div>
+            </motion.div>
             <h1 className={`text-4xl md:text-6xl font-bold mb-6 tracking-tight ${darkMode ? 'text-white' : 'text-gray-900'}`}>
               Your Path to <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-500">AI Mastery</span>
             </h1>
             <p className={`text-lg mb-8 max-w-xl mx-auto ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
               Transform from beginner to AI professional with structured learning paths designed for practical, hands-on mastery.
             </p>
-            <div className='flex flex-wrap justify-center items-center gap-x-6 gap-y-2'>
+            <motion.div className='flex flex-wrap justify-center items-center gap-x-6 gap-y-2'
+              initial={{ y: 20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.4, duration: 0.5 }}
+            >
               <span className="text-sm text-blue-600 dark:text-blue-400 font-medium inline-flex items-center">
                 <Zap className="w-4 h-4 mr-1.5" />
                 100% Free
@@ -250,11 +294,11 @@ const HomePage = () => {
                 <BookOpen className="w-4 h-4 mr-1.5" />
                 Real-World Skills
               </span>
-            </div>
-          </header>
+            </motion.div>
+          </motion.header>
 
           {/* Perplexity Comet Section */}
-          <div className={`w-full max-w-5xl mx-auto mb-16 p-8 rounded-3xl shadow-2xl ${darkMode ? 'bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900' : 'bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50'} border border-gray-200 dark:border-gray-700 relative overflow-hidden`}>
+          <motion.div variants={sectionVariants} initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.2 }} className={`w-full max-w-5xl mx-auto mb-16 p-8 rounded-3xl shadow-2xl ${darkMode ? 'bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900' : 'bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50'} border border-gray-200 dark:border-gray-700 relative overflow-hidden`}>
             {/* Enhanced Decorative Elements */}
             <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-blue-500/20 to-indigo-500/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 animate-pulse" />
             <div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2 animate-pulse" />
@@ -387,40 +431,49 @@ const HomePage = () => {
 
               
             </div>
-          </div>
+          </motion.div>
 
           {/* Roadmap Cards */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl w-full mb-20">
-            {roadmaps.map((roadmap) => (
-              <Link 
+            {roadmaps.map((roadmap, index) => (
+              <motion.div
                 key={roadmap.id}
-                to={roadmap.path}
-                className={`group relative overflow-hidden rounded-xl p-6 transition-all duration-300 ${darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white hover:bg-gray-50'} shadow-sm hover:shadow-md border ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}
-                onMouseEnter={() => setActiveRoadmap(roadmap.id)}
-                onMouseLeave={() => setActiveRoadmap(null)}
+                custom={index}
+                variants={cardVariants}
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true }}
+                whileHover={{ y: -5, transition: { duration: 0.2 } }}
               >
-                <div className="flex items-start">
-                  <div className={`p-3 rounded-lg bg-gradient-to-r ${roadmap.color} text-white mr-4`}>
-                    {roadmap.icon}
+                <Link 
+                  to={roadmap.path}
+                  className={`group relative overflow-hidden rounded-xl p-6 transition-all duration-300 ${darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white hover:bg-gray-50'} shadow-sm hover:shadow-md border ${darkMode ? 'border-gray-700' : 'border-gray-200'} block`}
+                  onMouseEnter={() => setActiveRoadmap(roadmap.id)}
+                  onMouseLeave={() => setActiveRoadmap(null)}
+                >
+                  <div className="flex items-start">
+                    <div className={`p-3 rounded-lg bg-gradient-to-r ${roadmap.color} text-white mr-4`}>
+                      {roadmap.icon}
+                    </div>
+                    <div>
+                      <h3 className={`text-xl font-semibold mb-2 ${darkMode ? 'text-white' : 'text-gray-900'}`}>
+                        {roadmap.title}
+                      </h3>
+                      <p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>
+                        {roadmap.description}
+                      </p>
+                    </div>
                   </div>
-                  <div>
-                    <h3 className={`text-xl font-semibold mb-2 ${darkMode ? 'text-white' : 'text-gray-900'}`}>
-                      {roadmap.title}
-                    </h3>
-                    <p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>
-                      {roadmap.description}
-                    </p>
+                  <div className={`absolute bottom-0 right-0 p-2 rounded-tl-lg bg-gradient-to-r ${roadmap.color} text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300`}>
+                    <ArrowRight className="w-5 h-5" />
                   </div>
-                </div>
-                <div className={`absolute bottom-0 right-0 p-2 rounded-tl-lg bg-gradient-to-r ${roadmap.color} text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300`}>
-                  <ArrowRight className="w-5 h-5" />
-                </div>
-              </Link>
+                </Link>
+              </motion.div>
             ))}
           </div>
           
           {/* Feature Section */}
-          <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm rounded-xl p-8 w-full max-w-4xl mx-auto mb-16 transition-all duration-300 border ${darkMode ? 'border-gray-700' : 'border-gray-100'}`}>
+          <motion.div variants={sectionVariants} initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.3 }} className={`${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm rounded-xl p-8 w-full max-w-4xl mx-auto mb-16 transition-all duration-300 border ${darkMode ? 'border-gray-700' : 'border-gray-100'}`}>
             <h2 className={`text-2xl font-bold mb-6 ${darkMode ? 'text-white' : 'text-gray-900'}`}>What's in These Roadmaps?</h2>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
               <div className={`p-4 rounded-lg ${darkMode ? 'bg-gray-700' : 'bg-gray-50'}`}>
@@ -457,10 +510,10 @@ const HomePage = () => {
                 </p>
               </div>
             </div>
-          </div>
+          </motion.div>
           
           {/* Video Section */}
-          <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm rounded-xl overflow-hidden w-full max-w-4xl mx-auto mb-16 transition-all duration-300 border ${darkMode ? 'border-gray-700' : 'border-gray-100'}`}>
+          <motion.div variants={sectionVariants} initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.3 }} className={`${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm rounded-xl overflow-hidden w-full max-w-4xl mx-auto mb-16 transition-all duration-300 border ${darkMode ? 'border-gray-700' : 'border-gray-100'}`}>
             <div className="p-6">
               <h2 className={`text-2xl font-bold mb-2 ${darkMode ? 'text-white' : 'text-gray-900'}`}>Watch This Before You Start!</h2>
               <p className={`mb-4 text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>
@@ -498,10 +551,10 @@ const HomePage = () => {
                 </div>
               </div>
             </a>
-          </div>
+          </motion.div>
     
           {/* FAQ Section */}
-          <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm rounded-xl p-8 w-full max-w-4xl mx-auto mb-16 transition-all duration-300 border ${darkMode ? 'border-gray-700' : 'border-gray-100'}`}>
+          <motion.div variants={sectionVariants} initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.3 }} className={`${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm rounded-xl p-8 w-full max-w-4xl mx-auto mb-16 transition-all duration-300 border ${darkMode ? 'border-gray-700' : 'border-gray-100'}`}>
             <h2 className={`text-2xl font-bold mb-6 ${darkMode ? 'text-white' : 'text-gray-900'}`}>Frequently Asked Questions</h2>
             <div className="space-y-1">
               {FAQ_DATA.map((faq, index) => (
@@ -515,7 +568,7 @@ const HomePage = () => {
                 />
               ))}
             </div>
-          </div>
+          </motion.div>
           
           {/* Contribute CTA */}
           <div className="flex justify-center mb-8">
diff --git a/src/components/QuestionBank.jsx b/src/components/QuestionBank.jsx
index fa06a8f..2eb58ab 100644
--- a/src/components/QuestionBank.jsx
+++ b/src/components/QuestionBank.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Code2, Database, Brain, Cpu, BarChart3, GitBranch, ArrowLeft, RotateCcw, Sparkles } from 'lucide-react';
 import Navbar from './Navbar';
 import '../App.css';
+import { motion } from 'framer-motion';
 import useDarkMode from './useDarkMode';
 import BackToTopButton from './BackToTopButton';
 import Footer from './Footer';
@@ -195,11 +196,18 @@ const QuestionBank = () => {
               </p>
             </div>
             
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {topics.map(topic => {
+            <motion.div 
+              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+              variants={{
+                visible: { transition: { staggerChildren: 0.05 } }
+              }}
+              initial="hidden"
+              animate="visible"
+            >
+              {topics.map((topic, index) => {
                 const Icon = topic.icon;
                 return (
-                  <div
+                  <motion.div
                     key={topic.id}
                     onClick={() => setSelectedTopic(topic.id)}
                     className={`
@@ -207,6 +215,7 @@ const QuestionBank = () => {
                       rounded-2xl p-8 cursor-pointer hover:scale-105 transition-all duration-300 
                       shadow-lg hover:shadow-2xl group
                     `}
+                    variants={{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }}
                   >
                     <div className={`
                       w-16 h-16 mb-6 rounded-xl flex items-center justify-center
@@ -221,10 +230,10 @@ const QuestionBank = () => {
                     <p className={`${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                       Click to start practicing
                     </p>
-                  </div>
+                  </motion.div>
                 );
               })}
-            </div>
+            </motion.div>
           </div>
         </div>
 

From 0331af32dbea45e57c6a4adf8e264f84e33ff4d6 Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Tue, 4 Nov 2025 17:31:00 +0530
Subject: [PATCH 11/15] Removed cursor

---
 public/cursor.svg | 10 ----------
 src/App.css       |  6 ------
 2 files changed, 16 deletions(-)
 delete mode 100644 public/cursor.svg

diff --git a/public/cursor.svg b/public/cursor.svg
deleted file mode 100644
index 3894d42..0000000
--- a/public/cursor.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="54" height="54" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-        <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
-            <feDropShadow dx="2" dy="2" stdDeviation="2.5" flood-color="#4338CA" flood-opacity="0.7" />
-        </filter>
-    </defs>
-    <g filter="url(#shadow)" transform="rotate(-45 16 16)">
-        <path d="M12.433 4.03516C12.914 3.11405 14.086 3.11405 14.567 4.03516L21.094 16.941C21.196 17.132 21.263 17.33 21.289 17.525C21.403 18.43 20.135 18.708 19.297 18.255L13.195 15.19C12.632 14.908 11.368 14.908 10.805 15.19L4.703 18.255C3.865 18.708 2.597 18.43 2.711 17.525C2.737 17.33 2.804 17.132 2.906 16.941L12.433 4.03516Z" stroke="white" stroke-width="1.5" stroke-linejoin="round" fill="#4338CA"/>
-    </g>
-</svg>
diff --git a/src/App.css b/src/App.css
index 9c454dd..704ee3f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,12 +4,6 @@
   padding: 0;
 }
 
-/* Force custom cursor globally */
-* {
-  cursor: url('/cursor.svg') 4 0, auto !important;
-}
-
-
 .logo {
   height: 6em;
   padding: 1.5em;

From 12eebbc84b3080c5b194eafe4056ba237e71b93e Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Tue, 4 Nov 2025 17:58:50 +0530
Subject: [PATCH 12/15] Added Sitemap

---
 public/sitemap.xml        | 53 +++++++++++++++++++++++++++++
 public/sitemap.xsl        | 70 +++++++++++++++++++++++++++++++++++++++
 src/components/Footer.jsx | 62 +++++++++++++++++++++++-----------
 3 files changed, 165 insertions(+), 20 deletions(-)
 create mode 100644 public/sitemap.xml
 create mode 100644 public/sitemap.xsl

diff --git a/public/sitemap.xml b/public/sitemap.xml
new file mode 100644
index 0000000..fae6117
--- /dev/null
+++ b/public/sitemap.xml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet type="text/xsl" href="/sitemap.xsl"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+  <url>
+    <loc>https://mldl.study/</loc>
+    <lastmod>2025-11-04T12:23:46+00:00</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://mldl.study/prerequisites</loc>
+    <lastmod>2025-11-04T12:23:46+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://mldl.study/machinelearning</loc>
+    <lastmod>2025-11-04T12:23:46+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://mldl.study/deeplearning</loc>
+    <lastmod>2025-11-04T12:23:46+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://mldl.study/genai</loc>
+    <lastmod>2025-11-04T12:23:46+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://mldl.study/questionbank</loc>
+    <lastmod>2025-11-04T12:23:46+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://mldl.study/books</loc>
+    <lastmod>2025-11-04T12:23:46+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://mldl.study/privacy</loc>
+    <lastmod>2025-11-04T12:23:46+00:00</lastmod>
+    <priority>0.50</priority>
+  </url>
+  <url>
+    <loc>https://mldl.study/terms</loc>
+    <lastmod>2025-11-04T12:23:46+00:00</lastmod>
+    <priority>0.50</priority>
+  </url>
+</urlset>
diff --git a/public/sitemap.xsl b/public/sitemap.xsl
new file mode 100644
index 0000000..e80a129
--- /dev/null
+++ b/public/sitemap.xsl
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0"
+  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  xmlns:s="http://www.sitemaps.org/schemas/sitemap/0.9">
+
+  <xsl:output method="html" encoding="UTF-8"/>
+
+  <xsl:template match="/">
+    <html>
+      <head>
+        <title>Sitemap – mldl.study</title>
+        <style>
+          body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0f172a;
+            color: #f8fafc;
+            margin: 0;
+            padding: 2rem;
+          }
+          h1 {
+            color: #38bdf8;
+            text-align: center;
+            margin-bottom: 2rem;
+          }
+          table {
+            width: 100%;
+            border-collapse: collapse;
+            background-color: #1e293b;
+            border-radius: 12px;
+            overflow: hidden;
+          }
+          th, td {
+            padding: 12px 16px;
+            border-bottom: 1px solid #334155;
+          }
+          tr:hover {
+            background-color: #334155;
+          }
+          a {
+            color: #38bdf8;
+            text-decoration: none;
+          }
+          a:hover {
+            text-decoration: underline;
+          }
+          th {
+            text-align: left;
+            color: #94a3b8;
+          }
+        </style>
+      </head>
+      <body>
+        <h1>📍 Sitemap – mldl.study</h1>
+        <table>
+          <tr>
+            <th>URL</th>
+            <th>Last Modified</th>
+          </tr>
+          <!-- ✅ Notice the namespace 's:' prefix below -->
+          <xsl:for-each select="s:urlset/s:url">
+            <tr>
+              <td><a href="{s:loc}" target="_blank"><xsl:value-of select="s:loc"/></a></td>
+              <td><xsl:value-of select="s:lastmod"/></td>
+            </tr>
+          </xsl:for-each>
+        </table>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 220ad4e..edf5ca2 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -59,7 +59,10 @@ const Footer = ({ darkMode }) => {
                   href={social.href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  aria-label={social.label}                  className={`transition-all duration-300 ease-in-out hover:scale-125 ${darkMode ? 'text-gray-400 hover:text-blue-400' : 'text-gray-500 hover:text-blue-600'}`}
+                  aria-label={social.label}
+                  className={`transition-all duration-300 ease-in-out hover:scale-125 ${
+                    darkMode ? 'text-gray-400 hover:text-blue-400' : 'text-gray-500 hover:text-blue-600'
+                  }`}
                 >
                   {social.icon}
                 </a>
@@ -67,37 +70,45 @@ const Footer = ({ darkMode }) => {
             </div>
           </div>
 
-          {/* Navigation Links */}
+          {/* Footer Sections */}
           {footerSections.map((section, index) => (
-            <div
-              key={index}
-              className={
-                section.title === 'Legal' ? 'md:justify-self-end' : ''
-              }
-            >
+            <div key={index} className={section.title === 'Legal' ? 'md:justify-self-end' : ''}>
               <div className="flex items-center gap-2">
                 <span className={darkMode ? 'text-gray-400' : 'text-gray-500'}>{section.icon}</span>
-                <h3 className={`text-sm font-semibold tracking-wider uppercase ${darkMode ? 'text-gray-300' : 'text-gray-800'}`}>
+                <h3
+                  className={`text-sm font-semibold tracking-wider uppercase ${
+                    darkMode ? 'text-gray-300' : 'text-gray-800'
+                  }`}
+                >
                   {section.title}
                 </h3>
               </div>
               <ul className="mt-4 space-y-2">
                 {section.links.map((link, linkIndex) => (
                   <li key={linkIndex}>
-                    {link.href.startsWith('/') ? (
-                      <Link
-                        to={link.href}
-                        className={`text-sm transition-all duration-200 ease-in-out hover:translate-x-1 hover:font-semibold inline-block ${darkMode ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'}`}
-                      >
-                        {link.text}
-                      </Link>
-                    ) : (
+                    {/* Use <a> for sitemap, mailto, and external links */}
+                    {link.href.startsWith('http') ||
+                    link.href.startsWith('mailto') ||
+                    link.href.endsWith('.xml') ? (
                       <a
                         href={link.href}
-                        className={`text-sm transition-all duration-200 ease-in-out hover:translate-x-1 hover:font-semibold inline-block ${darkMode ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'}`}
+                        target={link.href.endsWith('.xml') || link.href.startsWith('http') ? '_blank' : undefined}
+                        rel="noopener noreferrer"
+                        className={`text-sm transition-all duration-200 ease-in-out hover:translate-x-1 hover:font-semibold inline-block ${
+                          darkMode ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'
+                        }`}
                       >
                         {link.text}
                       </a>
+                    ) : (
+                      <Link
+                        to={link.href}
+                        className={`text-sm transition-all duration-200 ease-in-out hover:translate-x-1 hover:font-semibold inline-block ${
+                          darkMode ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'
+                        }`}
+                      >
+                        {link.text}
+                      </Link>
                     )}
                   </li>
                 ))}
@@ -107,12 +118,23 @@ const Footer = ({ darkMode }) => {
         </div>
 
         {/* Copyright */}
-        <div className={`mt-12 pt-8 border-t ${darkMode ? 'border-gray-800' : 'border-gray-200'} text-center text-sm ${darkMode ? 'text-gray-500' : 'text-gray-400'}`}>
+        <div
+          className={`mt-12 pt-8 border-t ${
+            darkMode ? 'border-gray-800' : 'border-gray-200'
+          } text-center text-sm ${darkMode ? 'text-gray-500' : 'text-gray-400'}`}
+        >
           &copy; {new Date().getFullYear()} MLDL.Study • Built with ❤️ by Ansh Aneja <br />
           <div className="mt-1">
             <span>All Rights Reserved</span>
             <span className="mx-2">•</span>
-            <a href="https://github.com/anshaneja5/mldl.study/blob/main/LICENSE" target="_blank" rel="noopener noreferrer" className={`hover:underline ${darkMode ? 'hover:text-white' : 'hover:text-black'}`}>License</a>
+            <a
+              href="https://github.com/anshaneja5/mldl.study/blob/main/LICENSE"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={`hover:underline ${darkMode ? 'hover:text-white' : 'hover:text-black'}`}
+            >
+              License
+            </a>
           </div>
         </div>
       </div>

From 2bdc340418d4883773879f6e7322b8244f45230d Mon Sep 17 00:00:00 2001
From: Ansh Aneja <128882734+anshaneja5@users.noreply.github.com>
Date: Tue, 4 Nov 2025 19:13:32 +0530
Subject: [PATCH 13/15] Add Search component route to App.jsx

---
 src/App.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/App.jsx b/src/App.jsx
index db7f08b..05a83d5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,6 +10,7 @@ import HomePage from './components/HomePage';
 import Books from './components/Books';
 import Journey from './components/Journey';
 import QuestionBank from './components/QuestionBank';
+import Search from './components/Search';
 import PrivacyPolicy from './components/PrivacyPolicy';
 import TermsOfUse from './components/TermsOfUse';
 import ReactGA from 'react-ga4';
@@ -32,6 +33,7 @@ const App = () => {
           <Route path="/books" element={<Books />} />
           <Route path="/journey" element={<Journey />} />
           <Route path="/questionbank" element={<QuestionBank />} />
+          <Route path="/search" element={<Search />} />
           <Route path="/privacy" element={<PrivacyPolicy />} />
           <Route path="/terms" element={<TermsOfUse />} />
           <Route path="*" element={<Error404 />} />

From 668e8b13ddb149b2a79d6c294cb4bf0dce9a9928 Mon Sep 17 00:00:00 2001
From: Ansh Aneja <128882734+anshaneja5@users.noreply.github.com>
Date: Tue, 4 Nov 2025 19:14:40 +0530
Subject: [PATCH 14/15] Update src/components/HomePage.jsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/HomePage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
index 3a7bd64..2355158 100644
--- a/src/components/HomePage.jsx
+++ b/src/components/HomePage.jsx
@@ -277,7 +277,7 @@ const HomePage = () => {
             <p className={`text-lg mb-8 max-w-xl mx-auto ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
               Transform from beginner to AI professional with structured learning paths designed for practical, hands-on mastery.
             </p>
-            <motion.div className='flex flex-wrap justify-center items-center gap-x-6 gap-y-2'
+            <motion.div className="flex flex-wrap justify-center items-center gap-x-6 gap-y-2"
               initial={{ y: 20, opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
               transition={{ delay: 0.4, duration: 0.5 }}

From fa7b05cf907f3a5dfebdf40f82b8d89a14979ca1 Mon Sep 17 00:00:00 2001
From: Sandraa16012007 <sandrarosaprince@gmail.com>
Date: Tue, 4 Nov 2025 22:29:14 +0530
Subject: [PATCH 15/15] Resolved conflicts

---
 public/sitemap.xsl | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/sitemap.xsl b/public/sitemap.xsl
index e80a129..6fe8477 100644
--- a/public/sitemap.xsl
+++ b/public/sitemap.xsl
@@ -1,3 +1,5 @@
+<!-- sitemap file -->
+
 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"