create course_card and courseslider components

frontend/src/components/core/Catalog/CourseSlider.jsx

@@ -0,0 +1,29 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import Course_Card from "./Course_Card";
+
+const CourseSlider = ({ Courses }) => {
+  return (
+    <>
+      {Courses?.length ? (
+        <Swiper
+          slidesPerView={1}
+          spaceBetween={25}
+          loop={true}
+          breakpoints={{ 1024: { slidesPerView: 3 } }}
+          className="max-h-[30rem]"
+        >
+          {Courses?.map((course, i) => (
+            <SwiperSlide key={i}>
+              <Course_Card course={course} Height={"h-[250px]"} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      ) : (
+        <p className="text-xl text-richblack-5">No Course Found</p>
+      )}
+    </>
+  );
+};
+
+export default CourseSlider;

frontend/src/components/core/Catalog/Course_Card.jsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import RatingStars from "../../common/RatingStars";
+import GetAvgRating from "../../../utils/avgRating";
+import { Link } from "react-router-dom";
+
+const Course_Card = ({ course, Height }) => {
+  const [avgReviewCount, setAvgReviewCount] = useState(0);
+
+  useEffect(() => {
+    const count = GetAvgRating(course.ratingAndReviews);
+    setAvgReviewCount(count);
+  }, [course]);
+
+  return (
+    <>
+      <Link to={`/courses/${course._id}`}>
+        <div className="">
+          <div className="rounded-lg">
+            <img
+              src={course?.thumbnail}
+              alt="course thumbnail"
+              className={`${Height} w-full rounded-xl object-cover `}
+            />
+          </div>
+          <div className="flex flex-col gap-2 px-1 py-3">
+            <p className="text-xl text-richblack-5">{course?.courseName}</p>
+            <p className="text-sm text-richblack-50">
+              {" "}
+              {course?.instructor?.firstName} {course?.instructor?.lastName}{" "}
+            </p>
+            <div className="flex items-center gap-2">
+              <span className="text-yellow-5"> {avgReviewCount || 0} </span>
+              <RatingStars Review_Count={avgReviewCount} />
+              <span className="text-richblack-400">
+                {" "}
+                {course?.ratingAndReviews?.length} Ratings{" "}
+              </span>
+            </div>
+            <p className="text-xl text-richblack-5"> Rs. {course?.price} </p>
+          </div>
+        </div>
+      </Link>
+    </>
+  );
+};
+
+export default Course_Card;