design title and footer and change mui

2024-05-17 22:02:50 +03:30
parent ae1c7dd70c
commit 23d9ebadc5
17 changed files with 296 additions and 34 deletions
@@ -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>
    )
 }