Update Dev (#96)

* - * remove and refactor code * import useQuery * make navlinks active * delete NavLink component * set max-width on pages --------- Co-authored-by: felixNyalenda <[email protected]> Co-authored-by: Jimmy Oty <[email protected]>
SpaceyaTech · Jan 3, 2024 · ac38a8d · ac38a8d
1 parent 3fbbc89
commit ac38a8d
Show file tree

Hide file tree

Showing 28 changed files with 1,059 additions and 1,276 deletions.
diff --git a/src/ADMIN/pages/events/AddEventPage.jsx b/src/ADMIN/pages/events/AddEventPage.jsx
diff --git a/src/APP/components/Footer2.jsx b/src/APP/components/Footer2.jsx
@@ -2,15 +2,19 @@ import React from "react";
 import { Link } from "react-router-dom";
 import logo from "../../assets/images/sytLogo.png";
 // import backup from "../../assets/images/backup.svg";
-import { linkedin, twitter, spotify } from "../../assets/images/socials";
-import youtube from "../../assets/images/socials/youtube.svg";
+import {
+  linkedin,
+  twitter,
+  spotify,
+  youtube,
+} from "../../assets/images/socials";
 
 function Footer2() {
   const now = new Date();
   const year = now.getFullYear();
 
   return (
-    <footer className="bg-[#252533] text-white md:p-12 py-8 px-4 relative">
+    <footer className="bg-[#252533] text-white md:p-12 py-8 px-4 relative max-w-[1440px] mx-auto">
       <div className="flex md:flex-row flex-col md:gap-16 gap-8 ">
         <div className="flex-3 flex flex-col md:items-center items-start">
           {/* logo */}

diff --git a/src/APP/components/Header2.jsx b/src/APP/components/Header2.jsx
@@ -1,12 +1,57 @@
-import logo from "../../assets/images/sytLogo.png";
 import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
 
+import logo from "../../assets/images/sytLogo.png";
 import menu from "../../assets/images/hamburger-menu.svg";
-import { Link } from "react-router-dom";
+
+const navLinks = [
+  {
+    id: 1,
+    link: "Home",
+    route: "/",
+  },
+  {
+    id: 2,
+    link: "About Us",
+    route: "/about-us",
+  },
+  {
+    id: 3,
+    link: "Community",
+    route: "/community",
+  },
+  {
+    id: 4,
+    link: "Products",
+    route: "/products",
+  },
+  // {
+  //   id: 5,
+  //   link: "Blogs",
+  //   route: "/blogs",
+  // },
+  // {
+  //   id: 6,
+  //   link: "Resources",
+  //   route: "/resources",
+  // },
+  // {
+  //   id: 7,
+  //   link: "Shop",
+  //   route: "/shop",
+  // },
+  // {
+  //   id: 8,
+  //   link: "Donate",
+  //   route: "/donate",
+  // },
+];
 
 const Header2 = () => {
   const [showNavlinks, setShowNavlinks] = useState(false);
 
+  const { pathname } = useLocation();
+
   return (
     <header className="py-5 md:px-10 px-5 flex items-center justify-between md:shadow-none shadow-md relative max-w-[1440px] md:mx-auto">
       {/* logo */}
@@ -31,129 +76,39 @@ const Header2 = () => {
             : { display: "none" }
         }
       >
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/"
-          onClick={() => setShowNavlinks(false)}
-        >
-          Home
-        </Link>
-
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/about-us"
-          onClick={() => setShowNavlinks(false)}
-        >
-          About Us
-        </Link>
-
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/community"
-          onClick={() => setShowNavlinks(false)}
-        >
-          Community
-        </Link>
-
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/products"
-          onClick={() => setShowNavlinks(false)}
-        >
-          Products
-        </Link>
-
-        {/*
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/blogs"
-          onClick={() => setShowNavlinks(false)}
-        >
-          Blog
-        </Link>
-
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/resources"
-          onClick={() => setShowNavlinks(false)}
-        >
-          Resources
-        </Link>
-
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/shop"
-          onClick={() => setShowNavlinks(false)}
-        >
-          Shop
-        </Link>
-
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/donate"
-          onClick={() => setShowNavlinks(false)}
-        >
-          Donate
-        </Link> */}
+        {navLinks.map(({ link, id, route }) => {
+          const isActive = pathname === route;
+          return (
+            <Link
+              key={id}
+              className={`${
+                isActive ? "text-[#009975] underline" : "text-gray-900"
+              } hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer`}
+              to={`${route}`}
+              onClick={() => setShowNavlinks(false)}
+            >
+              {link}
+            </Link>
+          );
+        })}
       </nav>
 
       {/* navlinks */}
       <nav className="md:flex hidden items-center gap-5 text-base">
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline focus:text-[#009975] focus:underline transition-all duration-300 cursor-pointer"
-          to="/"
-        >
-          Home
-        </Link>
-
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/about-us"
-        >
-          About Us
-        </Link>
-
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/community"
-        >
-          Community
-        </Link>
-
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/products"
-        >
-          Products
-        </Link>
-
-        {/*
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/blogs"
-        >
-          Blog
-        </Link>
-
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/resources"
-        >
-          Resources
-        </Link>
-
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/shop"
-        >
-          Shop
-        </Link>
-        <Link
-          className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
-          to="/donate"
-        >
-          Donate
-        </Link> */}
+        {navLinks.map(({ id, link, route }) => {
+          const isActive = pathname === route;
+          return (
+            <Link
+              key={id}
+              className={`${
+                isActive ? "text-[#009975] underline" : "text-gray-900"
+              } hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer`}
+              to={`${route}`}
+            >
+              {link}
+            </Link>
+          );
+        })}
       </nav>
     </header>
   );

diff --git a/src/APP/components/PodcastCard.jsx b/src/APP/components/PodcastCard.jsx
@@ -3,17 +3,17 @@ import PropTypes from "prop-types";
 
 function PodcastCard({ img, category = "Podcast", title, description, link }) {
   return (
-    <a href={link} target="_blank" rel="noopener noreferrer">
-      <div className="w-[95vw] md:w-[450px] h-[500px] rounded-md overflow-hidden relative">
-        <img src={img} alt="podcast" className="w-full h-full object-cover" />
-        <div className="absolute bottom-0 left-0 right-0 bg-black opacity-80 h-2/5 md:h-2/5" />
+    <a href={link} target="_blank" rel="noopener noreferrer" className="h-fit">
+      <div className="w-[85vw] md:w-[350px] h-[380px] mx-4 rounded-md overflow-hidden relative">
+        <img src={img} alt={title} className="w-full h-full object-cover" />
+        <div className="absolute bottom-0 left-0 right-0 bg-black opacity-80 h-1/2" />
 
-        <div className="absolute bottom-0 inset-x-0 text-white flex flex-col gap-3 px-6 py-4">
+        <div className="absolute bottom-0 inset-x-0 text-white flex flex-col gap-2 px-6 py-4">
           <h5 className="text-[#009975] font-medium text-xs md:text-sm capitalize">
             {category}
           </h5>
-          <h3 className="font-semibold text-base md:text-xl">{title}</h3>
-          <p className="font-normal text-sm md:text-base">{description}</p>
+          <h3 className="font-semibold text-base">{title}</h3>
+          <p className="font-normal text-sm">{description}</p>
         </div>
       </div>
     </a>
@@ -27,4 +27,5 @@ PodcastCard.propTypes = {
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   link: PropTypes.string.isRequired,
+  category: PropTypes.string.isRequired,
 };
diff --git a/src/APP/pages/aboutUs/AboutUs.jsx b/src/APP/pages/aboutUs/AboutUs.jsx
@@ -13,7 +13,7 @@ function AboutUs() {
   }, []);
 
   return (
-    <div className="text-[#323433]">
+    <div className="text-[#323433] max-w-[1440px] mx-auto">
       <HeroSection />
       <MissionVisionSection />
       <LeadershipSection />

diff --git a/src/APP/pages/aboutUs/sections/MissionVisionSection.jsx b/src/APP/pages/aboutUs/sections/MissionVisionSection.jsx
@@ -1,34 +1,31 @@
-import MissionBg from "../../../../assets/images/aboutPage/mission-bg.png";
-import VisionBg from "../../../../assets/images/aboutPage/vision-bg.png";
+import React from "react";
+
+import { mission, vision } from "../../../../assets/images/aboutPage";
 
 function MissionVisionSection() {
   return (
     <div className="flex flex-col md:flex-row mx-4 my-8 sm:my-2 md:m-auto px-0 sm:px-14 xl:px-28 min-h-[24rem] md:pb-16 text-center justify-between max-w-screen-2xl">
       <div
         style={{
-          background: `url(${MissionBg}) no-repeat center`,
+          background: `url(${mission}) no-repeat center`,
           backgroundSize: "contain",
         }}
         className="md:w-[45%] pt-6 md:pt-20 mb-10 md:mb-0 h-[200px] md:h-auto"
       >
-        <h2 className="text-2xl font-semibold title-font my-4">
-          Our Mission
-        </h2>
+        <h2 className="text-2xl font-semibold title-font my-4">Our Mission</h2>
         <p className="m-auto w-[85%] sm:w-[65%] lg:w-[85%] ">
           To help 10,000 young Africans to transition to tech in the next three
           years by being a pool of resources, mentorship and capacity building.
         </p>
       </div>
       <div
         style={{
-          background: `url(${VisionBg}) no-repeat center`,
+          background: `url(${vision}) no-repeat center`,
           backgroundSize: "contain",
         }}
         className="md:w-[45%] pt-2 md:pt-20 h-[200px] md:h-auto"
       >
-        <h2 className="text-2xl font-semibold title-font my-4 ">
-          Our Vision
-        </h2>
+        <h2 className="text-2xl font-semibold title-font my-4 ">Our Vision</h2>
         <p className="m-auto w-[95%] sm:w-[65%] lg:w-[95%]">
           To be the best tech community, focused on innovation and actually
           leveraging on technology to build solutions for Africa and to help our