diff --git a/pages/components/Layout/footer.js b/pages/components/Layout/footer.js
index 5480e88..93410ec 100644
--- a/pages/components/Layout/footer.js
+++ b/pages/components/Layout/footer.js
@@ -1,95 +1,291 @@
-import React from 'react'
-import { MDBFooter, MDBContainer, MDBRow, MDBCol, MDBIcon } from 'mdb-react-ui-kit'
-import Link from 'next/link'
-
-const Footer = () => {
-  return (
-    <>
-      <MDBFooter className='text-center text-lg-left hover_color'>
-      <div className='lg:mx-20 sm:mx-5 p-4'> 
-      <MDBRow>
-            <MDBCol lg='6' md='12' className='mb-4 mb-md-0'>
-              <h5 className='text-uppercase text-white'>
-                شرکت پزشکی مهر ایرانیان پرند
-                <hr />
-              </h5>
-
-              <p style={{ direction: 'rtl' }} className={'bk yekan-bakh-req text-white center-align'}>
-                بیمارستان تخصصی مهرایرانیان واقع در  اتوبان چهاربانده اصلی داخلی شهر پرند در بهترین موقعیت مکانی و در
-                دل مسکن مهر، با هدف تبدیل شدن به یکی از قطب های درمانی منطقه در حال احداث می باشد. این بیمارستان که تنها
-                بیمارستان تخصصی در کنار بزرگترین فرودگاه کشور است
-              </p>
-            </MDBCol>
-
-            <MDBCol lg='3' md='6' className='mb-4 mb-md-0'>
-              <h5 className='text-uppercase text-white'>
-                لینک های مفید
-                <hr />
-              </h5>
-
-              <ul style={{ lineHeight: 2 }} className='list-unstyled mb-0 bk '>
-              <li>
-                  <a href='https://club.mehriranianco.ir/' target='_blank' style={{ color: 'white' }}>  باشگاه سهامداران </a>
-                </li>
-                {/* <li>
-                  <Link href={{ pathname: '/News', query: { list: 'list' } }}>
-                    <a href='#!' className='text-white'>
-                      اطلاعیه ها
-                    </a>
-                  </Link>
-                </li> */}
-                <li>
-                  <Link href='/page/about' className='text-white'>
-                    <a style={{ color: 'white' }}> درباره </a>
-                  </Link>
-                </li>
-
-                <li>
-                  <Link href='/page/contact-us' className='text-white'>
-                    <a style={{ color: 'white' }}> تماس با ما</a>
-                  </Link>
-                </li>
-      
-              </ul>
-            </MDBCol>
-
-            <MDBCol lg='3' md='6' className='mb-4 mb-md-0'>
-              <h5 className='text-uppercase mb-0  text-white'>
-                تماس با ما
-                <hr />
-              </h5>
-
-              <ul style={{ listStyle: 'none', lineHeight: 2 }} className='bk right center-align'>
-                {/*<li>*/}
-                {/*    <a className='text-white dana' href="tel:02153457000">021 5345 7000  </a>*/}
-                {/*</li>*/}
-                <li>
-                  <a href='tel:02153457000' className='text-white dana'>
-                    021-53457000
-                  </a>
-                </li>
-                <li>
-                  <a href='#!' className='text-white'>
-                    contact-us@miphospital.ir
-                  </a>
-                </li>
-                <li className={'d-flex'} alignment='end'>
-                  <a href='#!' className='text-white center-align right'>
-                    تهران ، شهر جدید پرند، بلوار شهیدقاسم سلیمانی، انتهای فاز 5 ،نبش بلوار رسول اکرم (ع)
-                  </a>
-                  <MDBIcon className={'right right-align p-2 text-white'} fas icon='map-marker-alt' />
-                </li>
-              </ul>
-            </MDBCol>
-          </MDBRow>
-        </div>
-
-        <div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
-          &copy; {new Date().getFullYear()} <a className='text-dark'>contact-us@miphospital.ir</a>
-        </div>
-      </MDBFooter>
-    </>
-  )
-}
-
-export default Footer
+import React from 'react'
+import Link from 'next/link'
+import { FiInstagram, FiMail, FiMapPin, FiPhone } from 'react-icons/fi'
+
+const usefulLinks = [
+  { href: '/', label: 'صفحه اصلی' },
+  { href: '/landing', label: 'معرفی بیمارستان' },
+  { href: '/components/service', label: 'بخش‌های درمانی' },
+  { href: '/Gallery', label: 'گالری تصاویر' },
+  { href: '/recruitment', label: 'استخدام و همکاری' },
+  { href: '/page/about', label: 'درباره ما' },
+  { href: '/page/contact-us', label: 'تماس با ما' },
+]
+
+export default function Footer() {
+  return (
+    <footer className='site-footer' dir='rtl'>
+      <div className='footer-container'>
+        <div className='footer-grid'>
+          <div className='footer-about'>
+            <Link href='/'>
+              <a className='footer-brand' aria-label='بیمارستان مهر پرند، صفحه اصلی'>
+                <img src='/resource/logo/logo.png' alt='' width='62' height='59' />
+                <span>
+                  <strong>بیمارستان مهر پرند</strong>
+                  <small>همراه مطمئن شما، برای زندگی سالم‌تر</small>
+                </span>
+              </a>
+            </Link>
+            <p>
+              بیمارستان مهر پرند با هدف ارائه خدمات درمانی باکیفیت و دسترسی آسان‌تر
+              شهروندان پرند و منطقه به مراقبت‌های پزشکی در حال آماده‌سازی است.
+            </p>
+            <a
+              className='instagram-link'
+              href='https://www.instagram.com/miphospital/'
+              target='_blank'
+              rel='noopener noreferrer'
+              aria-label='اینستاگرام بیمارستان مهر پرند'
+            >
+              <FiInstagram aria-hidden='true' />
+            </a>
+          </div>
+
+          <nav className='footer-links' aria-label='لینک‌های فوتر'>
+            <h2>دسترسی سریع</h2>
+            <ul>
+              {usefulLinks.map(({ href, label }) => (
+                <li key={href}>
+                  <Link href={href}><a>{label}</a></Link>
+                </li>
+              ))}
+              <li>
+                <a href='https://club.mehriranianco.ir/' target='_blank' rel='noopener noreferrer'>
+                  باشگاه سهامداران
+                </a>
+              </li>
+            </ul>
+          </nav>
+
+          <div className='footer-contact'>
+            <h2>ارتباط با ما</h2>
+            <ul>
+              <li>
+                <span className='contact-icon'><FiPhone aria-hidden='true' /></span>
+                <a href='tel:02153457000' dir='ltr'>۰۲۱-۵۳۴۵۷۰۰۰</a>
+              </li>
+              <li>
+                <span className='contact-icon'><FiMail aria-hidden='true' /></span>
+                <a href='mailto:contact-us@miphospital.ir' dir='ltr'>contact-us@miphospital.ir</a>
+              </li>
+              <li>
+                <span className='contact-icon'><FiMapPin aria-hidden='true' /></span>
+                <span>تهران، شهر جدید پرند، بلوار شهید قاسم سلیمانی، انتهای فاز ۵، نبش بلوار رسول اکرم (ص)</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className='footer-bottom'>
+          <span>© {new Date().getFullYear()} بیمارستان مهر پرند. تمامی حقوق محفوظ است.</span>
+          <span>همراه سلامت شما</span>
+        </div>
+      </div>
+
+      <style jsx>{`
+        .site-footer {
+          position: relative;
+          overflow: hidden;
+          border-top: 5px solid #59c7c5;
+          color: #d2e7e7;
+          background: #103f47;
+          font-family: dana-fanum, sans-serif;
+        }
+        .site-footer::before {
+          position: absolute;
+          top: -100px;
+          left: -90px;
+          width: 310px;
+          height: 310px;
+          border: 1px solid rgba(126, 219, 214, .12);
+          border-radius: 50%;
+          content: '';
+          pointer-events: none;
+        }
+        .footer-container {
+          position: relative;
+          width: calc(100% - 40px);
+          max-width: 1240px;
+          margin: 0 auto;
+        }
+        .footer-grid {
+          display: grid;
+          grid-template-columns: 1.35fr .8fr 1fr;
+          gap: clamp(32px, 6vw, 95px);
+          padding: 58px 0 50px;
+        }
+        .footer-brand {
+          display: inline-flex;
+          align-items: center;
+          gap: 12px;
+          color: #fff;
+          text-decoration: none;
+        }
+        .footer-brand:hover {
+          color: #fff;
+        }
+        .footer-brand img {
+          display: block;
+          width: 62px;
+          height: 59px;
+          object-fit: contain;
+        }
+        .footer-brand span {
+          display: flex;
+          flex-direction: column;
+          gap: 3px;
+        }
+        .footer-brand strong {
+          font-size: 19px;
+          font-weight: 800;
+        }
+        .footer-brand small {
+          color: #a9d2d0;
+          font-size: 11px;
+        }
+        .footer-about p {
+          max-width: 390px;
+          margin: 22px 0 20px;
+          color: #c4dbdb;
+          font-size: 13px;
+          line-height: 2.1;
+        }
+        .instagram-link {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 38px;
+          height: 38px;
+          border: 1px solid rgba(255, 255, 255, .25);
+          border-radius: 11px;
+          color: #fff;
+          font-size: 18px;
+          transition: background-color .2s ease, border-color .2s ease;
+        }
+        .instagram-link:hover {
+          border-color: #59c7c5;
+          color: #fff;
+          background: #168b89;
+        }
+        h2 {
+          position: relative;
+          margin: 8px 0 28px;
+          padding-bottom: 13px;
+          color: #fff;
+          font-size: 17px;
+          font-weight: 800;
+        }
+        h2::after {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          width: 36px;
+          height: 3px;
+          border-radius: 3px;
+          background: #59c7c5;
+          content: '';
+        }
+        ul {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+        .footer-links ul {
+          display: grid;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          column-gap: 18px;
+          row-gap: 13px;
+        }
+        .footer-links a,
+        .footer-contact a {
+          color: #d2e7e7;
+          font-size: 13px;
+          text-decoration: none;
+          transition: color .2s ease;
+        }
+        .footer-links a:hover,
+        .footer-contact a:hover {
+          color: #7fdfd8;
+        }
+        .footer-contact ul {
+          display: flex;
+          flex-direction: column;
+          gap: 17px;
+        }
+        .footer-contact li {
+          display: flex;
+          align-items: flex-start;
+          gap: 12px;
+          color: #d2e7e7;
+          font-size: 13px;
+          line-height: 1.9;
+        }
+        .footer-contact li > a {
+          overflow-wrap: anywhere;
+        }
+        .contact-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          flex: 0 0 30px;
+          height: 30px;
+          border-radius: 9px;
+          color: #87dfd8;
+          background: rgba(112, 211, 206, .13);
+          font-size: 15px;
+        }
+        .footer-bottom {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 16px;
+          min-height: 68px;
+          border-top: 1px solid rgba(255, 255, 255, .13);
+          color: #a9c7c8;
+          font-size: 12px;
+        }
+        .site-footer a:focus-visible {
+          outline: 3px solid #7fdfd8;
+          outline-offset: 3px;
+        }
+        @media (max-width: 950px) {
+          .footer-grid {
+            grid-template-columns: 1fr 1fr;
+            gap: 40px;
+          }
+          .footer-about {
+            grid-column: 1 / -1;
+          }
+        }
+        @media (max-width: 600px) {
+          .footer-container {
+            width: calc(100% - 36px);
+          }
+          .footer-grid {
+            grid-template-columns: 1fr;
+            gap: 36px;
+            padding: 42px 0 38px;
+          }
+          .footer-about {
+            grid-column: auto;
+          }
+          .footer-about p {
+            margin-top: 16px;
+          }
+          h2 {
+            margin-bottom: 22px;
+          }
+          .footer-bottom {
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            gap: 3px;
+            padding: 17px 0;
+            line-height: 1.8;
+          }
+        }
+      `}</style>
+    </footer>
+  )
+}
diff --git a/pages/components/Layout/header.js b/pages/components/Layout/header.js
index c9b6278..d63d05d 100644
--- a/pages/components/Layout/header.js
+++ b/pages/components/Layout/header.js
@@ -1,274 +1,402 @@
-import React, { useState } from 'react'
-import Link from 'next/link'
-import {
-  MDBContainer,
-  MDBNavbar,
-  MDBNavbarBrand,
-  MDBNavbarToggler,
-  MDBNavbarNav,
-  MDBNavbarLink,
-  MDBCollapse,
-  MDBDropdownToggle,
-  MDBDropdownMenu,
-  MDBDropdownItem,
-  MDBDropdownLink,
-  MDBDropdown,
-  MDBCardImage,
-} from 'mdb-react-ui-kit'
-import { HamburgerIcon } from '@chakra-ui/icons'
-import { useRouter } from 'next/router'
-
-import { FaWhatsapp } from 'react-icons/fa'
-import { FaInstagram } from 'react-icons/fa'
-import { SiAparat } from 'react-icons/si'
-
-export default function App() {
-  const [showNavSecond, setShowNavSecond] = useState(false)
-
-  let router = useRouter()
-
-  return (
-    <>
-      {/* <div style={{ backgroundColor: '#69c6c8' }}>*/}
-      {/*  <div className={'flex h-5/12 justify-content-between'}>*/}
-      {/*    <div className={'flex justify-content-center align-items-center'}>*/}
-      {/*      <div className={'flex w-30 justify-content-center align-items-center'}>*/}
-      {/*        <img  style={{position: 'absolute'}} width={90} src={PhoneCall} />*/}
-      {/*        <Divider style={{transform: 'rotate(90deg)', marginLeft: 55}} width={10} />*/}
-      {/*      </div>*/}
-      {/*      <div className={'flex mt-3 flex-column'}>*/}
-      {/*        <div style={{fontSize: 15}} className={'text-white'}>*/}
-      {/*          خرید سهام*/}
-      {/*        </div>*/}
-      {/*        <div style={{fontSize: 15}} className={'flex align-items-center text-white'}>*/}
-      {/*          <p style={{fontSize: 10}}>021 -</p>*/}
-      {/*           <p>28426945</p>*/}
-      {/*        </div>*/}
-      {/*      </div>*/}
-      {/*    </div>*/}
-      {/*    <div className={''}>*/}
-      {/*        جای خالی*/}
-      {/*    </div>*/}
-      {/*  </div>*/}
-
-      {/*</div> */}
-      {/* topheader */}
-      <div className='bg-[#57C5C6] headerTop'>
-        <div className='flex sm:flex-col md:flex-row sm:mt-5 lg:flex-row justify-content-between items-center h-14 container-fluid m-auto '>
-          <div className='flex sm:mt-2'>
-            <div className='w-10 h-10 md:w-12 md:h-12  flex items-center justify-center'>
-              <a
-                target={'_blank'}
-                href={'https://web.whatsapp.com/send?phone=98919419-+9420'}
-                className='inline-flex rounded-full p-[0.4rem] text-[#57C5C6]  bg-[#fff] hover:bg-[#014258] hover:text-[#fff] 	'
-              >
-                <FaWhatsapp />
-              </a>
-            </div>
-            <div className=' w-10 h-10 md:w-12 md:h-12 flex items-center justify-center'>
-              <a
-                href={'https://www.instagram.com/miphospital/'}
-                target={'_blank'}
-                className='mx-5 inline-flex rounded-full p-[0.4rem] text-[#57C5C6]  bg-[#fff] hover:bg-[#014258] hover:text-[#fff] '
-              >
-                <FaInstagram />
-              </a>
-            </div>
-            {/* <div className=' w-10 h-10 md:w-12 md:h-12 flex items-center justify-center'>
-              <a
-                href={'https://www.aparat.com/miphospital'}
-                target={'_blank'}
-                className='mx-5 inline-flex rounded-full p-[0.4rem] text-[#57C5C6]  bg-[#fff] hover:bg-[#014258] hover:text-[#fff] '
-              >
-                <SiAparat />
-              </a>
-            </div> */}
-            <div className='flex items-center justify-center'>
-              <a
-                href={'tel:02153457000'}
-                className='rounded-full flex items-center p-[0.4rem] bg-[#39a2a5] text-[#fff]  hover:bg-[#57c5c6] hover:text-[#fff] '
-              >
-                <span className={'text-sm'}> 021-53457000</span>
-                {/* <span className={'text-sm ml-2'}>:خرید سهام</span> */}
-              </a>
-            </div>
-          </div>
-
-          <div className='show-addr col-span-2 flex items-center flex-row-reverse mr-4 meheAddress'>
-            <img src='/resource/headerTop/map.svg' className='tex-white w-[2rem]  map' alt='address' />
-            <span className=' text-[0.6rem]  text-right md:text-xs	xl:text-sm	 md:leading-5 font-medium text-white addresstopHeader'>
-              تهران ، شهر جدید پرند، بلوار شهیدقاسم سلیمانی، انتهای فاز 5 ،نبش بلوار رسول اکرم
-            </span>
-          </div>
-        </div>
-      </div>
-      {/* end topheader */}
-
-      {/* navbar */}
-      <MDBNavbar style={{ backgroundColor: '#39a2a5' }} expand='lg' light ba>
-        <style jsx>
-          {`
-            .responsive-menu-mobile {
-              outline: none;
-              background-color: red !important;
-            }
-          `}
-        </style>
-        <MDBContainer className={'dana'} fluid>
-          <MDBNavbarToggler
-            aria-expanded='false'
-            aria-label='Toggle navigation'
-            onClick={() => setShowNavSecond(!showNavSecond)}
-          >
-            <HamburgerIcon />
-          </MDBNavbarToggler>
-          <MDBCollapse navbar show={showNavSecond}>
-            <MDBNavbar>
-              <MDBDropdown group className=''>
-                <MDBDropdownToggle
-                  className={'font-weight-bold '}
-                  style={{ fontsize: '35px !important' }}
-                  color='light'
-                >
-                  بیشتر
-                </MDBDropdownToggle>
-                <MDBDropdownMenu>
-                  <MDBDropdownItem>
-                    <Link href={'/page/Directors'}>
-                      <MDBDropdownLink style={{ cursor: 'pointer' }} className={'d-flex  justify-content-end'}>
-                        تیم پروژه{' '}
-                      </MDBDropdownLink>
-                    </Link>
-                  </MDBDropdownItem>
-                  <Link href={'/page/about'}>
-                    <MDBDropdownLink style={{ cursor: 'pointer' }} className={'d-flex  justify-content-end'}>
-                      درباره ما
-                    </MDBDropdownLink>
-                  </Link>
-                  {/* <MDBDropdownItem></MDBDropdownItem> */}
-                  {/* <MDBDropdownItem>
-                    <Link href={'/page/docs'}>
-                      <MDBDropdownLink style={{ cursor: 'pointer' }} className={'d-flex  justify-content-end'}>
-                        اسناد رسمی شرکت{' '}
-                      </MDBDropdownLink>
-                    </Link>
-                  </MDBDropdownItem> */}
-                  <MDBDropdownItem>
-                    <MDBDropdownLink
-                      target={'__blanck'}
-                      href={'https://www.instagram.com/miphospital'}
-                      className={'d-flex justify-content-end'}
-                    >
-                      اینستاگرام
-                    </MDBDropdownLink>
-                  </MDBDropdownItem>
-                </MDBDropdownMenu>
-              </MDBDropdown>
-            </MDBNavbar>
-            <MDBNavbarNav className={'responsive-menu-mobile'}>
-              <MDBNavbarLink
-                className={
-                  router.pathname === '/page/contact-us' ? 'active-item text-white' : '' + 'text-white nav_item '
-                }
-              >
-                <Link
-                  prefetch={false}
-                  className={'text-white nav_item d-flex flex-row-reverse '}
-                  href='/page/contact-us'
-                >
-                  <div className={'pointer d-flex justify-content-end'}>
-                    <span style={{ cursor: 'pointer', fontSize: '15px' }}> تماس با ما</span>
-                  </div>
-                </Link>
-              </MDBNavbarLink>
-
-              <MDBNavbarLink
-                className={router.pathname === '/Gallery' ? 'active-item text-white' : '' + 'text-white nav_item '}
-              >
-                <Link className={'text-white nav_item d-flex flex-row-reverse '} href='/Gallery'>
-                  <div className={'pointer d-flex justify-content-end'}>
-                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>گالری</span>
-                  </div>
-                </Link>
-              </MDBNavbarLink>
-              <MDBNavbarLink
-                className={
-                  router.pathname === '/components/service' ? 'active-item text-white' : '' + 'text-white nav_item '
-                }
-              >
-                <Link
-                  prefetch={false}
-                  className={'text-white nav_item d-flex flex-row-reverse '}
-                  href='/components/service'
-                >
-                  <div className={'pointer d-flex justify-content-end'}>
-                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>بخش های درمانی</span>
-                  </div>
-                </Link>
-              </MDBNavbarLink>
-              {/* <MDBNavbarLink
-                className={router.pathname === '/page/news/34' ? 'active-item text-white' : '' + 'text-white nav_item '}
-              >
-                <Link prefetch={false} className={'text-white nav_item d-flex flex-row-reverse '} href='/page/news/34'>
-                  <div className={'pointer d-flex justify-content-end'}>
-                    <span style={{ cursor: 'pointer', fontSize: '15px' }}> شرایط انتقال سهام</span>
-                  </div>
-                </Link>
-              </MDBNavbarLink> */}
-              {/* <MDBNavbarLink
-                className={
-                  router.pathname === '/medical-equipment' ? 'active-item text-white' : '' + 'text-white nav_item '
-                }
-              >
-                <Link className={'text-white nav_item d-flex flex-row-reverse '} href='/medical-equipment'>
-                  <div className={'pointer d-flex justify-content-end'}>
-                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>واحد تجهیزات پزشکی </span>
-                  </div>
-                </Link>
-              </MDBNavbarLink> */}
-              {/* <MDBNavbarLink
-                className={router.pathname === '/stock-unit' ? 'active-item text-white' : '' + 'text-white nav_item '}
-              >
-                <Link className={'text-white nav_item d-flex flex-row-reverse '} href='/stock-unit'>
-                  <div className={'pointer d-flex justify-content-end'}>
-                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>امور سهام </span>
-                  </div>
-                </Link>
-              </MDBNavbarLink> */}
-
-              {/* <MDBNavbarLink
-                className={router.pathname === '/page/news/52' ? 'active-item text-white' : '' + 'text-white nav_item '}
-              >
-                <Link prefetch={false} className={'text-white nav_item d-flex flex-row-reverse '} href='/stock-price'>
-                  <div className={'pointer d-flex justify-content-end'}>
-                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>قیمت سهام</span>
-                  </div>
-                </Link>
-              </MDBNavbarLink> */}
-
-              <MDBNavbarLink
-                className={router.pathname === '/' ? 'active-item text-white' : '' + 'text-white nav_item '}
-              >
-                <Link className={'text-white nav_item d-flex flex-row-reverse '} href='/'>
-                  <div className={'pointer d-flex justify-content-end'}>
-                    <span style={{ cursor: 'pointer', fontSize: '15px' }}>صفحه اصلی</span>
-                  </div>
-                </Link>
-              </MDBNavbarLink>
-            </MDBNavbarNav>
-          </MDBCollapse>
-          <MDBNavbarBrand className={'text-white font-weight-bold'}>
-            <Link className={'text-white nav_item d-flex flex-row-reverse '} href='/'>
-              <div className={'pointer'}>
-                <span className={'dana'} style={{ cursor: 'pointer' }}>
-                  بیمارستان مهر پرند
-                </span>
-              </div>
-            </Link>
-            <MDBCardImage className={'responsive-img resLogo'} width={'50'} src={'/resource/logo/logo.png'} />
-          </MDBNavbarBrand>
-        </MDBContainer>
-      </MDBNavbar>
-    </>
-  )
-}
+import React, { useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { FiChevronDown, FiInstagram, FiMapPin, FiMenu, FiPhone, FiX } from 'react-icons/fi'
+
+const mainLinks = [
+  { href: '/', label: 'صفحه اصلی' },
+  { href: '/landing', label: 'معرفی بیمارستان' },
+  { href: '/components/service', label: 'بخش‌های درمانی' },
+  { href: '/Gallery', label: 'گالری' },
+  { href: '/recruitment', label: 'استخدام و همکاری' },
+]
+
+const moreLinks = [
+  { href: '/page/about', label: 'درباره ما' },
+  { href: '/page/Directors', label: 'تیم پروژه' },
+]
+
+export default function Header() {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const { pathname } = useRouter()
+  const closeMenu = () => setMenuOpen(false)
+  const moreIsActive = moreLinks.some(({ href }) => pathname === href)
+
+  return (
+    <header className='site-header' dir='rtl' onKeyDown={event => event.key === 'Escape' && closeMenu()}>
+      <div className='topbar'>
+        <div className='header-container topbar-inner'>
+          <div className='topbar-location'>
+            <FiMapPin aria-hidden='true' />
+            <span>تهران، شهر جدید پرند، بلوار شهید قاسم سلیمانی، انتهای فاز ۵</span>
+          </div>
+          <div className='topbar-actions'>
+            <a href='tel:02153457000' className='phone-link'>
+              <FiPhone aria-hidden='true' />
+              <span dir='ltr'>۰۲۱-۵۳۴۵۷۰۰۰</span>
+            </a>
+            <span className='topbar-divider' aria-hidden='true' />
+            <a
+              className='social-link'
+              href='https://www.instagram.com/miphospital/'
+              target='_blank'
+              rel='noopener noreferrer'
+              aria-label='اینستاگرام بیمارستان مهر پرند'
+            >
+              <FiInstagram aria-hidden='true' />
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className='mainbar'>
+        <div className='header-container mainbar-inner'>
+          <Link href='/'>
+            <a className='brand' onClick={closeMenu} aria-label='بیمارستان مهر پرند، صفحه اصلی'>
+              <img src='/resource/logo/logo-green.png' alt='' width='56' height='53' />
+              <span className='brand-copy'>
+                <strong>بیمارستان مهر پرند</strong>
+                <small>همراه سلامت شما</small>
+              </span>
+            </a>
+          </Link>
+
+          <button
+            className='menu-toggle'
+            type='button'
+            aria-label={menuOpen ? 'بستن منو' : 'باز کردن منو'}
+            aria-expanded={menuOpen}
+            aria-controls='site-navigation'
+            onClick={() => setMenuOpen(open => !open)}
+          >
+            {menuOpen ? <FiX aria-hidden='true' /> : <FiMenu aria-hidden='true' />}
+          </button>
+
+          <nav id='site-navigation' className={`navigation ${menuOpen ? 'is-open' : ''}`} aria-label='منوی اصلی'>
+            <div className='nav-links'>
+              {mainLinks.map(({ href, label }) => (
+                <Link href={href} key={href}>
+                  <a className={pathname === href ? 'nav-link active' : 'nav-link'} aria-current={pathname === href ? 'page' : undefined} onClick={closeMenu}>
+                    {label}
+                  </a>
+                </Link>
+              ))}
+              <details className='more-menu'>
+                <summary className={moreIsActive ? 'nav-link active' : 'nav-link'}>
+                  بیشتر <FiChevronDown aria-hidden='true' />
+                </summary>
+                <div className='more-panel'>
+                  {moreLinks.map(({ href, label }) => (
+                    <Link href={href} key={href}>
+                      <a aria-current={pathname === href ? 'page' : undefined} onClick={closeMenu}>
+                        {label}
+                      </a>
+                    </Link>
+                  ))}
+                </div>
+              </details>
+            </div>
+            <Link href='/page/contact-us'>
+              <a className='contact-button' onClick={closeMenu}>تماس با ما</a>
+            </Link>
+          </nav>
+        </div>
+      </div>
+
+      <style jsx>{`
+        .site-header {
+          position: relative;
+          z-index: 30;
+          width: 100%;
+          font-family: dana-fanum, sans-serif;
+        }
+        .header-container {
+          width: calc(100% - 40px);
+          max-width: 1240px;
+          margin: 0 auto;
+        }
+        .topbar {
+          color: #e6f6f5;
+          background: #12464e;
+        }
+        .topbar-inner,
+        .topbar-location,
+        .topbar-actions,
+        .phone-link {
+          display: flex;
+          align-items: center;
+        }
+        .topbar-inner {
+          min-height: 42px;
+          justify-content: space-between;
+          gap: 20px;
+          font-size: 12px;
+        }
+        .topbar-location,
+        .topbar-actions,
+        .phone-link {
+          gap: 9px;
+        }
+        .topbar-location {
+          min-width: 0;
+        }
+        .topbar-location span {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .topbar a {
+          color: inherit;
+          text-decoration: none;
+        }
+        .topbar a:hover {
+          color: #89e1da;
+        }
+        .topbar-actions {
+          flex-shrink: 0;
+        }
+        .topbar-divider {
+          width: 1px;
+          height: 17px;
+          background: rgba(255, 255, 255, .25);
+        }
+        .social-link {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          font-size: 17px;
+        }
+        .mainbar {
+          background: #fff;
+          box-shadow: 0 7px 24px rgba(13, 71, 76, .08);
+        }
+        .mainbar-inner {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          min-height: 84px;
+          gap: 28px;
+        }
+        .brand {
+          display: inline-flex;
+          align-items: center;
+          flex-shrink: 0;
+          gap: 11px;
+          color: #164a50;
+          text-decoration: none;
+        }
+        .brand:hover {
+          color: #164a50;
+        }
+        .brand img {
+          display: block;
+          width: 56px;
+          height: 53px;
+          object-fit: contain;
+        }
+        .brand-copy {
+          display: flex;
+          flex-direction: column;
+          line-height: 1.55;
+        }
+        .brand-copy strong {
+          font-size: 18px;
+          font-weight: 800;
+        }
+        .brand-copy small {
+          color: #6c898d;
+          font-size: 11px;
+        }
+        .navigation,
+        .nav-links {
+          display: flex;
+          align-items: center;
+        }
+        .navigation {
+          justify-content: space-between;
+          flex: 1;
+          min-width: 0;
+          gap: 20px;
+        }
+        .nav-links {
+          gap: 2px;
+        }
+        .nav-link {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 5px;
+          padding: 12px 10px;
+          border: 0;
+          border-radius: 10px;
+          color: #34575b;
+          font-size: 13px;
+          font-weight: 700;
+          white-space: nowrap;
+          text-decoration: none;
+          cursor: pointer;
+          transition: color .2s ease, background-color .2s ease;
+        }
+        .nav-link:hover,
+        .nav-link.active,
+        .more-menu[open] > .nav-link {
+          color: #147f80;
+          background: #eaf7f5;
+        }
+        .more-menu {
+          position: relative;
+        }
+        .more-menu summary {
+          list-style: none;
+        }
+        .more-menu summary::-webkit-details-marker {
+          display: none;
+        }
+        .more-panel {
+          position: absolute;
+          top: calc(100% + 10px);
+          right: 0;
+          z-index: 10;
+          min-width: 162px;
+          padding: 7px;
+          border: 1px solid #e0efed;
+          border-radius: 14px;
+          background: #fff;
+          box-shadow: 0 14px 32px rgba(21, 72, 77, .14);
+        }
+        .more-panel a {
+          display: block;
+          padding: 10px 12px;
+          border-radius: 8px;
+          color: #34575b;
+          font-size: 13px;
+          text-decoration: none;
+          white-space: nowrap;
+        }
+        .more-panel a:hover,
+        .more-panel a[aria-current='page'] {
+          color: #147f80;
+          background: #eaf7f5;
+        }
+        .contact-button {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          min-height: 42px;
+          padding: 0 18px;
+          border-radius: 11px;
+          color: #fff;
+          background: #168b89;
+          font-size: 13px;
+          font-weight: 700;
+          text-decoration: none;
+          white-space: nowrap;
+          transition: background-color .2s ease, transform .2s ease;
+        }
+        .contact-button:hover {
+          color: #fff;
+          background: #106e70;
+          transform: translateY(-2px);
+        }
+        .menu-toggle {
+          display: none;
+          align-items: center;
+          justify-content: center;
+          width: 44px;
+          height: 44px;
+          border: 1px solid #d7e9e7;
+          border-radius: 11px;
+          color: #176f73;
+          background: #f2f9f8;
+          font-size: 22px;
+          cursor: pointer;
+        }
+        .site-header a:focus-visible,
+        .site-header button:focus-visible,
+        .site-header summary:focus-visible {
+          outline: 3px solid #57c5c6;
+          outline-offset: 3px;
+        }
+        @media (max-width: 1100px) {
+          .mainbar-inner {
+            position: relative;
+            min-height: 74px;
+          }
+          .menu-toggle {
+            display: inline-flex;
+          }
+          .navigation {
+            display: none;
+            position: absolute;
+            top: 100%;
+            right: 0;
+            left: 0;
+            z-index: 20;
+            flex-direction: column;
+            align-items: stretch;
+            gap: 12px;
+            max-height: calc(100vh - 116px);
+            overflow-y: auto;
+            padding: 15px;
+            border: 1px solid #e0efed;
+            border-radius: 0 0 16px 16px;
+            background: #fff;
+            box-shadow: 0 17px 30px rgba(21, 72, 77, .14);
+          }
+          .navigation.is-open,
+          .nav-links {
+            display: flex;
+          }
+          .nav-links {
+            flex-direction: column;
+            align-items: stretch;
+          }
+          .nav-link {
+            display: flex;
+            justify-content: space-between;
+            padding: 12px 14px;
+          }
+          .more-panel {
+            position: static;
+            margin: 4px 12px 8px;
+            box-shadow: none;
+          }
+          .contact-button {
+            width: 100%;
+          }
+        }
+        @media (max-width: 700px) {
+          .header-container {
+            width: calc(100% - 32px);
+          }
+          .topbar-inner {
+            min-height: 36px;
+            justify-content: center;
+          }
+          .topbar-location {
+            display: none;
+          }
+          .mainbar-inner {
+            min-height: 68px;
+          }
+          .brand img {
+            width: 47px;
+            height: 45px;
+          }
+          .brand-copy strong {
+            font-size: 15px;
+          }
+          .brand-copy small {
+            font-size: 10px;
+          }
+          .navigation {
+            max-height: calc(100vh - 104px);
+          }
+        }
+      `}</style>
+    </header>
+  )
+}