HomePage Mentors Modifed

src/Components/mentor/Mentor.jsx

@@ -5,11 +5,11 @@ const Mentor = ({mentor}) => {
     <div className="card w-96 bg-base-200 shadow-xl flex flex-col items-center p-5 transform transition-all duration-1000 hover:scale-105 my-3">
       <div className="avatar flex items-center justify-center ">
         <div className="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
-          <img src={mentor.instructorImage} />
+          <img src={mentor?.instructorImage} />
         </div>
       </div>
       <div className="card-body text-center">
-        <h2 className="card-title">{mentor.instructorName}</h2>
+        <h2 className="card-title">{mentor?.instructorName}</h2>
         <h2>Speak-Up Mentor</h2>
       </div>
     </div>

src/Pages/Classes/Classes.jsx

@@ -6,6 +6,7 @@ import CouresCart from "../../Components/CouresCart/CouresCart";
 import { Helmet } from "react-helmet-async";
 import Pagination from "../../Components/paginaition/Pagination"; // Make sure the import path is correct
 import Footer from "../../Components/Footer/Footer";
+import Mentor from "../../Components/mentor/Mentor";
 
 const Classes = () => {
   const [classes, setClasses] = useState([]);
@@ -71,7 +72,7 @@ const Classes = () => {
       </div>
       <div className="grid md:grid-cols-3 gap-2 mb-5">
         {classesToDisplay.map((cls) => (
-          <CouresCart key={cls._id} object={cls}></CouresCart>
+          <Mentor key={cls._id} object={cls}></Mentor>
         ))}
       </div>
       <Pagination

src/Pages/Home/Instructors/Instructor.jsx

@@ -1,20 +1,20 @@
-import {FaUsers,FaUser} from 'react-icons/fa';
+import { FaUsers, FaUser } from "react-icons/fa";
 
-const Instructor = ({instructor}) => {
-    // console.log(instructor.instructorName[0].instructor);
-    return (
-        <div className="card w-96 bg-base-100 shadow-xl">
-            <figure><img src={instructor.instructorImage[0].image} alt="Instructor Image" /></figure>
-            <div className="card-body">
-                <h2 className="card-title text-3xl">{instructor.instructorName[0].instructor}</h2>
-                <p className="text-1xl font-semibold flex"> <FaUser></FaUser> Instructor Id: {instructor._id}</p>
-                <p className="text-2xl font-semibold flex"><FaUsers></FaUsers>Total Student: {instructor.totalEnrollments}</p>
-                <div className="card-actions justify-end">
-                    <button className="btn btn-primary">View Details</button>
-                </div>
-            </div>
+const Instructor = ({ instructor }) => {
+  console.log(instructor.instructorImage[0]);
+  return (
+    <div className="card w-96 bg-base-200 shadow-xl flex flex-col items-center p-5 transform transition-all duration-1000 hover:scale-105 my-3">
+      <div className="avatar flex items-center justify-center ">
+        <div className="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
+          <img src={instructor.instructorImage[0].image} />
         </div>
-    );
+      </div>
+      <div className="card-body text-center">
+        <h2 className="card-title">{instructor.instructorName[0].instructor}</h2>
+        <h2>Speak-Up Mentor</h2>
+      </div>
+    </div>
+  );
 };
 
-export default Instructor;
+export default Instructor;