cart design modifyed

src/Components/UpdatedCouresCart/UpdatedCouresCart.jsx

@@ -0,0 +1,72 @@
+import { Link } from "react-router-dom";
+
+const CourseCard = ({ course }) => {
+  console.log(course);
+  const {
+    _id,
+    name,
+    price,
+    details,
+    image,
+    instructorName,
+    enrolled,
+    availableSeats,
+  } = course;
+  const trimedDetails = details.substring(0,50);
+  return (
+    <div
+        key={_id}
+        className="w-full md:h-[450px] xl:h-[400px] rounded overflow-hidden shadow-md bg-gray-100 hover:scale-95 duration-300 flex flex-col"
+      >
+        {/* CARD IMAGE */}
+        <div>
+          <img src={image} alt={name} className="w-full h-36 object-cover" />
+        </div>
+
+        {/* CARD INFO/BODY */}
+        <div className="flex flex-col justify-between p-4 text-sm h-full">
+          <div className="mt-4">
+            <div className="font-bold text-base mb-2">{name}</div>
+            <p className="text-gray-500 text-sm">{trimedDetails}</p>
+          </div>
+
+          <div className="flex flex-col justify-start gap-4 mt-5">
+            <div className="">
+              <p className="text-start text-gray-600 text-sm">
+                <span className="font-semibold">Total enrolled:</span> {enrolled}
+              </p>
+              <p className="text-start text-gray-600 text-sm">
+                <span className="font-semibold">Instructor:</span> {instructorName}
+              </p>
+            </div>
+
+            <div className="mt-auto w-full space-y-2">
+              <button className="w-full bg-gray-800 text-white font-semibold py-1 md:py2 px-4 rounded-sm duration-300">
+                <Link
+                  to={`/courses/:${_id}`}
+                  state={course}
+                  course={course}
+                  className="block"
+                >
+                  Add to Cart
+                </Link>
+              </button>
+              <button className="w-full bg-gray-800 text-white font-semibold py-1 md:py2 px-4 rounded-sm duration-300">
+                <Link
+                  to={`/courses/:${_id}`}
+                  state={course}
+                  course={course}
+                  className="block"
+                >
+                  View Details
+                </Link>
+              </button>
+
+            </div>
+          </div>
+        </div>
+      </div>
+  );
+};
+
+export default CourseCard;

src/Pages/Home/Coures/Coures.jsx

@@ -1,5 +1,33 @@
 import { useEffect, useState } from "react";
-import CouresCart from "../../../Components/CouresCart/CouresCart";
+import { Swiper, SwiperSlide } from "swiper/react";
+// Import Swiper styles
+import SwiperCore from "swiper";
+import "swiper/css";
+import "swiper/css/navigation";
+import { Autoplay, Navigation, Pagination } from "swiper/core";
+import CourseCard from "../../../Components/UpdatedCouresCart/UpdatedCouresCart";
+
+
+SwiperCore.use([Navigation, Pagination]);
+
+const breakpoints = {
+  320: {
+    slidesPerView: 1,
+    spaceBetween: 10,
+  },
+  640: {
+    slidesPerView: 2,
+    spaceBetween: 20,
+  },
+  768: {
+    slidesPerView: 3,
+    spaceBetween: 30,
+  },
+  1024: {
+    slidesPerView: 4,
+    spaceBetween: 40,
+  },
+};
 
 const Coures = () => {
   const [coures, setCoures] = useState([]);
@@ -12,11 +40,31 @@ const Coures = () => {
   return (
     <div>
       <h2 className="text-center text-3xl font-bold my-3">Coures_</h2>
-      <div className="grid md:grid-cols-3 space-y-7">
+
+     {/* COURSES SECTION */}
+     <div className="">
+        <Swiper
+          loop={true}
+          slidesPerView={3}
+          autoplay={true}
+          modules={[Pagination, Autoplay]}
+          breakpoints={breakpoints}
+          className="flex flex-row mt-10 md:pt-5"
+        >
+          {coures?.map((course, index) => (
+            <SwiperSlide key={index} className="md:p-5">
+              <CourseCard course={course} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+
+
+      {/* <div className="grid md:grid-cols-3 space-y-7">
         {coures.map((object) => (
           <CouresCart object={object} key={object._id}></CouresCart>
         ))}
-      </div>
+      </div> */}
     </div>
   );
 };