feat(layout): build navbar and footer components

she-code-africa · May 27, 2024 · 05a4d99 · 05a4d99
1 parent df7ef6b
commit 05a4d99
Show file tree

Hide file tree

Showing 26 changed files with 433 additions and 70 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,8 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/_redirects b/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="We are a non-profit organisation focused on celebrating and empowering young girls and women in tech across Africa."
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap"
+      rel="stylesheet"
+    />
+    <title>STEM A GIRL</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "SCA",
+  "name": "She Code Africa",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,40 @@
-.App {
-  text-align: center;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background-color: rgba(248, 248, 248, 1);
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+::-webkit-scrollbar-thumb {
+  background-color: rgba(183, 5, 105, 1);
+  border-radius: 20px;
 }
 
-.App-link {
-  color: #61dafb;
+.logo {
+  background-image: url("./assets/images/SCA-LOGO.png");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+@media (max-width: 1023px) {
+  .menu-items {
+    top: 78px;
+    left: 0;
+    right: 0;
+    background-color: white;
+    position: fixed;
+    padding: 20px;
+    transform: translateX(1000px);
+    transition: all 0.3s ease-in-out;
   }
-  to {
-    transform: rotate(360deg);
+
+  .open-nav {
+    transform: translateX(0);
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,17 @@
-import logo from './logo.svg';
-import './App.css';
+import { Routes, Route } from "react-router-dom";
+import "./App.css";
+import { HomePage, OutreachPage, StemClubs, ActivitiesPage } from "./pages";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/outreach" element={<OutreachPage />} />
+        <Route path="/activities" element={<ActivitiesPage />} />
+        <Route path="/stem-clubs" element={<StemClubs />} />
+      </Routes>
+    </>
   );
 }
 

diff --git a/src/assets/images/SCA-LOGO.png b/src/assets/images/SCA-LOGO.png
diff --git a/src/assets/images/index.jsx b/src/assets/images/index.jsx
@@ -0,0 +1,3 @@
+import scaLogo from "./SCA-LOGO.png";
+
+export { scaLogo };
diff --git a/src/components/footer/index.jsx b/src/components/footer/index.jsx
@@ -0,0 +1,93 @@
+import React from "react";
+import { scaLogo } from "../../assets/images";
+import { Link } from "react-router-dom";
+import { aboutUsLinks, communityLinks } from "../../utils/appData";
+import {
+  FaLinkedinIn,
+  FaFacebookF,
+  FaYoutube,
+  FaInstagram,
+  FaTwitter,
+} from "react-icons/fa6";
+
+const Footer = () => {
+  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">
+        <figure className="hidden md:block w-[58px] h-[90px]">
+          <img src={scaLogo} alt="SCA-LOGO" className="w-full h-full" />
+        </figure>
+
+        <div className="flex flex-col md:flex-row md:items-start md:justify-end gap-10 md:gap-40">
+          <article className="">
+            <h2 className="text-xl md:text-[32px] font-bold capitalize mb-6">
+              about us
+            </h2>
+
+            <ul className="flex flex-col gap-5">
+              {aboutUsLinks.map((menu, i) => (
+                <li
+                  className="text-base font-normal hover:text-primaryPink"
+                  key={i}
+                >
+                  <Link to={menu.path}>{menu.pathname}</Link>
+                </li>
+              ))}
+            </ul>
+          </article>
+          <article className="">
+            <h2 className="text-xl md:text-[32px] font-bold capitalize mb-6">
+              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>
+              ))}
+            </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="#" className=" text-white">
+                  <FaLinkedinIn />
+                </Link>
+              </li>
+              <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
+                <Link to="#" className=" text-white">
+                  <FaFacebookF />
+                </Link>
+              </li>
+              <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
+                <Link to="#" className=" text-white">
+                  <FaYoutube />
+                </Link>
+              </li>
+              <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
+                <Link to="#" className=" text-white">
+                  <FaInstagram />
+                </Link>
+              </li>
+              <li className="w-[31px] h-[31px] flex items-center justify-center rounded-[50%] bg-black">
+                <Link to="#" className=" text-white">
+                  <FaTwitter />
+                </Link>
+              </li>
+            </ul>
+          </article>
+        </div>
+      </div>
+
+      <div className="bg-black py-6 px-5">
+        <p className="text-white text-base text-center w-full">
+          All rights reserved. She Code Africa 2024.
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export default Footer;
diff --git a/src/components/index.jsx b/src/components/index.jsx
@@ -0,0 +1,3 @@
+import GlobalLayout from "./layouts/GlobalLayout";
+
+export { GlobalLayout };
diff --git a/src/components/layouts/GlobalLayout.jsx b/src/components/layouts/GlobalLayout.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import NavigationBar from "../navbar";
+import Footer from "../footer";
+
+const GlobalLayout = ({ children }) => {
+  return (
+    <>
+      <NavigationBar />
+      <section className="w-[90%] max-w-[1280px] mx-auto text-sealBrown overflow-hidden py-24 min-h-[90vh]">
+        {children}
+      </section>
+      <Footer />
+    </>
+  );
+};
+
+export default GlobalLayout;
diff --git a/src/components/navbar/MenuLinks.jsx b/src/components/navbar/MenuLinks.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import { FaAngleDown } from "react-icons/fa6";
+
+const MenuLinks = ({ menuItem }) => {
+  const { pathname } = useLocation();
+
+  return (
+    <>
+      {menuItem.isDropdown ? (
+        <li
+          className={`text-base font-medium cursor-pointer relative ${
+            pathname === menuItem.path && "text-primaryPink font-bold"
+          }`}
+        >
+          <Link to={menuItem.path} className="flex gap-1 items-center">
+            <span className="">{menuItem.pathname}</span>
+            <button className="">
+              <FaAngleDown />
+              {/* {showDropdown ? <FaAngleUp /> : <FaAngleDown />} */}
+            </button>
+          </Link>
+        </li>
+      ) : (
+        <li
+          className={`text-base font-medium ${
+            pathname === menuItem.path && "text-primaryPink font-bold"
+          }`}
+        >
+          <Link to={menuItem.path}>{menuItem.pathname}</Link>
+        </li>
+      )}
+    </>
+  );
+};
+
+export default MenuLinks;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import scaLogo from "./SCA-LOGO.png";

		export { scaLogo };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import GlobalLayout from "./layouts/GlobalLayout";

		export { GlobalLayout };