@@ -497,6 +487,7 @@ const GenerativeAIRoadmap = () => {
/>
)}
+
>
);
diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
index 3989055..2355158 100644
--- a/src/components/HomePage.jsx
+++ b/src/components/HomePage.jsx
@@ -3,8 +3,11 @@ 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';
+import BackToTopButton from './BackToTopButton';
// FAQ Data
const FAQ_DATA = [
@@ -104,28 +107,39 @@ const FAQItem = ({ question, answer, isOpen, onClick, darkMode }) => (
);
+// 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 });
- 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 +152,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);
};
@@ -232,65 +243,103 @@ const HomePage = () => {
/>
-
+
+
+
{/* Hero Section */}
-
-
+
+
AI Learning Roadmap
-
+
Your Path to AI Mastery
Transform from beginner to AI professional with structured learning paths designed for practical, hands-on mastery.
-
+
- 100% Free
- Community-Driven
- Real-World Skills
+
+ 100% Free
-
-
+
+
+ Community-Driven
+
+
+
+ Real-World Skills
+
+
+
+
+
{/* Roadmap Cards */}
- {roadmaps.map((roadmap) => (
-
(
+
setActiveRoadmap(roadmap.id)}
- onMouseLeave={() => setActiveRoadmap(null)}
+ custom={index}
+ variants={cardVariants}
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: true }}
+ whileHover={{ y: -5, transition: { duration: 0.2 } }}
>
-
-
- {roadmap.icon}
+
setActiveRoadmap(roadmap.id)}
+ onMouseLeave={() => setActiveRoadmap(null)}
+ >
+
+
+ {roadmap.icon}
+
+
+
+ {roadmap.title}
+
+
+ {roadmap.description}
+
+
-
-
- {roadmap.title}
-
-
- {roadmap.description}
-
+
-
-
-
+
+
))}
{/* Feature Section */}
-
+
What's in These Roadmaps?
@@ -327,10 +376,10 @@ const HomePage = () => {
-
+
{/* Video Section */}
-
+
Watch This Before You Start!
@@ -368,10 +417,10 @@ const HomePage = () => {
-
+
{/* FAQ Section */}
-
+
Frequently Asked Questions
{FAQ_DATA.map((faq, index) => (
@@ -385,7 +434,7 @@ const HomePage = () => {
/>
))}
-
+
{/* Contribute CTA */}
@@ -399,6 +448,7 @@ const HomePage = () => {
+
>
);
diff --git a/src/components/Journey.jsx b/src/components/Journey.jsx
index a274fbb..e47a1e9 100644
--- a/src/components/Journey.jsx
+++ b/src/components/Journey.jsx
@@ -1,9 +1,11 @@
-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 BackToTopButton from './BackToTopButton';
+import useDarkMode from './useDarkMode';
const journeyData = [
{
@@ -109,21 +111,12 @@ const RedditEmbed = ({ url }) => {
const Journey = () => {
ReactGA.send({ hitType: 'pageview', page: window.location.pathname });
- const [darkMode, setDarkMode] = useState(false);
+ const [darkMode, toggleDarkModeHook] = 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);
+ toggleDarkModeHook();
setTimeout(() => setIsTransitioning(false), 300);
};
@@ -236,6 +229,8 @@ const Journey = () => {
+
+
>
);
diff --git a/src/components/MachineLearningRoadmap.jsx b/src/components/MachineLearningRoadmap.jsx
index 8ab9442..c0b2acd 100644
--- a/src/components/MachineLearningRoadmap.jsx
+++ b/src/components/MachineLearningRoadmap.jsx
@@ -3,6 +3,8 @@ import { Helmet } from 'react-helmet';
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 = [
@@ -25,7 +27,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 +45,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 +86,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;
@@ -424,6 +415,7 @@ const MachineLearningRoadmap = () => {
/>
)}
+
>
);
diff --git a/src/components/PrerequisiteRoadmap.jsx b/src/components/PrerequisiteRoadmap.jsx
index 4a858d1..e702037 100644
--- a/src/components/PrerequisiteRoadmap.jsx
+++ b/src/components/PrerequisiteRoadmap.jsx
@@ -4,6 +4,8 @@ import Navbar from './Navbar';
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 = [
@@ -25,7 +27,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 +44,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 +82,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;
@@ -429,6 +420,7 @@ const PrerequisiteRoadmap = () => {
/>
)}
+
>
);
diff --git a/src/components/PrivacyPolicy.jsx b/src/components/PrivacyPolicy.jsx
new file mode 100644
index 0000000..e2e4647
--- /dev/null
+++ b/src/components/PrivacyPolicy.jsx
@@ -0,0 +1,36 @@
+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, toggleDarkMode] = useDarkMode();
+
+ return (
+ <>
+
+ Privacy Policy | mldl.study
+
+
+
+
+
+
+
+
+ Privacy Policy
+
+
+
This is a placeholder for the Privacy Policy page. Content will be added here soon.
+
We are committed to protecting your privacy. This policy will outline how we collect, use, and safeguard your information.
+
+
+
+
+
+ >
+ );
+};
+
+export default PrivacyPolicy;
\ No newline at end of file
diff --git a/src/components/QuestionBank.jsx b/src/components/QuestionBank.jsx
index bb410a1..11b3e70 100644
--- a/src/components/QuestionBank.jsx
+++ b/src/components/QuestionBank.jsx
@@ -2,9 +2,13 @@ import React, { useState, useEffect } from 'react';
import { Code2, Database, Brain, Cpu, BarChart3, GitBranch, ArrowLeft, RotateCcw, Sparkles, Award, Bookmark } 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';
const QuestionBank = () => {
+ const [darkMode, toggleDarkMode] = useDarkMode();
const [selectedTopic, setSelectedTopic] = useState(null);
const [questions, setQuestions] = useState([]);
const [currentQuestion, setCurrentQuestion] = useState(0);
@@ -13,23 +17,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 [bookmarks, setBookmarks] = useState(() => {
- const savedBookmarks = localStorage.getItem('bookmarkedQuestions');
- return savedBookmarks ? JSON.parse(savedBookmarks) : {};
- });
-
-
- const toggleDarkMode = () => {
- setDarkMode(prev => {
- const newMode = !prev;
- localStorage.setItem('darkMode', JSON.stringify(newMode));
- return newMode;
- });
- };
useEffect(() => {
localStorage.setItem('bookmarkedQuestions', JSON.stringify(bookmarks));
@@ -80,17 +67,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',
@@ -289,11 +265,18 @@ const QuestionBank = () => {
-