change style menu home & responsive head and footer home & list doctors
This commit is contained in:
Ehsan
@@ -0,0 +1,26 @@
|
||||
import Image from "next/image"
|
||||
|
||||
const Namads = [
|
||||
'/assets/images/footer-etehadie.png',
|
||||
'/assets/images/footer-r.png',
|
||||
'/assets/images/footer-namad.png'
|
||||
]
|
||||
|
||||
function LogoNamad() {
|
||||
return (
|
||||
<ul className="flex items-center gap-3">
|
||||
{Namads.map(src => (
|
||||
<li>
|
||||
<Image
|
||||
alt="logo"
|
||||
width={48}
|
||||
height={48}
|
||||
src={src}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
export default LogoNamad
|
||||
@@ -0,0 +1,114 @@
|
||||
import { footerL, footerR } from "@/constans";
|
||||
import Logo from "@/app/component/Logo";
|
||||
import Link from "next/link";
|
||||
|
||||
// Icons
|
||||
import Linkedin from "../../icons/Linkedin";
|
||||
import Telegram from "../../icons/Telegram";
|
||||
import Whatsapp from "../../icons/Whatsapp";
|
||||
import Instagram from "../../icons/Instagram";
|
||||
import LocationF from "../../icons/LocationF";
|
||||
import CalendarAddF from "../../icons/CalendarAddF";
|
||||
import StethoscopeF from "../../icons/StethoscopeF";
|
||||
import LogoNamad from "./LogoNamad";
|
||||
|
||||
const socialMedias = [
|
||||
<Linkedin />,
|
||||
<Telegram />,
|
||||
<Whatsapp />,
|
||||
<Instagram />
|
||||
]
|
||||
|
||||
const head = [
|
||||
{ icon: <LocationF />, text: 'جستجوی پزشک در شهر شما' },
|
||||
{ icon: <CalendarAddF />, text: 'نوبت گیری سریع و آسان' },
|
||||
{ icon: <StethoscopeF />, text: 'دشبورد اختصاصی برای پزشکان' }
|
||||
]
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<div className="pb-[11px]">
|
||||
<div className="flex items-center justify-evenly gap-[12px]">
|
||||
{head.map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all
|
||||
transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-[#EFEFEF] bg-[#F7F7F7] hover:bg-none hover:border-[#FDBD9F]"
|
||||
>
|
||||
{item.icon}
|
||||
<p className="text-[#2F2F2F] text-center text-[16px] font-medium">{item.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="h-px bg-[#D7D7D7] mb-[40px] mt-[48px] w-full block"></span>
|
||||
<div
|
||||
className="pb-[16px] sm:pb-[18px] md:pb-[19px] lg:pb-[21px]
|
||||
flex flex-col gap-[16px] lg:gap-0 lg:flex-row items-start justify-between"
|
||||
>
|
||||
{/* Right */}
|
||||
<div className="w-full lg:w-fit flex gap-[12px] lg:gap-[30px] flex-col items-start">
|
||||
{/* Icon */}
|
||||
<Logo />
|
||||
<p
|
||||
className="w-full lg:w-fit text-[#616161] text-[14px] font-normal"
|
||||
>724 یک وبسایت نوبت دهی آنلاین می باشد که<br className="hidden lg:flex" /> بستری آسان برای پزشکان و بیماران فراهم کرده<br className="hidden lg:flex" /> است. </p>
|
||||
<div className="hidden lg:flex">
|
||||
<LogoNamad />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center */}
|
||||
<ul className="w-full lg:w-fit flex flex-col gap-3">
|
||||
{footerR.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className={`
|
||||
relative w-full after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
|
||||
${idx === 0 ? 'text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'}
|
||||
text-[16px] w-fit`}
|
||||
>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
<ul className="w-full lg:w-fit flex flex-col gap-3">
|
||||
{footerL.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className={`
|
||||
relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
|
||||
${idx === 0 ? 'text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'}
|
||||
text-[16px] w-fit`}
|
||||
>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Left */}
|
||||
<div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[50px]">
|
||||
<p className="text-[#3B3B3B] w-fit text-[16px] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5 relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0">
|
||||
همراه با ما باشید:
|
||||
</p>
|
||||
<ul className="flex items-center gap-[8px] sm:gap-[11px] md:gap-[13px] lg: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 className="flex lg:hidden justify-center w-full mt-2">
|
||||
<LogoNamad />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-[#7E7E7E] text-[12px] font-normal">کلیه حقوق وبسایت برای این شرکت می باشد.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
Reference in New Issue
Block a user