PCA-016 Catalog

package.json

@@ -11,11 +11,11 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.17.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^3.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.js

@@ -1,31 +1,14 @@
-import React from 'react';
-import { Route, Routes, useLocation } from "react-router-dom";
-import HomeNavbar from "./components/HomeHeader/HomeHeader";
-import PagesNavbar from "./components/PagesHeader/PagesHeader";
-import About from "./pages/About/About";
-import Contact from "./pages/Contact/Contact";
-import Courses from "./pages/Courses/Courses";
-import Enrollment from "./pages/Enrollment/Enrollment";
-import FAQs from "./pages/FAQs/FAQs";
-import HomePage from "./pages/HomePage/HomePage";
-import PageNotFound from "./pages/PageNotFound/PageNotFound";
-
-export default function App() {
-  const location = useLocation();
+import { Routes, Route } from "react-router-dom";
+import Navbar from "./components/Navbar/Navbar";
 
   return (
     <div>
-      {
-        location.pathname === '/' ? <HomeNavbar /> : <PagesNavbar />
-      }
       <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/enrollment" element={<Enrollment />} />
-        <Route path="/courses" element={<Courses />} />
-        <Route path="/about" element={<About />} />
-        <Route path="/contact" element={<Contact />} />
-        <Route path="/faqs" element={<FAQs />} />
-        <Route path="*" element={<PageNotFound />} />
+        <Navbar />
+        <Route path="/" element={ <HomePage /> } />
+        <Route path="/about" element={ <About /> } />
+        <Route path="/contact" element={ <Contact /> } />
+        <Route path="*" element={ <PageNotFound /> } />
       </Routes>
     </div>
   );

src/components/Catalog/catalog.css

@@ -0,0 +1,102 @@
+a {
+  text-decoration: none;
+}
+li {
+  list-style: none;
+}
+body {
+  font-family: "Montserrat", sans-serif;
+}
+/* Courses Catalog */
+.courses-catalog {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 30px;
+  padding: 20px 10%;
+}
+.catalog-content {
+  grid-column: span 12;
+  text-align: center;
+  /* margin-bottom: 20px; */
+}
+.catalog {
+  grid-column: span 3;
+}
+.course {
+  font-weight: 800;
+  font-size: 16px;
+  letter-spacing: 1.4px;
+}
+.course-explore {
+  font-size: 40px;
+  margin-bottom: 15px;
+  font-weight: 800;
+  color: #212121;
+}
+.course-text {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 26px;
+  letter-spacing: 1.6px;
+  color: #212121;
+}
+.yellow-text {
+  color: #ffca1a;
+}
+.catalog {
+  padding: 20px;
+  background: #f6f2f2;
+}
+.catalog-title {
+  margin: 15px 0;
+  font-size: 18px;
+  color: #212121;
+}
+.catalog-body {
+  line-height: 2em;
+  font-size: 14px;
+  font-weight: 500;
+  color: #424242;
+}
+.explore-catalog {
+  grid-column: span 12;
+  position: relative;
+}
+.explore {
+  position: absolute;
+  right: 0;
+  padding: 15px 40px;
+  background: #ffca1a;
+  border: 0;
+  border-radius: 58px;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 600;
+  color: #000;
+}
+@media (max-width: 1024px) {
+  .catalog {
+    grid-column: span 4;
+  }
+}
+@media (max-width: 768px) {
+  .courses-catalog {
+    padding: 20px 3%;
+  }
+  .catalog {
+    grid-column: span 6;
+  }
+  .catalog:hover {
+    transform: translate(-5px, -10px);
+  }
+}
+@media (max-width: 460px) {
+  .catalog {
+    grid-column: span 12;
+  }
+}
+@media (max-width: 350px) {
+  .courses-catalog {
+    padding: 20px 0;
+  }
+}

src/components/Catalog/catalog.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import "./catalogData.js";
+import "./catalog.css";
+import { catalog } from "./catalogData.js";
+const Catalog = () => {
+  return (
+    <div className="courses-catalog">
+      <div className="catalog-content">
+        <p className="course yellow-text">———— COURSES</p>
+        <h2 className="course-explore">Explore Our Course Catalog</h2>
+        <p className="course-text">
+          Discover a World of Possibilities. Our Comprehensive course catalog
+          covers a wide spectrum of topics, <br />
+          ensuring that you had the perfect fit for your career goals. Here's a
+          glimpse of what you can explore.
+        </p>
+      </div>
+
+      {catalog.map((catalog) => (
+        <div className="catalog" key={catalog.id}>
+          <img src={catalog.image} alt={catalog.alt} />
+          <h3 className="catalog-title">{catalog.title}</h3>
+          <p className="catalog-body">{catalog.body}</p>
+        </div>
+      ))}
+      <div className="explore-catalog">
+        <button className="explore">Explore All &rarr;</button>
+      </div>
+    </div>
+  );
+};
+
+export default Catalog;

src/components/Catalog/catalogData.js

@@ -0,0 +1,62 @@
+import database from "../../Images/database-icon.png";
+import smartphone from "../../Images/smartphone-icon.png";
+import code from "../../Images/code-icon.png";
+import layout from "../../Images/layout-icon.png";
+export const catalog = [
+  {
+    image: smartphone,
+    alt: "Web Development Icon",
+    title: "Web & Mobile Development",
+    body: "Master the art of web and mobile application development. Create dynamic, responsive websites and apps that leave a loating impressions.",
+    id: 1,
+  },
+  {
+    image: code,
+    alt: "Programming Icon",
+    title: "Programming Essential",
+    body: "Dive into the world of coding with our beginner-friendly programming courses. Learn the fundamental of popular programming languages and build a strong foundation.",
+    id: 2,
+  },
+  {
+    image: layout,
+    alt: "UI/UX Icon",
+    title: "UI/UX Design",
+    body: "Design user friendly interfaces and captivating user experiences. Develop the skills to enable desigs that resonate with users.",
+    id: 3,
+  },
+  {
+    image: database,
+    alt: "Data Analysis Icon",
+    title: "Data Analysis",
+    body: "Make data-driven decisions. Our data analysis courses will teach you how to extract insights frown data and drive business success",
+    id: 4,
+  },
+  {
+    image: database,
+    alt: "Data Analysis Icon",
+    title: "Data Analysis",
+    body: "Make data-driven decisions. Our data analysis courses will teach you how to extract insights frown data and drive business success",
+    id: 5,
+  },
+  {
+    image: layout,
+    alt: "Graphics Design Icon",
+    title: "Graphics Design",
+    body: "Design user friendly interfaces and captivating user experiences. Develop the skills to enable desigs that resonate with users.",
+    id: 6,
+  },
+  {
+    image: code,
+    alt: "Programming Icon",
+    title: "Programming Essential",
+    body: "Dive into the world of coding with our beginner-friendly programming courses. Learn the fundamental of popular programming languages and build a strong foundation.",
+    id: 7,
+  },
+  {
+    image: smartphone,
+    alt: "Mobile Development Icon",
+    title: "Web & Mobile Development",
+    body: "Master the art of web and mobile application development. Create dynamic, responsive websites and apps that leave a loating impressions.",
+    id: 8,
+  },
+];

src/components/Contact/Contact.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+import "./contact.css";
+const Contact = () => {
+  return (
+    <div>Contact Page</div>
+  )
+}