Feat: about page

src/APP/components/Caroussel.jsx

@@ -0,0 +1,34 @@
+function Caroussel({ CarousselData }) {
+  return (
+    <section className="pt-4 sm:pt-16 pb-10 mx-auto w-full max-w-screen-2xl pl-4 lg:pl-14 xl:pl-28">
+      <div
+        className="py-6 grid grid-cols-1 md:grid-cols-2 gap-8 overflow-x-auto scrollbar-hide"
+        style={{
+          gridTemplateColumns: "max-content",
+          gridTemplateRows: "minmax(250px, 300px)",
+          gridAutoFlow: "column",
+          gridAutoColumns: "max-content",
+        }}
+      >
+        {CarousselData.map(({ name, title, image }, index) => (
+          <div
+            key={index}
+            className="relative after:block after:relative after:-mt-36 after:h-36 after:w-full after:content-[''] after:z-0 after:rounded-br-lg after:rounded-bl-lg after:bg-[linear-gradient(180deg,_rgba(0,0,0,0)_0%,_rgba(0,0,0,0.5)_29.17%,_rgba(0,0,0,0.94)_97.92%)]"
+          >
+            <img
+              className="rounded-lg max-w-full h-auto"
+              src={image}
+              alt={name}
+            />
+            <div className="absolute -translate-x-2/4 -translate-y-1/4 left-2/4 top-3/4 text-white text-center z-10 font-medium w-3/5">
+              <p className="pb-2 text-xl">{name}</p>
+              <p className="text-base">{title}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default Caroussel;

src/APP/pages/aboutUs/AboutUs.jsx

@@ -1,9 +1,19 @@
-import React from 'react'
+import Header2 from "../../components/Header2";
+import HeroSection from "./sections/HeroSection";
+import LeadershipSection from "./sections/LeadershipSection";
+import MissionVisionSection from "./sections/MissionVisionSection";
+import PartnerCTA from "./sections/PartnerCTA";
+import Footer2 from "../../components/Footer2";
 
 function AboutUs() {
   return (
-    <div>AboutUs</div>
-  )
+    <div className="text-[#323433]">
+      <HeroSection />
+      <MissionVisionSection />
+      <LeadershipSection />
+      <PartnerCTA />
+    </div>
+  );
 }
 
-export default AboutUs
+export default AboutUs;

src/APP/pages/aboutUs/sections/HeroSection.jsx

@@ -0,0 +1,54 @@
+import AboutImg1 from "../../../../assets/images/aboutPage/about-img-1.png";
+import AboutImg2 from "../../../../assets/images/aboutPage/about-img-2.png";
+
+function HeroSection() {
+  return (
+    <div className="px-0 sm:px-14 xl:px-28 sm:m-auto max-w-screen-2xl">
+      <div className="md:bg-[#E5EFEC] md:border-solid md:border md:border-[#00664E] rounded-2xl relative md:pt-10 lg:pt-5 xl:pt-10 px-4 md:px-7 md:pb-14 lg:pb-7 xl:pb-14 mt-16 md:my-32 w-full md:w-[85%] min-h-96">
+        <div className="bg-[#E5EFEC] border-solid border border-[#00664E] md:border-none space-y-4 py-8 lg:py-0 pl-4 md:pl-0 mb-4 rounded-lg">
+          <h2 className="mt-3 text-[#009975] inline-flex items-center font-medium text-xl">
+            About us
+          </h2>
+          <h3 className="md:text-3xl text-md mb-4 font-semibold w-3/5 md:w-1/2 lg:w-3/5 xl:w-1/2 leading-6 md:leading-10">
+            A community of innovators, building a space for African tech
+            talents...
+          </h3>
+        </div>
+        <p className="leading-6 w-full md:w-1/2 text-base">
+          SpaceYaTech is a language and stack agnostic community of technology
+          enthusiasts with membership across Kenya, Tanzania, Nigeria and
+          pockets of Africa. We welcome techies from all backgrounds to build a
+          vibrant community of innovators of tech, users of tech and tech
+          evangelists.
+        </p>
+        <img
+          src={AboutImg1}
+          alt="space ya tech"
+          className="absolute -top-8 md:-top-24 lg:-top-8 xl:-top-28 right-0 md:-right-36 lg:-right-48 xl:-right-48 w-2/6 md:w-auto lg:w-[70%]"
+        />
+      </div>
+      <div className="flex flex-col md:flex-row justify-between items-center md:my-20 min-h-96 px-4 md:px-0">
+        <div className="my-10">
+          <img src={AboutImg2} alt="space ya tech" />
+        </div>
+        <div className="leading-6 md:w-1/2 text-base space-y-4 md:pl-10">
+          <p>
+            Our activities center around designing and building software and
+            hardware solutions for the most salient needs we see in the society,
+            through a unique open-source model that gets our community members
+            paid for their skills. SpaceYaTech also aims to develop capacity in
+            the fields of software development and design to help build the
+            future workforce and start-up founders in Africa.
+          </p>
+          <p>
+            We aim to be an inclusive community, where the contributions of
+            everyone who wishes to join and be part of a movement to transform
+            Africa through, can be appreciated and celebrated.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HeroSection;

src/APP/pages/aboutUs/sections/LeadershipSection.jsx

@@ -0,0 +1,104 @@
+import FredOuko from "../../../../assets/images/aboutPage/leadership/fred-ouko.png";
+import CatherineKiiru from "../../../../assets/images/aboutPage/leadership/catherine-kiiru.png";
+import JamesOtieno from "../../../../assets/images/aboutPage/leadership/james-otieno.png";
+import HudsonObai from "../../../../assets/images/aboutPage/leadership/hudson-obai.png";
+import IanMugenya from "../../../../assets/images/aboutPage/leadership/ian-mugenya.png";
+import MarlynMayienga from "../../../../assets/images/aboutPage/leadership/marlyn-mayienga.png";
+import SharonJebitok from "../../../../assets/images/aboutPage/leadership/sharon-jebitok.png";
+import WaithakaWaweru from "../../../../assets/images/aboutPage/leadership/waithaka-waweru.png";
+import JumaLawrence from "../../../../assets/images/aboutPage/leadership/juma-lawrence.png";
+import Caroussel from "../../../components/Caroussel";
+import BuildingCommunity from "../../../../assets/images/aboutPage/building-community.png";
+
+const LeadershipData = [
+  {
+    name: "Fred Ouko",
+    title: "Founder",
+    image: FredOuko,
+  },
+  {
+    name: "Catherine Kiiru",
+    title: "Dev Relations & Opensource Programs",
+    image: CatherineKiiru,
+  },
+  {
+    name: "James Otieno",
+    title: "Community Manager",
+    image: JamesOtieno,
+  },
+  {
+    name: "Hudson Obai",
+    title: "Head of Engineering",
+    image: HudsonObai,
+  },
+  {
+    name: "Ian Mugenya",
+    title: "Mentorship Program Lead",
+    image: IanMugenya,
+  },
+  {
+    name: "Marlyn Mayienga",
+    title: "Program Manager",
+    image: MarlynMayienga,
+  },
+  {
+    name: "Sharon Jebitok",
+    title: "Head of Chapters and Volunteers",
+    image: SharonJebitok,
+  },
+  {
+    name: "Waithaka Waweru",
+    title: "Dev Relations and Events",
+    image: WaithakaWaweru,
+  },
+  {
+    name: "Juma Lawrence",
+    title: "Head of Communication",
+    image: JumaLawrence,
+  },
+];
+
+function LeadershipSection() {
+  return (
+    <section className="pt-16 sm:pt-0 pb-10 mx-auto w-full max-w-screen-2xl">
+      <h1 className="md:text-3xl text-2xl font-semibold title-font text-[#323433] text-center">
+        Meet our leadership
+      </h1>
+
+      <Caroussel CarousselData={LeadershipData}/>
+
+      <div className="bg-[#E5EFEC] flex -mt-36 pt-40 pb-8 md:pb-24 px-4 lg:px-14 xl:px-28 justify-between flex-col md:flex-row">
+        <div className="space-y-4 md:w-1/2 mb-14">
+          <h2 className="text-[#009975] items-center text-xl">
+            Committed to building community
+          </h2>
+          <h3 className=" md:text-3xl text-2xl font-semibold text-gray-900 leading-8 md:leading-10">
+            We partner with like-minded organizations to build the workforce for
+            Africa’s transformation.
+          </h3>
+          <p className="leading-6 text-base md:mr-5">
+            We have narrowed our focus to do just one thing; building capacity
+            in tech. We partner with individuals, organizations and public
+            institutions to mentor and coach young people, between the ages of
+            18-35 in the technology skills they need to build the software that
+            power the world.
+          </p>
+          <p className="leading-6 text-base md:mr-5">
+            {" "}
+            We therefore focus our energies and resources on ensuring that those
+            getting in a tech career, and specifically IT, are directed to the
+            right resources, connected with the right people in industry for
+            mentorship and connected with job opportunities where they can earn
+            from their hard work.
+          </p>
+          <button className="font-semibold text-white bg-[#009975] border-0 py-3 px-8 w-full md:w-auto focus:outline-none rounded-lg text-lg">Partner with us</button>
+        </div>
+        <div className="md:w-1/2">
+          <img src={BuildingCommunity} alt="Space ya Tech Community"/>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default LeadershipSection;

src/APP/pages/aboutUs/sections/MissionVisionSection.jsx

@@ -0,0 +1,42 @@
+import MissionBg from "../../../../assets/images/aboutPage/mission-bg.png";
+import VisionBg from "../../../../assets/images/aboutPage/vision-bg.png";
+
+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`,
+          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>
+        <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`,
+          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>
+        <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
+          community members to level up their tech skills in the process.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default MissionVisionSection;

src/APP/pages/aboutUs/sections/PartnerCTA.jsx

@@ -0,0 +1,80 @@
+import AaronAbubakar from "../../../../assets/images/aboutPage/creativeTeam/aaron-abubakar.png";
+import PamelaOwino from "../../../../assets/images/aboutPage/creativeTeam/pamela-owino.png";
+import EmmyAkinyi from "../../../../assets/images/aboutPage/creativeTeam/emmy-akinyi.png";
+import TempPic from "../../../../assets/images/aboutPage/leadership/james-otieno.png";
+import {
+  facebook,
+  instagram,
+  linkedin,
+  twitter,
+} from "../../../../assets/images/socials";
+import Caroussel from "../../../components/Caroussel";
+
+const CreativeTeamData = [
+  {
+    name: "Emmy Akinyi",
+    title: "UX Team Lead",
+    image: EmmyAkinyi,
+  },
+  {
+    name: "Pamela Owino",
+    title: "Lead Product Designer",
+    image: PamelaOwino,
+  },
+  {
+    name: "Aaron Abubakar",
+    title: "Product Designer",
+    image: AaronAbubakar,
+  },
+  {
+    name: "Robert Okusi",
+    title: "Product Designer",
+    image: TempPic,
+  },
+  {
+    name: "Temitayo",
+    title: "Product Designer",
+    image: TempPic,
+  },
+];
+
+function PartnerCTA() {
+  return (
+    <section className="pt-16 pb-10 mx-auto w-full max-w-screen-2xl">
+      <h1 className="sm:text-3xl text-2xl font-semibold title-font text-[#323433] text-center">
+        The Creative Team
+      </h1>
+
+      <Caroussel CarousselData={CreativeTeamData}/>
+      <div className="flex flex-col sm:flex-row justify-between px-4 sm:px-28">
+        <div className="space-y-4 mb-8 sm:mb-0">
+          <h3 className="font-semibold text-md sm:text-xl">Our Reports</h3>
+          <p><a href="/" className="text-[#009975] text-sm sm:text-base">Annual SpaceYaTech  Report - 2022</a></p>
+          <p><a href="/" className="text-[#009975] text-sm sm:text-base">Mentorlst Leadership and Growth</a></p>
+        </div>
+        <div>
+          <h3 className="font-semibold">Follow us on social media </h3>
+          <div className="flex items-center w-1/2 justify-between sm:justify-between py-4">
+            <a href="/" target="_blank" rel="noopener noreferrer">
+              <img src={facebook} alt="facebook" className="w-7 h7" />
+            </a>
+
+            <a href="/" target="_blank" rel="noopener noreferrer">
+              <img src={instagram} alt="instagram" className="w-7 h7" />
+            </a>
+
+            <a href="/" target="_blank" rel="noopener noreferrer">
+              <img src={twitter} alt="twitter" className="w-7 h7" />
+            </a>
+
+            <a href="/" target="_blank" rel="noopener noreferrer">
+              <img src={linkedin} alt="linkedin" className="w-7 h7" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default PartnerCTA;