Files
nobat724_front/components/layout/Footer.js
T
2024-06-19 01:46:10 +03:30

106 lines
4.2 KiB
JavaScript

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";
import Link from "next/link";
const socialMedias = [
<Linkedin />,
<Telegram />,
<Whatsapp />,
<Instagram />
]
const Namads = [
'/assets/images/footer-etehadie.png',
'/assets/images/footer-r.png',
'/assets/images/footer-namad.png'
]
function Footer() {
return (
<div>
<span className="h-px bg-[#D7D7D7] w-full block"></span>
<div className="pt-[40px] pb-[60px] flex items-start 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>
<ul className="flex items-center gap-3">
{Namads.map(src => (
<li>
<Image
alt="logo"
width={48}
height={48}
src={src}
/>
</li>
))}
</ul>
</div>
{/* Center */}
<ul className="flex flex-col gap-3">
{footerR.map((item, idx) => (
<li
key={idx}
className={`
border-0 border-b-2 border-solid
${idx === 0 ? 'text-[#3B3B3B] border-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'}
text-[16px] w-fit`}
>{item}</li>
))}
</ul>
<ul className="flex flex-col gap-3">
{footerL.map((item, idx) => (
<li
key={idx}
className={`
border-0 border-b-2 border-solid
${idx === 0 ? 'text-[#3B3B3B] border-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'}
text-[16px] w-fit`}
>{item}</li>
))}
</ul>
{/* Left */}
<div className="flex flex-col justify-center gap-[50px]">
<p className="text-[#3B3B3B] w-fit text-[16px] border-[#F17732] font-bold border-0 border-b-2 border-solid pb-1.5">
همراه با ما باشید:
</p>
<ul className="flex items-center gap-[15px]">
{socialMedias.map((item, idx) => (
<li
key={idx}
className="p-2.5 bg-[#EAECFA] rounded-full w-fit"
>
<Link
href='/'
className="min-h-fit"
>
{item}
</Link>
</li>
))}
</ul>
</div>
</div>
</div>
)
}
export default Footer