diff --git a/Frontend/src/components/Explore/MentorCard.jsx b/Frontend/src/components/Explore/MentorCard.jsx index 0e80e58..8f8cf56 100644 --- a/Frontend/src/components/Explore/MentorCard.jsx +++ b/Frontend/src/components/Explore/MentorCard.jsx @@ -1,67 +1,29 @@ -import React, { useState, useEffect } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; import { FiStar, FiGift } from 'react-icons/fi'; -const MentorCard = ({ mentor }) => { +const MentorCard = ({ mentor, mentorStats = {} }) => { const navigate = useNavigate(); - const [mentorStats, setMentorStats] = useState({ - mentoredStudents: 0, - totalSessions: 0 - }); + + // Memoize stats to prevent unnecessary recalculations + const stats = useMemo(() => ({ + mentoredStudents: mentorStats[mentor.id]?.mentoredStudents || 0, + totalSessions: mentorStats[mentor.id]?.totalSessions || 0 + }), [mentorStats, mentor.id]); - useEffect(() => { - const fetchMentorStats = async () => { - try { - const token = localStorage.getItem("token"); - if (!token || !mentor.id) { - console.log('⚠️ [MentorCard] Missing token or mentor.id:', { hasToken: !!token, mentorId: mentor.id }); - return; - } - - console.log('🔍 [MentorCard] Fetching stats for mentor:', mentor.id, 'Name:', mentor.name); - - // Fetch mentor stats using the correct endpoint - const url = `http://localhost:4000/api/bookings/mentor/stats?mentorId=${mentor.id}`; - console.log('📍 [MentorCard] API URL:', url); - - const response = await fetch(url, { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - 'Authorization': `Bearer ${token}` - } - }); - - const data = await response.json(); - console.log('📊 [MentorCard] API Response:', { status: response.status, success: data.success, sessionsCompleted: data.data?.sessionsCompleted }); - - if (response.ok && data.success && data.data) { - console.log('✅ [MentorCard] Stats for', mentor.name, ':', { - mentoredStudents: data.data.sessionsCompleted, - totalSessions: data.data.sessionsCompleted - }); - - setMentorStats({ - mentoredStudents: data.data.sessionsCompleted || 0, - totalSessions: data.data.sessionsCompleted || 0 - }); - } - } catch (err) { - console.error('❌ [MentorCard] Error fetching mentor stats:', err); - } - }; - - fetchMentorStats(); - }, [mentor.id]); - - const handleCardClick = () => { + // Memoize click handler + const handleCardClick = useCallback(() => { navigate(`/mentor-profile?mentor=${encodeURIComponent(mentor.name)}&mentorId=${mentor.id}`); - }; + }, [navigate, mentor.name, mentor.id]); return (
@@ -73,6 +35,8 @@ const MentorCard = ({ mentor }) => { className="h-20 w-20 rounded-full object-cover" src={mentor.image} alt={mentor.name} + loading="lazy" + decoding="async" onError={(e) => { e.target.style.display = 'none'; if (e.target.nextElementSibling) { @@ -125,11 +89,11 @@ const MentorCard = ({ mentor }) => {
👥 - Mentored {mentorStats.mentoredStudents} students + Mentored {stats.mentoredStudents} students
⏱️ - {mentorStats.totalSessions} sessions + {stats.totalSessions} sessions
@@ -149,4 +113,12 @@ const MentorCard = ({ mentor }) => { ); }; -export default MentorCard; +// Custom comparison function for React.memo +const areEqual = (prevProps, nextProps) => { + return ( + prevProps.mentor.id === nextProps.mentor.id && + prevProps.mentorStats === nextProps.mentorStats + ); +}; + +export default React.memo(MentorCard, areEqual); diff --git a/Frontend/src/components/LandingFooter.jsx b/Frontend/src/components/LandingFooter.jsx index d542504..31a1e0a 100644 --- a/Frontend/src/components/LandingFooter.jsx +++ b/Frontend/src/components/LandingFooter.jsx @@ -23,119 +23,136 @@ const LandingFooter = () => { Ment2Be
-

- Accessible and tailored mentorship experience for everyone. +

+ Transforming lives through personalized mentorship. Connect with expert mentors to achieve your goals and unlock your full potential.

+
+ {/* LinkedIn */} + + + + + + + + {/* GitHub */} + + + + + + +
- {/* Features */} + {/* Solutions */}
-

Features

+

SOLUTIONS

-
- - {/* Solutions */} -
-

Solutions

- +
+ {/* Platform */} +
+

PLATFORM

+
-
- {/* Social Media */} -
-

Connect With Us

+
-
- {/* LinkedIn */} - - +
+

+ © 2026 Ment2Be. All rights reserved. +

+
+ - - - - - - {/* GitHub */} - - + - - - + Terms of Service + + + Cookie Policy + +
- - {/* Bottom Bar */} -
-

- © 2026 Ment2Be. All rights reserved. -

-
); diff --git a/Frontend/src/components/LandingNavbar.jsx b/Frontend/src/components/LandingNavbar.jsx index 156a401..c455960 100644 --- a/Frontend/src/components/LandingNavbar.jsx +++ b/Frontend/src/components/LandingNavbar.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; import logoHat from "../assets/logo-hat.png"; @@ -6,6 +6,15 @@ const LandingNavbar = () => { const [isOpen, setIsOpen] = useState(false); const [openDropdown, setOpenDropdown] = useState(null); const [showSocialsModal, setShowSocialsModal] = useState(false); + const [isScrolled, setIsScrolled] = useState(false); + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 20); + }; + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); const toggleDropdown = (dropdown) => { setOpenDropdown(openDropdown === dropdown ? null : dropdown); @@ -20,36 +29,39 @@ const LandingNavbar = () => { }; return ( -