fix: seo friendly

.idea/.name

@@ -0,0 +1 @@
+pjson.js

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/api.js

@@ -20,3 +20,4 @@ export const AppFile = addr => {
   return `${serve}/${addr}`
 }
 export const AppProduction = 'https://mehriranianco.ir/api/'
+// export const AppProduction = 'http://127.0.0.1:8000/api/'

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,9 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 7000",
+    "test": "node --test tests/*.test.cjs",
+    "dev": "next dev -p 2000",
     "build": "next build",
-    "start": "next start -p 7000"
+    "start": "next start -p 2000"
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.1.1",

pages/Gallery.js

@@ -1,176 +1,356 @@
-import React, { useEffect, useState} from 'react';
-import axios from "axios";
-import AppContainer from "./appContainer";
-import {AppFile, AppUrl} from "../lib/api";
-import Image from "next/image";
-import dynamic from "next/dynamic";
-import { Suspense } from 'react'
+import fs from 'fs'
+import path from 'path'
+import React, { useEffect, useState } from 'react'
+import Image from 'next/image'
+import AppContainer from './appContainer'
 
-import {
-    MDBBtn,
-    MDBCol,
-    MDBContainer,
-    MDBRow,
-} from "mdb-react-ui-kit";
-import  {LightBox} from "react-lightbox-pack";
-import {Button, Divider, Tab, TabList, TabPanel, TabPanels, Tabs} from "@chakra-ui/react";
+const shimmer = (width, height) => `
+  <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="gradient">
+        <stop stop-color="#e5e7eb" offset="20%" />
+        <stop stop-color="#f9fafb" offset="50%" />
+        <stop stop-color="#e5e7eb" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${width}" height="${height}" fill="#e5e7eb" />
+    <rect width="${width}" height="${height}" fill="url(#gradient)" />
+  </svg>
+`
 
-const APV = dynamic(() => import('./components/Videos'), {
-    ssr: false,
-})
-const shimmer = (w, h) => `
-<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <linearGradient id="g">
-      <stop stop-color="#333" offset="20%" />
-      <stop stop-color="#222" offset="50%" />
-      <stop stop-color="#333" offset="70%" />
-    </linearGradient>
-  </defs>
-  <rect width="${w}" height="${h}" fill="#333" />
-  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
-  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
-</svg>`
+const toBase64 = value =>
+  typeof window === 'undefined' ? Buffer.from(value).toString('base64') : window.btoa(value)
 
-const toBase64 = (str) =>
-    typeof window === 'undefined'
-        ? Buffer.from(str).toString('base64')
-        : window.btoa(str)
+const galleryBannerLoader = () => '/resource/parallax/Gallery.jpg'
 
-const Gallery = (dataImage) => {
-    const [Images, SetImages] = useState(dataImage)
-    const [justifyActive, setJustifyActive] = React.useState('tab1');
-    const [toggle, setToggle] =  React.useState(false);
-    const [sIndex, setSIndex] =  React.useState(0);
-    const [filterId, setFilterId] =  React.useState(1);
-    const Parallax = ({  quality }) => {
-        return `../resource/parallax/Gallery.jpg`;
-    }
-    const Filter = async (filter) => {
-        const res = await axios.get(AppUrl(`FilterGalleyImages/${filter}`));
-        SetImages({dataImage : res.data})
-        setFilterId(filter)
+const Gallery = ({ images }) => {
+  const [selectedImage, setSelectedImage] = useState(null)
+
+  const closeLightbox = () => setSelectedImage(null)
+
+  const showPreviousImage = () => {
+    setSelectedImage(current => (current === 0 ? images.length - 1 : current - 1))
+  }
+
+  const showNextImage = () => {
+    setSelectedImage(current => (current === images.length - 1 ? 0 : current + 1))
+  }
+
+  useEffect(() => {
+    if (selectedImage === null) return undefined
+
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') setSelectedImage(null)
+      if (event.key === 'ArrowRight') {
+        setSelectedImage(current => (current === images.length - 1 ? 0 : current + 1))
+      }
+      if (event.key === 'ArrowLeft') {
+        setSelectedImage(current => (current === 0 ? images.length - 1 : current - 1))
+      }
     }
 
-    const AllImage = async () => {
-        const res = await axios.get(AppUrl(`GetGalleyImages`));
-        SetImages({dataImage: res.data})
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.body.style.overflow = previousOverflow
+      window.removeEventListener('keydown', handleKeyDown)
     }
+  }, [selectedImage, images.length])
 
-    // Handler
-    const  lightBoxHandler  = (state, sIndex) => {
-        setToggle(state);
-        setSIndex(sIndex);
-    };
-
-    const handleJustifyClick = (value) => {
-        if (value === justifyActive) {
-            return;
+  return (
+    <AppContainer title='گالری بیمارستان مهر پرند'>
+      <style jsx>{`
+        .gallery-page {
+          direction: rtl;
+          padding: 3rem 1rem 5rem;
+          background: #fff;
         }
 
-        setJustifyActive(value);
-    };
-    return (
-        <div>
-            <style jsx>
-                {`
-                  .cardImage {
-                    background-color: #F3F4F6;
-                    padding: 5px;
-                    border-radius: 1rem;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: center;
-                    margin: 2px;
-                  }
-                `}
-            </style>
-            <AppContainer>
-                <div className="parallax-container">
-                    <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'}
-                        placeholder="blur"
-                        blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(3000, 1300))}`}
-                        alt="درباره بیارستان مهر ایرانیان پرند "
-                        width={3000}
-                        height={1300}
-                     />
-                </div>
-                <div className='lg:mx-20 sm:mx-5'>          
-                             <Tabs defaultIndex={1} className={'mt-5'} isFitted variant='enclosed'>
-                       <TabList mb='1em'>
-                           <Tab on className={'bk font-weight-bold'} _selected={{ color: 'white', bg: 'teal.500' }}>ویدئو ها</Tab>
-                           <Tab  className={'bk font-weight-bold'}  _selected={{ color: 'white', bg: 'teal.500' }}>تصاویر</Tab>
-                       </TabList>
-                       <TabPanels>
-                           <TabPanel>
-                               <APV />
-                           </TabPanel>
-                           <TabPanel>
-                               <div style={{ flexDirection: 'column' }} className={'flex justify-content-end flex-xl-row flex-lg-row flex-md-column flex-sm-column'}>
-                                   <MDBBtn onClick={() => Filter(2)} color={filterId === 2 ? 'light' : 'light'} className={filterId === 2 ? 'm-2' : 'm-2 text-dark'}>تصاویر در حال ساخت</MDBBtn>
-                                   <MDBBtn onClick={() => Filter(1)} color={filterId === 1 ? 'light' : 'light'} className={'m-2'}>تصاویر معماری</MDBBtn>
-                                   <MDBBtn onClick={() => AllImage()} color={filterId !== 1 && 2 ? 'light' : 'light'} className={'m-2'}>همه تصاویر </MDBBtn>
-                               </div>
-                               <Divider colorScheme={'gray'} />
-                               <MDBRow style={{ marginTop: 10 }}>
-                                   {Images && Images.dataImage.map((image ,index)=> {
-                                       return (
-                                           <MDBCol xs={12} sm={12} md={6} lg={3}>
-                                               <div className={'cardImage'} key={image.id}>
-                                                   <img
-                                                       key={image.id}
-                                                       alt={image.title}
-                                                       width={350}
-                                                       style={{ cursor: 'zoom-in' }}
-                                                       className={'responsive-img'}
-                                                       src={AppFile(`panel-public/uploads/HospitalGallery/${image.imageAddr}`)}
-                                                       onClick={() => {
-                                                           lightBoxHandler(true, index);
-                                                       }}
-                                                   />
-                                                   <br />
-                                                   <span>{ image.title }</span>
-                                               </div>
-                                           </MDBCol>
-                                       )
-                                   })}
-                               </MDBRow>
-                           </TabPanel>
-                       </TabPanels>
-                   </Tabs>
+        .gallery-header {
+          max-width: 1200px;
+          margin: 0 auto 2rem;
+          text-align: right;
+        }
 
-                   <LightBox
-                       state={toggle}
-                       event={lightBoxHandler}
-                       data={Images.dataImage}
-                       imageWidth="60vw"
-                       imageHeight="70vh"
-                       thumbnailHeight={50}
-                       thumbnailWidth={50}
-                       setImageIndex={setSIndex}
-                       imageIndex={sIndex}
-                   />
-                   <br />
-                   <br />
-                   <br />
-                   <br />
-               </div>
-            </AppContainer>
+        .gallery-header h2 {
+          margin: 0 0 0.5rem;
+          color: #263238;
+          font-size: 1.75rem;
+          font-weight: 700;
+        }
 
+        .gallery-header p {
+          margin: 0;
+          color: #6b7280;
+          font-size: 0.95rem;
+        }
+
+        .gallery-header::after {
+          content: '';
+          display: block;
+          width: 54px;
+          height: 3px;
+          margin-top: 0.9rem;
+          border-radius: 999px;
+          background: #009688;
+        }
+
+        .gallery-grid {
+          display: grid;
+          grid-template-columns: repeat(4, minmax(0, 1fr));
+          gap: 1rem;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+
+        .gallery-card {
+          position: relative;
+          aspect-ratio: 16 / 9;
+          padding: 0;
+          overflow: hidden;
+          border: 1px solid #e5e7eb;
+          border-radius: 0.85rem;
+          background: #f3f4f6;
+          cursor: zoom-in;
+          box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
+          transition: transform 180ms ease, box-shadow 180ms ease;
+        }
+
+        .gallery-card:hover,
+        .gallery-card:focus-visible {
+          transform: translateY(-3px);
+          box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
+          outline: none;
+        }
+
+        .gallery-card :global(img) {
+          transition: transform 250ms ease;
+        }
+
+        .gallery-card:hover :global(img) {
+          transform: scale(1.035);
+        }
+
+        .lightbox {
+          position: fixed;
+          z-index: 1500;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 4.5rem 5rem 3rem;
+          background: rgba(0, 0, 0, 0.92);
+        }
+
+        .lightbox-image {
+          max-width: 100%;
+          max-height: calc(100vh - 7.5rem);
+          object-fit: contain;
+          border-radius: 0.4rem;
+        }
+
+        .lightbox-close,
+        .lightbox-navigation {
+          position: absolute;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 0;
+          color: #fff;
+          background: rgba(255, 255, 255, 0.13);
+          cursor: pointer;
+          transition: background 150ms ease;
+        }
+
+        .lightbox-close:hover,
+        .lightbox-navigation:hover {
+          background: rgba(255, 255, 255, 0.25);
+        }
+
+        .lightbox-close {
+          top: 1.25rem;
+          right: 1.25rem;
+          width: 44px;
+          height: 44px;
+          border-radius: 50%;
+          font-size: 1.9rem;
+          line-height: 1;
+        }
+
+        .lightbox-navigation {
+          top: 50%;
+          width: 46px;
+          height: 58px;
+          border-radius: 0.5rem;
+          font-size: 2rem;
+          transform: translateY(-50%);
+        }
+
+        .lightbox-previous {
+          left: 1.25rem;
+        }
+
+        .lightbox-next {
+          right: 1.25rem;
+        }
+
+        .lightbox-counter {
+          position: absolute;
+          bottom: 1rem;
+          left: 50%;
+          margin: 0;
+          color: #fff;
+          font-size: 0.9rem;
+          transform: translateX(-50%);
+        }
+
+        @media (max-width: 992px) {
+          .gallery-grid {
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+          }
+        }
+
+        @media (max-width: 768px) {
+          .gallery-page {
+            padding: 2rem 1rem 4rem;
+          }
+
+          .gallery-grid {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 0.75rem;
+          }
+
+          .lightbox {
+            padding: 4rem 1rem;
+          }
+
+          .lightbox-navigation {
+            top: auto;
+            bottom: 0.8rem;
+            transform: none;
+          }
+
+          .lightbox-previous {
+            left: 1rem;
+          }
+
+          .lightbox-next {
+            right: 1rem;
+          }
+        }
+
+        @media (max-width: 480px) {
+          .gallery-header h2 {
+            font-size: 1.4rem;
+          }
+
+          .gallery-grid {
+            grid-template-columns: 1fr;
+          }
+        }
+      `}</style>
+
+      <div className='parallax-container'>
+        <h1 className='center-align text-white header_back service-text dana font-weight-bold'>گالری بیمارستان</h1>
+        <Image
+          loader={galleryBannerLoader}
+          src='gallery-banner.jpg'
+          className='responsive-img shadow-5'
+          alt='گالری بیمارستان مهر پرند'
+          width={3000}
+          height={1300}
+          priority
+        />
+      </div>
+
+      <main className='gallery-page'>
+        <header className='gallery-header'>
+          <h2>گالری تصاویر</h2>
+          <p>تصاویر بیمارستان مهر پرند</p>
+        </header>
+
+        <section className='gallery-grid' aria-label='تصاویر گالری بیمارستان'>
+          {images.map((image, index) => (
+            <button
+              type='button'
+              className='gallery-card'
+              key={image.id}
+              aria-label={`نمایش تصویر ${index + 1} از گالری`}
+              onClick={() => setSelectedImage(index)}
+            >
+              <Image
+                src={image.image}
+                alt={image.title}
+                layout='fill'
+                objectFit='cover'
+                placeholder='blur'
+                blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(640, 360))}`}
+              />
+            </button>
+          ))}
+        </section>
+      </main>
+
+      {selectedImage !== null && (
+        <div className='lightbox' role='dialog' aria-modal='true' aria-label='نمایش تصویر گالری' onClick={closeLightbox}>
+          <button type='button' className='lightbox-close' aria-label='بستن تصویر' onClick={closeLightbox}>
+            &times;
+          </button>
+          <button
+            type='button'
+            className='lightbox-navigation lightbox-previous'
+            aria-label='تصویر قبلی'
+            onClick={event => {
+              event.stopPropagation()
+              showPreviousImage()
+            }}
+          >
+            &#8249;
+          </button>
+          <img
+            className='lightbox-image'
+            src={images[selectedImage].image}
+            alt={images[selectedImage].title}
+            onClick={event => event.stopPropagation()}
+          />
+          <button
+            type='button'
+            className='lightbox-navigation lightbox-next'
+            aria-label='تصویر بعدی'
+            onClick={event => {
+              event.stopPropagation()
+              showNextImage()
+            }}
+          >
+            &#8250;
+          </button>
+          <p className='lightbox-counter'>
+            {selectedImage + 1} از {images.length}
+          </p>
         </div>
-    );
-};
-export async function getServerSideProps(context) {
-    const res = await axios.get(AppUrl('GetGalleyImages'));
-    return {
-        props: {
-            dataImage : res.data
-        }, // will be passed to the page component as props
-    }
+      )}
+    </AppContainer>
+  )
 }
-export default Gallery;
+
+export async function getStaticProps() {
+  const galleryDirectory = path.join(process.cwd(), 'public', 'resource', 'images', 'gallery')
+  const fileNames = fs
+    .readdirSync(galleryDirectory)
+    .filter(fileName => /\.(jpe?g|png|webp)$/i.test(fileName))
+    .sort((first, second) => first.localeCompare(second, undefined, { numeric: true }))
+
+  const images = fileNames.map((fileName, index) => ({
+    id: fileName,
+    image: `/resource/images/gallery/${encodeURIComponent(fileName)}`,
+    title: `تصویر ${index + 1} از بیمارستان مهر پرند`
+  }))
+
+  return {
+    props: { images }
+  }
+}
+
+export default Gallery

pages/News.js

@@ -1,81 +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 React from 'react'
+import axios from 'axios'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
-import {AppUrl} from "../lib/api";
-import {DownloadIcon} from "@chakra-ui/icons";
+import AppContainer from './appContainer'
+import { AppUrl } from '../lib/api'
+import { newsSeo } from '../lib/seo'
 
-const News = ({data, children}) => {
-    const router = useRouter();
-    const query = router.query.list;
+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 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>
+  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>
-            <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}
+          </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>
-    )
-    return (
-        <div>
-            {query ? <AppContainer children={dataPage} title={'اطلاعیه ها '} /> : dataPage}
-        </div>
-    );
-};
+      )}
+      {children}
+    </section>
+  )
 
-export default News;
+  return isHome ? content : <AppContainer>{content}</AppContainer>
+}
 
-
-export const getServerSideProps =  async (context) => {
-        const allPostsData = await axios.get(AppUrl('news'));
-        const data = await allPostsData.data;
-    return {
-        props: {
-            data,
-            fallback:false
-        }, // will be passed to the page component as props
-    }
+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,19 +26,30 @@ 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" />
+            {/* <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" /> */}
             <Component {...pageProps  } />
         </ChakraProvider>
     </Provider>

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");
+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 (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 }
-    ];
+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)
+  }
 
-    // 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);
-};
+  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='1mcxI6a_QSwpZ-0W65WqgKOzenynNF4PXE8IBq1vEmc' />
-        <link rel='icon' href='../public/resource/logo/favlogo.png' />
+        <meta name="google-site-verification" content="hygRCp6fRa9qi8RXCaAosXK4mBcnCJVRH1ayHtAQy8o" />
         <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/Brands.js

@@ -180,7 +180,7 @@ function brands() {
   return (
     <div className='lg:mx-20 sm:mx-5 mt-5'>          
       <div className="flex justify-center">
-        <h3 className="bk-med font-bold">سهامداران پروژه</h3>
+        <h3 className="bk-med font-bold">همکاران پروژه</h3>
       </div>
       <div className="">
         <Swiper

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'
+import { FiInstagram, FiMail, FiMapPin, FiPhone } from 'react-icons/fi'
 
-const Footer = () => {
+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 (
-    <>
-      <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>
+    <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>
 
-              <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 '>
+          <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' 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>
+                <a href='https://club.mehriranianco.ir/' target='_blank' rel='noopener noreferrer'>
+                  باشگاه سهامداران
+                </a>
+              </li>
+            </ul>
+          </nav>
 
-                <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 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='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 className='footer-bottom'>
+          <span>© {new Date().getFullYear()} بیمارستان مهر پرند. تمامی حقوق محفوظ است.</span>
+          <span>همراه سلامت شما</span>
         </div>
-      </MDBFooter>
-    </>
+      </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>
   )
 }
-
-export default 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 { FiChevronDown, FiInstagram, FiMapPin, FiMenu, FiPhone, FiX } from 'react-icons/fi'
 
-import { FaWhatsapp } from 'react-icons/fa'
-import { FaInstagram } from 'react-icons/fa'
-import { SiAparat } from 'react-icons/si'
+const mainLinks = [
+  { href: '/', label: 'صفحه اصلی' },
+  { href: '/landing', label: 'معرفی بیمارستان' },
+  { href: '/components/service', label: 'بخش‌های درمانی' },
+  { href: '/Gallery', label: 'گالری' },
+  { href: '/recruitment', label: 'استخدام و همکاری' },
+]
 
-export default function App() {
-  const [showNavSecond, setShowNavSecond] = useState(false)
+const moreLinks = [
+  { href: '/page/about', label: 'درباره ما' },
+  { href: '/page/Directors', label: 'تیم پروژه' },
+]
 
-  let router = useRouter()
+export default function Header() {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const { pathname } = useRouter()
+  const closeMenu = () => setMenuOpen(false)
+  const moreIsActive = moreLinks.some(({ href }) => pathname === href)
 
   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>
+    <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='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 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>
-      {/* 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)}
+      <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)}
           >
-            <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>
+            {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>
-                  </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>
+                  ))}
+                </div>
+              </details>
+            </div>
+            <Link href='/page/contact-us'>
+              <a className='contact-button' onClick={closeMenu}>تماس با ما</a>
             </Link>
-            <MDBCardImage className={'responsive-img resLogo'} width={'50'} src={'/resource/logo/logo.png'} />
-          </MDBNavbarBrand>
-        </MDBContainer>
-      </MDBNavbar>
-    </>
+          </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";
+import React from 'react'
+import { FiArrowUpLeft, FiCalendar, FiClock } from 'react-icons/fi'
 
-const Paralax = () => {
-    const [basicModal, setBasicModal] = useState(false);
-    if (basicModal){
-        setTimeout(()=> {
-            setBasicModal(false)
-        },2000)
-    }
+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'
 
-    return (
-        <div className='bg-image mt-5 d-flex flex-md-column flex-sm-column ' style={{ maxWidth: '1080rem' }}>
-            <img  style={{ width: '100%' }}  src={'https://mehrara-api.iran.liara.run/panel-public/uploads/1653317481HLqP4.jpg'} 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>
+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>
 
-                        <MDBModalFooter className={'d-flex justify-content-around'}>
-                            <MDBBtn  color='secondary' onClick={() => setBasicModal(false)}>
-                                بستن
-                            </MDBBtn>
-                        </MDBModalFooter>
-                    </MDBModalContent>
-                </MDBModalDialog>
-            </MDBModal>
-            }
+    <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>
+)
 
-        </div>
-    );
-};
-
-
-export default  Paralax;
+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/connect.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {useState} from "react";
-import {useFormik ,Form} from "formik";
+import { useState } from "react";
+import { useFormik, Form } from "formik";
 import { Formik } from "formik";
 
 import * as Yup from 'yup'
@@ -10,21 +10,21 @@ import {
     MDBInputGroupElement, MDBContainer, MDBRow, MDBIcon, MDBInput, MDBBtn, MDBSpinner, MDBTypography
 } from 'mdb-react-ui-kit'
 import axios from "axios";
-import {AppUrl} from "../../lib/api";
-import {AiOutlinePhone, AiOutlineUser} from "react-icons/ai";
+import { AppUrl } from "../../lib/api";
+import { AiOutlinePhone, AiOutlineUser } from "react-icons/ai";
 
 const Connect = () => {
-    const [Loading,setLoading] = useState(false);
-    const [Success,setSuccess] = useState(false);
+    const [Loading, setLoading] = useState(false);
+    const [Success, setSuccess] = useState(false);
 
     return (
         <>
             <Formik
-                initialValues={{ name: "" ,PhoneNumber: "",text: ""}}
-                onSubmit={async (values,{resetForm}) => {
+                initialValues={{ name: "", PhoneNumber: "", text: "" }}
+                onSubmit={async (values, { resetForm }) => {
                     setLoading(true);
                     const dataForm = values;
-                    const SubmitForm = axios.post(AppUrl('contact-us'),dataForm).then((res) => {
+                    const SubmitForm = axios.post(AppUrl('contact-us'), dataForm).then((res) => {
                         if (res.status === 200) {
                             setLoading(false);
                             setSuccess(true);
@@ -39,8 +39,8 @@ const Connect = () => {
                 validateOnBlur={false}
                 validationSchema={Yup.object().shape({
                     name: Yup.string().required("وارد کردن نام الزامی است."),
-                    PhoneNumber : Yup.string().required('شماره تلفن الزامی است .'),
-                    text : Yup.string().required('متن پیام وارد نشده  است. '),
+                    PhoneNumber: Yup.string().required('شماره تلفن الزامی است .'),
+                    text: Yup.string().required('متن پیام وارد نشده  است. '),
                 })}
             >
                 {props => {
@@ -55,12 +55,12 @@ const Connect = () => {
                         handleReset
                     } = props;
                     return (
-                        <form id={'contactUsform'} style={{marginTop: '25px'}} onSubmit={handleSubmit}>
-                <div className='lg:mx-20 sm:mx-5'>          
-                <h5 className={'right-align font-weight-bold'}>  تماس با ما و مشاوره خرید سهام  </h5>
+                        <form id={'contactUsform'} style={{ marginTop: '25px' }} onSubmit={handleSubmit}>
+                            <div className='lg:mx-20 sm:mx-5'>
+                                <h5 className={'right-align font-weight-bold'}>  تماس با ما    </h5>
                                 <br />
                                 <MDBRow>
-                                    <MDBInputGroup className='mb-3' style={{width: '50%'}}>
+                                    <MDBInputGroup className='mb-3' style={{ width: '50%' }}>
                                         <MDBInputGroupElement
                                             onChange={handleChange}
                                             onBlur={handleBlur}
@@ -77,7 +77,7 @@ const Connect = () => {
 
                                     </MDBInputGroup>
 
-                                    <MDBInputGroup className='mb-3' style={{width: '50%'}}>
+                                    <MDBInputGroup className='mb-3' style={{ width: '50%' }}>
                                         <MDBInputGroupElement
                                             value={values.name}
                                             onChange={handleChange}
@@ -90,7 +90,7 @@ const Connect = () => {
                                             <AiOutlineUser />
                                         </MDBInputGroupText>
                                     </MDBInputGroup>
-                                    <MDBInputGroup className='mb-3' style={{width: '100%'}}>
+                                    <MDBInputGroup className='mb-3' style={{ width: '100%' }}>
                                         <MDBInputGroupElement
                                             name={'text'}
                                             id={'text'}
@@ -98,7 +98,7 @@ const Connect = () => {
                                             onChange={handleChange}
                                             dir={'rtl'}
                                             className={'right-align RTL'}
-                                            style={{height: '100%'}}
+                                            style={{ height: '100%' }}
                                             placeholder='متن پیام  خود را وارد کنید'
                                             textarea
                                             type='text' />
@@ -106,11 +106,11 @@ const Connect = () => {
                                 </MDBRow>
                                 <MDBBtn type={'submit'}>
                                     {Loading ? (
-                                            <>
-                                                <MDBSpinner grow size='sm' role='status' tag='span' />
-                                                <span className='visually-hidden'>Loading...</span>
-                                            </>
-                                        ):
+                                        <>
+                                            <MDBSpinner grow size='sm' role='status' tag='span' />
+                                            <span className='visually-hidden'>Loading...</span>
+                                        </>
+                                    ) :
                                         <>
                                             ارسال
                                         </>
@@ -120,23 +120,23 @@ const Connect = () => {
                                     <div className={'d-flex justify-content-end text-danger '}>
                                         {errors.PhoneNumber}
                                     </div>
-                                ): null}
+                                ) : null}
                                 {touched.name && errors.name ? (
                                     <div className={'d-flex justify-content-end text-danger '}>
                                         {errors.name}
                                     </div>
-                                ): null}
+                                ) : null}
                                 {touched.text && errors.text ? (
                                     <div className={'d-flex justify-content-end text-danger '}>
                                         {errors.text}
                                     </div>
-                                ): null}
-                                <br/>
+                                ) : null}
+                                <br />
                                 {Success ? (
-                                    <MDBTypography style={{direction: 'rtl',borderRadius: '6px solid',borderRight: '6px  solid #00B74A',borderLeft: 'none'}} note noteColor='success'>
+                                    <MDBTypography style={{ direction: 'rtl', borderRadius: '6px solid', borderRight: '6px  solid #00B74A', borderLeft: 'none' }} note noteColor='success'>
                                         اطلاعات شما ارسال شد ، بعد از بررسی با شما تماس گرفته می شود .
                                     </MDBTypography>
-                                ): null}
+                                ) : null}
                             </div>
 
 

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} />
@@ -27,11 +24,11 @@ const Slider = () => {
             <img src={SliderOne} />
           </Link>
         </SwiperSlide> */}
-        <SwiperSlide key={2} style={{ cursor: 'pointer' }} className='pointer'>
+        {/* <SwiperSlide key={2} style={{ cursor: 'pointer' }} className='pointer'>
           <Link href='/page/news/89'>
             <img src={TransferStockBanner} />
           </Link>
-        </SwiperSlide>
+        </SwiperSlide> */}
         {/* <SwiperSlide key={2} style={{ cursor: 'pointer' }} className='pointer'>
           <Link href='/page/news/82'>
             <img src={LimitSlider} />
@@ -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>

pages/index.js

@@ -2,13 +2,7 @@ import AppContainer from './appContainer'
 import Slider from './components/slider'
 import News from './News'
 import axios from 'axios'
-import {
-  MDBBtn,
-  MDBCard,
-  MDBCardBody,
-  MDBContainer,
-  MDBIcon,
-} from 'mdb-react-ui-kit'
+import { MDBBtn, MDBCard, MDBCardBody, MDBContainer, MDBIcon } from 'mdb-react-ui-kit'
 import Link from 'next/link'
 import Paralax from './components/Paralax'
 import Service from './components/service'
@@ -29,38 +23,142 @@ 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, 3]}>
-              <Link href={'/page/contact-us'}>
-                <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
-                  <MDBCardBody className={'flex justify-content-center'}>ارتباط با ما</MDBCardBody>
-                </MDBCard>
-              </Link>
+          <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'}>
                 <MDBCardBody className={'flex justify-content-center'}> مشاوره سرمایه گذاری </MDBCardBody>
               </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'}>
+            {/* <Link href={'/stock-unit'}>
               <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
                 <MDBCardBody className={'flex justify-content-center'}> واحد امور سهام</MDBCardBody>
               </MDBCard>
-            </Link>
+            </Link> */}
           </SimpleGrid>
           {/* <div className={'mt-5'}>
             <OnlineSales />
@@ -75,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>
@@ -114,10 +212,10 @@ export default function Home({ data_NEWS }) {
 }
 
 export const getServerSideProps = async context => {
-  const allPostsData = await axios.get(AppUrl('news'))
-  const data_NEWS = await allPostsData.data.slice(0, 6)
+  // const allPostsData = await axios.get(AppUrl('news'))
+  // const data_NEWS = await allPostsData.data.slice(0, 6)
 
   return {
-    props: { data_NEWS, fallback: false } // will be passed to the page component as props
+    props: { data_NEWS: null, fallback: false } // will be passed to the page component as props
   }
 }

pages/medical-equipment/index.js

@@ -7,41 +7,15 @@ 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}
         />
       </div>
-      <div className='lg:mx-20 sm:mx-5 my-25'> 
-      <div className={'bk-med flex justify-content-center align-items-center flex-col'}>
-          <div>
-            <MDBTypography
-              style={{ borderLeft: 'none', borderRight: '6px solid ', backgroundColor: '#F0F0F0' }}
-              note
-              noteColor='dark'
-              className='mb-0'
-            >
-              <MDBRow>
-                <MDBTypography className={'dana right-align'}>
-                  اگر به دنبال همکاری با بخش تجهیزات بیمارستان هستید، لطفا با یکی از شماره‌های زیر تماس حاصل نمایید تا
-                  اطلاعات بیشتری در این خصوص از ما دریافت کنید
-                </MDBTypography>
-              </MDBRow>
-            </MDBTypography>
-          </div>
-          <div className='flex lg:flex-row md:flex-col justify-center items-center sm:flex-col gap-x-5 mt-4'>
-            <a className='dana' href='tel:021-53457999'>021-53457999</a>
-            <br />
-            <a className='dana' href='tel:09194199420'>09194199420</a>
-            <br />
-              <a>خانم زارعی</a>
-          </div>
-        </div>
-      </div>
     </AppContainer>
   )
 }

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
@@ -29,23 +94,31 @@ const About = (props) => {
 
                    </h5>
                    <p className={'right-align RTL'}>
-                       بیمارستان تخصصی مهرایرانیان واقع در  اتوبان چهاربانده اصلی داخلی شهر پرند در بهترین موقعیت مکانی و در دل مسکن مهر،  با فضای درمانی به متراژ تقریبی 500/14 متر مربع همراه با 4000 متر پارکینگ طبقاتی، با هدف تبدیل شدن به یکی از قطب های درمانی منطقه در حال احداث می باشد. این بیمارستان که تنها بیمارستان تخصصی در کنار بزرگترین فرودگاه کشور است در فاز اولیه احداث دارای 96 تختخواب و دارای بخش های ICU،CCU،NICU،زایشگاه، اتاق های عمل، مرکز تصویربرداری،آزمایشگاه،داروخانه، اورژانس، بخش اسکوپی و گوارش، و دندانپزشکی عمومی و تخصصی می باشد. این بیمارستان در آینده نه چندان دور سهم بسزایی در بهداشت و درمان منطقه جنوب غرب تهران که شامل شهرهای پرند،رباط کریم،نسیم شهر و شهرک های تابعه است، خواهد داشت.
-                       در حال حاضر این پروژه 30% پیشرفت فیزیکی داشته و طبقه همکف آن که شامل اورژانس و کلینیک های تخصصی است تا پایان آبان 1400 تکمیل خواهد شد.
+                       بیمارستان تخصصی مهرایرانیان واقع در  اتوبان چهاربانده اصلی داخلی شهر پرند در بهترین موقعیت مکانی و در دل مسکن مهر،  با فضای درمانی به متراژ تقریبی 21.000 متر مربع همراه با 4000 متر پارکینگ طبقاتی، با هدف تبدیل شدن به یکی از قطب های درمانی منطقه در حال احداث می باشد. این بیمارستان که تنها بیمارستان تخصصی در کنار بزرگترین فرودگاه کشور است در فاز اولیه احداث دارای 96 تختخواب و دارای بخش های ICU،CCU،NICU،زایشگاه، اتاق های عمل، مرکز تصویربرداری،آزمایشگاه،داروخانه، اورژانس، بخش اسکوپی و گوارش، و دندانپزشکی عمومی و تخصصی می باشد. این بیمارستان در آینده نه چندان دور سهم بسزایی در بهداشت و درمان منطقه جنوب غرب تهران که شامل شهرهای پرند،رباط کریم،نسیم شهر و شهرک های تابعه است، خواهد داشت.
+                       در حال حاضر این پروژه 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='45' valuemin={0} valuemax={100}>
-                              45% پیشرفت فیزیکی پروژه
-                          </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>

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}

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

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

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/smartadvice/index.js

@@ -112,7 +112,7 @@ const SmartAdvice = () => {
                               </div>
                                 <div className={'flex justify-content-center m-2'}>
                                     {page === 5 ? (
-                                        <MDBBtn onClick={SubmitForm} size={'lg'}  className={'mt-2 bk-med text-center bg-primary-teal'}>ثبت در خواست مشاوره خرید سهام  </MDBBtn>
+                                        <MDBBtn onClick={SubmitForm} size={'lg'}  className={'mt-2 bk-med text-center bg-primary-teal'}>  درخواست مشاوره    </MDBBtn>
                                     ): ''}
                                 </div>
                             </div>

pages/stock-unit/index.jsx

@@ -23,22 +23,23 @@ const StockUnit = () => {
   return (
     <AppContainer title={' امور سهام'}>
       <div className='parallax-container'>
-        <div
+        {/* <div
           style={{ fontSize: 30 }}
           className={'center-align text-white header_back service-text dana font-weight-bold'}
         >
           امور سهام
-        </div>
+        </div> */}
         <Image
           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'}>
@@ -67,8 +68,8 @@ const StockUnit = () => {
           </SimpleGrid>
         </div>
         <div className='text-center w-full'>
-          <a className='' href='tel:02153757999'>
-            امور سهامداران: 02153757999
+          <a className='' href='tel:02153457999'>
+            امور سهامداران: 53457999 - 021
           </a>
         </div>
       </div>

pages/stock-unit/stock-sales/index.jsx

@@ -94,7 +94,7 @@ const StockSalesContainer = () => {
                 <div className='addressAbout pr-8 pl-8 pt-[1.8rem]'>
                   <h4 className='text-white font-bold md:text-xl	'>ارتباط با واحد سهام</h4>
                   <p className='text-white font-light md:text-lg pt-[0.5rem]'>
-                    بعد از ارسال درخواست کارشناسان طی 24 ساعت با شما تماس خواهند گرفت
+                    {/* بعد از ارسال درخواست کارشناسان طی 24 ساعت با شما تماس خواهند گرفت */}
                   </p>
 
                   <div className='address'>