update data.js

public/images/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/components/FooterDesign/Footer/index.js

@@ -0,0 +1,51 @@
+import React from "react";
+import _ from "lodash";
+
+import enamad from "./images/enamad-pic.svg";
+import samandehi from "images/samandehi-pic.svg";
+
+import lightBlueLine from "images/light-blue-line.svg";
+
+const FooterDesign1 = ({ links }) => {
+  return (
+    <footer className="flex flex-col md:flex-row justify-around items-start md:items-start relative shadow-md bg-white">
+      <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 text-gray-600`}
+                  key={index}
+                >
+                  <a href="#">{link}</a>
+                </li>
+              ))}
+            </ul>
+          ))}
+        </>
+      </div>
+      <div className="flex items-center mt-10 md:mt-0">
+        <img src={enamad} alt="enamad" className="w-28 ml-10" />
+        <img src={samandehi} alt="samandehi" 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: [
+    ["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"],
+    ["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"],
+    ["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"],
+    ["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"],
+  ],
+};

src/components/FooterDesign/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import Footer from "./Footer";
+
+function FooterDesign() {
+  const list = {
+    1: <Footer />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default FooterDesign;

src/redux/data.js

@@ -16,6 +16,7 @@ import CourseList from "../components/CourseList";
 import ProductFilter from "../components/ProductFilter";
 import Features from "../components/Features";
 import Feedback from "../components/Feedback";
+import FooterDesign from "../components/FooterDesign";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -290,6 +291,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Footer Design",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Footer Design",
+      component: <FooterDesign />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",