Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Dev #96

Merged
merged 9 commits into from
Jan 3, 2024
Merged

Update Dev #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0808c8f
-
Ase020 Dec 28, 2023
63ba81e
complete merge?
Ase020 Jan 2, 2024
c2868dc
remove and refactor code
Ase020 Jan 2, 2024
d2193fb
import useQuery
Ase020 Jan 2, 2024
bfd9ab8
make navlinks active
Ase020 Jan 2, 2024
e1b9ca9
delete NavLink component
Ase020 Jan 2, 2024
ccbc595
set max-width on pages
Ase020 Jan 2, 2024
9cafd7e
Merge branch 'main' into code-refactor-2
Ase020 Jan 3, 2024
8aea0a3
Merge pull request #95 from SpaceyaTech/code-refactor-2
JimmyTron Jan 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
772 changes: 468 additions & 304 deletions src/ADMIN/pages/events/AddEventPage.jsx
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 7 additions & 3 deletions src/APP/components/Footer2.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}
Expand Down
197 changes: 76 additions & 121 deletions src/APP/components/Header2.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 */}
Expand All @@ -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>
);
Expand Down
15 changes: 8 additions & 7 deletions src/APP/components/PodcastCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -27,4 +27,5 @@ PodcastCard.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
link: PropTypes.string.isRequired,
category: PropTypes.string.isRequired,
};
2 changes: 1 addition & 1 deletion src/APP/pages/aboutUs/AboutUs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function AboutUs() {
}, []);

return (
<div className="text-[#323433]">
<div className="text-[#323433] max-w-[1440px] mx-auto">
<HeroSection />
<MissionVisionSection />
<LeadershipSection />
Expand Down
17 changes: 7 additions & 10 deletions src/APP/pages/aboutUs/sections/MissionVisionSection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Loading
Loading