diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 842fb53..61fa5f5 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -328,4 +328,67 @@
.courseButton:hover {
background: linear-gradient(90deg, #16a34a 0%, #2563eb 100%);
color: #fff;
-}
\ No newline at end of file
+}
+
+/* Floating Action Buttons */
+.floatingActions {
+ position: fixed;
+ bottom: 30px;
+ right: 30px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ z-index: 1000;
+}
+
+.floatingButton {
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ background: var(--ifm-color-primary);
+ color: white;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+ transition: all 0.3s ease;
+}
+
+.floatingButton:hover {
+ background: var(--ifm-color-primary-dark);
+ transform: scale(1.1);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+/* Search Section */
+.searchSection {
+ padding: 2rem 0;
+ background: var(--ifm-background-color);
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+/* Achievements Section */
+.achievementsSection {
+ padding: 3rem 0;
+ background: var(--ifm-color-emphasis-100);
+}
+
+/* Mobile responsiveness for floating buttons */
+@media (max-width: 768px) {
+ .floatingActions {
+ bottom: 20px;
+ right: 20px;
+ }
+
+ .floatingButton {
+ width: 48px;
+ height: 48px;
+ }
+}
diff --git a/src/utils/progressTracker.js b/src/utils/progressTracker.js
new file mode 100644
index 0000000..082d86c
--- /dev/null
+++ b/src/utils/progressTracker.js
@@ -0,0 +1,216 @@
+// src/utils/progressTracker.js
+
+const PROGRESS_KEY = 'learnHubProgress';
+const ACHIEVEMENTS_KEY = 'learnHubAchievements';
+
+// Initialize progress data structure
+const initializeProgress = () => ({
+ courses: {},
+ totalXP: 0,
+ streak: 0,
+ lastVisit: new Date().toISOString().split('T')[0],
+ achievements: []
+});
+
+// Get progress data from localStorage
+export const getProgressData = () => {
+ try {
+ const data = localStorage.getItem(PROGRESS_KEY);
+ return data ? JSON.parse(data) : initializeProgress();
+ } catch (error) {
+ console.error("Failed to get progress data", error);
+ return initializeProgress();
+ }
+};
+
+// Save progress data to localStorage
+export const saveProgressData = (progressData) => {
+ try {
+ localStorage.setItem(PROGRESS_KEY, JSON.stringify(progressData));
+ } catch (error) {
+ console.error("Failed to save progress data", error);
+ }
+};
+
+// Update course progress
+export const updateCourseProgress = (courseId, moduleId, completed = true) => {
+ const progressData = getProgressData();
+
+ if (!progressData.courses[courseId]) {
+ progressData.courses[courseId] = {
+ modules: {},
+ totalModules: 0,
+ completedModules: 0,
+ lastVisited: new Date().toISOString(),
+ xpEarned: 0
+ };
+ }
+
+ const course = progressData.courses[courseId];
+
+ if (!course.modules[moduleId]) {
+ course.modules[moduleId] = {
+ completed: false,
+ visitedAt: new Date().toISOString(),
+ xp: 0
+ };
+ course.totalModules++;
+ }
+
+ if (completed && !course.modules[moduleId].completed) {
+ course.modules[moduleId].completed = true;
+ course.modules[moduleId].xp = 25; // 25 XP per module
+ course.completedModules++;
+ course.xpEarned += 25;
+ progressData.totalXP += 25;
+
+ // Check for achievements
+ checkAchievements(progressData, courseId);
+ }
+
+ course.lastVisited = new Date().toISOString();
+
+ // Update streak
+ updateStreak(progressData);
+
+ saveProgressData(progressData);
+ return progressData;
+};
+
+// Update learning streak
+const updateStreak = (progressData) => {
+ const today = new Date().toISOString().split('T')[0];
+ const lastVisit = progressData.lastVisit;
+
+ if (lastVisit === today) {
+ // Already visited today, no change
+ return;
+ }
+
+ const lastVisitDate = new Date(lastVisit);
+ const todayDate = new Date(today);
+ const diffTime = Math.abs(todayDate - lastVisitDate);
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+ if (diffDays === 1) {
+ // Consecutive day
+ progressData.streak++;
+ } else if (diffDays > 1) {
+ // Streak broken
+ progressData.streak = 1;
+ }
+
+ progressData.lastVisit = today;
+};
+
+// Check and award achievements
+const checkAchievements = (progressData, courseId) => {
+ const achievements = [
+ {
+ id: 'first_module',
+ title: 'First Steps',
+ description: 'Complete your first module',
+ condition: () => progressData.totalXP >= 25,
+ icon: '🎯'
+ },
+ {
+ id: 'hundred_xp',
+ title: 'XP Hunter',
+ description: 'Earn 100 XP',
+ condition: () => progressData.totalXP >= 100,
+ icon: '⚡'
+ },
+ {
+ id: 'streak_7',
+ title: 'Weekly Warrior',
+ description: 'Maintain a 7-day learning streak',
+ condition: () => progressData.streak >= 7,
+ icon: '🔥'
+ },
+ {
+ id: 'course_complete',
+ title: 'Course Master',
+ description: 'Complete your first course',
+ condition: () => Object.values(progressData.courses).some(course =>
+ course.completedModules >= course.totalModules && course.totalModules > 0
+ ),
+ icon: '🏆'
+ }
+ ];
+
+ achievements.forEach(achievement => {
+ if (!progressData.achievements.includes(achievement.id) && achievement.condition()) {
+ progressData.achievements.push(achievement.id);
+ // Trigger achievement notification
+ window.dispatchEvent(new CustomEvent('achievementUnlocked', {
+ detail: achievement
+ }));
+ }
+ });
+};
+
+// Get course progress percentage
+export const getCourseProgress = (courseId) => {
+ const progressData = getProgressData();
+ const course = progressData.courses[courseId];
+
+ if (!course || course.totalModules === 0) return 0;
+
+ return Math.round((course.completedModules / course.totalModules) * 100);
+};
+
+// Get all achievements
+export const getAchievements = () => {
+ const allAchievements = [
+ {
+ id: 'first_module',
+ title: 'First Steps',
+ description: 'Complete your first module',
+ icon: '🎯'
+ },
+ {
+ id: 'hundred_xp',
+ title: 'XP Hunter',
+ description: 'Earn 100 XP',
+ icon: '⚡'
+ },
+ {
+ id: 'streak_7',
+ title: 'Weekly Warrior',
+ description: 'Maintain a 7-day learning streak',
+ icon: '🔥'
+ },
+ {
+ id: 'course_complete',
+ title: 'Course Master',
+ description: 'Complete your first course',
+ icon: '🏆'
+ }
+ ];
+
+ const progressData = getProgressData();
+
+ return allAchievements.map(achievement => ({
+ ...achievement,
+ unlocked: progressData.achievements.includes(achievement.id)
+ }));
+};
+
+// Get user stats
+export const getUserStats = () => {
+ const progressData = getProgressData();
+ const completedCourses = Object.values(progressData.courses).filter(
+ course => course.completedModules >= course.totalModules && course.totalModules > 0
+ ).length;
+
+ const totalModulesCompleted = Object.values(progressData.courses)
+ .reduce((sum, course) => sum + course.completedModules, 0);
+
+ return {
+ totalXP: progressData.totalXP,
+ streak: progressData.streak,
+ completedCourses,
+ totalModulesCompleted,
+ achievements: progressData.achievements.length
+ };
+};
diff --git a/src/utils/userPrefs.js b/src/utils/userPrefs.js
new file mode 100644
index 0000000..b46f108
--- /dev/null
+++ b/src/utils/userPrefs.js
@@ -0,0 +1,24 @@
+// src/utils/userPrefs.js
+
+const PREFERENCES_KEY = 'learnHubUserPreferences';
+
+// Function to get user preferences from localStorage
+export const getUserPreferences = () => {
+ try {
+ const prefs = localStorage.getItem(PREFERENCES_KEY);
+ return prefs ? JSON.parse(prefs) : null;
+ } catch (error) {
+ console.error("Failed to parse user preferences from localStorage", error);
+ return null;
+ }
+};
+
+// Function to save user preferences to localStorage
+export const saveUserPreferences = (preferences) => {
+ try {
+ localStorage.setItem(PREFERENCES_KEY, JSON.stringify(preferences));
+ } catch (error) {
+ console.error("Failed to save user preferences to localStorage", error);
+ }
+};
+