Merge pull request #6 from she-code-africa/fix-footer-issues

Fix footer issues

.gitignore

@@ -17,8 +17,10 @@
 .env.development.local
 .env.test.local
 .env.production.local
-.env
+
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

src/components/faq/index.jsx

@@ -5,9 +5,9 @@ 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="py-8">
+        <div className="bg-[#F8F8F8] py-16">
+          <div className="w-[90%] max-w-[1280px] 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">

src/components/footer/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { scaLogo } from "../../assets/images";
 import { Link } from "react-router-dom";
 import { aboutUsLinks, communityLinks } from "../../utils/appData";
@@ -9,8 +9,10 @@ import {
   FaInstagram,
   FaTwitter,
 } from "react-icons/fa6";
+import { NewsLetter } from "../modals";
 
 const Footer = () => {
+  const [showNewsLetterModal, setShowNewsLetterModal] = useState(false);
   return (
     <section className="bg-whiteSmoke w-full font-libreFranklin">
       <div className="w-[90%] mx-auto max-w-[1280px] md:flex md:items-center md:justify-between pt-10 pb-8 md:pt-20">
@@ -40,73 +42,89 @@ const Footer = () => {
               community
             </h2>
             <ul className="flex flex-col gap-5">
-              {communityLinks.map((menu, i) => (
-                <li
-                  className="text-base font-normal hover:text-primaryPink"
-                  key={i}
-                >
-                  <Link to={menu.path}>{menu.pathname}</Link>
-                </li>
-              ))}
+              {communityLinks.map((menu, i) => {
+                return !menu.isNewsLetter ? (
+                  <li
+                    className="text-base font-normal hover:text-primaryPink"
+                    key={i}
+                  >
+                    <Link to={menu.path}>{menu.pathname}</Link>
+                  </li>
+                ) : (
+                  <li
+                    className="text-base font-normal hover:text-primaryPink"
+                    key={i}
+                  >
+                    <button onClick={() => setShowNewsLetterModal(true)}>
+                      {menu.pathname}
+                    </button>
+                  </li>
+                );
+              })}
             </ul>
 
-            <ul className="mt-5 flex items-center gap-4">
-              <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
-                <Link
-                  to="https://www.linkedin.com/company/she-code-africa/"
-                  title="Follow us on Linkedin"
-                  target="_blank"
-                  rel="noreferrer"
-                  className=" text-white"
-                >
-                  <FaLinkedinIn />
-                </Link>
-              </li>
-              <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
-                <Link
-                  to="https://www.facebook.com/shecodeafrica/"
-                  title="Follow us on Facebook"
-                  target="_blank"
-                  rel="noreferrer"
-                  className=" text-white"
-                >
-                  <FaFacebookF />
-                </Link>
-              </li>
-              <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
-                <Link
-                  to="https://www.youtube.com/channel/UCNZzVEyJege5-d_ekKw6dFA"
-                  title="Subscribe to our Youtube channel"
-                  target="_blank"
-                  rel="noreferrer"
-                  className=" text-white"
-                >
-                  <FaYoutube />
-                </Link>
-              </li>
-              <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
-                <Link
-                  to="https://www.instagram.com/shecodeafrica/"
-                  title="Follow us on Instagram"
-                  target="_blank"
-                  rel="noreferrer"
-                  className=" text-white"
-                >
-                  <FaInstagram />
-                </Link>
-              </li>
-              <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
-                <Link
-                  to="https://www.twitter.com/shecodeafrica/"
-                  title="Follow us on Twitter"
-                  target="_blank"
-                  rel="noreferrer"
-                  className=" text-white"
-                >
-                  <FaTwitter />
-                </Link>
-              </li>
-            </ul>
+            <div className="mt-5">
+              <h3 className="text-base font-normal">
+                Follow Us On Social Media
+              </h3>
+              <ul className="mt-5 flex items-center gap-4">
+                <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
+                  <Link
+                    to="https://www.linkedin.com/company/she-code-africa/"
+                    title="Follow us on Linkedin"
+                    target="_blank"
+                    rel="noreferrer"
+                    className=" text-white"
+                  >
+                    <FaLinkedinIn />
+                  </Link>
+                </li>
+                <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
+                  <Link
+                    to="https://www.facebook.com/shecodeafrica/"
+                    title="Follow us on Facebook"
+                    target="_blank"
+                    rel="noreferrer"
+                    className=" text-white"
+                  >
+                    <FaFacebookF />
+                  </Link>
+                </li>
+                <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
+                  <Link
+                    to="https://www.youtube.com/channel/UCNZzVEyJege5-d_ekKw6dFA"
+                    title="Subscribe to our Youtube channel"
+                    target="_blank"
+                    rel="noreferrer"
+                    className=" text-white"
+                  >
+                    <FaYoutube />
+                  </Link>
+                </li>
+                <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
+                  <Link
+                    to="https://www.instagram.com/shecodeafrica/"
+                    title="Follow us on Instagram"
+                    target="_blank"
+                    rel="noreferrer"
+                    className=" text-white"
+                  >
+                    <FaInstagram />
+                  </Link>
+                </li>
+                <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
+                  <Link
+                    to="https://www.twitter.com/shecodeafrica/"
+                    title="Follow us on Twitter"
+                    target="_blank"
+                    rel="noreferrer"
+                    className=" text-white"
+                  >
+                    <FaTwitter />
+                  </Link>
+                </li>
+              </ul>
+            </div>
           </article>
         </div>
       </div>
@@ -116,6 +134,10 @@ const Footer = () => {
           All rights reserved. She Code Africa 2024.
         </p>
       </div>
+
+      {showNewsLetterModal && (
+        <NewsLetter setShowNewsLetterModal={setShowNewsLetterModal} />
+      )}
     </section>
   );
 };

src/components/header/index.jsx

@@ -5,7 +5,7 @@ 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=" w-[90%] max-w-[1280px] 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">

src/components/modals/NewsLetter.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { FaTimesCircle } from "react-icons/fa";
+import { PrimaryInput } from "../index";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+const NewsLetter = ({ setShowNewsLetterModal }) => {
+  const schema = yup
+    .object({
+      fullName: yup.string().required("Please enter your name"),
+      email: yup
+        .string()
+        .email("Please enter a valid email address.")
+        .required("Please enter your email address."),
+      description: yup.string().required("Please enter your message."),
+    })
+    .required();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(schema),
+  });
+  const onsubmit = (data) => console.log(data);
+  return (
+    <section className="fixed bg-[rgba(0,0,0,0.5)] top-0 bottom-0 left-0 right-0 z-[3] flex items-center justify-center py-5">
+      <div className="bg-white max-w-[500px] w-[90%] mx-auto py-4 px-4">
+        <article className="border-2 border-primaryPink p-5">
+          <div className="flex justify-end">
+            <button
+              className="text-2xl text-[rgba(156,163,175,1)]"
+              onClick={() => setShowNewsLetterModal(false)}
+            >
+              <FaTimesCircle />
+            </button>
+          </div>
+
+          <h3 className="leading-normal text-xl md:text-2xl md:leading-normal mt-5 text-primaryPink font-semibold capitalize">
+            subscribe to our newsletter
+          </h3>
+
+          <p className="my-4 text-base leading-normal font-medium">
+            Sign up to get the latest news and updates.
+          </p>
+
+          <form className="my-4 w-full" onSubmit={handleSubmit(onsubmit)}>
+            <PrimaryInput
+              register={register}
+              label="name"
+              name="fullName"
+              placeholder="Enter your full name"
+              type="text"
+              errors={errors.fullName}
+            />
+            <PrimaryInput
+              register={register}
+              label="email address"
+              name="email"
+              placeholder="Enter your email address"
+              type="email"
+              errors={errors.email}
+            />
+
+            <div className="my-5 mx-auto w-full max-w-[177px] rounded-[30px] h-[56px] overflow-hidden bg-primaryPink">
+              <button className="w-full h-full text-white capitalize">
+                sign up
+              </button>
+            </div>
+          </form>
+        </article>
+      </div>
+    </section>
+  );
+};
+
+export default NewsLetter;

src/components/modals/index.jsx

@@ -0,0 +1,3 @@
+import NewsLetter from "./NewsLetter";
+
+export { NewsLetter };

src/pages/home/page.jsx

@@ -13,7 +13,7 @@ const HomePage = () => {
     <GlobalLayout>
       <Header />
       <Stats />
-      <section className="max-sm:px-2">
+      <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
@@ -22,7 +22,7 @@ const HomePage = () => {
         />
       </section>
       <section className="my-3 md:my-20 bg-[#F8F8F8] pt-5 pb-2">
-        <div className="bg-white my-5 pt-5 md:pt-10 lg:pt-14 rounded-[32px] container mx-auto px-4">
+        <div className="bg-white my-5 pt-5 md:pt-10 lg:pt-14 rounded-[32px] w-[90%] max-w-[1280px] mx-auto px-5">
           <h4 className="font-medium text-2xl md:text-3xl lg:text-4xl leading-normal md:leading-normal lg:leading-normal text-center">
             <span className="text-primaryPink font-bold ">
               {" "}

src/utils/appData.js

@@ -79,38 +79,38 @@ export const aboutUsLinks = [
   },
   {
     pathname: "Code of Conduct",
-    path: "#",
+    path: "https://shecodeafrica.org/code-of-conduct",
   },
   {
     pathname: "Privacy Policy",
-    path: "#",
+    path: "https://shecodeafrica.org/privacy",
   },
   {
     pathname: "Terms and Conditions",
-    path: "#",
+    path: "https://shecodeafrica.org/terms",
   },
 ];
 
 export const communityLinks = [
   // {
   //   pathname: "Recent Outreach",
   //   path: "#",
+  // isNewsLetter:false
   // },
   {
     pathname: "Contact Us",
     path: "/contact-us",
+    isNewsLetter: false,
   },
   {
     pathname: "Join Our Slack Community",
-    path: "#",
+    path: "https://bit.ly/joinshecodeafrica",
+    isNewsLetter: false,
   },
   {
     pathname: "Sign Up For Our Newsletter",
     path: "#",
-  },
-  {
-    pathname: "Follow Us On Social Media",
-    path: "#",
+    isNewsLetter: true,
   },
 ];