Merge pull request #13 from she-code-africa/final-changes

update(dummy data): replace all dummy data with provided content

src/components/accordion/index.jsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { RxCaretUp } from "react-icons/rx";
 
-const Accordion = ({ title, content }) => {
+const Accordion = ({ title, content, list }) => {
   const [showContent, setShowContent] = useState(false);
   return (
     <div className="bg-white rounded-2xl p-3.5 lg:p-6">
@@ -14,9 +14,19 @@ const Accordion = ({ title, content }) => {
           className={`${showContent ? "" : "rotate-180"}`}
         />
       </div>
-      {showContent && (
+      {showContent && list === false && (
         <p className="mt-5 max-md:text-sm text-[#210D15]">{content}</p>
       )}
+
+      {showContent && list === true && (
+        <ol className="mt-5 mx-6 max-md:text-sm text-[#210D15]">
+          {content.map((item, i) => (
+            <li key={i} className="list-decimal">
+              {item}
+            </li>
+          ))}
+        </ol>
+      )}
     </div>
   );
 };

src/components/activities/coding-page/index.jsx

@@ -17,6 +17,7 @@ import {
   getAllActivities,
 } from "../../../services/queries";
 import { ApiLoading, EmptyResponse } from "../../index";
+import { codingHeroSubContent } from "../../../utils/appData";
 
 const CodingPageComponent = () => {
   const {
@@ -57,14 +58,13 @@ const CodingPageComponent = () => {
           complete beginner or looking to sharpen your skills, our workshops
           offer something for everyone."
             heroImage={codingHeroImage}
+            subContent={codingHeroSubContent}
           />
           <div className="my-16 lg:my-20 ">
             <section className="w-full">
               <InfoCardHeader
-                infoCardHeading="start coding today!"
-                infoCardParagraph="Our mission is to create more awareness and inspire girls in secondary
-        schools aged 10 - 21 to pursue careers in Science, Technology,
-        Engineering, and Mathematics (STEM)."
+                infoCardHeading="Resources"
+                infoCardParagraph=""
               />
               {isCoursesLoading ? (
                 <ApiLoading />

src/components/activities/game-development/index.jsx

@@ -17,6 +17,7 @@ import {
   getAllActivities,
 } from "../../../services/queries";
 import { ApiLoading, EmptyResponse } from "../../index";
+import { gameDevelopmentHeroSubContent } from "../../../utils/appData";
 
 const GameDevelopmentPage = () => {
   const {
@@ -52,15 +53,11 @@ const GameDevelopmentPage = () => {
           heroHeading="The Game Development Hub!"
           heroParagraph="Unleash your creativity and start building your own games. Whether you're a beginner or looking to advance your skills, we have the resources you need to become a game developer."
           heroImage={gameDevHeroImage}
+          subContent={gameDevelopmentHeroSubContent}
         />
         <div className="my-16 lg:my-20">
           <section className="w-full">
-            <InfoCardHeader
-              infoCardHeading="start coding today!"
-              infoCardParagraph="Our mission is to create more awareness and inspire girls in secondary
-        schools aged 10 - 21 to pursue careers in Science, Technology,
-        Engineering, and Mathematics (STEM)."
-            />
+            <InfoCardHeader infoCardHeading="Resources" infoCardParagraph="" />
             {isCoursesLoading ? (
               <ApiLoading />
             ) : activityCourses.length > 0 ? (

src/components/activities/robotics/index.jsx

@@ -17,6 +17,7 @@ import {
   getAllActivities,
 } from "../../../services/queries";
 import { ApiLoading, EmptyResponse } from "../../index";
+import { roboticsHeroSubContent } from "../../../utils/appData";
 
 const RoboticsPageComponent = () => {
   const {
@@ -53,15 +54,11 @@ const RoboticsPageComponent = () => {
           heroHeading="Unlock Your Robotics Potential"
           heroParagraph="Dive into the fascinating world of robotics. Whether you're a novice or looking to advance your knowledge, we provide the resources you need to start building and programming robots."
           heroImage={roboticsHeroImage}
+          subContent={roboticsHeroSubContent}
         />
         <div className="my-16 lg:my-20">
           <section className="w-full">
-            <InfoCardHeader
-              infoCardHeading="start coding today!"
-              infoCardParagraph="Our mission is to create more awareness and inspire girls in secondary
-        schools aged 10 - 21 to pursue careers in Science, Technology,
-        Engineering, and Mathematics (STEM)."
-            />
+            <InfoCardHeader infoCardHeading="Resources" infoCardParagraph="" />
 
             {isCoursesLoading ? (
               <ApiLoading />

src/components/faq/index.jsx

@@ -21,12 +21,17 @@ const FAQ = () => {
               <img
                 src={faqImage}
                 alt="girl-child"
-                className="rounded-2xl h-60 w-full md:w-[420px] object-cover cursor-pointer"
+                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 }, i) => (
-                <Accordion title={title} content={content} key={i} />
+              {faqs.map(({ title, content, list }, i) => (
+                <Accordion
+                  title={title}
+                  content={content}
+                  key={i}
+                  list={list}
+                />
               ))}
 
               <div className="flex justify-end">

src/components/shared-components/activities/HeroComponent.jsx

@@ -1,7 +1,12 @@
 import React from "react";
 import { cpu, flower } from "../../../assets/images";
 
-const HeroComponent = ({ heroHeading, heroParagraph, heroImage }) => {
+const HeroComponent = ({
+  heroHeading,
+  heroParagraph,
+  heroImage,
+  subContent,
+}) => {
   return (
     <div className="w-full flex flex-col md:flex-row mt-12 gap-10 lg:gap-20 md:items-center md:justify-between">
       <article className="w-full md:max-w-[619px]">
@@ -12,19 +17,23 @@ const HeroComponent = ({ heroHeading, heroParagraph, heroImage }) => {
           {heroParagraph}
         </p>
 
-        <div className="flex items-center w-full max-w-[536px] mx-auto md:mx-0 bg-lavender p-4 lg:p-6 gap-5 rounded-lg md:rounded-2xl mt-7 lg:mt-14">
+        <div className="flex w-full max-w-[536px] mx-auto md:mx-0 bg-lavender p-4 lg:p-6 gap-5 rounded-lg md:rounded-2xl mt-7 lg:mt-14">
           <figure className="h-[25px] w-[25px] md:h-[40px] md:w-[40px]">
             <img src={cpu} alt="cpu-logo" className="w-full h-full" />
           </figure>
 
           <article className="w-fit">
             <h4 className="text-base md:text-lg font-semibold capitalize">
-              comprehensive curriculum
+              Get Started Today!
             </h4>
 
-            <p className="mt-1 text-astronaut text-sm">
-              From the basics to advanced topics.
-            </p>
+            <ul className="mt-1 text-astronaut text-sm mx-6">
+              {subContent.map((item, i) => (
+                <li className="list-disc leading-normal" key={i}>
+                  {item}
+                </li>
+              ))}
+            </ul>
           </article>
         </div>
       </article>

src/pages/home/page.jsx

@@ -7,6 +7,7 @@ import { skillsVector, girlChild } from "../../assets/images";
 import FAQ from "../../components/faq";
 import { activities } from "../../utils/appData";
 import TestimonialsSlider from "../../components/activities/coding-page/TestimonialsSlider";
+import { Link } from "react-router-dom";
 
 const HomePage = () => {
   return (
@@ -16,9 +17,7 @@ const HomePage = () => {
       <section className="w-[90%] max-w-[1280px] mx-auto">
         <InfoCardHeader
           infoCardHeading="Program Mission"
-          infoCardParagraph="Our mission is to create more awareness and inspire girls in secondary
-          schools aged 10 - 21 to pursue careers in Science, Technology,
-          Engineering, and Mathematics (STEM)."
+          infoCardParagraph="Our mission is to create more awareness and inspire girls in secondary schools, across Africa, aged 10 - 21 to pursue careers in Science, Technology, Engineering, and Mathematics (STEM)."
         />
       </section>
       <section
@@ -42,16 +41,18 @@ const HomePage = () => {
           <div className="my-6 flex max-md:flex-col gap-7 md:gap-6 lg:gap-10 justify-center md:justify-start lg:justify-center  md:overflow-x-auto xl:overflow-hidden no-scrollbar">
             {activities.map((activity, i) => (
               <div className="text-fiord" key={i}>
-                <img
-                  src={activity.image}
-                  alt=""
-                  className="w-fit md:max-w-xs"
-                />
-                <div>
-                  <p className="text-lg md:text-2xl my-3 font-semibold">
-                    {activity.title}
-                  </p>
-                </div>
+                <Link to={activity.link}>
+                  <img
+                    src={activity.image}
+                    alt=""
+                    className="w-fit md:max-w-xs"
+                  />
+                  <div>
+                    <p className="text-lg md:text-2xl my-3 font-semibold">
+                      {activity.title}
+                    </p>
+                  </div>
+                </Link>
               </div>
             ))}
           </div>

src/utils/appData.js

@@ -224,19 +224,19 @@ export const clubActivities = [
   {
     title: "Interactive workshops",
     description:
-      "Etiam sed vulputate nisl, eu elementum arcu. Vivamus dignissim tortor in tellus dictum pellentesque. ",
+      "We offer interactive workshops and guided learning sessions for girls aged 10 to 21 in a supportive environment.",
     img: interactiveWorkshopImage,
   },
   {
     title: "Collaborative STEM projects",
     description:
-      "Etiam sed vulputate nisl, eu elementum arcu. Vivamus dignissim tortor in tellus dictum pellentesque. ",
+      "Our projects invite girls aged 10 to 21 to participate in collaborative STEM activities, offering hands-on learning experiences.",
     img: stemProjectsImage,
   },
   {
     title: "Coding bootcamps",
     description:
-      "Etiam sed vulputate nisl, eu elementum arcu. Vivamus dignissim tortor in tellus dictum pellentesque. ",
+      "Dive into our coding bootcamps, where girls aged 10 to 21 can engage in interactive and hands-on learning experiences.",
     img: codingBootcampImage,
   },
 ];
@@ -245,37 +245,66 @@ export const activities = [
   {
     title: "Coding",
     image: codingHeroImage,
+    link: "/activities/coding",
   },
   {
     title: "Game Development",
     image: gameDevHeroImage,
+    link: "/activities/game-development",
   },
   {
     title: "Robotics (Arduino, Raspberry Pi)",
     image: roboticsHeroImage,
+    link: "/activities/robotics",
   },
 ];
 
+export const codingHeroSubContent = [
+  "New to coding? Our beginner's guide will help you get started",
+  "Need inspiration? Browse our STEM club creations",
+  "Stuck on a project? Ask our experts and mentors for support (Add form for enquiries)",
+];
+
+export const gameDevelopmentHeroSubContent = [
+  "New to game development? Our beginner's guide will help you get started",
+  "Need inspiration? Browse our STEM club creations",
+  "Stuck on a project? Ask our experts and mentors for support",
+];
+
+export const roboticsHeroSubContent = [
+  "New to robotics? Our beginner's guide will help you get started",
+  "Need inspiration? Browse our STEM club creations",
+  "Stuck on a project? Ask our experts and mentors for support",
+];
+
 export const faqs = [
   {
     title: "What is the SheCodeAfrica STEM-A-GIRL Program about?",
     content:
       "The She Code Africa STEM-A-Girl Program is an initiative aimed at empowering girls to pursue careers in Science, Technology, Engineering, and Math (STEM).",
+    list: false,
   },
   {
     title: "Who can join the STEM Club?",
     content:
-      " Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam veritatis sint voluptate voluptatibus nesciunt voluptas cumque quod itaque inventore tempore. Reiciendis molestiae eligendi laboriosam? Quaerat, repudiandae possimus. Laborum, atque nam!",
+      "The STEM Club is open to African girls aged 10 - 21, regardless of grade level. The club is designed to be inclusive and welcoming to female secondary students of all backgrounds and interests.",
+    list: false,
   },
   {
     title: "What kind of activities can I expect?",
-    content:
-      " Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam veritatis sint voluptate voluptatibus nesciunt voluptas cumque quod itaque inventore tempore. Reiciendis molestiae eligendi laboriosam? Quaerat, repudiandae possimus. Laborum, atque nam!",
+    content: [
+      "Hands-on STEM activities, such as building robots, creating coding projects, and conducting science experiments.",
+      "Workshops led by industry professionals and educators.",
+      "Opportunities to participate in STEM competitions and events.",
+      "Collaborative projects and team-building activities.",
+    ],
+    list: true,
   },
   {
     title: "Do I need prior experience in STEM?",
     content:
-      " Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam veritatis sint voluptate voluptatibus nesciunt voluptas cumque quod itaque inventore tempore. Reiciendis molestiae eligendi laboriosam? Quaerat, repudiandae possimus. Laborum, atque nam!",
+      "No prior experience in STEM is necessary to join the club. She Code Africa’s STEM club is designed to be accessible and engaging for female students of all skill levels aged 10 - 21. Club members will have the opportunity to learn and develop STEM skills in a supportive and encouraging environment.",
+    list: false,
   },
 ];