fix: seo friendly

README.md

@@ -1 +1,34 @@
-This is a starter template for [Learn Next.js](https://nextjs.org/learn).
+# وب‌سایت بیمارستان مهر پرند
+
+پروژه با Next.js 11 و Pages Router اجرا می‌شود.
+
+## اجرا و بررسی
+
+```sh
+npm run dev
+npm run build
+npm run start
+npm test
+```
+
+تست‌ها با test runner داخلی Node.js اجرا می‌شوند و به Node.js 20 یا جدیدتر نیاز دارند. بیلد فعلی با Node.js 14.21.3 بررسی شده است؛ ارتقای نسخه‌های قدیمی Next.js و Node.js باید جداگانه انجام شود. تنظیمات و نسخه ESLint موجود با فرایند lint این نسخه Next.js سازگار نیست و بیلد هشدار می‌دهد؛ موفقیت بیلد به معنی موفقیت lint نیست.
+
+## تنظیمات سئو
+
+- عنوان و توضیحات صفحات عمومی و آدرس اصلی سایت در `lib/seo.js` تعریف شده‌اند. هنگام افزودن صفحه عمومی، آن را به `PUBLIC_PAGES` اضافه کنید؛ این فهرست منبع صفحات ثابت sitemap نیز هست.
+- `src/components/Seo.jsx` از طریق `_app.js` متادیتا، canonical، Open Graph، Twitter Card و JSON-LD را در HTML سرور تولید می‌کند. متادیتای محتوای پویا را با `props.seo` از `getServerSideProps` ارسال کنید.
+- canonical از دامنه ثابت HTTPS ساخته می‌شود و query string و fragment را حذف می‌کند. عنوان سفارشی صفحات را در registry یا `props.seo` تنظیم کنید؛ prop قدیمی `AppContainer.title` دیگر منبع متادیتا نیست.
+- صفحات فنی، کامپوننت‌های مستقل، فرم‌های درخواست و پیگیری و نمودارهایی که محتوایشان صرفاً سمت مرورگر است، به‌صورت پیش‌فرض `noindex, follow` هستند. صفحه عمومی بخش‌ها در `/components/service` استثنا است. `noindex` جایگزین کنترل دسترسی نیست.
+- سند HTML دارای `lang="fa"` و `dir="rtl"` است. داده ساختاریافته بیمارستان از اطلاعات تماس موجود سایت ساخته شده؛ ساعت کاری یا تاریخ افتتاح فرضی درج نشده است.
+
+## نقشه سایت و اخبار
+
+آدرس عمومی نقشه سایت `https://miphospital.ir/sitemap.xml` است و به handler موجود `/api/my-sitemap` بازنویسی می‌شود. robots.txt همین آدرس HTTPS را معرفی می‌کند.
+
+نقشه سایت صفحات عمومی و شناسه‌های معتبر اخبار برگشتی از `AppUrl('news')` را شامل می‌شود. اگر API اخبار در دسترس نباشد، صفحات ثابت همچنان برگردانده می‌شوند و زمان cache به ۶۰ ثانیه کاهش می‌یابد. API فعلی باید آرایه اخبار یا آبجکت دارای آرایه `data` برگرداند؛ در صورت اضافه شدن pagination، پیمایش صفحه‌های API نیز باید اضافه شود.
+
+خبر ناموجود پاسخ ۴۰۴ دارد؛ خرابی موقت API جزئیات خبر به خطای سرور منجر می‌شود. فهرست اخبار هنگام خرابی API پاسخ ۵۰۳ با `Retry-After` می‌دهد تا خطا به‌عنوان محتوای خالی موفق ثبت نشود.
+
+در بررسی محلی، API فعلی اخبار (`https://mehrara-api.iran.liara.run/api/news`) پاسخ ۴۰۴ داد؛ در نتیجه مسیرهای واقعی اخبار و محتوای زنده آن‌ها تا رفع API قابل بررسی نیستند. بعد از انتشار، sitemap را در Google Search Console ثبت و صفحات اصلی را با URL Inspection بررسی کنید.
+
+مرجع: [راهنمای فنی سئو برای توسعه‌دهندگان در Google Search Central](https://developers.google.com/search/docs/fundamentals/get-started-developers).

lib/seo.js

@@ -0,0 +1,116 @@
+const SITE_URL = 'https://miphospital.ir'
+const SITE_NAME = 'بیمارستان مهر پرند'
+const DEFAULT_DESCRIPTION = 'وب‌سایت رسمی بیمارستان مهر ایرانیان پرند؛ معرفی بیمارستان، بخش‌های تخصصی، اخبار افتتاح، فرصت‌های شغلی و راه‌های ارتباط با ما.'
+const DEFAULT_IMAGE = `${SITE_URL}/resource/logo/logo-green.png`
+
+// This registry also defines the public, canonical pages included in the sitemap.
+const PUBLIC_PAGES = {
+  '/': [SITE_NAME, DEFAULT_DESCRIPTION],
+  '/landing': ['معرفی بیمارستان مهر پرند', 'با بیمارستان مهر پرند، زیرساخت‌های درمانی، بخش‌های تخصصی، امکانات و مسیرهای ارتباط با بیمارستان آشنا شوید.'],
+  '/page/about': ['درباره بیمارستان', 'معرفی بیمارستان مهر ایرانیان پرند، اهداف، امکانات و آخرین وضعیت پیشرفت پروژه بیمارستان در شهر پرند.'],
+  '/page/contact-us': ['تماس با ما', 'آدرس بیمارستان مهر پرند در فاز ۵، بلوار شهید قاسم سلیمانی؛ شماره تماس ۰۲۱-۵۳۴۵۷۰۰۰، ایمیل و موقعیت بیمارستان روی نقشه.'],
+  '/page/Directors': ['تیم پروژه بیمارستان', 'آشنایی با اعضای تیم و مدیران پروژه بیمارستان مهر ایرانیان پرند.'],
+  '/page/docs': ['اسناد رسمی شرکت', 'دسترسی به اساسنامه و اسناد رسمی شرکت پزشکی مهر ایرانیان پرند.'],
+  '/page/cooperationsales': ['همکاری در فروش', 'اطلاعات و شرایط همکاری در فروش با شرکت پزشکی مهر ایرانیان پرند.'],
+  '/Gallery': ['گالری تصاویر بیمارستان', 'تصاویر ساختمان، فضاهای داخلی و روند پیشرفت پروژه بیمارستان مهر پرند.'],
+  '/News': ['اخبار و اطلاعیه‌ها', 'اخبار، اطلاعیه‌ها و فایل‌های معرفی بیمارستان مهر ایرانیان پرند.'],
+  '/questions': ['سوالات متداول', 'پاسخ به سوالات متداول درباره بیمارستان مهر پرند و امکانات باشگاه سهامداران.'],
+  '/recruitment': ['فرصت‌های شغلی و استخدام', 'مشاهده فرصت‌های شغلی و گروه‌های استخدامی بیمارستان مهر ایرانیان پرند و ارسال درخواست همکاری.'],
+  '/medical-equipment': ['واحد تجهیزات پزشکی', 'آشنایی با واحد تجهیزات پزشکی بیمارستان مهر پرند و راه‌های ارتباط با این واحد.'],
+  '/components/service': ['کلینیک‌ها و بخش‌ها', 'معرفی کلینیک‌ها و بخش‌های تخصصی بیمارستان مهر پرند و امکانات هر بخش.'],
+  '/stock-unit': ['واحد امور سهام', 'اطلاعات واحد امور سهام بیمارستان مهر پرند و دسترسی به خدمات و راه‌های ارتباط با این واحد.']
+}
+
+const UTILITY_TITLES = {
+  '/CooperationRequest': 'درخواست همکاری',
+  '/recruitment/inquiry': 'استعلام وضعیت درخواست استخدام',
+  '/stock-unit/stock-check': 'پیگیری درخواست سهام',
+  '/stock-unit/stock-sales': 'درخواست خرید سهام',
+  '/stock-unit/stock-transfer': 'درخواست انتقال سهام',
+  '/stock-price': 'قیمت سهام بیمارستان مهر پرند',
+  '/page/stock-price': 'نمودار قیمت سهام',
+  '/page/sales': 'ارتباط با واحد فروش',
+  '/smartadvice': 'مشاوره سرمایه‌گذاری'
+}
+
+function canonicalUrl(path = '/') {
+  const clean = String(path).split(/[?#]/)[0]
+  if (!clean.startsWith('/') || clean.startsWith('//') || clean.includes('\\')) return `${SITE_URL}/`
+  return SITE_URL + (clean.replace(/\/+$/, '') || '/')
+}
+
+function getSeo(path = '/', overrides = {}) {
+  const canonical = canonicalUrl(path)
+  const pathname = canonical.slice(SITE_URL.length)
+  const page = PUBLIC_PAGES[pathname]
+  const dynamicPublic = /^\/page\/news\/[^/]+$/.test(pathname) || /^\/recruitment\/item\/[^/]+$/.test(pathname)
+  return {
+    title: page ? page[0] : UTILITY_TITLES[pathname] || (pathname.startsWith('/recruitment/item/request/') ? 'ثبت درخواست استخدام' : SITE_NAME),
+    description: page ? page[1] : DEFAULT_DESCRIPTION,
+    image: DEFAULT_IMAGE,
+    type: 'website',
+    noindex: !page && !dynamicPublic,
+    ...overrides,
+    canonical
+  }
+}
+
+function newsSeo(post, slug) {
+  const text = String(post.text || '')
+    .replace(/<(script|style)\b[^>]*>[\s\S]*?<\/\1>/gi, '')
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/&nbsp;|&#160;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/\s+/g, ' ').trim()
+  const description = text.slice(0, 160) || post.title
+  const image = post.cover ? `https://mehrara-api.iran.liara.run/panel-public/uploads/${post.cover}` : DEFAULT_IMAGE
+  const canonical = canonicalUrl(`/page/news/${encodeURIComponent(slug)}`)
+  return {
+    title: post.title,
+    description,
+    image,
+    type: 'article',
+    structuredData: {
+      '@context': 'https://schema.org',
+      '@type': 'NewsArticle',
+      headline: post.title,
+      description,
+      image: [image],
+      mainEntityOfPage: canonical,
+      publisher: { '@id': `${SITE_URL}/#hospital` }
+    }
+  }
+}
+
+const hospitalSchema = {
+  '@context': 'https://schema.org',
+  '@type': 'Hospital',
+  '@id': `${SITE_URL}/#hospital`,
+  name: SITE_NAME,
+  alternateName: 'بیمارستان مهر ایرانیان پرند',
+  url: `${SITE_URL}/`,
+  logo: DEFAULT_IMAGE,
+  telephone: '+98-21-53457000',
+  email: 'contact-us@miphospital.ir',
+  address: {
+    '@type': 'PostalAddress',
+    addressCountry: 'IR',
+    addressRegion: 'تهران',
+    addressLocality: 'پرند',
+    streetAddress: 'فاز ۵، بلوار شهید قاسم سلیمانی، نبش بلوار رسول اکرم (ص)'
+  },
+  sameAs: ['https://www.instagram.com/miphospital/']
+}
+
+function serializeJsonLd(value) {
+  return JSON.stringify(value).replace(/</g, '\\u003c')
+}
+
+function sitemapLinks(news = []) {
+  const articles = news
+    .filter(post => post && /^\d+$/.test(String(post.id)))
+    .map(post => `/page/news/${post.id}`)
+  return [...new Set([...Object.keys(PUBLIC_PAGES), ...articles])]
+}
+
+module.exports = { SITE_URL, SITE_NAME, canonicalUrl, getSeo, newsSeo, hospitalSchema, serializeJsonLd, sitemapLinks }

next.config.js

@@ -4,13 +4,14 @@ module.exports = {
   experimental: {
     outputStandalone: true
   },
-  siteUrl: 'https://miphospital.ir',
-  generateRobotsTxt: true, // (optional)
   ...withImages(),
   // future: {
   //   webpack5: true
   // },
   images: {
     disableStaticImages: true
+  },
+  async rewrites() {
+    return [{ source: '/sitemap.xml', destination: '/api/my-sitemap' }]
   }
 }

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "test": "node --test tests/*.test.cjs",
     "dev": "next dev -p 2000",
     "build": "next build",
     "start": "next start -p 2000"

pages/Gallery.js

@@ -60,7 +60,7 @@ const Gallery = ({ images }) => {
   }, [selectedImage, images.length])
 
   return (
-    <AppContainer title='گالری بیمارستان مهر ایرانیان پرند'>
+    <AppContainer title='گالری بیمارستان مهر پرند'>
       <style jsx>{`
         .gallery-page {
           direction: rtl;
@@ -258,7 +258,7 @@ const Gallery = ({ images }) => {
           loader={galleryBannerLoader}
           src='gallery-banner.jpg'
           className='responsive-img shadow-5'
-          alt='گالری بیمارستان مهر ایرانیان پرند'
+          alt='گالری بیمارستان مهر پرند'
           width={3000}
           height={1300}
           priority
@@ -268,7 +268,7 @@ const Gallery = ({ images }) => {
       <main className='gallery-page'>
         <header className='gallery-header'>
           <h2>گالری تصاویر</h2>
-          <p>تصاویر بیمارستان مهر ایرانیان پرند</p>
+          <p>تصاویر بیمارستان مهر پرند</p>
         </header>
 
         <section className='gallery-grid' aria-label='تصاویر گالری بیمارستان'>
@@ -345,7 +345,7 @@ export async function getStaticProps() {
   const images = fileNames.map((fileName, index) => ({
     id: fileName,
     image: `/resource/images/gallery/${encodeURIComponent(fileName)}`,
-    title: `تصویر ${index + 1} از بیمارستان مهر ایرانیان پرند`
+    title: `تصویر ${index + 1} از بیمارستان مهر پرند`
   }))
 
   return {

pages/News.js

@@ -1,105 +1,59 @@
-import React from 'react'
-import {
-  MDBCard,
-  MDBCardImage,
-  MDBCardBody,
-  MDBCardTitle,
-  MDBCardText,
-  MDBRow,
-  MDBCol,
-  MDBContainer,
-  MDBCardHeader,
-  MDBBtn,
-  MDBIcon,
-  MDBInputGroupText,
-  MDBTypography
-} from 'mdb-react-ui-kit'
-import axios from 'axios'
-import Link from 'next/link'
-import AppContainer from './appContainer'
-import { useRouter } from 'next/router'
-import { AppUrl } from '../lib/api'
-import { DownloadIcon } from '@chakra-ui/icons'
-
-const News = ({ data, children }) => {
-  const router = useRouter()
-  const query = router.query.list
-
-  const dataPage = (
-    <div className='lg:mx-20 sm:mx-5'>
-      <h5 style={{ marginTop: '2rem' }} className={'right-align font-weight-bold'}>
-        اطلاعیه ها{' '}
-      </h5>
-      <hr />
-      <div>
-        <MDBTypography
-          style={{ direction: 'rtl', borderRadius: '6px solid', borderRight: '6px  solid #1266f1', borderLeft: 'none' }}
-          note
-          noteColor='primary'
-        >
-          <DownloadIcon className={'ml-2'} />
-          <a
-            title={'دانلود دفترچه معرفی و فروش سهام عمومی بیمارستان تخصصی مهر ایرانیان پرند'}
-            download
-            href={'./take-stock.pdf'}
-          >
-            {' '}
-            دانلود دفترچه معرفی و فروش سهام عمومی بیمارستان تخصصی مهر پرند
-          </a>
-        </MDBTypography>
-        <MDBTypography
-          style={{ direction: 'rtl', borderRadius: '6px solid', borderRight: '6px  solid #1266f1', borderLeft: 'none' }}
-          note
-          noteColor='primary'
-        >
-          <DownloadIcon className={'ml-2'} />
-          <a
-            title={'دانلود طرح توجیهی  بیمارستان تخصصی مهر ایرانیان پرند'}
-            download
-            href={'./Explanatory_plan_of_Mehr_ranian_Parand_Hospital.pdf'}
-          >
-            {' '}
-            دانلود طرح توجیهی بیمارستان تخصصی مهر ایرانیان پرند
-          </a>
-        </MDBTypography>
-      </div>
-      <br />
-      {/* <MDBRow dir={'rtl'} className='row-cols-1 row-cols-md-3 g-4'>
-                {data && data.map(({ id, slug, title }) => (
-                    <MDBCol key={id}>
-                        <Link href={`page/news/${id}`} >
-                        <MDBCard className='mb-3 h-3/12 new-card'>
-                            <MDBCardHeader title={title} className={'right-align bk-med RTL  font-weight-bold border-bottom-1 border-white '}>{title} </MDBCardHeader>
-                            <MDBCardBody>
-                                <MDBCardText className={'right-align RTL text-summery'}>
-                                    {slug}
-                                </MDBCardText>
-                                <div className={'flex justify-content-end'}>
-                                    <MDBBtn rounded className=' RTL text-primary-teal    bg-white'>
-                                        مشاهده 
-                                    </MDBBtn>
-                                </div>
-                            </MDBCardBody>
-                        </MDBCard>
-                        </Link>
-                    </MDBCol>
-                ))}
-            </MDBRow> */}
-      {children}
-    </div>
-  )
-  return <div>{/* {query ? <AppContainer children={dataPage} title={'اطلاعیه ها '} /> : dataPage} */}</div>
-}
-
-export default News
-
-export const getServerSideProps = async context => {
-//   const allPostsData = await axios.get(AppUrl('news'))
-//   const data = await allPostsData.data
-  return {
-    props: {
-      data: null,
-      fallback: false
-    } // will be passed to the page component as props
-  }
-}
+import React from 'react'
+import axios from 'axios'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import AppContainer from './appContainer'
+import { AppUrl } from '../lib/api'
+import { newsSeo } from '../lib/seo'
+
+export default function News({ data = [], unavailable = false, children }) {
+  const router = useRouter()
+  const isHome = router.pathname === '/'
+  const posts = (Array.isArray(data) ? data : []).filter(post => post && post.title && /^\d+$/.test(String(post.id)))
+  if (isHome && posts.length === 0) return null
+
+  const content = (
+    <section className='lg:mx-20 sm:mx-5 my-5 RTL' aria-labelledby='news-title'>
+      {isHome ? <h2 id='news-title'>اخبار و اطلاعیه‌ها</h2> : <h1 id='news-title'>اخبار و اطلاعیه‌های بیمارستان مهر پرند</h1>}
+      <hr />
+      {unavailable && <p role='status'>دریافت اخبار موقتاً امکان‌پذیر نیست. لطفاً کمی بعد دوباره مراجعه کنید.</p>}
+      <div className='row row-cols-1 row-cols-md-3 g-4'>
+        {posts.map(post => (
+          <article className='col' key={post.id}>
+            <div className='card h-100 p-4'>
+              <h2 className='h5'>
+                <Link href={`/page/news/${post.id}`}><a>{post.title}</a></Link>
+              </h2>
+              <p>{newsSeo(post, post.id).description}</p>
+              <Link href={`/page/news/${post.id}`}><a>مشاهده خبر</a></Link>
+            </div>
+          </article>
+        ))}
+      </div>
+      {!isHome && (
+        <div className='mt-4'>
+          <h2 className='h5'>فایل‌های معرفی بیمارستان</h2>
+          <p><a download href='/take-stock.pdf'>دانلود دفترچه معرفی و فروش سهام عمومی بیمارستان مهر پرند</a></p>
+          <p><a download href='/Explanatory_plan_of_Mehr_ranian_Parand_Hospital.pdf'>دانلود طرح توجیهی بیمارستان مهر پرند</a></p>
+        </div>
+      )}
+      {children}
+    </section>
+  )
+
+  return isHome ? content : <AppContainer>{content}</AppContainer>
+}
+
+export async function getServerSideProps({ res }) {
+  try {
+    const { data } = await axios.get(AppUrl('news'), { timeout: 10000 })
+    const posts = Array.isArray(data) ? data : data && data.data
+    if (!Array.isArray(posts)) throw new Error('Unexpected news response')
+    return { props: { data: posts } }
+  } catch (error) {
+    console.warn('News list: API unavailable:', error.message)
+    res.statusCode = 503
+    res.setHeader('Retry-After', '60')
+    return { props: { data: [], unavailable: true } }
+  }
+}

pages/_app.js

@@ -7,7 +7,7 @@ import "../styles/simple-grid.css"
 import 'nprogress/nprogress.css';
 import "react-lightbox-pack/dist/index.css";
 import Router from "next/router";
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import Loader from "./components/Loader";
 import NProgress from 'nprogress';
 import {ChakraProvider} from "@chakra-ui/react";
@@ -15,6 +15,7 @@ import { extendTheme } from '@chakra-ui/react'
 import { StepsStyleConfig as Steps } from 'chakra-ui-steps';
 import {Provider} from "react-redux";
 import {CoreStore} from "../src/redux/store/store";
+import Seo from '../src/components/Seo';
 
 const theme = extendTheme({
     components: {
@@ -25,16 +26,27 @@ const theme = extendTheme({
 export default function App({ Component, pageProps   }) {
 
     const [Loading,setLoading] = useState(false);
-      Router.events.on('routeChangeStart',(url) => {
+    useEffect(() => {
+      const start = () => {
           NProgress.start()
           setLoading(true)
-      })
-        Router.events.on('routeChangeComplete',(url) => {
+      }
+      const complete = () => {
             NProgress.done()
             setLoading(false)
-        })
+      }
+      Router.events.on('routeChangeStart', start)
+      Router.events.on('routeChangeComplete', complete)
+      Router.events.on('routeChangeError', complete)
+      return () => {
+        Router.events.off('routeChangeStart', start)
+        Router.events.off('routeChangeComplete', complete)
+        Router.events.off('routeChangeError', complete)
+      }
+    }, [])
   return (
     <Provider store={CoreStore}>
+        <Seo metadata={pageProps.seo || (pageProps.statusCode >= 400 ? { noindex: true } : {})} />
         {Loading && <Loader />}
         <ChakraProvider resetCSS={false} theme={theme}>
             {/* <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" /> */}

pages/_document.js

@@ -0,0 +1,15 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang='fa' dir='rtl'>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}

pages/api/my-sitemap.js

@@ -1,25 +1,26 @@
-const { SitemapStream, streamToPromise } = require("sitemap");
-const { Readable } = require("stream");
-
-export default async (req, res) => {
-    // An array with your links
-    const links = [
-        { url: "/page/news/36/", priority: 0.3 },
-        { url: "/page/about",  priority: 0.3 },
-        { url: "/recruitment", priority: 0.3 },
-        { url: "/contact-us", priority: 0.3 }
-    ];
-
-    // Create a stream to write to
-    const stream = new SitemapStream({ hostname: `https://${req.headers.host}` });
-
-    res.writeHead(200, {
-        "Content-Type": "application/xml",
-    });
-
-    const xmlString = await streamToPromise(
-        Readable.from(links).pipe(stream)
-    ).then((data) => data.toString());
-
-    res.end(xmlString);
-};
+import axios from 'axios'
+import { SitemapStream, streamToPromise } from 'sitemap'
+import { Readable } from 'stream'
+import { AppUrl } from '../../lib/api'
+import { SITE_URL, sitemapLinks } from '../../lib/seo'
+
+export default async function sitemap(req, res) {
+  let news = []
+  let newsAvailable = false
+  try {
+    const { data } = await axios.get(AppUrl('news'), { timeout: 5000 })
+    const posts = Array.isArray(data) ? data : data && data.data
+    if (!Array.isArray(posts)) throw new Error('Unexpected news response')
+    news = posts
+    newsAvailable = true
+  } catch (error) {
+    // Keep core pages discoverable during a news API outage; retry soon.
+    console.warn('Sitemap: news API unavailable:', error.message)
+  }
+
+  const stream = new SitemapStream({ hostname: SITE_URL })
+  const xml = await streamToPromise(Readable.from(sitemapLinks(news).map(url => ({ url }))).pipe(stream))
+  res.setHeader('Content-Type', 'application/xml; charset=utf-8')
+  res.setHeader('Cache-Control', newsAvailable ? 'public, s-maxage=3600, stale-while-revalidate=86400' : 'public, s-maxage=60')
+  res.status(200).send(xml.toString())
+}

pages/appContainer.js

@@ -6,18 +6,11 @@ import dynamic from 'next/dynamic'
 import { Router } from 'next/router'
 
 const Chat = dynamic(() => import('./pack'), { ssr: false })
-const AppContainer = ({ children, title }) => {
+const AppContainer = ({ children }) => {
   return (
     <div>
       <Head>
-        <title>{title ? title : 'بیمارستان مهر ایرانیان پرند '}</title>
-        <meta name='description' content='بیمارستان 96 تخت خوابی مهر ایرانیان پرند واقع در شهر پرند ' />
-        <meta
-          name='keywords'
-          content=' درمانگاه مهرپرند,بیمارستان مهرایرانیان پرند ,بیمارستان, بیمارستان مهر, سهام,پرند'
-        />
         <meta name="google-site-verification" content="hygRCp6fRa9qi8RXCaAosXK4mBcnCJVRH1ayHtAQy8o" />
-        <link rel='icon' href='../public/resource/logo/favlogo.png' />
         <script
           type='text/javascript'
           dangerouslySetInnerHTML={{
@@ -33,7 +26,7 @@ const AppContainer = ({ children, title }) => {
       </Head>
       <Chat />
       <Header />
-      {children}
+      <main id='main-content'>{children}</main>
       <Footer />
     </div>
   )

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

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

pages/components/OnlineSales.js

@@ -37,7 +37,7 @@ const OnlineSales = () => {
               <img width={250} src={OnlineSvg} />
             </div>
             <div className={'sm:mt-5'}>
-              <h2 className='bk-heavy'>خرید سهام بیمارستان مهر ایرانیان</h2>
+              <h2 className='bk-heavy'>خرید سهام بیمارستان مهر پرند</h2>
             </div>
             <div className='text-gray-500  mt-3'>
               <h5 className='yekan-bakh-req leading-9 font-bold'>
@@ -69,7 +69,7 @@ const OnlineSales = () => {
         {/*            <div className={'mr-5'}>*/}
         {/*                <MDBCardTitle className={'bk-med'}>خرید سهام </MDBCardTitle>*/}
         {/*                <MDBCardText className={'bk-light'}>*/}
-        {/*                    خرید سهام بیمارستان مهر ایرانیان پرند*/}
+        {/*                    خرید سهام بیمارستان مهر پرند*/}
         {/*                </MDBCardText>*/}
         {/*            </div>*/}
         {/*        </div>*/}

pages/components/Paralax.js

@@ -1,61 +1,164 @@
-import React,{useState} from 'react';
-import {
-    MDBBtn,
-    MDBIcon,
-    MDBModal,
-    MDBModalBody, MDBModalContent,
-    MDBModalDialog,
-    MDBModalFooter,
-    MDBModalHeader, MDBModalTitle
-} from "mdb-react-ui-kit";
-
-const Paralax = () => {
-    const [basicModal, setBasicModal] = useState(false);
-    if (basicModal){
-        setTimeout(()=> {
-            setBasicModal(false)
-        },2000)
-    }
-
-    return (
-        <div className='bg-image mt-5 d-flex flex-md-column flex-sm-column ' style={{ maxWidth: '1080rem' }}>
-            <img  style={{ width: '100%' }}  src={''} alt="Picture of the author" />
-            <div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}>
-                <div className='d-flex flex-md-column flex-sm-column justify-content-center align-items-center h-100 dana'>
-                    <h2 className='text-white p-5 mb-0'>
-                        <MDBBtn  onClick={() => setBasicModal(true)} size='lg' color='success'>
-                            دریافت نوبت آنلاین
-                            <MDBIcon style={{ paddingLeft: "15px",paddingTop: "5px",maxWidth: "100px",maxHeight: '50px' }} className='me-2 '  icon='clock' />
-                        </MDBBtn>
-                    </h2>
-                    {/*<h3 style={{marginRight: "5%"}} className='text-white  mb-0'> 021 - 2842 6945 تماس تلفنی </h3>*/}
-                </div>
-            </div>
-            {process.browser &&
-            <MDBModal show={basicModal}  tabIndex='-1'>
-                <MDBModalDialog>
-                    <MDBModalContent>
-                        <MDBModalHeader>
-                            <MDBModalTitle className={'d-flex justify-content-start'} >این بخش در حال حاضر دسترس نیست </MDBModalTitle>
-                            <MDBBtn className='btn-close left left-align d-flex  justify-content-end' color='none' onClick={() => setBasicModal(false)}></MDBBtn>
-                        </MDBModalHeader>
-                        <MDBModalBody className={'d-flex justify-content-around'}>
-                            <MDBIcon  className='ms-1 text-danger' icon='exclamation' size='7x' />
-                        </MDBModalBody>
-
-                        <MDBModalFooter className={'d-flex justify-content-around'}>
-                            <MDBBtn  color='secondary' onClick={() => setBasicModal(false)}>
-                                بستن
-                            </MDBBtn>
-                        </MDBModalFooter>
-                    </MDBModalContent>
-                </MDBModalDialog>
-            </MDBModal>
-            }
-
-        </div>
-    );
-};
-
-
-export default  Paralax;
+import React from 'react'
+import { FiArrowUpLeft, FiCalendar, FiClock } from 'react-icons/fi'
+
+const appointmentUrl =
+  'https://dr-hami.ir/clinic/25/%D8%A8%DB%8C%D9%85%D8%A7%D8%B1%D8%B3%D8%AA%D8%A7%D9%86-%D9%85%D9%87%D8%B1%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%DB%8C%D8%A7%D9%86'
+
+const Paralax = () => (
+  <section className='appointment-section' dir='rtl' aria-labelledby='appointment-title'>
+    <div className='appointment-content'>
+      <span className='appointment-kicker'>
+        <FiCalendar aria-hidden='true' />
+        نوبت‌دهی بیمارستان مهر پرند
+      </span>
+      <h2 id='appointment-title'>دریافت نوبت، در چند قدم ساده</h2>
+      <p>
+        برای مشاهده اطلاعات نوبت‌دهی و دریافت نوبت آنلاین، به صفحه اختصاصی
+        بیمارستان مهر پرند در سامانه دکترهامی بروید.
+      </p>
+      <div className='appointment-actions'>
+        <a className='appointment-button' href={appointmentUrl}>
+          <FiClock aria-hidden='true' />
+          دریافت نوبت آنلاین
+          <FiArrowUpLeft className='button-arrow' aria-hidden='true' />
+        </a>
+        <span className='appointment-hint'>ورود مستقیم به سامانه نوبت‌دهی</span>
+      </div>
+    </div>
+
+    <style jsx>{`
+      .appointment-section {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: calc(100% - 40px);
+        max-width: 1240px;
+        min-height: 350px;
+        margin: 64px auto;
+        overflow: hidden;
+        border-radius: 28px;
+        color: #fff;
+        background-color: #0a3f49;
+        background-image: linear-gradient(to left, rgba(8, 52, 61, .99) 0%, rgba(8, 52, 61, .94) 39%, rgba(8, 52, 61, .18) 100%), url('/resource/parallax/Novat.jpg');
+        background-position: center;
+        background-size: cover;
+        box-shadow: 0 22px 50px rgba(13, 71, 76, .16);
+        font-family: dana-fanum, sans-serif;
+      }
+      .appointment-section::after {
+        position: absolute;
+        top: -90px;
+        right: -70px;
+        width: 300px;
+        height: 300px;
+        border: 1px solid rgba(173, 235, 226, .15);
+        border-radius: 50%;
+        content: '';
+        pointer-events: none;
+      }
+      .appointment-content {
+        position: relative;
+        z-index: 1;
+        width: min(100%, 660px);
+        padding: 52px 62px;
+      }
+      .appointment-kicker {
+        display: inline-flex;
+        align-items: center;
+        gap: 9px;
+        padding: 8px 13px;
+        border: 1px solid rgba(138, 229, 217, .35);
+        border-radius: 100px;
+        color: #bbf1e9;
+        background: rgba(255, 255, 255, .09);
+        font-size: 12px;
+        font-weight: 700;
+      }
+      h2 {
+        margin: 20px 0 14px;
+        color: #fff;
+        font-size: clamp(27px, 3.5vw, 42px);
+        font-weight: 800;
+        line-height: 1.5;
+      }
+      p {
+        max-width: 510px;
+        margin: 0;
+        color: #e2f0ee;
+        font-size: 15px;
+        line-height: 2;
+      }
+      .appointment-actions {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 16px;
+        margin-top: 27px;
+      }
+      .appointment-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 11px;
+        min-height: 52px;
+        padding: 0 20px;
+        border-radius: 12px;
+        color: #104b51;
+        background: #fff;
+        font-size: 14px;
+        font-weight: 800;
+        text-decoration: none;
+        box-shadow: 0 9px 22px rgba(0, 0, 0, .13);
+        transition: transform .2s ease, background-color .2s ease;
+      }
+      .appointment-button:hover {
+        color: #104b51;
+        background: #dff7f2;
+        transform: translateY(-2px);
+      }
+      .appointment-button:focus-visible {
+        outline: 3px solid #8de5d9;
+        outline-offset: 4px;
+      }
+      .button-arrow {
+        margin-right: 4px;
+        font-size: 17px;
+      }
+      .appointment-hint {
+        color: #c9e2df;
+        font-size: 12px;
+      }
+      @media (max-width: 700px) {
+        .appointment-section {
+          width: calc(100% - 32px);
+          min-height: 390px;
+          margin: 46px auto;
+          border-radius: 22px;
+          background-image: linear-gradient(to left, rgba(8, 52, 61, .97), rgba(8, 52, 61, .78)), url('/resource/parallax/Novat.jpg');
+          background-position: 38% center;
+        }
+        .appointment-content {
+          padding: 34px 25px;
+        }
+        h2 {
+          margin-top: 18px;
+          font-size: clamp(25px, 7vw, 33px);
+        }
+        p {
+          font-size: 13px;
+        }
+        .appointment-actions {
+          align-items: flex-start;
+          flex-direction: column;
+          gap: 12px;
+          margin-top: 22px;
+        }
+        .appointment-button {
+          width: 100%;
+        }
+      }
+    `}</style>
+  </section>
+)
+
+export default Paralax

pages/components/SalesTeam.js

@@ -113,7 +113,7 @@ const SalesTeam = () => {
     //             {users.map((item) => (
     //                 <SwiperSlide className={'flex justify-content-center'}>
     //                     <Box width={250} className={'shadow-2-strong hover-shadow m-2'} maxW='sm' borderWidth='1px' borderRadius='lg' overflow='hidden'>
-    //                         <Image src={item.img} alt={'بیمارستان مهر ایرانیان'} />
+    //                         <Image src={item.img} alt={'بیمارستان مهر پرند'} />
     //                         <Box p='6'>
     //                             <Box
     //                                 textAlign={'center'}

pages/components/StockSales.js

@@ -22,7 +22,7 @@ const StockSales = () => {
                               <div className={'mr-5'}>
                                   <MDBCardTitle className={'bk-med'}>مشاوره خرید سهام  </MDBCardTitle>
                                   <MDBCardText className={'bk-light'}>
-                                      خرید سهام بیمارستان مهر ایرانیان پرند
+                                      خرید سهام بیمارستان مهر پرند
                                   </MDBCardText>
                               </div>
                           </div>
@@ -87,7 +87,7 @@ const StockSales = () => {
                                 <div className={'mr-5'}>
                                     <MDBCardTitle className={'bk-med'}>بخش های درمانی </MDBCardTitle>
                                     <MDBCardText className={'bk-light text-sm'}>
-                                       بخش های درمانی بیمارستان مهر ایرانیان پرند
+                                       بخش های درمانی بیمارستان مهر پرند
                                     </MDBCardText>
                                 </div>
                             </div>

pages/components/accessgrid.js

@@ -204,7 +204,7 @@ const Accessgrid = () => {
       {/*            <div className={'textArea'}>*/}
       {/*                <h3 className={'dana font-weight-bold'}> پیشرفت ساخت پروژه  </h3>*/}
       {/*                <p style={{ lineHeight: 2.5 }}>*/}
-      {/*                    پیشرفت 85 درصدی طبقه همکف بیمارستان مهر ایرانیان*/}
+      {/*                    پیشرفت 85 درصدی طبقه همکف بیمارستان مهر پرند*/}
       {/*                    <br />*/}
       {/*                    طبقه همکف تا پایان دی ماه سال 1400                                 با تلاش شبانه روزی مهندسین مجرب و کارگران سخت کوش*/}
 
@@ -223,7 +223,7 @@ const Accessgrid = () => {
       {/*            <div className={'textArea'}>*/}
       {/*                <h3 className={'dana font-weight-bold'}> خرید سهام </h3>*/}
       {/*                <p style={{ lineHeight: 2.5 }}>*/}
-      {/*                    توضیحات دکتر نمکی مدیر عامل بیمارستان مهر ایرانیان پرند در رابطه خرید سهام بیمارستان*/}
+      {/*                    توضیحات دکتر نمکی مدیر عامل بیمارستان مهر پرند در رابطه خرید سهام بیمارستان*/}
       {/*                    در این ویدئو با  مزایای خرید سهام و مراحل پیشرفت پروژه آشنا می شوید*/}
       {/*                </p>*/}
       {/*                <MDBBtn  style={{ backgroundColor: '#EF4444', fontWeight: 'bold' }} className={'d-flex mb-5 justify-content-center dana '}>مشاوره خرید سهام </MDBBtn>*/}

pages/components/doctors.js

@@ -18,7 +18,7 @@ const Doctors = ({children}) => {
     const dataPageDoctors = (
         <div className='lg:mx-20 sm:mx-5'>          
             <h5 style={{ marginTop: '2rem' }} className={'right-align font-weight-bold'}>
-                کادر درمان بیمارستان مهر ایرانیان
+                کادر درمان بیمارستان مهر پرند
                 <hr />
             </h5>
             <br/>

pages/components/service.js

@@ -248,7 +248,7 @@ const Service = () => {
                   <MDBCardBody style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                     <Link href={'components/service'}>
                       <MDBCardText className={'bk'}>
-                        <h1 className={'RTL dana'}>بیشتر ...</h1>{' '}
+                        <span className={'RTL dana'}>بیشتر ...</span>{' '}
                       </MDBCardText>
                     </Link>
                   </MDBCardBody>
@@ -262,7 +262,7 @@ const Service = () => {
       ) : (
         <AppContainer title={'کلینیک ها و بخش ها '}>
           <div className='parallax-container'>
-            <h2 className={'center-align text-dark service-text dana font-weight-bold'}> کلینیک ها و بخش ها </h2>
+            <h1 className={'center-align text-dark service-text dana font-weight-bold'}> کلینیک ها و بخش ها </h1>
             <Image
               loader={Parallax}
               src='Parallax.png'

pages/components/slider.js

@@ -2,10 +2,8 @@ import React from 'react'
 // import SliderZero from '../../public/resource/slider/PRICE_CHART.webp'
 // import SliderOne from '../../public/resource/slider/slier-1(1).webp'
 import sliderJob from '../../public/resource/slider/slider-2(1).webp'
-// import sliderJob from '../../public/resource/slider/slider_3.webp'
-// import LimitSlider from '../../public/resource/slider/3 (1).jpg'
-import TransferStockBanner from '../../public/resource/slider/baner_enteghal.jpg'
 
+import sliderMIpStart from '../../public/resource/slider/Modern Hospital Banner with Persian Typography (1).png'
 
 import sliderCallCenter from '../../public/resource/slider/call-center.webp'
 
@@ -16,7 +14,6 @@ const Slider = () => {
   return (
     <div>
       <Swiper pagination={true} autoplay={true} loop={true} modules={[Pagination]} className='mySwiper'>
-
         {/* <SwiperSlide style={{ cursor: 'pointer' }} className='pointer'>
           <Link href='/stock-unit'>
             <img src={sliderCallCenter} />
@@ -40,9 +37,14 @@ const Slider = () => {
         {/* <SwiperSlide key={2}  style={{ cursor: 'pointer' }} className='pointer'>
           <img src={sliderBook} />
         </SwiperSlide> */}
-        <SwiperSlide key={3}  style={{ cursor: 'pointer' }} className='pointer'>
+        <SwiperSlide key={3} style={{ cursor: 'pointer' }} className='pointer'>
+          <Link href='/landing'>
+            <a><img src={sliderMIpStart} alt='معرفی بیمارستان مهر پرند و آخرین اخبار افتتاح' width='2071' height='759' style={{ width: '100%', height: 'auto' }} /></a>
+          </Link>
+        </SwiperSlide>
+        <SwiperSlide key={4} style={{ cursor: 'pointer' }} className='pointer'>
           <Link href='/recruitment'>
-            <img src={sliderJob} />
+            <a><img src={sliderJob} alt='فرصت‌های شغلی و استخدام در بیمارستان مهر پرند' width='2877' height='1120' style={{ width: '100%', height: 'auto' }} loading='lazy' /></a>
           </Link>
         </SwiperSlide>
       </Swiper>
@@ -50,4 +52,4 @@ const Slider = () => {
   )
 }
 
-export default Slider
+export default Slider

pages/index.js

@@ -23,22 +23,124 @@ export default function Home({ data_NEWS }) {
           .fix-col {
             flex-direction: row;
           }
+          .opening-announcement {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 2rem;
+            width: min(1180px, calc(100% - 2rem));
+            margin: 2rem auto;
+            padding: clamp(2rem, 5vw, 3.5rem);
+            overflow: hidden;
+            border-radius: 1.5rem;
+            color: #fff;
+            background: linear-gradient(120deg, #0b3942, #147778);
+            box-shadow: 0 20px 50px rgba(13, 83, 88, 0.18);
+            direction: rtl;
+          }
+          .opening-announcement::after {
+            content: '';
+            position: absolute;
+            width: 360px;
+            height: 360px;
+            left: -140px;
+            bottom: -230px;
+            border: 1px solid rgba(255, 255, 255, 0.17);
+            border-radius: 50%;
+            box-shadow: 0 0 0 65px rgba(255, 255, 255, 0.035);
+            pointer-events: none;
+          }
+          .opening-copy,
+          .opening-actions {
+            position: relative;
+            z-index: 1;
+          }
+          .opening-copy {
+            max-width: 720px;
+          }
+          .opening-label {
+            display: inline-block;
+            margin-bottom: 0.8rem;
+            color: #a5eee6;
+            font-size: 0.85rem;
+            font-weight: 700;
+          }
+          .opening-copy h1 {
+            margin: 0;
+            color: #fff;
+            font-size: clamp(1.55rem, 3vw, 2.5rem);
+            font-weight: 800;
+            line-height: 1.5;
+          }
+          .opening-copy p {
+            margin: 1rem 0 0;
+            color: rgba(255, 255, 255, 0.82);
+            font-size: 0.95rem;
+            line-height: 2;
+          }
+          .opening-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 50px;
+            padding: 0.8rem 1.4rem;
+            border-radius: 0.8rem;
+            color: #083b40;
+            background: #a5eee6;
+            font-size: 0.9rem;
+            font-weight: 700;
+            white-space: nowrap;
+            transition: background 180ms ease, transform 180ms ease;
+          }
+          .opening-button:hover {
+            color: #083b40;
+            background: #c5f8f2;
+            text-decoration: none;
+            transform: translateY(-2px);
+          }
+          @media screen and (max-width: 800px) {
+            .opening-announcement {
+              flex-direction: column;
+              align-items: flex-start;
+              gap: 1.5rem;
+            }
+          }
           @media screen and (max-width: 639px) {
             .fix-col {
               flex-direction: column;
             }
+            .opening-announcement {
+              width: calc(100% - 1.25rem);
+              margin: 1.25rem auto;
+              border-radius: 1rem;
+            }
           }
         `}
       </style>
       <AppContainer>
         <Slider />
+        <section className='opening-announcement' aria-labelledby='opening-announcement-title'>
+          <div className='opening-copy'>
+            <span className='opening-label'>اطلاع‌رسانی افتتاح</span>
+            <h1 id='opening-announcement-title'>در چند قدمی افتتاح بیمارستان مهر پرند</h1>
+            <p>اخبار و زمان دقیق افتتاح بیمارستان از طریق همین وب‌سایت اطلاع‌رسانی خواهد شد.</p>
+          </div>
+          <div className='opening-actions'>
+            <Link href='/landing'>
+              <a className='opening-button'>آشنایی با بیمارستان</a>
+            </Link>
+          </div>
+        </section>
         <br />
         <div className='lg:mx-20 sm:mx-5'>
           <SimpleGrid spacing={15} columns={[1, 2, 2]}>
             <Link href={'/page/contact-us'}>
+              <a>
               <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
                 <MDBCardBody className={'flex justify-content-center'}>ارتباط با ما</MDBCardBody>
               </MDBCard>
+              </a>
             </Link>
             {/* <Link href={'/page/sales'}>
               <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
@@ -46,9 +148,11 @@ export default function Home({ data_NEWS }) {
               </MDBCard>
             </Link> */}
             <Link href={'/questions'}>
+              <a>
               <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
                 <MDBCardBody className={'flex justify-content-center'}>سوالات متداول</MDBCardBody>
               </MDBCard>
+              </a>
             </Link>
             {/* <Link href={'/stock-unit'}>
               <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
@@ -69,15 +173,15 @@ export default function Home({ data_NEWS }) {
             <Link
               style={{ cursor: 'pointer' }}
               className={'text-white'}
-              href={{ pathname: '/News', query: { list: 'list' } }}
+              href='/News'
             >
-              <MDBBtn style={{ cursor: 'pointer' }} className='mx-2 RTL bg-dark shadow-1-strong' color=''>
+              <a className='btn mx-2 RTL bg-dark shadow-1-strong text-white'>
                 <MDBIcon className='ms-1 ' icon='plus' size='sm' />
                 <span style={{ cursor: 'pointer !important' }} className={'text-white '}>
                   {' '}
                   بیشتر
                 </span>
-              </MDBBtn>
+              </a>
             </Link>
           </div>
         </News>

pages/landing.js

@@ -4,12 +4,15 @@ import Link from 'next/link'
 import {
   FiActivity,
   FiArrowLeft,
+  FiBriefcase,
   FiCamera,
   FiCheckCircle,
   FiClock,
+  FiFileText,
   FiHeart,
   FiMapPin,
   FiPhone,
+  FiPlay,
   FiShield
 } from 'react-icons/fi'
 import AppContainer from './appContainer'
@@ -78,24 +81,38 @@ const quickLinks = [
 const galleryImages = [
   {
     src: '/resource/images/gallery/IMG-20260910-WA0040.jpg',
-    alt: 'فضای بستری بیمارستان مهر ایرانیان پرند',
+    alt: 'فضای بستری بیمارستان مهر پرند',
     className: 'gallery-large'
   },
   {
     src: '/resource/images/gallery/IMG-20260910-WA0059.jpg',
-    alt: 'راهروی درمانگاه بیمارستان مهر ایرانیان پرند',
+    alt: 'راهروی درمانگاه بیمارستان مهر پرند',
     className: ''
   },
   {
     src: '/resource/images/gallery/IMG-20260910-WA0000.jpg',
-    alt: 'ایستگاه پرستاری بیمارستان مهر ایرانیان پرند',
+    alt: 'ایستگاه پرستاری بیمارستان مهر پرند',
     className: ''
   }
 ]
 
 const Landing = () => {
+  const videoRef = React.useRef(null)
+  const [videoStarted, setVideoStarted] = React.useState(false)
+
+  const handlePlayVideo = async () => {
+    if (!videoRef.current) return
+
+    try {
+      await videoRef.current.play()
+      setVideoStarted(true)
+    } catch {
+      setVideoStarted(false)
+    }
+  }
+
   return (
-    <AppContainer title='بیمارستان مهر ایرانیان پرند | همراه سلامت شما'>
+    <AppContainer title='بیمارستان مهر پرند | همراه سلامت شما'>
       <style jsx>{`
         .landing {
           direction: rtl;
@@ -105,8 +122,24 @@ const Landing = () => {
         }
 
         .container {
-          width: min(1180px, calc(100% - 2rem));
+          width: calc(100% - 2rem);
+          max-width: 1180px;
           margin: 0 auto;
+          min-width: 0;
+        }
+
+        .hero-content,
+        .quick-link,
+        .about-visual,
+        .about-copy,
+        .stat,
+        .department-card,
+        .value,
+        .recruitment-intro,
+        .recruitment-links,
+        .contact-copy,
+        .contact-actions {
+          min-width: 0;
         }
 
         .hero {
@@ -139,12 +172,90 @@ const Landing = () => {
             linear-gradient(0deg, rgba(7, 37, 44, 0.28), transparent 45%);
         }
 
+        .hero-layout {
+          display: grid;
+          grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+          align-items: center;
+          gap: clamp(2rem, 5vw, 4rem);
+        }
+
         .hero-content {
           max-width: 650px;
           padding: 6rem 0 8rem;
           color: #fff;
         }
 
+        .hero-video {
+          min-width: 0;
+          padding: 0.6rem;
+          border: 1px solid rgba(255, 255, 255, 0.3);
+          border-radius: 1.4rem;
+          background: rgba(255, 255, 255, 0.12);
+          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
+          backdrop-filter: blur(12px);
+        }
+
+        .hero-video-media {
+          position: relative;
+        }
+
+        .hero-video video {
+          display: block;
+          width: 100%;
+          aspect-ratio: 8 / 9;
+          border-radius: 0.95rem;
+          background: #092e35;
+          object-fit: cover;
+          object-position: center top;
+        }
+
+        .hero-video-overlay {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 0.8rem;
+          width: 100%;
+          padding: 1rem;
+          border: 0;
+          border-radius: 0.95rem;
+          color: #fff;
+          background: rgba(5, 35, 41, 0.48);
+          font: inherit;
+          cursor: pointer;
+          transition: background 180ms ease;
+        }
+
+        .hero-video-overlay:hover {
+          background: rgba(5, 35, 41, 0.36);
+        }
+
+        .hero-video-overlay:focus-visible {
+          outline: 3px solid #8fe4dc;
+          outline-offset: 3px;
+        }
+
+        .hero-play-icon {
+          width: 76px;
+          height: 76px;
+          display: grid;
+          place-items: center;
+          border: 2px solid rgba(255, 255, 255, 0.8);
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.18);
+          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+          font-size: 2rem;
+          backdrop-filter: blur(8px);
+        }
+
+        .hero-play-text {
+          font-size: 0.95rem;
+          font-weight: 700;
+          text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+        }
+
         .eyebrow {
           display: inline-flex;
           align-items: center;
@@ -245,7 +356,7 @@ const Landing = () => {
 
         .quick-access {
           display: grid;
-          grid-template-columns: repeat(4, 1fr);
+          grid-template-columns: repeat(4, minmax(0, 1fr));
           overflow: hidden;
           border: 1px solid rgba(23, 113, 113, 0.1);
           border-radius: 1.15rem;
@@ -291,6 +402,10 @@ const Landing = () => {
           display: block;
         }
 
+        .quick-copy {
+          min-width: 0;
+        }
+
         .quick-copy strong {
           margin-bottom: 0.3rem;
           font-size: 0.95rem;
@@ -350,7 +465,7 @@ const Landing = () => {
 
         .about-grid {
           display: grid;
-          grid-template-columns: 1fr 1.03fr;
+          grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr);
           align-items: center;
           gap: clamp(2rem, 6vw, 5.5rem);
         }
@@ -430,7 +545,7 @@ const Landing = () => {
 
         .stats {
           display: grid;
-          grid-template-columns: repeat(4, 1fr);
+          grid-template-columns: repeat(4, minmax(0, 1fr));
           gap: 1rem;
           margin-top: 5rem;
         }
@@ -462,7 +577,7 @@ const Landing = () => {
 
         .departments-grid {
           display: grid;
-          grid-template-columns: repeat(3, 1fr);
+          grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: 1rem;
         }
 
@@ -513,7 +628,7 @@ const Landing = () => {
 
         .gallery-grid {
           display: grid;
-          grid-template-columns: 1.5fr 1fr;
+          grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
           grid-template-rows: repeat(2, 220px);
           gap: 1rem;
         }
@@ -539,7 +654,7 @@ const Landing = () => {
 
         .values {
           display: grid;
-          grid-template-columns: repeat(3, 1fr);
+          grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: 1rem;
           margin-top: 1rem;
         }
@@ -579,10 +694,96 @@ const Landing = () => {
           line-height: 1.8;
         }
 
+        .recruitment-panel {
+          display: grid;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          align-items: center;
+          gap: clamp(2rem, 5vw, 4rem);
+          padding: clamp(1.75rem, 5vw, 3.5rem);
+          border: 1px solid #dcebea;
+          border-radius: 1.5rem;
+          background: linear-gradient(125deg, #fff, #f1faf9);
+          box-shadow: 0 18px 45px rgba(18, 87, 90, 0.07);
+        }
+
+        .recruitment-intro p {
+          max-width: 520px;
+          margin: 1rem 0 0;
+          color: #64777b;
+          font-size: 0.94rem;
+          line-height: 2;
+        }
+
+        .recruitment-links {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr);
+          gap: 0.9rem;
+        }
+
+        .recruitment-link {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+          min-width: 0;
+          min-height: 96px;
+          padding: 1rem 1.2rem;
+          border: 1px solid #e0eeec;
+          border-radius: 1rem;
+          color: #15323a;
+          background: #fff;
+          transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
+        }
+
+        .recruitment-link:hover {
+          border-color: #9fdcd5;
+          color: #15323a;
+          box-shadow: 0 10px 28px rgba(18, 87, 90, 0.1);
+          text-decoration: none;
+          transform: translateY(-2px);
+        }
+
+        .recruitment-icon {
+          width: 52px;
+          height: 52px;
+          flex: 0 0 52px;
+          display: grid;
+          place-items: center;
+          border-radius: 0.85rem;
+          color: #147778;
+          background: #e6f7f4;
+          font-size: 1.4rem;
+        }
+
+        .recruitment-copy strong,
+        .recruitment-copy span {
+          display: block;
+        }
+
+        .recruitment-copy {
+          min-width: 0;
+        }
+
+        .recruitment-copy strong {
+          margin-bottom: 0.25rem;
+          font-size: 0.95rem;
+        }
+
+        .recruitment-copy span {
+          color: #718387;
+          font-size: 0.78rem;
+          line-height: 1.7;
+        }
+
+        .recruitment-arrow {
+          flex: 0 0 auto;
+          margin-right: auto;
+          color: #147778;
+        }
+
         .contact-card {
           position: relative;
           display: grid;
-          grid-template-columns: 1.3fr 0.7fr;
+          grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
           align-items: center;
           gap: 2rem;
           overflow: hidden;
@@ -647,11 +848,27 @@ const Landing = () => {
 
         @media (max-width: 992px) {
           .hero {
-            min-height: 620px;
+            min-height: auto;
+          }
+
+          .hero-layout {
+            grid-template-columns: minmax(0, 1fr);
+            gap: 2rem;
+          }
+
+          .hero-content {
+            padding: 4.5rem 0 0;
+          }
+
+          .hero-video {
+            width: 100%;
+            max-width: 520px;
+            justify-self: center;
+            margin-bottom: 5rem;
           }
 
           .quick-access {
-            grid-template-columns: repeat(2, 1fr);
+            grid-template-columns: repeat(2, minmax(0, 1fr));
           }
 
           .quick-link:nth-child(2) {
@@ -663,7 +880,11 @@ const Landing = () => {
           }
 
           .about-grid {
-            grid-template-columns: 1fr;
+            grid-template-columns: minmax(0, 1fr);
+          }
+
+          .recruitment-panel {
+            grid-template-columns: minmax(0, 1fr);
           }
 
           .about-visual {
@@ -671,11 +892,11 @@ const Landing = () => {
           }
 
           .departments-grid {
-            grid-template-columns: repeat(2, 1fr);
+            grid-template-columns: repeat(2, minmax(0, 1fr));
           }
 
           .contact-card {
-            grid-template-columns: 1fr;
+            grid-template-columns: minmax(0, 1fr);
           }
 
           .contact-actions {
@@ -685,11 +906,10 @@ const Landing = () => {
 
         @media (max-width: 700px) {
           .container {
-            width: min(100% - 1.25rem, 1180px);
+            width: calc(100% - 1.25rem);
           }
 
           .hero {
-            min-height: 670px;
             align-items: flex-end;
           }
 
@@ -698,11 +918,31 @@ const Landing = () => {
           }
 
           .hero-content {
-            padding: 8rem 0 7rem;
+            padding: 4.5rem 0 0;
+          }
+
+          .hero-video {
+            max-width: 440px;
+            margin-bottom: 4.5rem;
+          }
+
+          .hero-video video {
+            aspect-ratio: 1 / 1;
+          }
+
+          .hero-play-icon {
+            width: 64px;
+            height: 64px;
+          }
+
+          .eyebrow {
+            max-width: 100%;
+            font-size: 0.75rem;
+            line-height: 1.6;
           }
 
           .hero h1 {
-            font-size: 2.35rem;
+            font-size: clamp(1.85rem, 8vw, 2.35rem);
           }
 
           .hero-description {
@@ -714,16 +954,21 @@ const Landing = () => {
             width: 100%;
           }
 
+          .hero-actions {
+            margin-top: 1.5rem;
+          }
+
           .quick-access-wrap {
             margin-top: -45px;
           }
 
           .quick-access {
-            grid-template-columns: 1fr;
+            grid-template-columns: minmax(0, 1fr);
           }
 
           .quick-link {
-            min-height: 105px;
+            min-height: 92px;
+            padding: 1rem;
             border-left: 0;
             border-bottom: 1px solid #e7eeee;
           }
@@ -733,47 +978,61 @@ const Landing = () => {
           }
 
           .section {
-            padding: 4.5rem 0;
+            padding: 3.5rem 0;
           }
 
           .section-heading {
             align-items: flex-start;
             flex-direction: column;
-            gap: 1rem;
+            gap: 0.8rem;
+            margin-bottom: 1.75rem;
           }
 
           .about-visual {
-            min-height: 350px;
+            min-height: 320px;
           }
 
           .about-image {
-            inset: 0 0 1.5rem 1rem;
+            inset: 0 0 1.2rem 0.8rem;
           }
 
           .about-badge {
-            width: 150px;
-            min-height: 125px;
-            padding: 1rem;
+            width: 135px;
+            min-height: 110px;
+            padding: 0.85rem;
+            border-width: 6px;
           }
 
           .about-badge strong {
-            font-size: 1.55rem;
+            font-size: 1.25rem;
+          }
+
+          .about-badge span {
+            font-size: 0.7rem;
           }
 
           .about-points,
-          .stats,
           .departments-grid,
           .values {
-            grid-template-columns: 1fr;
+            grid-template-columns: minmax(0, 1fr);
           }
 
           .stats {
-            grid-template-columns: repeat(2, 1fr);
-            margin-top: 3.5rem;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 0.7rem;
+            margin-top: 2.5rem;
+          }
+
+          .stat {
+            padding: 1rem 0.5rem;
+          }
+
+          .stat strong {
+            font-size: clamp(1.2rem, 6vw, 1.65rem);
           }
 
           .gallery-grid {
-            grid-template-columns: 1fr;
+            grid-template-columns: minmax(0, 1fr);
             grid-template-rows: repeat(3, 230px);
           }
 
@@ -785,6 +1044,26 @@ const Landing = () => {
             border-radius: 1rem;
           }
 
+          .recruitment-panel {
+            padding: 1.25rem;
+            border-radius: 1rem;
+          }
+
+          .recruitment-link {
+            gap: 0.7rem;
+            padding: 0.85rem;
+          }
+
+          .recruitment-icon {
+            width: 44px;
+            height: 44px;
+            flex-basis: 44px;
+          }
+
+          .contact-card {
+            padding: 1.5rem;
+          }
+
           .contact-actions {
             max-width: none;
           }
@@ -796,7 +1075,7 @@ const Landing = () => {
           <div className='hero-image'>
             <Image
               src='/resource/images/gallery/IMG-20260910-WA0040.jpg'
-              alt='بخش بستری بیمارستان مهر ایرانیان پرند'
+              alt='بخش بستری بیمارستان مهر پرند'
               layout='fill'
               objectFit='cover'
               priority
@@ -804,27 +1083,50 @@ const Landing = () => {
           </div>
           <div className='hero-overlay' />
           <div className='container'>
-            <div className='hero-content'>
-              <div className='eyebrow'>
-                <span className='eyebrow-dot' />
-                بیمارستان تخصصی در قلب شهر پرند
-              </div>
-              <h1>
-                همراه مطمئن شما، برای <span>زندگی سالم‌تر</span>
-              </h1>
-              <p className='hero-description'>
-                بیمارستان مهر ایرانیان پرند با تکیه بر زیرساخت درمانی مدرن، بخش‌های تخصصی و فضای طراحی‌شده برای
-                آرامش بیماران، در مسیر تبدیل‌شدن به یکی از قطب‌های سلامت جنوب‌غرب تهران است.
-              </p>
-              <div className='hero-actions'>
-                <a className='button button-primary' href='tel:02153457000'>
-                  <FiPhone /> تماس با بیمارستان
-                </a>
-                <Link href='/page/about'>
-                  <a className='button button-secondary'>
-                    درباره بیمارستان <FiArrowLeft />
+            <div className='hero-layout'>
+              <div className='hero-content'>
+                <div className='eyebrow'>
+                  <span className='eyebrow-dot' />
+                  بیمارستان تخصصی در قلب شهر پرند
+                </div>
+                <h1>
+                  همراه مطمئن شما، برای <span>زندگی سالم‌تر</span>
+                </h1>
+                <p className='hero-description'>
+                  بیمارستان مهر پرند با تکیه بر زیرساخت درمانی مدرن، بخش‌های تخصصی و فضای طراحی‌شده برای
+                  آرامش بیماران، در مسیر تبدیل‌شدن به یکی از قطب‌های سلامت جنوب‌غرب تهران است.
+                </p>
+                <div className='hero-actions'>
+                  <a className='button button-primary' href='tel:02153457000'>
+                    <FiPhone /> تماس با بیمارستان
                   </a>
-                </Link>
+                  <Link href='/page/about'>
+                    <a className='button button-secondary'>
+                      درباره بیمارستان <FiArrowLeft />
+                    </a>
+                  </Link>
+                </div>
+              </div>
+              <div className='hero-video'>
+                <div className='hero-video-media'>
+                  <video
+                    ref={videoRef}
+                    controls
+                    preload='metadata'
+                    playsInline
+                    aria-label='ویدیوی بیمارستان مهر پرند'
+                    onPlay={() => setVideoStarted(true)}
+                  >
+                    <source src='/resource/video/Video-7535.mp4' type='video/mp4' />
+                    مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
+                  </video>
+                  {!videoStarted && (
+                    <button className='hero-video-overlay' type='button' onClick={handlePlayVideo}>
+                      <span className='hero-play-icon' aria-hidden='true'><FiPlay /></span>
+                      <span className='hero-play-text'>پخش ویدیو</span>
+                    </button>
+                  )}
+                </div>
               </div>
             </div>
           </div>
@@ -868,13 +1170,13 @@ const Landing = () => {
                 <div className='about-image'>
                   <Image
                     src='/resource/images/gallery/IMG-20260910-WA0000.jpg'
-                    alt='فضای داخلی بیمارستان مهر ایرانیان پرند'
+                    alt='فضای داخلی بیمارستان مهر پرند'
                     layout='fill'
                     objectFit='cover'
                   />
                 </div>
                 <div className='about-badge'>
-                  <strong>۹۶ تخت</strong>
+                  <strong>۱۵۰  تخت</strong>
                   <span>ظرفیت فاز نخست بیمارستان</span>
                 </div>
               </div>
@@ -1012,6 +1314,40 @@ const Landing = () => {
           </div>
         </section>
 
+        <section className='section' aria-labelledby='recruitment-title'>
+          <div className='container'>
+            <div className='recruitment-panel'>
+              <div className='recruitment-intro'>
+                <span className='section-label'>استخدام و همکاری</span>
+                <h2 className='section-title' id='recruitment-title'>به تیم بیمارستان مهر پرند بپیوندید</h2>
+                <p>فرصت‌های شغلی بیمارستان را ببینید، درخواست همکاری ثبت کنید و وضعیت درخواست خود را پیگیری کنید.</p>
+              </div>
+              <div className='recruitment-links'>
+                <Link href='/recruitment'>
+                  <a className='recruitment-link'>
+                    <span className='recruitment-icon'><FiBriefcase /></span>
+                    <span className='recruitment-copy'>
+                      <strong>فرصت‌های شغلی</strong>
+                      <span>مشاهده موقعیت‌ها و ثبت درخواست</span>
+                    </span>
+                    <span className='recruitment-arrow'><FiArrowLeft /></span>
+                  </a>
+                </Link>
+                <Link href='/recruitment/inquiry'>
+                  <a className='recruitment-link'>
+                    <span className='recruitment-icon'><FiFileText /></span>
+                    <span className='recruitment-copy'>
+                      <strong>پیگیری درخواست</strong>
+                      <span>استعلام وضعیت درخواست ثبت‌شده</span>
+                    </span>
+                    <span className='recruitment-arrow'><FiArrowLeft /></span>
+                  </a>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </section>
+
         <section className='section'>
           <div className='container'>
             <div className='contact-card'>

pages/medical-equipment/index.js

@@ -7,11 +7,11 @@ const MedicalEquipment = () => {
   return (
     <AppContainer title={'واحد تجهیزات پزشکی'}>
       <div className='parallax-container'>
-        <h2 className={'center-align text-white drop-shadow service-text dana font-weight-bold'}>واحد تجهیزات پزشکی</h2>
+        <h1 className={'center-align text-white drop-shadow service-text dana font-weight-bold'}>واحد تجهیزات پزشکی</h1>
         <Image
           src={MedicalStock}
           className={'responsive-img shadow-5'}
-          alt='Picture of the author'
+          alt='تجهیزات پزشکی بیمارستان مهر پرند'
           width={4090}
           height={2000}
         />

pages/page/Directors.js

@@ -70,12 +70,12 @@ const Directors = () => {
     }
   ]
   return (
-    <AppContainer title={' تیم پروژه بیمارستان مهر ایرانیان پرند'}>
+    <AppContainer title={' تیم پروژه بیمارستان مهر پرند'}>
       <div className='parallax-container'>
-        <h2 className={'center-align text-white  header_back service-text dana font-weight-bold'}>
+        <h1 className={'center-align text-white  header_back service-text dana font-weight-bold'}>
           {' '}
           تیم پروژه بیمارستان{' '}
-        </h2>
+        </h1>
         <Image
           loader={Parallax}
           src='Parallax.png'

pages/page/about.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import AppContainer from "../appContainer";
-import {MDBContainer, MDBProgress, MDBProgressBar} from "mdb-react-ui-kit";
 import Image from "next/image";
 
 
@@ -11,6 +10,72 @@ const About = (props) => {
     return (
         <div>
            <AppContainer title={'درباره بیمارستان  '}>
+               <style jsx>{`
+                   .progress-section {
+                       margin: 3rem 0 4rem;
+                       padding: clamp(1.5rem, 4vw, 2.5rem);
+                       border: 1px solid #dcebea;
+                       border-radius: 1.5rem;
+                       background: linear-gradient(135deg, #f1faf9, #ffffff 65%);
+                       box-shadow: 0 18px 45px rgba(18, 87, 90, 0.08);
+                       direction: rtl;
+                   }
+                   .progress-heading {
+                       display: flex;
+                       align-items: center;
+                       justify-content: space-between;
+                       gap: 1.5rem;
+                       margin-bottom: 2rem;
+                   }
+                   .progress-label {
+                       display: block;
+                       margin-bottom: 0.65rem;
+                       color: #168182;
+                       font-size: 0.85rem;
+                       font-weight: 700;
+                   }
+                   .progress-heading h2 {
+                       margin: 0;
+                       color: #15383e;
+                       font-size: clamp(1.4rem, 3vw, 2rem);
+                       font-weight: 800;
+                       line-height: 1.5;
+                   }
+                   .progress-value {
+                       flex: 0 0 auto;
+                       color: #147778;
+                       font-size: clamp(2.5rem, 5vw, 3.5rem);
+                       font-weight: 800;
+                       line-height: 1;
+                   }
+                   .progress-track {
+                       height: 16px;
+                       overflow: hidden;
+                       border-radius: 999px;
+                       background: #dcebea;
+                   }
+                   .progress-fill {
+                       width: 95%;
+                       height: 100%;
+                       border-radius: inherit;
+                       background: linear-gradient(90deg, #29b6a8, #147778);
+                   }
+                   .progress-caption {
+                       margin: 0.85rem 0 0;
+                       color: #637b7f;
+                       font-size: 0.9rem;
+                   }
+                   @media (max-width: 639px) {
+                       .progress-heading {
+                           align-items: flex-start;
+                           gap: 1rem;
+                       }
+                       .progress-section {
+                           margin: 2rem 0 3rem;
+                           border-radius: 1rem;
+                       }
+                   }
+               `}</style>
                <div className="parallax-container">
                    <h1 className={'center-align text-white service-text dana font-weight-bold'}> درباره بیمارستان  </h1>
                    <Image
@@ -30,22 +95,30 @@ const About = (props) => {
                    </h5>
                    <p className={'right-align RTL'}>
                        بیمارستان تخصصی مهرایرانیان واقع در  اتوبان چهاربانده اصلی داخلی شهر پرند در بهترین موقعیت مکانی و در دل مسکن مهر،  با فضای درمانی به متراژ تقریبی 21.000 متر مربع همراه با 4000 متر پارکینگ طبقاتی، با هدف تبدیل شدن به یکی از قطب های درمانی منطقه در حال احداث می باشد. این بیمارستان که تنها بیمارستان تخصصی در کنار بزرگترین فرودگاه کشور است در فاز اولیه احداث دارای 96 تختخواب و دارای بخش های ICU،CCU،NICU،زایشگاه، اتاق های عمل، مرکز تصویربرداری،آزمایشگاه،داروخانه، اورژانس، بخش اسکوپی و گوارش، و دندانپزشکی عمومی و تخصصی می باشد. این بیمارستان در آینده نه چندان دور سهم بسزایی در بهداشت و درمان منطقه جنوب غرب تهران که شامل شهرهای پرند،رباط کریم،نسیم شهر و شهرک های تابعه است، خواهد داشت.
-                       در حال حاضر این پروژه 80% پیشرفت فیزیکی داشته و طبقه همکف آن که شامل اورژانس و کلینیک های تخصصی است تا پایان آبان 1400 تکمیل خواهد شد.
+                       در حال حاضر این پروژه 95% پیشرفت فیزیکی داشته و طبقه همکف آن که شامل اورژانس و کلینیک های تخصصی است تا پایان آبان 1400 تکمیل خواهد شد.
                        مرحله راه اندازی بیمارستان با حداقل ظرفیت تا پایان سال 1402 و مرحله تکمیل و راه اندازی کامل بیمارستان با ظرفیت 200 تخت در سال 1403 انجام خواهد شد.
 
                    </p>
-                   <h5 style={{ marginTop: '2rem' }} className={'right-align font-weight-bold'}>
-                       درصد پیشرفت کار
-                   </h5>
-                   <br/>
-                  <div>
-                      <MDBProgress height='30'>
-                          <MDBProgressBar className={'dana'} width='80' valuemin={0} valuemax={100}>
-                              80% پیشرفت فیزیکی پروژه
-                          </MDBProgressBar>
-                      </MDBProgress>
-                  </div>
-                   <br/>
+                   <section className='progress-section' aria-labelledby='progress-title'>
+                       <div className='progress-heading'>
+                           <div>
+                               <span className='progress-label'>پیشرفت پروژه</span>
+                               <h2 id='progress-title'>درصد پیشرفت کار</h2>
+                           </div>
+                           <strong className='progress-value'>۹۵٪</strong>
+                       </div>
+                       <div
+                           className='progress-track'
+                           role='progressbar'
+                           aria-label='پیشرفت فیزیکی پروژه'
+                           aria-valuenow={95}
+                           aria-valuemin={0}
+                           aria-valuemax={100}
+                       >
+                           <div className='progress-fill' />
+                       </div>
+                       <p className='progress-caption'>پیشرفت فیزیکی پروژه بیمارستان مهر پرند</p>
+                   </section>
                </div>
            </AppContainer>
         </div>

pages/page/contact-us.js

@@ -19,14 +19,14 @@ const ContactUs = () => {
 
     return (
         <>
-            <AppContainer title={'درباره ما'}>
+            <AppContainer title={'تماس با ما'}>
                 <div className="parallax-container">
-                    <h2 className={'center-align text-white  header_back service-text dana font-weight-bold'}> تماس با  ما    </h2>
+                    <h1 className={'center-align text-white  header_back service-text dana font-weight-bold'}> تماس با  ما    </h1>
                     <Image
                         loader={Parallax}
                         src="Parallax.png"
                         className={'responsive-img shadow-5'}
-                        alt="Picture of the author"
+                        alt="بیمارستان مهر پرند؛ آدرس و راه‌های ارتباطی"
                         width={2050}
                         height={950}
                     />
@@ -43,7 +43,7 @@ const ContactUs = () => {
                     <MDBTypography style={{ borderLeft: 'none', borderRight: '6px solid ', backgroundColor: '#F0F0F0' }} note noteColor='dark' className='mb-0'>
                         <MDBRow>
                             <MDBTypography className={'dana right-align'} >
-                                تهران - شهر پرند - فاز 5 - بلوار شهید قاسم سلیمانی - بلوار رسوال اکرم - بیمارستان مهر ایرانیان پرند
+                                تهران - شهر پرند - فاز 5 - بلوار شهید قاسم سلیمانی - بلوار رسوال اکرم - بیمارستان مهر پرند
                             </MDBTypography>
                         </MDBRow>
                     </MDBTypography>
@@ -102,4 +102,4 @@ const ContactUs = () => {
     );
 };
 
-export default ContactUs;
+export default ContactUs;

pages/page/cooperationsales.js

@@ -20,9 +20,9 @@ const CooperationSales = () => {
             {/* <img src ={cartmo} alt="" /> */}
           </div>
           
-          <h2 className="text-white text-lg font-bold  lg:text-[28px] font-extrabold text-center pt-8 xl:pt-16">
+          <h1 className="text-white text-lg font-bold  lg:text-[28px] font-extrabold text-center pt-8 xl:pt-16">
             همکاری در فروش سهام
-          </h2>
+          </h1>
           <p className="text-white w-[85%] md:w-[60%] text-sm lg:text-[22px] font-medium leading-[1.8rem] lg:w-[42%] xl:w-[40%] mx-auto text-center lg:leading-8 xl:leading-10	py-2 lg:py-4">
             با ثبت نام در سامانه خرید سهام، کد معرف شما ایجاد و قابل اشتراک
             گذاری می شود. کد معرف یکتای خود را با دوستان خود به اشتراک بگذارید

pages/page/docs.js

@@ -9,7 +9,7 @@ const Docs = () => {
     }
     const dataFile = [
         // {id: 1,title: 'اساسنامه شرکت سهامی مهر ایرانیان پرند' ,url: '../resource/files/اساسنامه شرکت سهامی.pdf'},
-        {id: 2,title: 'آگهی افزایش سرمایه بیمارستان مهر ایرانیان پرند' ,url: '../resource/files/آگهی افزایش سرمایه.pdf'},
+        {id: 2,title: 'آگهی افزایش سرمایه بیمارستان مهر پرند' ,url: '../resource/files/آگهی افزایش سرمایه.pdf'},
         {id: 3,title: 'آگهی تغییرات روزنامه رسمی' ,url: '../resource/files/آگهی تغییرات روزنامه رسمی.jpg'},
         {id: 4,title: 'موافقت اصولی' ,url: '../resource/files/Agrement.pdf'},
         {id: 5,title: ' اساسنامه  شرکت سهامی خاص پزشکی مهر ایرانیان پرند' ,url: '../resource/files/اساسنامه شرکت سهامی خاص پزشکی مهرایرانیان پرند.pdf'},
@@ -18,7 +18,7 @@ const Docs = () => {
         <AppContainer title={' اساسنامه شرکت'}>
             <div className="parallax-container">
                 <div className={'d-flex'}>
-                    <h2 className={'center-align text-white  header_back service-text dana  font-weight-bold'}> اسناد رسمی  شرکت پزشکی مهر ایرانیان پرند  </h2>
+                    <h1 className={'center-align text-white  header_back service-text dana  font-weight-bold'}> اسناد رسمی  شرکت پزشکی مهر ایرانیان پرند  </h1>
                 </div>
                 <Image
                     loader={Parallax}
@@ -47,4 +47,4 @@ const Docs = () => {
     );
 };
 
-export default Docs;
+export default Docs;

pages/page/news/[slug].js

@@ -19,6 +19,7 @@ import {
 } from 'mdb-react-ui-kit'
 import Image from 'next/image'
 import { AppFile, AppUrl } from '../../../lib/api'
+import { newsSeo } from '../../../lib/seo'
 import { Tag, TagLabel, HStack } from '@chakra-ui/react'
 
 const moment = require('moment-jalaali')
@@ -40,7 +41,7 @@ const News = ({ post }) => {
           loader={Parallax}
           src='Parallax.png'
           className={'responsive-img shadow-5'}
-          alt='Picture of the author'
+          alt={post.title}
           width={2050}
           height={1050}
           priority
@@ -175,11 +176,14 @@ const News = ({ post }) => {
 export default News
 
 export const getServerSideProps = async context => {
-  const { query } = context
-  const posData = await axios.get(AppUrl(`news/${query.slug}`))
-  const post = await posData.data
-
-  return {
-    props: { post, fallback: false } // will be passed to the page component as props
+  const { slug } = context.params
+  try {
+    const { data: post } = await axios.get(AppUrl(`news/${encodeURIComponent(slug)}`), { timeout: 10000 })
+    if (!post || !post.title || typeof post.text !== 'string') return { notFound: true }
+    return { props: { post, seo: newsSeo(post, slug) } }
+  } catch (error) {
+    if (error.response && error.response.status === 404) return { notFound: true }
+    // Temporary upstream failures must stay 5xx rather than removing real articles from search.
+    throw error
   }
 }

pages/page/sales.jsx

@@ -44,7 +44,7 @@ const Sales = () => {
 
   return (
     <div id='callstock' className=' text-center py-8 m	'>
-      <h1 className='text-[#3c3c3c] text-[28px] font-bold mt-5	 '>ارتباط با ما  </h1>
+      <h2 className='text-[#3c3c3c] text-[28px] font-bold mt-5	 '>ارتباط با ما  </h2>
       <span className='text-[#656565] text-base p-2 md:text-[22px] md:p-0 font-light'>
         برای  ارتباط با ما فرم زیر را تکمیل کنید
       </span>

pages/questions/index.js

@@ -18,7 +18,7 @@ const QuestionAndAnswer = () => {
     // {
     //   id: 2,
     //   title: 'چگونه سهام خریداری کنیم ؟ ',
-    //   text: 'برای خرید سهام می توانید با شماره 53547000-021 تماس حاصل فرمایید یا از طریق مراجعه به دفتر خرید سهام (واقع در شهر پرند ، بلوار شهید فاسم سلیمانی ( چهار بانده) فاز 5 ، بیمارستان مهر ایرانیان پرند) اقدام به خرید سهام فرمایید .'
+    //   text: 'برای خرید سهام می توانید با شماره 53547000-021 تماس حاصل فرمایید یا از طریق مراجعه به دفتر خرید سهام (واقع در شهر پرند ، بلوار شهید فاسم سلیمانی ( چهار بانده) فاز 5 ، بیمارستان مهر پرند) اقدام به خرید سهام فرمایید .'
     // },
     // {
     //   id: 3,

pages/recruitment/index.js

@@ -31,9 +31,9 @@ const Recruitment = dataoccupational => {
         <div className='parallax-container'>
           <div className={'flex  flex-column'}>
             <div className={'mb-5'}>
-              <h2 className={'center-align bk-med text-white  header_back service-text dana font-weight-bold'}>
+              <h1 className={'center-align bk-med text-white  header_back service-text dana font-weight-bold'}>
                 فرصت های شغلی    
-              </h2>
+              </h1>
             </div>
             <br />
             <br />
@@ -82,11 +82,11 @@ const Recruitment = dataoccupational => {
                         <FiUsers size={35} />
                       </div>
                       <MDBCardTitle className={'bk-med mt-2 right'}>{item.title} </MDBCardTitle>
-                      <Link href={`recruitment/item/${item.id}`}>
-                        <MDBBtn rounded size={'sm'} className={'mt-2 flex align-items-center bk-light bg-primary-teal'}>
+                      <Link href={`/recruitment/item/${item.id}`}>
+                        <a className={'btn btn-rounded btn-sm mt-2 flex align-items-center bk-light bg-primary-teal text-white'}>
                           مشاهده
                           <FiArrowLeft className={'mr-2'} />
-                        </MDBBtn>
+                        </a>
                       </Link>
                     </MDBCardBody>
                   </MDBCard>

pages/recruitment/item/[category_id].js

@@ -19,7 +19,6 @@ import axios from 'axios'
 import { AppProduction } from '../../../lib/api'
 
 const Recruitment = jobs => {
-  console.log(jobs)
   const Parallax = ({ quality }) => {
     return `../../resource/parallax/33012321.jpg`
   }
@@ -32,10 +31,10 @@ const Recruitment = jobs => {
         <div className='parallax-container'>
           <div className={'flex  flex-column'}>
             <div className={'mb-5'}>
-              <h2 className={'center-align bk-med text-white  header_back service-text dana font-weight-bold'}>
+              <h1 className={'center-align bk-med text-white  header_back service-text dana font-weight-bold'}>
               
-                فرصت های شغلی بیمارستان مهر ایرانیان 
-              </h2>
+                فرصت‌های شغلی {jobs.jobs.name.title} بیمارستان مهر پرند
+              </h1>
             </div>
             <br />
             <br />
@@ -127,7 +126,10 @@ export async function getServerSideProps(ctx) {
   const jobs = await res
 
   // Pass data to the page  via props
-  return { props: { jobs } }
+  return { props: { jobs, seo: {
+    title: `استخدام ${jobs.name.title}`,
+    description: `فرصت‌های شغلی گروه ${jobs.name.title} در بیمارستان مهر پرند؛ مشاهده عنوان‌های شغلی و ثبت درخواست استخدام.`
+  } } }
 }
 
 export default Recruitment

pages/stock-unit/index.jsx

@@ -33,12 +33,13 @@ const StockUnit = () => {
           loader={Parallax}
           src='Parallax.png'
           className={'responsive-img shadow-5'}
-          alt='امور سهام بیمارستان مهر ایرانیان'
+          alt='امور سهام بیمارستان مهر پرند'
           width={3000}
           height={1300}
         />
       </div>
       <div className={'mb-5 mt-5 mx-5'}>
+        <h1 className='text-center'>واحد امور سهام بیمارستان مهر پرند</h1>
         <div className='my-4'>
           <SimpleGrid spacing={15} columns={[1, 2]}>
             <Link href={'/stock-unit/stock-check'}>

public/robots.txt

@@ -1,7 +1,5 @@
 User-agent: *
-Disallow: /includes/
+Allow: /
+Disallow: /api/
 
-User-agent: Google
-Allow: /includes/
-
-Sitemap: http://miphospital.ir/api/my-sitemap
+Sitemap: https://miphospital.ir/sitemap.xml

public/style/font/font.css

@@ -1,29 +1,36 @@
 @font-face {
+    font-display: swap;
     font-family: Vazir-import !important;
     src: url("Vazir-Regular.ttf");
 }
 
 @font-face {
+    font-display: swap;
     font-family: dana-fanum;
     src: url("Dana-FaNum-Regular.ttf");
 }
 @font-face {
+    font-display: swap;
     font-family: yekanBakh;
     src: url("YekanLight.ttf");
 }
 @font-face {
+    font-display: swap;
     font-family: yekanBakhMed;
     src: url("YekanMedium.ttf");
 }
 @font-face {
+    font-display: swap;
     font-family: yekanBakhLight;
     src: url("YekanLight.ttf");
 }
 @font-face {
+    font-display: swap;
     font-family: yekanBakhHeavy;
     src: url("YekanBakhHeavy.ttf");
 }
 @font-face {
+    font-display: swap;
     font-family: yekanBakhBold;
     src: url("YekanBakhBold.ttf");
 }

src/components/Chart/index.jsx

@@ -46,10 +46,10 @@ registerInteraction('click-active-region', {
 
 const StockPriceChart = () => {
   return (
-    <AppContainer title={'قیمت سهام بیمارستان مهر ایرانیان'}>
+    <AppContainer title={'قیمت سهام بیمارستان مهر پرند'}>
       <div className='bg-stock-price p-5 '>
         <h2 className='bk-heavy text-xs text-center text-white 	hover:hidden hover:hidden '>
-          قیمت سهام بیمارستان مهر ایرانیان
+          قیمت سهام بیمارستان مهر پرند
         </h2>
         <MDBContainer
           dir='rtl'

src/components/Seo.jsx

@@ -0,0 +1,36 @@
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { getSeo, SITE_NAME, hospitalSchema, serializeJsonLd } from '../../lib/seo'
+
+export default function Seo({ metadata = {} }) {
+  const router = useRouter()
+  const seo = getSeo(router.asPath, metadata)
+  const title = seo.title.includes(SITE_NAME) ? seo.title : `${seo.title} | ${SITE_NAME}`
+
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta name='description' content={seo.description} key='description' />
+      <meta name='robots' content={seo.noindex ? 'noindex, follow' : 'index, follow, max-image-preview:large'} key='robots' />
+      <link rel='canonical' href={seo.canonical} key='canonical' />
+      <meta property='og:locale' content='fa_IR' />
+      <meta property='og:site_name' content={SITE_NAME} />
+      <meta property='og:type' content={seo.type} />
+      <meta property='og:title' content={title} />
+      <meta property='og:description' content={seo.description} />
+      <meta property='og:url' content={seo.canonical} />
+      <meta property='og:image' content={seo.image} />
+      <meta property='og:image:alt' content={seo.title} />
+      <meta name='twitter:card' content='summary_large_image' />
+      <meta name='twitter:title' content={title} />
+      <meta name='twitter:description' content={seo.description} />
+      <meta name='twitter:image' content={seo.image} />
+      <link rel='icon' href='/favicon.ico' />
+      {!seo.noindex && (
+        <script type='application/ld+json' key='structured-data' dangerouslySetInnerHTML={{
+          __html: serializeJsonLd(seo.structuredData ? [hospitalSchema, seo.structuredData] : hospitalSchema)
+        }} />
+      )}
+    </Head>
+  )
+}

tests/seo.test.cjs

@@ -0,0 +1,47 @@
+const { test } = require('node:test')
+const assert = require('node:assert/strict')
+const { canonicalUrl, getSeo, newsSeo, serializeJsonLd, sitemapLinks } = require('../lib/seo')
+
+test('canonical URLs remove tracking, fragments and trailing slashes without trusting an external host', () => {
+  assert.equal(canonicalUrl('/page/about/?utm_source=test#intro'), 'https://miphospital.ir/page/about')
+  assert.equal(canonicalUrl('/'), 'https://miphospital.ir/')
+  assert.equal(canonicalUrl('//evil.example/page'), 'https://miphospital.ir/')
+  assert.equal(canonicalUrl('https://evil.example/page'), 'https://miphospital.ir/')
+})
+
+test('public pages have distinct descriptions and internal pages remain out of search', () => {
+  assert.notEqual(getSeo('/page/about').description, getSeo('/page/contact-us').description)
+  assert.equal(getSeo('/page/contact-us').noindex, false)
+  for (const route of ['/components/slider', '/appContainer', '/recruitment/inquiry', '/recruitment/item/request/23', '/404']) {
+    assert.equal(getSeo(route).noindex, true, route)
+  }
+  assert.equal(getSeo('/components/service').noindex, false)
+  assert.equal(getSeo('/page/news/36').noindex, false)
+  assert.match(getSeo('/recruitment/inquiry').title, /استعلام/)
+})
+
+test('article metadata derives a plain text summary and absolute cover URL from the actual article', () => {
+  const seo = newsSeo({ title: 'خبر افتتاح', text: '<p>خبر <strong>بیمارستان</strong></p><script>bad()</script>', cover: 'news.jpg' }, '36')
+  assert.equal(seo.title, 'خبر افتتاح')
+  assert.equal(seo.description, 'خبر بیمارستان')
+  assert.equal(seo.image, 'https://mehrara-api.iran.liara.run/panel-public/uploads/news.jpg')
+  assert.equal(seo.structuredData['@type'], 'NewsArticle')
+  assert.equal(seo.structuredData.mainEntityOfPage, 'https://miphospital.ir/page/news/36')
+})
+
+test('JSON-LD cannot terminate its HTML script element', () => {
+  const value = { name: '</script><script>alert(1)</script>' }
+  const serialized = serializeJsonLd(value)
+  assert.equal(serialized.includes('<'), false)
+  assert.deepEqual(JSON.parse(serialized), value)
+})
+
+test('sitemap contains real public routes and unique valid article IDs only', () => {
+  const links = sitemapLinks([{ id: 36 }, { id: 36 }, { id: '../bad' }, { id: null }, { id: 82 }])
+  assert.ok(links.includes('/page/contact-us'))
+  assert.ok(links.includes('/page/news/36'))
+  assert.ok(links.includes('/page/news/82'))
+  assert.equal(links.filter(url => url === '/page/news/36').length, 1)
+  assert.equal(links.includes('/contact-us'), false)
+  assert.equal(links.some(url => url.includes('request') || url.includes('../')), false)
+})