fix: footer changes & remove sw (#1270)

jsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": [
+        "src/components/*"
+      ],
+      "@hooks/*": [
+        "src/hooks/*"
+      ],
+      "@pages/*": [
+        "src/pages/*"
+      ],
+      "@redux/*": [
+        "src/redux/*"
+      ],
+      "@service/*": [
+        "src/service/*"
+      ],
+      "@utils/*": [
+        "src/utils/*"
+      ],
+      "@styles/*": [
+        "src/styles/*"
+      ],
+      "@/*": [
+        "src/*"
+      ]
+    }
+  }
+}

src/components/private/landing/Landing.jsx

@@ -27,12 +27,12 @@ const Landing = () => {
             <>
               <h1>We connect NGOs,</h1>
               <h1>
-                Charities and <span>you</span>
+                Charities and <span>you.</span>
               </h1>
             </>
           ) : (
             <h1>
-              We connect NGOs, charities and <span>you</span>
+              We connect NGOs, charities and <span>you.</span>
             </h1>
           )}
 

src/components/shared/footer/Footer.jsx

@@ -1,12 +1,17 @@
-import React from "react";
+import { footerLinks } from "@utils/footerLinksConfig";
 import { FaGithub, FaLinkedinIn, FaXTwitter } from "react-icons/fa6";
-import { SiGmail } from "react-icons/si";
 import { Link } from "react-router-dom";
 import "react-toastify/dist/ReactToastify.css";
 import brand from "../../../assets/pictures/Navbar/MilanNavBrand.svg";
 import "./Footer.scss";
 
 const Footer = () => {
+  const icons = {
+    FaLinkedinIn: FaLinkedinIn,
+    FaXTwitter: FaXTwitter,
+    FaGithub: FaGithub,
+  };
+
   return (
     <>
       <footer>
@@ -18,38 +23,71 @@ const Footer = () => {
           <div className="links_parent">
             <div className="product">
               <h1>QUICK STARTS</h1>
-              <Link to={"/trending"}>Trending</Link>
-              <Link to={"/clubs"}>Clubs</Link>
-              <Link to={"/shops"}>Shops</Link>
-              <Link to={"/auth/login"}>Login</Link>
-              <Link to={"/events"}>Events</Link>
+
+              {footerLinks?.quickStarts?.map((item, index) => {
+                return (
+                  <Link key={index} to={item?.path}>
+                    {item?.name}
+                  </Link>
+                );
+              })}
             </div>
             <div className="dev">
               <h1>RESOURCES</h1>
-              <Link to={"/clubs"}>GitHub</Link>
-              <Link to={"/clubs"}>Setup Frontend</Link>
-              <Link to={"/clubs"}>Setup Backend</Link>
-              <Link to={"/clubs"}>Docker resources</Link>
+              {footerLinks?.resources?.map((item, index) => {
+                return item?.path.startsWith("http") ? (
+                  <a
+                    key={index}
+                    href={item?.path}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {item?.name}
+                  </a>
+                ) : (
+                  <Link key={index} to={item?.path}>
+                    {item?.name}
+                  </Link>
+                );
+              })}
             </div>
             <div className="policies">
               <h1>POLICIES</h1>
-              <Link to={"/clubs"}>Terms</Link>
-              <Link to={"/clubs"}>Privacy</Link>
-              <Link to={"/clubs"}>Cookies</Link>
+              {footerLinks?.policies?.map((item, index) => {
+                return (
+                  <Link key={index} to={item?.path} target="_blank">
+                    {item?.name}
+                  </Link>
+                );
+              })}
             </div>
           </div>
 
           <div className="policies_mobile">
-            <Link to={"/clubs"}>Terms</Link> |<Link to={"/clubs"}>Privacy</Link>{" "}
-            |<Link to={"/clubs"}>Cookies</Link>
+            {footerLinks?.policies?.map((item, index) => {
+              return (
+                <Link key={index} to={item?.path} target="_blank">
+                  {item?.name}
+                </Link>
+              );
+            })}
           </div>
         </div>
 
         <div className="rightside">
-          <FaLinkedinIn />
-          <FaXTwitter />
-          <FaGithub />
-          <SiGmail />
+          {footerLinks?.social?.map((item, index) => {
+            const IconComponent = icons[item.icon];
+            return (
+              <a
+                key={index}
+                href={item?.path}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <IconComponent />
+              </a>
+            );
+          })}
         </div>
       </footer>
     </>

src/components/shared/footer/Footer.scss

@@ -79,7 +79,8 @@ footer {
       @media screen and (max-width: 500px) {
         display: flex;
         justify-content: center;
-        gap: 0.5rem;
+        gap: 1rem;
+        flex-wrap: wrap;
         a {
           color: rgba(255, 255, 255, 0.555);
           font-size: 15px;
@@ -96,13 +97,14 @@ footer {
   .rightside {
     display: flex;
     gap: 1rem;
-    color: white;
+
     z-index: 90;
 
-    svg {
+    a > svg {
       width: 1.4rem;
       height: 1.4rem;
       cursor: pointer;
+      color: white !important;
 
       &:hover {
         color: var(--primary);

src/pages/Test.jsx

@@ -0,0 +1,11 @@
+import React, { useEffect } from "react";
+
+const Test = () => {
+  useEffect(() => {
+    window.location.href = "https://www.google.com";
+  }, []);
+
+  return <div>Test</div>;
+};
+
+export default Test;

src/utils/footerLinksConfig.js

@@ -0,0 +1,47 @@
+// src/config/footerLinksConfig.js
+
+export const footerLinks = {
+  quickStarts: [
+    { name: "Trending Events", path: "/trending" },
+    { name: "NGOs near you", path: "/clubs" },
+    { name: "Login / Signup", path: "/auth/login" },
+    { name: "Events ", path: "/events" },
+  ],
+  resources: [
+    { name: "GitHub", path: "https://github.com/ngoworldcommunity/NGOWorld" },
+    {
+      name: "Setup Frontend",
+      path: "https://github.com/ngoworldcommunity/NGOWorld/blob/main/docs/FrontendSetup.md",
+    },
+    {
+      name: "Setup Backend",
+      path: "https://github.com/ngoworldcommunity/NGOWorld-Backend/blob/main/docs/BackendSetup.md",
+    },
+    {
+      name: "Docker Resources",
+      path: "https://github.com/ngoworldcommunity/NGOWorld/blob/main/docs/DockerSetup.md",
+    },
+  ],
+  policies: [
+    { name: "Terms of Use", path: "/terms" },
+    { name: "Privacy Policy", path: "/privacy" },
+    { name: "Cookies Policy", path: "/cookies" },
+  ],
+  social: [
+    {
+      name: "LinkedIn",
+      path: "https://www.linkedin.com/company/ngoworld",
+      icon: "FaLinkedinIn",
+    },
+    {
+      name: "X",
+      path: "https://x.com/ngoworlddotorg",
+      icon: "FaXTwitter",
+    },
+    {
+      name: "GitHub",
+      path: "https://github.com/ngoworldcommunity",
+      icon: "FaGithub",
+    },
+  ],
+};

src/utils/routesConfig.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Test from "../pages/Test";
 import Trending from "../pages/Trending";
 import {
   Clubs,
@@ -23,6 +24,7 @@ const routesConfig = [
   { path: "/events", element: <Events /> },
   { path: "/shop", element: <Shop /> },
   { path: "/trending", element: <Trending /> },
+  { path: "/test", element: <Test /> },
   { path: "*", element: <Error404 /> },
 ];