Revamp courses grid and course card

src/App.css

@@ -143,11 +143,10 @@ nav {
 }
 
 .nav-item a {
-  display: inline-block; /* Ensure the link is treated as a block element */
-
+  font-weight: 500;
   color: white;
   text-decoration: none;
-  opacity: 0.8;
+  opacity: 0.4;
   transition: all 0.15s ease-in-out;
 }
 
@@ -285,6 +284,7 @@ nav {
 
 .explore-btn:hover {
   box-shadow: 1px 1px 10px rgb(255, 234, 182);
+  filter: brightness(1.05);
 }
 
 .home-image {
@@ -297,6 +297,9 @@ nav {
 /* General layout improvements */
 .course-page {
   width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-top: 80px;
 }
 
@@ -318,15 +321,15 @@ nav {
 .search-icon h2 {
   font-size: 6rem;
   font-weight: 700;
+  width: 50%;
   color: white;
-  padding-left: 100px;
+  text-align: center;
 }
 
 .search-bar {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 50%;
   position: relative;
 }
 
@@ -351,8 +354,10 @@ nav {
   border: none;
   background-color: transparent;
   cursor: pointer;
+  /* background-color: #00cccc; */
+  height: 3.5rem;
   position: absolute;
-  right: 200px;
+  right: 26%;
 }
 
 .search-icon i {
@@ -367,55 +372,53 @@ nav {
 
 .courses {
   display: grid;
-  grid-template-columns: repeat(4, 2fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 28px;
-  justify-content: center;
+  justify-items: center;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 .course-box {
-  height: 55vh;
-  width: 21%;
+  height: 26rem;
+  width: 20rem;
   border-radius: 20px;
-  border: 1px solid #ececf9;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s ease;
-  margin-bottom: 10vh;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
+    all 0.3s ease;
   background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid transparent;
   backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  display: grid;
+  grid-template-rows: auto 6rem;
+  cursor: pointer;
 }
 
 .course-box:hover {
   transform: translateY(-10px);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .course-image {
-  width: 100%;
-  height: 68%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
   overflow: hidden;
-  display: grid;
-  place-items: center;
 }
 
 .course-image a img {
-  width: 88%;
-  height: 60%;
-  margin-top: 20px;
-  margin-left: 20px;
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
+  width: 70%;
   filter: contrast(1.5);
 }
 
 .course-text {
-  padding: 20px;
+  padding: 20px 10px;
   text-align: left;
+  position: relative;
 }
 
 .courses h2 {
@@ -430,7 +433,7 @@ nav {
 .course-name {
   font-size: 1.5rem;
   font-weight: 600;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   color: #fff;
 }
 
@@ -446,11 +449,20 @@ nav {
 
 .lessons {
   font-size: 0.95rem;
+  width: fit-content;
   color: #ccc;
   cursor: pointer;
+  padding: 5px 10px;
+  position: absolute;
+  top: 20px;
+  right: 10px;
+  border-radius: 10px;
+  transition: all 0.15s ease-in-out;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .lessons:hover {
+  border: 1px solid #007bff;
   color: #007bff;
 }
 
@@ -1151,6 +1163,21 @@ h1 {
   }
 }
 
+@media (max-width: 768px) {
+  .nav-item {
+    font-size: 1.2rem !important;
+    margin-left: 5px;
+  }
+  .nav-button .btn {
+    height: 2rem;
+    width: 6rem;
+    font-size: 1rem;
+  }
+  .nav-list {
+    gap: 10;
+  }
+}
+
 @media (min-width: 661px) and (max-width: 1200px) {
   nav {
     padding: 20px 0;

src/components/CourseCards.jsx

@@ -1,133 +1,10 @@
 // import next from "../assets/next.png";
-import react from "../assets/react.png";
-import php from "../assets/php.png";
-import swift from "../assets/swift.png";
-import go from "../assets/go.png";
-import Ruby from "../assets/ruby.png";
-import node from "../assets/node.png";
-import python from "../assets/python.png";
-import HTML from "../assets/HTML.png";
-import kotlin from "../assets/kotlin.png";
-import java from "../assets/java.png";
-import Chash from "../assets/Chash.png";
-import CSS from "../assets/CSS.png";
-import CPP from "../assets/CPP.png";
-import JS from "../assets/JS.png";
-import c from "../assets/C.png";
 import Card from "./Card";
 import arrow from "../assets/arrow.png";
+import getCourses from "../data/courseData";
 
 function CourseCards({ searchTerm }) {
-  const courses = [
-    {
-      imgurl: java,
-      coursename: "Java",
-      authorname: "Kunal Kushwaha",
-      ytlink:
-        "https://www.youtube.com/playlist?list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ", // Introduction to Java
-      gfgLink: "https://www.geeksforgeeks.org/java/",
-    },
-    {
-      imgurl: c,
-      coursename: "C",
-      authorname: "College Wallah",
-      ytlink:
-        "https://www.youtube.com/playlist?list=PLxgZQoSe9cg1drBnejUaDD9GEJBGQ5hMt", // C Programming Tutorial
-      gfgLink: "https://www.geeksforgeeks.org/c-programming-language/",
-    },
-    {
-      imgurl: CPP,
-      coursename: "C++",
-      authorname: "Codehelp",
-      ytlink:
-        "https://www.youtube.com/playlist?list=PLDzeHZWIZsTryvtXdMr6rPh4IDexB5NIA", // C++ Programming Tutorial
-      gfgLink: "https://www.geeksforgeeks.org/c-plus-plus/",
-    },
-    {
-      imgurl: Chash,
-      coursename: "C#",
-      authorname: "Code with Harry",
-      ytlink: "https://www.youtube.com/watch?v=SuLiu5AK9Ps", // C# Programming Tutorial
-      gfgLink: "https://www.geeksforgeeks.org/csharp-programming-language/",
-    },
-    {
-      imgurl: Ruby,
-      coursename: "Ruby",
-      authorname: "Free Code Camp",
-      ytlink: "https://youtu.be/t_ispmWmdjY?si=cGPcXmH321aiCWEx", // Ruby Programming Tutorial
-      gfgLink: "https://www.geeksforgeeks.org/ruby/",
-    },
-    {
-      imgurl: python,
-      coursename: "Python",
-      authorname: "Code with Harry",
-      ytlink: "https://youtu.be/UrsmFxEIp5k?si=MkQ8K4HxBO19sU23", // Python Programming Tutorial
-      gfgLink: "https://www.geeksforgeeks.org/python-programming-language/",
-    },
-    {
-      imgurl: CSS,
-      coursename: "CSS",
-      authorname: "Free Code Camp",
-      ytlink: "https://www.youtube.com/watch?v=1Rs2ND1ryYc", // CSS Crash Course
-      gfgLink: "https://www.geeksforgeeks.org/css/",
-    },
-    {
-      imgurl: go,
-      coursename: "Go",
-      authorname: "Alex Mux",
-      ytlink: "https://youtu.be/8uiZC0l4Ajw?si=QXJnV58ksxBxVRLP", // Go Programming Tutorial
-      gfgLink: "https://www.geeksforgeeks.org/go-programming-language/",
-    },
-    {
-      imgurl: HTML,
-      coursename: "HTML",
-      authorname: "Apna College",
-      ytlink: "https://youtu.be/HcOc7P5BMi4?si=zw6ntozRp5KCo1M3", // HTML Crash Course
-      gfgLink: "https://www.geeksforgeeks.org/html/",
-    },
-    {
-      imgurl: JS,
-      coursename: "JavaScript",
-      authorname: "KGCoding",
-      ytlink: "https://youtu.be/cpoXLj24BDY?si=09lg2YIRb7_bmQn1", // JavaScript Crash Course
-      gfgLink: "https://www.geeksforgeeks.org/javascript/",
-    },
-    {
-      imgurl: kotlin,
-      coursename: "Kotlin",
-      authorname: "Free Code Camp",
-      ytlink: "https://youtu.be/F9UC9DY-vIU?si=CmdTnIKtAZlE-QrW", // Kotlin Programming Tutorial
-      gfgLink: "https://www.geeksforgeeks.org/kotlin-programming-language/",
-    },
-    {
-      imgurl: node,
-      coursename: "Node.js",
-      authorname: "Programming with Mosh",
-      ytlink: "https://www.youtube.com/watch?v=TlB_eWDSMt4", // Node.js Crash Course
-      gfgLink: "https://www.geeksforgeeks.org/nodejs/",
-    },
-    {
-      imgurl: swift,
-      coursename: "Swift",
-      authorname: "Free Code Camp",
-      ytlink: "https://youtu.be/comQ1-x2a1Q?si=PO3ITz3xy9Q2DjDf", // Swift Programming Tutorial
-      gfgLink: "https://www.geeksforgeeks.org/swift-programming-language/",
-    },
-    {
-      imgurl: php,
-      coursename: "PHP",
-      authorname: "Free Code Camp",
-      ytlink: "https://www.youtube.com/watch?v=OK_JCtrrv-c", // PHP for Beginners
-      gfgLink: "https://www.geeksforgeeks.org/php/",
-    },
-    {
-      imgurl: react,
-      coursename: "React.js",
-      authorname: "Aman Dhattarwal",
-      ytlink: "https://youtu.be/gY5sGvq-8h8?si=8XOL3vp2xWAmoXdr", // React Crash Course
-      gfgLink: "https://www.geeksforgeeks.org/reactjs/",
-    },
-  ];
+  const courses = getCourses();
 
   // Filter courses based on the search term
   const filteredCourses = courses.filter((course) =>

src/components/Introduction.jsx

@@ -11,13 +11,13 @@ function Introduction() {
             </div>
             <div className="mid-text">
               <p>
-                Welcome to Code Book, your ultimate coding destination. Whether
-                you&apos;re a coding novice or a seasoned developer, we&apos;ve
-                got you covered. Master in-demand languages like Python,
-                JavaScript, and Java while building real-world projects. Join
-                our vibrant community of learners to collaborate and grow
-                together. Start your coding journey today and unlock endless
-                possibilities.
+                flex: 1; Welcome to <strong>Code Book</strong>, your ultimate
+                coding destination. Whether you&apos;re a coding novice or a
+                seasoned developer, we&apos;ve got you covered. Master in-demand
+                languages like Python, JavaScript, and Java while building
+                real-world projects. Join our vibrant community of learners to
+                collaborate and grow together. Start your coding journey today
+                and unlock endless possibilities.
               </p>
             </div>
             <div className="explore">

src/data/courseData.js

@@ -271,4 +271,6 @@ const courses = [
   },
 ];
 
-export default courses;
+export default function getCourses() {
+  return courses;
+}