From 8c8f461785466bde1eaa1032a1434c02a10008cc Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sun, 10 Sep 2023 17:55:55 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20component=20?=
 =?UTF-8?q?structure=20for=20better=20organization.=20=F0=9F=8E=A8=20Add?=
 =?UTF-8?q?=20styling=20to=20the=20Footer=20component.=20=F0=9F=9A=A7=20Wo?=
 =?UTF-8?q?rk=20in=20progress:=20Implementing=20footer=20navigation.=20?=
 =?UTF-8?q?=E2=9C=85=20Completed=20integration=20of=20social=20media=20lin?=
 =?UTF-8?q?ks.=20=F0=9F=93=9A=20Update=20documentation=20for=20the=20Foote?=
 =?UTF-8?q?r=20component.=20=F0=9F=92=A1=20Add=20comments=20for=20clarity?=
 =?UTF-8?q?=20in=20the=20code.=20=F0=9F=90=9B=20Fix=20minor=20bugs=20in=20?=
 =?UTF-8?q?the=20Footer=20component.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer.tsx | 107 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 src/components/Footer.tsx

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..bc62f68
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import Logo from "@/shared/Logo";
+import SocialsList1 from "@/shared/SocialsList1";
+import { CustomLink } from "@/data/types";
+import React from "react";
+import FooterNav from "./FooterNav";
+
+export interface WidgetFooterMenu {
+  id: string;
+  title: string;
+  menus: CustomLink[];
+}
+
+const widgetMenus: WidgetFooterMenu[] = [
+  {
+    id: "5",
+    title: "Getting started",
+    menus: [
+      { href: "#", label: "Installation" },
+      { href: "#", label: "Release Notes" },
+      { href: "#", label: "Upgrade Guide" },
+      { href: "#", label: "Browser Support" },
+      { href: "#", label: "Editor Support" },
+    ],
+  },
+  {
+    id: "1",
+    title: "Explore",
+    menus: [
+      { href: "#", label: "Design features" },
+      { href: "#", label: "Prototyping" },
+      { href: "#", label: "Design systems" },
+      { href: "#", label: "Pricing" },
+      { href: "#", label: "Security" },
+    ],
+  },
+  {
+    id: "2",
+    title: "Resources",
+    menus: [
+      { href: "#", label: "Best practices" },
+      { href: "#", label: "Support" },
+      { href: "#", label: "Developers" },
+      { href: "#", label: "Learn design" },
+      { href: "#", label: "Releases" },
+    ],
+  },
+  {
+    id: "4",
+    title: "Community",
+    menus: [
+      { href: "#", label: "Discussion Forums" },
+      { href: "#", label: "Code of Conduct" },
+      { href: "#", label: "Community Resources" },
+      { href: "#", label: "Contributing" },
+      { href: "#", label: "Concurrent Mode" },
+    ],
+  },
+];
+
+const Footer: React.FC = () => {
+  const renderWidgetMenuItem = (menu: WidgetFooterMenu, index: number) => {
+    return (
+      <div key={index} className="text-sm">
+        <h2 className="font-semibold text-neutral-700 dark:text-neutral-200">
+          {menu.title}
+        </h2>
+        <ul className="mt-5 space-y-4">
+          {menu.menus.map((item, index) => (
+            <li key={index}>
+              <a
+                key={index}
+                className="text-neutral-6000 dark:text-neutral-300 hover:text-black dark:hover:text-white"
+                href={item.href}
+              >
+                {item.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <FooterNav />
+
+      <div className="nc-Footer relative py-24 lg:py-28 border-t border-neutral-200 dark:border-neutral-700">
+        <div className="container grid grid-cols-2 gap-y-10 gap-x-5 sm:gap-x-8 md:grid-cols-4 lg:grid-cols-5 lg:gap-x-10 ">
+          <div className="grid grid-cols-4 gap-5 col-span-2 md:col-span-4 lg:md:col-span-1 lg:flex lg:flex-col">
+            <div className="col-span-2 md:col-span-1">
+              <Logo />
+            </div>
+            <div className="col-span-2 flex items-center md:col-span-3">
+              <SocialsList1 className="flex items-center space-x-3 lg:space-x-0 lg:flex-col lg:space-y-2.5 lg:items-start" />
+            </div>
+          </div>
+          {widgetMenus.map(renderWidgetMenuItem)}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Footer;