Merge pull request Roshansuthar1105#205 from Vanshika814/feature/amazing-feature

enhanced courses page ui

Author: Roshansuthar1105

client/index.html

@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="manifest" href="/manifest.json" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="apple-mobile-web-app-title" content="Codify" />

client/src/components/CardBody.jsx

@@ -1,11 +1,13 @@
-import React from 'react';
+
+import { motion } from "framer-motion";
 import { useAuth } from '../store/auth';
 import { useTheme } from '../context/ThemeContext';
 import { toast } from 'react-toastify';
 import { MdBookmarkBorder, MdBookmarkAdded, MdEdit, MdPlayCircleOutline } from "react-icons/md";
 import { Link, useNavigate } from 'react-router-dom';
 import { useLoading } from './loadingContext';
-import { getYouTubeUrlType } from '../utils/youtubeUtils';
+import PropTypes from 'prop-types';
+
 
 const CardBody = ({ course, watchlist = [], updateWatchlist, onClick }) => {
   const { setIsLoading } = useLoading();
@@ -16,8 +18,7 @@ const CardBody = ({ course, watchlist = [], updateWatchlist, onClick }) => {
   const token = localStorage.getItem('token');
   const navigate = useNavigate();
 
-  // Analyze YouTube link type
-  const youtubeUrlInfo = getYouTubeUrlType(creator_youtube_link);
+
 
   // Handle card click
   const handleCardClick = (e) => {
@@ -63,8 +64,7 @@ const CardBody = ({ course, watchlist = [], updateWatchlist, onClick }) => {
         throw new Error(`HTTP error! status: ${response.status}, message: ${errorMessage}`);
       }
 
-      const result = await response.json();
-      //console.log("Watchlist update success:", result);
+      await response.json();
 
       // Show appropriate toast message
       if (isInWatchlist) {
@@ -88,28 +88,50 @@ const CardBody = ({ course, watchlist = [], updateWatchlist, onClick }) => {
   return (
     <div
       className={`
-        w-[300px] border rounded-md overflow-hidden shadow-md transition-all duration-200
+        group relative w-[330px] rounded-xl shadow-lg flex flex-col
+        hover:border-b-2 hover:border-r-2 transition-all duration-300 overflow-hidden
         ${isDark
-          ? 'bg-dark-bg-secondary border-dark-border'
-          : 'bg-light-bg-secondary border-light-border'}
-        hover:scale-[1.02] hover:shadow-lg cursor-pointer
+          ? 'bg-gradient-to-br from-gray-800 to-secondary-1000 backdrop-blur-xl'
+          : 'bg-gradient-to-br from-blue-50 to-indigo-50 backdrop-blur-xl'}
+        hover:shadow-xl cursor-pointer
       `}
       onClick={handleCardClick}
     >
+      {/* Animated borders */}
+      <motion.div 
+        className="absolute top-0 right-0 w-0 h-full bg-primary rounded-r-2xl"
+        whileHover={{ 
+          width: "3px",
+          transition: { duration: 0.3, ease: "easeOut" }
+        }}
+      />
+      <motion.div 
+        className="absolute bottom-0 left-0 w-full h-0 bg-primary rounded-b-2xl"
+        whileHover={{ 
+          height: "3px",
+          transition: { duration: 0.3, ease: "easeOut", delay: 0.05 }
+        }}
+      />
+
       <div className="relative">
         <img
           src={course_image}
           alt={course_title}
-          className="w-full h-[180px] object-cover"
+          className="w-full h-[180px] object-cover rounded-lg"
         />
-        <div className="absolute inset-0 bg-black/30 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
-          <MdPlayCircleOutline className="text-white text-5xl" />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center rounded-xl">
+          <motion.div
+            whileHover={{ scale: 1.1 }}
+            className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300"
+          >
+            <MdPlayCircleOutline className="text-white text-6xl" />
+          </motion.div>
         </div>
       </div>
 
-      <div className="p-4 flex flex-col gap-5 relative">
-        <h3 className={`text-lg font-medium ${isDark ? 'text-dark-text-primary' : 'text-light-text-primary'}`}>
-          {course_title.length > 30 ? `${course_title.slice(0, 30)}...` : course_title}
+      <div className="px-4 sm:px-6 pb-3 pt-4 flex flex-col gap-5 relative">
+        <h3 className={`text-lg font-medium leading-normal ${isDark ? 'text-dark-text-primary' : 'text-light-text-primary'} group-hover:text-primary transition-colors duration-300 line-clamp-3 min-h-[4.5rem]`}>
+          {course_title}
         </h3>
 
         <div className="flex items-center gap-2">
@@ -134,10 +156,9 @@ const CardBody = ({ course, watchlist = [], updateWatchlist, onClick }) => {
               e.stopPropagation();
               navigate(`/courses/${course._id}`);
             }}
-            className={`
-              py-2 px-5 rounded-full flex items-center justify-center text-white transition-colors
-              ${isDark ? 'bg-primary hover:bg-primary-dark' : 'bg-primary hover:bg-primary-dark'}
-            `}
+            className="py-2.5 px-6 rounded-full flex items-center justify-center text-white font-medium
+              bg-primary hover:bg-primary-dark transition-all duration-300 transform hover:scale-[1.02]
+              shadow-md hover:shadow-lg shadow-primary/20"
           >
             Watch Now
           </button>
@@ -146,10 +167,15 @@ const CardBody = ({ course, watchlist = [], updateWatchlist, onClick }) => {
             <button
               onClick={handleWatchlist}
               className={`
-                h-10 w-10 rounded-full flex items-center justify-center transition-colors
+                h-11 w-11 rounded-full flex items-center justify-center transition-all duration-300
                 ${isInWatchlist
-                  ? 'bg-primary text-white'
-                  : `${isDark ? 'bg-dark-bg-tertiary text-dark-text-primary border border-dark-border' : 'bg-light-bg-tertiary text-light-text-primary border border-light-border'}`}
+                  ? 'bg-primary text-white shadow-md shadow-primary/20'
+                  : `${isDark 
+                      ? 'bg-dark-bg-tertiary/80 text-dark-text-primary hover:bg-dark-bg-tertiary' 
+                      : 'bg-light-bg-tertiary/80 text-light-text-primary hover:bg-light-bg-tertiary'} 
+                     backdrop-blur-sm border border-current/10`
+                }
+                hover:scale-[1.05]
               `}
               aria-label={isInWatchlist ? "Remove from watchlist" : "Add to watchlist"}
             >
@@ -163,8 +189,11 @@ const CardBody = ({ course, watchlist = [], updateWatchlist, onClick }) => {
             {userdata.isAdmin && (
               <Link
                 className={`
-                  h-10 w-10 rounded-full flex items-center justify-center transition-colors
-                  ${isDark ? 'bg-dark-bg-tertiary text-primary hover:bg-dark-bg-primary' : 'bg-light-bg-tertiary text-primary hover:bg-light-bg-primary'}
+                  h-11 w-11 rounded-full flex items-center justify-center transition-all duration-300
+                  ${isDark 
+                    ? 'bg-dark-bg-tertiary/80 text-primary hover:bg-dark-bg-tertiary' 
+                    : 'bg-light-bg-tertiary/80 text-primary hover:bg-light-bg-tertiary'}
+                  backdrop-blur-sm border border-current/10 hover:scale-[1.05]
                 `}
                 to={`/admin/courses/update/${course._id}`}
                 aria-label="Edit course"
@@ -179,4 +208,20 @@ const CardBody = ({ course, watchlist = [], updateWatchlist, onClick }) => {
   );
 };
 
+CardBody.propTypes = {
+  course: PropTypes.shape({
+    _id: PropTypes.string.isRequired,
+    course_title: PropTypes.string.isRequired,
+    creator_youtube_link: PropTypes.string.isRequired,
+    creator_name: PropTypes.string.isRequired,
+    creator_image: PropTypes.string.isRequired,
+    course_image: PropTypes.string.isRequired
+  }).isRequired,
+  watchlist: PropTypes.arrayOf(PropTypes.shape({
+    _id: PropTypes.string.isRequired
+  })),
+  updateWatchlist: PropTypes.func,
+  onClick: PropTypes.func
+};
+
 export default CardBody;

client/src/components/CoursesList.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useAuth } from '../store/auth.jsx';
 import CardBodyd from './CardBodyd';
 import SearchBard from './Searchbard.jsx'; // Import the SearchBar component
@@ -24,27 +24,35 @@ const CoursesList = () => {
     );
 
   return (
-    <div className="courses-list">
-      <h2>All Courses</h2>
-      <SearchBard searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
-      <div className="categories">
-        {categories.map((category, index) => (
-          <button
-            key={index}
-            className={`category-button ${selectedCategory === category ? 'active' : ''}`}
-            onClick={() => setSelectedCategory(category)}
-          >
-            {category}
-          </button>
-        ))}
+    <div className="max-w-[1400px] mx-auto px-6 py-8">
+      <div className="flex flex-col gap-8 mb-8">
+        <h2 className="text-3xl font-bold">All Courses</h2>
+        <SearchBard searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+        <div className="flex flex-wrap gap-3">
+          {categories.map((category, index) => (
+            <button
+              key={index}
+              className={`px-4 py-2 rounded-full transition-all duration-300 ${
+                selectedCategory === category 
+                  ? 'bg-primary text-white shadow-md' 
+                  : 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700'
+              }`}
+              onClick={() => setSelectedCategory(category)}
+            >
+              {category}
+            </button>
+          ))}
+        </div>
       </div>
-      <div className="courses">
+      <div className="flex flex-wrap justify-between">
         {filteredCourses.length > 0 ? (
           filteredCourses.map(course => (
             <CardBodyd key={course._id} course={course} />
           ))
         ) : (
-          <div className="no-courses">No courses found matching your search.</div>
+          <div className="col-span-full text-center text-lg text-gray-500">
+            No courses found matching your search.
+          </div>
         )}
       </div>
     </div>

client/src/components/Loader.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+
 import { useTheme } from '../context/ThemeContext';
 
 function Loader() {
@@ -67,7 +67,7 @@ function Loader() {
         </div>
       </div>
 
-      <style jsx>{`
+      <style>{`
         @keyframes float {
           0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
           33% { transform: translateY(-10px) rotate(5deg); opacity: 1; }

client/src/pages/Courses.jsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   useState,
   useEffect,
   lazy,
@@ -387,7 +387,7 @@ const Courses = () => {
                 animate={{ opacity: 1 }}
                 className={`text-sm ${isDark ? 'text-dark-text-secondary' : 'text-light-text-secondary'}`}
               >
-                Found {filteredCourses.length} course(s) matching "{searchTerm}"
+                Found {filteredCourses.length} course(s) matching "{searchTerm}"
               </motion.p>
             )}
           </div>
@@ -402,7 +402,7 @@ const Courses = () => {
           className="mb-16"
         >
           {currentCourses.length > 0 ? (
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
+            <div className="max-w-full flex flex-wrap justify-around gap-6">
               {currentCourses.map((course) => (
                 <motion.div 
                   key={course._id}