Footer Added And Is Shown Whenever Header Is Showing

src/components/Footer/index.js

@@ -0,0 +1,55 @@
+import React from "react";
+import _ from "lodash";
+
+import enamad from "./enamad-pic.svg";
+import samandehi from "./samandehi-pic.svg";
+
+import lightBlueLine from "./light-blue-line.svg";
+
+const FooterDesign1 = ({ color, bg, links }) => {
+  return (
+    <footer
+      className={`flex flex-col md:flex-row justify-around items-start md:items-start relative shadow-md ${bg}`}
+    >
+      <div className="flex items-start">
+        <>
+          {
+            links.map((section, index) => <ul className="mr-10" key={index}>
+              {
+                section.map((link, index) => <li
+                className={`font-light text-xs leading-7 hover:font-bold footer-items ${color}`}
+                key={index}
+              >
+                <a href="">{link}</a>
+              </li>)
+              }
+            </ul>)
+          }
+        </>
+      </div>
+      <div className="flex items-center mt-10 md:mt-0">
+        <img src={enamad} alt="" className="w-28 ml-10" />
+        <img src={samandehi} alt="" className="w-28" />
+      </div>
+      {/* line */}
+      <img
+        src={lightBlueLine}
+        alt=""
+        className="hidden sm:block absolute bottom-5 left-20"
+      />
+    </footer>
+  );
+};
+
+export default FooterDesign1;
+
+FooterDesign1.defaultProps = {
+  links: [
+    ["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"],
+    ["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"],
+    ["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"],
+    ["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"],
+  ],
+  bg: "bg-white",
+  color: "text-gray-600",
+};

src/components/Footer/light-blue-line.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38.827" height="36.827" viewBox="0 0 38.827 36.827">
+  <line id="Line_336" data-name="Line 336" x1="36" y2="34" transform="translate(1.414 1.414)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-width="2" opacity="0.36"/>
+</svg>

src/router.js

@@ -26,6 +26,7 @@ import Activation from "./views/Activation";
 import Faq from "./views/Faq";
 import Contact from "./views/Contact";
 import Dashboard from "./views/Dashboard";
+import FooterDesign1 from "./components/Footer";
 // import VideoTube from "./views/Home/VideoTube";
 
 function Router({
@@ -34,6 +35,7 @@ function Router({
   isLogin,
   headerOptions,
   setDesktopContentTransform,
+  footerOptions
 }) {
   useEffect(() => {
     window.addEventListener("scroll", () => {
@@ -63,6 +65,7 @@ function Router({
       >
         <BrowserRouter>
           {headerOptions?.shown && <Navbar headerOptions={headerOptions} />}
+          
           {isMobile && (
             <>
               <BG />
@@ -344,7 +347,9 @@ function Router({
                 />
               }
             />
+            
           </Routes>
+          {headerOptions?.shown && <FooterDesign1 />}
         </BrowserRouter>
       </div>
     </div>