design title and footer and change mui

components/layout/Footer.js

@@ -1,6 +1,79 @@
+import { footerL, footerR } from "@/constans";
+import Image from "next/image";
+import Linkedin from "../icons/Linkedin";
+import Telegram from "../icons/Telegram";
+import Whatsapp from "../icons/Whatsapp";
+import Instagram from "../icons/Instagram";
+
+const socialMedias = [
+    <Linkedin />,
+    <Telegram />,
+    <Whatsapp />,
+    <Instagram />
+]
+
 function Footer() {
     return (
-        <div>Footer</div>
+        <div>
+            <span className="h-px bg-[#D7D7D7] w-full block"></span>
+            <div className="pt-[30px] pb-[60px] flex items-center justify-between">
+                {/* Right */}
+                <div className="flex gap-[30px] flex-col items-start">
+                    {/* Icon */}
+                    <div className="flex items-center justify-start gap-[5px]">
+                        <Image
+                            alt="logo"
+                            width={30}
+                            height={30}
+                            src='/assets/images/logo.png'
+                        />
+                        <p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
+                    </div>
+                    <p
+                        className="text-[#616161] text-[14px] font-normal"
+                    >724 یک وبسایت نوبت دهی آنلاین می باشد که<br /> بستری آسان برای پزشکان و بیماران فراهم کرده<br /> است.     </p>
+                </div>
+
+                {/* Center */}
+                <ul className="flex flex-col gap-3">
+                    {footerR.map((item, idx) => (
+                        <li
+                            key={idx}
+                            className={`
+                            ${idx === 0 ? 'text-[#3B3B3B] font-bold border-b border-b-[#EFEFEF] pb-1' : 'text-[#616161] font-normal'} 
+                            text-[16px] w-fit`}
+                        >{item}</li>
+                    ))}
+                </ul>
+                <ul className="flex flex-col gap-3">
+                    {footerL.map((item, idx) => (
+                        <li
+                            key={idx}
+                            className={`
+                            ${idx === 0 ? 'text-[#3B3B3B] font-bold border-b border-b-[#EFEFEF] pb-1' : 'text-[#616161] font-normal'} 
+                            text-[16px] w-fit`}
+                        >{item}</li>
+                    ))}
+                </ul>
+
+                {/* Left */}
+                <div className="flex flex-col justify-center gap-[50px]">
+                    <p className="text-[#3B3B3B] text-[16px] font-bold border-b border-b-[#EFEFEF] pb-1">
+                        ما را در شبکه های اجتماعی دنبال کنید:
+                    </p>
+                    <ul className="flex items-center gap-[15px]">
+                        {socialMedias.map((item, idx) => (
+                            <li
+                                key={idx}
+                                className="p-2.5 bg-[#A5B4D7] rounded-full w-fit"
+                            >
+                                {item}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        </div>
     )
 }
 

components/layout/Header.js

@@ -6,7 +6,7 @@ import Link from "next/link";
 function Header() {
     return (
         <div
-            className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-[85%] mx-auto"
+            className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
         >
             <div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
                 <div className="flex items-center justify-start gap-[5px]">

components/layout/index.js

@@ -8,14 +8,14 @@ function Layout({ children, title }) {
                 <title>{`${title} | نوبت ۷۲۴`}</title>
             </head> */}
             <main className="w-full min-h-screen">
-                <header className="w-full fixed top-10 right-0">
+                <header className="w-full fixed top-10 right-0 padding-responsive z-[10]">
                     <Header />
                 </header>
                 <section>
                     {children}
                 </section>
             </main>
-            <footer className=" bg-[#F5F5F5]">
+            <footer className="bg-[#F5F5F5] mt-[250px] padding-responsive">
                 <Footer />
             </footer>
         </div>