mip-website/pages/components/Layout/footer.js

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>
  )
}