Merge pull request #4 from she-code-africa/home-and-club-implementation

Home and club implementation

src/App.css

@@ -6,6 +6,10 @@
   box-sizing: border-box;
 }
 
+body {
+  font-family: "Mulish", sans-serif;
+}
+
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;

src/assets/images/index.jsx

@@ -13,6 +13,14 @@ import girlChild from "./activities/girlChild.png";
 import quotes from "./activities/Quotes.png";
 import roboticsHeroImage from "./activities/roboticHeroImage.png";
 import gameDevHeroImage from "./activities/gameDevHeroImage.png";
+import skillsVector from "./skills-vector.svg";
+import interactiveWorkshopImage from "./interactive-workshop.svg";
+import stemProjectsImage from "./stem-projects.svg";
+import codingBootcampImage from "./coding-bootcamp.svg";
+import homeHeroImage from "./home-page-hero-image.svg";
+import studentsImage from "./students.png";
+import clubStudentsImage from "./club-students.png";
+import floralWhiteImage from "./floral-white.svg";
 
 export {
   scaLogo,
@@ -30,4 +38,12 @@ export {
   quotes,
   roboticsHeroImage,
   gameDevHeroImage,
+  skillsVector,
+  interactiveWorkshopImage,
+  stemProjectsImage,
+  codingBootcampImage,
+  homeHeroImage,
+  studentsImage,
+  clubStudentsImage,
+  floralWhiteImage,
 };

src/components/accordion/index.jsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { RxCaretUp } from "react-icons/rx";
+
+const Accordion = ({ title, content }) => {
+  const [showContent, setShowContent] = useState(false);
+  return (
+    <div className="bg-white rounded-2xl p-3.5 lg:p-6">
+      <div className="flex justify-between items-center">
+        <p className="font-bold md:text-lg">{title}</p>
+        <RxCaretUp
+          size="1.25rem"
+          color="#B70569"
+          onClick={() => setShowContent(!showContent)}
+          className={`${showContent ? "" : "rotate-180"}`}
+        />
+      </div>
+      {showContent && (
+        <p className="mt-5 max-md:text-sm text-[#210D15]">{content}</p>
+      )}
+    </div>
+  );
+};
+
+export default Accordion;

src/components/cards/impact-stories-card/index.jsx

@@ -0,0 +1,20 @@
+const ImpactStoryCard = ({ image, name, school, story }) => {
+  return (
+    <div className="rounded-3xl first:ml-4 md:first:ml-6 last:mr-4 md:last:mr-6 odd:bg-[#F0F5FF] even:bg-[#FFF9EE] [&:nth-child(3n)]:bg-[#F5F6F7] min-w-[424px] space-y-6 min-h-[365px] pt-10">
+      <div className="flex w-10/12 mx-auto gap-4">
+        <img src={image} alt={name} className="rounded-full w-12 h-12" />
+        <div className="space-y-1">
+          <p className="font-medium text-[#061C3D] leading-6">{name}</p>
+          <p className="text-sm leading-5 text-[#42526B]">
+            Student of <span className="text-primaryPink">{school}</span>
+          </p>
+        </div>
+      </div>
+      <div className="w-10/12 mx-auto">
+        <p className="leading-[26px] text-[#061C3D]">{story}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ImpactStoryCard;

src/components/cards/schools/index.jsx

@@ -0,0 +1,23 @@
+import { RxCaretRight } from "react-icons/rx";
+import { studentsImage } from "../../../assets/images";
+
+const SchoolCard = () => {
+  return (
+    <div className="max-w-[400px] mb-4">
+      <img
+        src={studentsImage}
+        alt=""
+        className="w-full rounded-2xl rounded-b-none "
+      />
+      <div className="border-[0.96px] border-[#E6E8EC] border-t-0 rounded-2xl p-6 space-y-4 shadow">
+        <p className="text-[#210D15] font-bold md:text-xl">FGGC Abaji</p>
+        <p className="flex items-center text-primaryPink font-medium leading-[21px] hover:cursor-pointer">
+          Learn More
+          <RxCaretRight size="1.25rem" color="#B70569" className="mt-0.5" />
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default SchoolCard;

src/components/faq/index.jsx

@@ -0,0 +1,37 @@
+import { girlChild } from "../../assets/images";
+import { faqs } from "../../utils/appData";
+import Accordion from "../accordion";
+
+const FAQ = () => {
+  return (
+    <section className="bg-[#F8F8F8] py-6 my-14">
+      <div className="bg-white py-8">
+        <div className="bg-[#F8F8F8] py-16 max-xl:px-4">
+          <div className="container mx-auto grid md:grid-cols-2 gap-4 md:gap-6 lg:gap-4">
+            <div className="space-y-10 xl:w-10/12">
+              <h2 className="text-[28px] leading-10 md:text-3xl lg:text-[44px] lg:leading-[68px]">
+                <span className="font-bold">
+                  {" "}
+                  Curious about our STEM Initiative?{" "}
+                </span>
+                Get informed and empowered with our FAQs
+              </h2>
+              <img
+                src={girlChild}
+                alt="girl-child"
+                className="rounded-2xl h-60 w-full md:w-[420px] object-cover"
+              />
+            </div>
+            <div className="space-y-3 lg:space-y-6">
+              {faqs.map(({ title, content }) => (
+                <Accordion title={title} content={content} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FAQ;

src/components/header/index.jsx

@@ -0,0 +1,35 @@
+import { Link } from "react-router-dom";
+import FloraImg from "../../assets/images/floral.svg";
+import { homeHeroImage } from "../../assets/images";
+
+const Header = () => {
+  return (
+    <div className="bg-[#FFF7FC]">
+      <div className="flex py-6 md:py-4 container mx-auto max-md:flex-col justify-between max-xl:px-4">
+        <div className="max-w-[578px] space-y-2">
+          <div className="flex">
+            <h1 className="text-[40px] leading-[50px] lg:text-[56px] max-w-[530px] lg:leading-[72.8px] font-semibold">
+              Inspiring African girls to pursue careers in STEM
+            </h1>
+            <img src={FloraImg} alt="" className="self-end max-md:w-1/5" />
+          </div>
+          <p className="text-[#4B5563] md:text-lg lg:text-xl lg:leading-9 lg:tracking-[-1.5%] md:w-4/5 lg:w-full">
+            Clubs and workshops for secondary school girls across Africa to
+            explore STEM subjects in a fun and supportive environment.
+          </p>
+          <Link
+            to="/"
+            className="bg-[#B70569] w-[240px] max-sm:text-sm rounded-[30px] text-white py-[18px] mt-2 inline-block text-center"
+          >
+            Learn More{" "}
+          </Link>
+        </div>
+        <div className="max-md:hidden">
+          <img src={homeHeroImage} alt="" className="md:w-[850px] lg:w-fit" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

src/components/schools/index.jsx

@@ -0,0 +1,62 @@
+import Slider from "react-slick/lib/slider";
+import { InfoCardHeader } from "../shared-components";
+import {
+  InfoCustomNextArrows,
+  InfoCustomPrevArrows,
+} from "../shared-components/activities/custom-arrows";
+import SchoolCard from "../cards/schools";
+
+const Schools = () => {
+  const settings = {
+    arrows: true,
+    dots: false,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 3,
+    slidesToScroll: 3,
+    nextArrow: <InfoCustomNextArrows />,
+    prevArrow: <InfoCustomPrevArrows />,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 3,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+          initialSlide: 2,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
+
+  return (
+    <section className="mx-auto container px-4 my-10 md:my-20">
+      <InfoCardHeader
+        infoCardHeading="Schools We Have Visited"
+        infoCardParagraph="Since the inception of the STEM Club initiative, we have had the privilege of visiting several schools."
+      />
+      <div className="w-full mt-10 md:mt-14 ">
+        <Slider {...settings}>
+          {[...Array(6)].map((_, index) => (
+            <SchoolCard key={index} />
+          ))}
+        </Slider>
+      </div>
+    </section>
+  );
+};
+
+export default Schools;

src/components/shared-components/activities/activities-section/index.jsx

@@ -0,0 +1,34 @@
+import { clubActivities } from "../../../../utils/appData";
+import InfoCardHeader from "../info-card/InfoCardHeader";
+
+const ActivitiesSection = () => {
+  const ClubActivity = ({ title, img, description }) => {
+    return (
+      <div className="rounded-2xl md:max-w-[335px] w-full px-4 py-4 md:px-6 md:py-6 first:bg-[#F0F5FF] [&:nth-child(2)]:bg-[#FFF7FC] last:bg-[#F5F6F7]">
+        <img src={img} alt="" />
+        <div className="space-y-2 text-[#210D15]">
+          <p className="font-medium text-lg md:text-xl md:leading-[30px]">
+            {title}
+          </p>
+          <p className="text-sm leading-[22px]">{description}</p>
+        </div>
+      </div>
+    );
+  };
+  return (
+    <div className="container mx-auto mb-10 max-xl:px-4">
+      <InfoCardHeader
+        infoCardHeading="Our Club Activities"
+        infoCardParagraph="Since the inception of the STEM Club initiative, we have had the
+        privilege of visiting several schools, where we have:"
+      />
+
+      <div className="flex max-md:flex-col w-full justify-center gap-3 my-10">
+        {clubActivities.map((activity) => (
+          <ClubActivity {...activity} />
+        ))}
+      </div>
+    </div>
+  );
+};
+export default ActivitiesSection;

src/components/shared-components/stats/index.jsx

@@ -0,0 +1,22 @@
+import { stats } from "../../../utils/appData";
+
+const Stats = () => {
+  return (
+    <div className="border-b-4 border-r-4 border-[#B70569] w-full max-w-[95%] md:max-w-[80%] mx-auto my-10 rounded-2xl">
+      <div className="border-black border-[0.3px] py-6 rounded-xl max-md:px-4">
+        <div className=" flex justify-between max-w-xl mx-auto">
+          {stats.map(({ title, stat }) => (
+            <div className="text-center space-y-1">
+              <h2 className="text-[#B70569] font-bold text-2xl md:text-3xl lg:text-5xl">
+                {stat}
+              </h2>
+              <p className="text-xs md:text-xl">{title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Stats;

src/index.css

@@ -1,3 +1,20 @@
+@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+.stem-club-header {
+  background: url("./assets/images/stem-club-bg.svg");
+}