[Feature Request]: Create Cource Plateform Page

frontend/src/App.js

@@ -1,4 +1,3 @@
-
 // App.js
 import React, { useState, useEffect } from "react";
 import { Route, Routes, BrowserRouter } from "react-router-dom";
@@ -15,9 +14,15 @@ import ChatAssistant from "./ChatAssistant/ChatAssistant";
 import NotFound from "./Component/NotFound";
 import BackToTopButton from "./Component/BackToTopButton";
 import OpenSource from "./Component/OpenSource";
+import Review from "./Component/Review";
+
+import AOS from "aos";
+import "aos/dist/aos.css";
+
 
 import Review from "./Component/Review.js";
 
+
 import Review from "./Component/Review";
 
 import AOS from "aos";
@@ -78,11 +83,15 @@ import Productivity from "./pages/Productivity";
 import Collaboration from "./pages/Collaboration";
 import CodingPlatform from "./pages/CodingPlateform";
 
+import "aos/dist/aos.css";
+
+function App() {
+
 import CodingPlateform from "./pages/CodingPlateform";
 
   function App() {
   const [searchQuery, setSearchQuery] = useState("");
-  AOS.init();  
+  AOS.init();
   return (
     <>
       <ScrollToTop />
@@ -95,19 +104,15 @@ import CodingPlateform from "./pages/CodingPlateform";
         <Route path="/review" element={<Review />} />
         <Route path="/faq" element={<Faq />} />
         <Route path="/rateus" element={<Rateus />} />
-
         <Route path="/remote-jobs" element={<RemoteJobs />} />
         <Route path="/ai" element={<AI />} />
         <Route path="/movies-series" element={<Movie />} />
         <Route path="/extension" element={<Extension />} />
         <Route path="/ui-design" element={<UI />} />
         <Route path="/front-end-tools" element={<FrontendTools />} />
         <Route path="/ethical-hacking" element={<EthicalHacking />} />
-
         <Route path="/coding-platform" element={<CodingPlatform />} />
-        <Route path="/cources-platform" element={<CoursesPlatform />} />
-        <Route path="/coding-platform" element={<CodingPlateform />} />
-
+        <Route path="/courses-platform" element={<CoursesPlatform />} />
         <Route path="/productivity-tools" element={<Productivity />} />
         <Route path="/collaboration-tools" element={<Collaboration />} />
         <Route path="*" element={<NotFound />} /> {/* 404 route */}
@@ -116,9 +121,6 @@ import CodingPlateform from "./pages/CodingPlateform";
       <Toaster />
       <Footer />
       <ChatAssistant />
-
-      <Toaster />
-
     </>
 
   );

frontend/src/ChatAssistant/ChatAssistant.jsx

@@ -35,6 +35,8 @@ const ChatAssistant = () => {
       {/* {!isOpen && ( // Conditionally render the logo if the chatbot is closed
     <div className='chatbot'>l
       {!isOpen && ( // Conditionally render the logo if the chatbot is closed
+
+
       //{!isOpen && (
 
 

frontend/src/index.css

@@ -43,7 +43,7 @@ code {
 img {
   background: #ffffff;
   padding: 3px;
-  margin: 5px;
+  /* margin: 5px; */
   border-radius: 40px;
 }
 

frontend/src/pages/CoursesPlatform.jsx

@@ -1,9 +1,101 @@
-import React from 'react'
+import React from 'react';
+import '../style/Courses.css'; 
+
+const courses = [
+    {
+      title: "Introduction to Programming",
+      category: "Computer Science",
+      description:
+        "Learn the basics of programming using Python. Ideal for beginners with no prior experience.",
+      duration: "12 weeks",
+      image: "https://i.pinimg.com/564x/90/44/a6/9044a634e09b2a633ff73efad0fdf470.jpg",
+      startDate: "2024-09-01",
+      endDate: "2024-11-24",
+      instructor: "Jane Doe",
+      price: 199.99,
+    },
+    {
+      title: "Advanced Mathematics",
+      category: "Mathematics",
+      description:
+        "Explore advanced topics in calculus and linear algebra. Suitable for students with a strong math background.",
+      duration: "14 weeks",
+      image: "https://i.pinimg.com/564x/06/6d/01/066d01021f6941465b30837fd3a89e1e.jpg",
+      startDate: "2024-09-05",
+      endDate: "2024-12-12",
+      instructor: "Dr. John Smith",
+      price: 299.99,
+    },
+    {
+      title: "Digital Marketing",
+      category: "Business",
+      description:
+        "Learn the fundamentals of digital marketing, including SEO, social media marketing, and email marketing.",
+      duration: "10 weeks",
+      image: "https://i.pinimg.com/564x/9f/29/ad/9f29adf4942d8d4729726c8266a32b85.jpg",
+      startDate: "2024-10-01",
+      endDate: "2024-12-10",
+      instructor: "Emily Johnson",
+      price: 149.99,
+    },
+    {
+      title: "Introduction to Graphic Design",
+      category: "Design",
+      description:
+        "Learn the basics of graphic design using Adobe Photoshop and Illustrator.",
+      duration: "8 weeks",
+      image: "https://i.pinimg.com/736x/5d/28/90/5d289055564c7f5b0ff3d55d438f1a24.jpg",
+      startDate: "2024-09-15",
+      endDate: "2024-11-10",
+      instructor: "Michael Brown",
+      price: 249.99,
+    },
+    {
+      title: "World History",
+      category: "History",
+      description:
+        "Explore the major events and themes in world history from ancient times to the present.",
+      duration: "16 weeks",
+      image: "https://i.pinimg.com/736x/61/da/85/61da85e6093a89564a2e73724e25f9b7.jpg",
+      startDate: "2024-09-20",
+      endDate: "2025-01-10",
+      instructor: "Dr. Lisa Green",
+      price: 179.99,
+    },
+    {
+      title: "Creative Writing",
+      category: "Literature",
+      description:
+        "Develop your writing skills and learn how to craft compelling stories and essays.",
+      duration: "10 weeks",
+      image: "https://i.pinimg.com/564x/61/70/cd/6170cdbd957b9737830b2d0afdbbdde3.jpg",
+      startDate: "2024-10-10",
+      endDate: "2024-12-20",
+      instructor: "David Wilson",
+      price: 129.99,
+    },
+];
 
 const CoursesPlatform = () => {
   return (
-    <div style={{marginTop: "200px"}}>CourcesPlatform</div>
-  )
-}
+    <div className="container" style={{height: "auto"}}>
+      <h1 className="title">Available Courses</h1>
+      <div className="grid-container">
+        {courses.map((course, index) => (
+          <div key={index} className="grid-item" style={{ objectFit: 'cover', maxWidth: '100%' }}>
+            <img  src={course.image} alt={course.title} height={200} width={'100%'} className="course-image" />
+            <h2 className="course-title">{course.title}</h2>
+            <p className="course-category">{course.category}</p>
+            <p className="course-duration">{course.duration}</p>
+            <p className="course-description">{course.description}</p>
+            <p className="course-instructor">Instructor: {course.instructor}</p>
+            <p className="course-dates">Dates: {course.startDate} : {course.endDate}</p>
+            <p className="course-price" style={{fontWeight: "bolder"}}>${course.price.toFixed(2)}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
 
-export default CoursesPlatform
+export default CoursesPlatform;

frontend/src/style/Courses.css

@@ -0,0 +1,63 @@
+/* EthicalHacking.css */
+
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f4f4f4;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  height: auto;
+  padding: 20px;
+}
+
+.title {
+  text-align: center;
+  margin-bottom: 40px;
+  font-size: 2.5rem;
+  color: #333;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.grid-item {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.grid-item:hover {
+  transform: translateY(-10px);
+}
+
+.course-image {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.course-title {
+  font-size: 1.5rem;
+  color: #007bff;
+  margin-top: 15px;
+}
+
+.course-duration {
+  font-size: 0.9rem;
+  color: #888;
+  margin-bottom: 10px;
+}
+
+.course-description {
+  font-size: 1rem;
+  color: #555;
+}