UI Enhancement: Improve Navbar Design and Responsiveness (ECWoC 26)

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 (
     <div 
       className="bg-[#121212] rounded-lg border border-gray-700 overflow-hidden hover:border-white transition-all duration-300 cursor-pointer w-full"
       onClick={handleCardClick}
+      style={{
+        contain: 'layout style paint',
+        willChange: 'border-color'
+      }}
     >
       <div className="p-6">
         <div className="flex items-start">
@@ -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 }) => {
             <div className="mt-3 flex items-center gap-4 text-xs text-gray-300">
               <div className="flex items-center gap-1">
                 <span>👥</span>
-                <span>Mentored {mentorStats.mentoredStudents} students</span>
+                <span>Mentored {stats.mentoredStudents} students</span>
               </div>
               <div className="flex items-center gap-1">
                 <span>⏱️</span>
-                <span>{mentorStats.totalSessions} sessions</span>
+                <span>{stats.totalSessions} sessions</span>
               </div>
             </div>
 
@@ -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);

Frontend/src/components/LandingFooter.jsx

@@ -23,119 +23,136 @@ const LandingFooter = () => {
                 Ment2Be
               </span>
             </div>
-            <p className="text-gray-400 text-sm">
-              Accessible and tailored mentorship experience for everyone.
+            <p className="text-gray-400 text-sm leading-relaxed mb-4">
+              Transforming lives through personalized mentorship. Connect with expert mentors to achieve your goals and unlock your full potential.
             </p>
+            <div className="flex items-center space-x-3">
+              {/* LinkedIn */}
+              <a
+                href="https://www.linkedin.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="LinkedIn"
+                className="text-gray-400 hover:text-blue-400 transition-all duration-300 transform hover:scale-110"
+              >
+                <svg
+                  className="w-4 h-4"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z" />
+                  <circle cx="4" cy="4" r="2" />
+                </svg>
+              </a>
+
+              {/* GitHub */}
+              <a
+                href="https://github.com/arshchouhan"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="GitHub"
+                className="text-gray-400 hover:text-purple-400 transition-all duration-300 transform hover:scale-110"
+              >
+                <svg
+                  className="w-4 h-4"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                </svg>
+              </a>
+
+            </div>
           </div>
 
-          {/* Features */}
+          {/* Solutions */}
           <div>
-            <h4 className="text-white font-semibold mb-4">Features</h4>
+            <h4 className="text-white font-semibold mb-4">SOLUTIONS</h4>
             <ul className="space-y-2">
               <li>
                 <Link
-                  to="/"
+                  to="/solutions"
                   state={{ fromNavbar: true }}
                   className="text-gray-400 hover:text-white transition-colors text-sm"
                 >
-                  Dashboard
+                  For Students
                 </Link>
               </li>
               <li>
                 <Link
-                  to="/"
+                  to="/solutions"
                   state={{ fromNavbar: true }}
                   className="text-gray-400 hover:text-white transition-colors text-sm"
                 >
-                  Mentorship
+                  For Professionals
                 </Link>
               </li>
-            </ul>
-          </div>
-
-          {/* Solutions */}
-          <div>
-            <h4 className="text-white font-semibold mb-4">Solutions</h4>
-            <ul className="space-y-2">
               <li>
                 <Link
                   to="/solutions"
                   state={{ fromNavbar: true }}
                   className="text-gray-400 hover:text-white transition-colors text-sm"
                 >
-                  For Students
+                  For Organizations
                 </Link>
               </li>
+            </ul>
+          </div>
+          {/* Platform */}
+          <div>
+            <h4 className="text-white font-semibold mb-4">PLATFORM</h4>
+            <ul className="space-y-2">
               <li>
                 <Link
-                  to="/solutions"
+                  to="/"
                   state={{ fromNavbar: true }}
                   className="text-gray-400 hover:text-white transition-colors text-sm"
                 >
-                  For Mentors
+                  Dashboard
                 </Link>
               </li>
               <li>
                 <Link
-                  to="/solutions"
+                  to="/"
                   state={{ fromNavbar: true }}
                   className="text-gray-400 hover:text-white transition-colors text-sm"
                 >
-                  For Teams
+                  Mentorship Program
                 </Link>
               </li>
             </ul>
           </div>
-        </div>
 
-        {/* Social Media */}
-        <div className="border-t border-gray-800 pt-8 text-center">
-          <h4 className="text-white font-semibold mb-4">Connect With Us</h4>
+        </div>
 
-          <div className="flex justify-center space-x-6">
-            {/* LinkedIn */}
-            <a
-              href="https://www.linkedin.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="LinkedIn"
-              className="text-gray-400 hover:text-white transition-colors"
-            >
-              <svg
-                className="w-6 h-6"
-                fill="currentColor"
-                viewBox="0 0 24 24"
+        {/* Bottom Bar */}
+        <div className="border-t border-gray-800 pt-6">
+          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+            <p className="text-gray-500 text-sm">
+              © 2026 Ment2Be. All rights reserved.
+            </p>
+            <div className="flex items-center space-x-4">
+              <Link
+                to="/"
+                className="text-gray-500 hover:text-white transition-colors text-sm"
               >
-                <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z" />
-                <circle cx="4" cy="4" r="2" />
-              </svg>
-            </a>
-
-            {/* GitHub */}
-            <a
-              href="https://github.com/arshchouhan"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="GitHub"
-              className="text-gray-400 hover:text-white transition-colors"
-            >
-              <svg
-                className="w-6 h-6"
-                fill="currentColor"
-                viewBox="0 0 24 24"
+                Privacy Policy
+              </Link>
+              <Link
+                to="/"
+                className="text-gray-500 hover:text-white transition-colors text-sm"
               >
-                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-              </svg>
-            </a>
+                Terms of Service
+              </Link>
+              <Link
+                to="/"
+                className="text-gray-500 hover:text-white transition-colors text-sm"
+              >
+                Cookie Policy
+              </Link>
+            </div>
           </div>
         </div>
-
-        {/* Bottom Bar */}
-        <div className="border-t border-gray-800 pt-8 mt-8 text-center">
-          <p className="text-gray-500 text-sm">
-            © 2026 Ment2Be. All rights reserved.
-          </p>
-        </div>
       </div>
     </footer>
   );