1043 lines
28 KiB
JavaScript
1043 lines
28 KiB
JavaScript
|
import React from 'react'
|
|||
|
|
import Image from 'next/image'
|
|||
|
|
import Link from 'next/link'
|
|||
|
|
import {
|
|||
|
|
FiActivity,
|
|||
|
|
FiArrowLeft,
|
|||
|
|
FiCamera,
|
|||
|
|
FiCheckCircle,
|
|||
|
|
FiClock,
|
|||
|
|
FiHeart,
|
|||
|
|
FiMapPin,
|
|||
|
|
FiPhone,
|
|||
|
|
FiShield
|
|||
|
|
} from 'react-icons/fi'
|
|||
|
|
import AppContainer from './appContainer'
|
|||
|
|
|
|||
|
|
const departments = [
|
|||
|
|
{
|
|||
|
|
title: 'اورژانس',
|
|||
|
|
description: 'پاسخ‌گویی سریع و فضای مجهز برای مراقبت‌های فوری',
|
|||
|
|
icon: '/resource/icons/hospital-c.png'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'درمانگاه تخصصی',
|
|||
|
|
description: 'دسترسی به خدمات تخصصی در محیطی آرام و استاندارد',
|
|||
|
|
icon: '/resource/icons/hospital.png'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'اتاق عمل',
|
|||
|
|
description: 'فضاهای جراحی طراحی‌شده براساس نیازهای روز درمان',
|
|||
|
|
icon: '/resource/icons/operating-room.png'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'مراقبت‌های ویژه',
|
|||
|
|
description: 'بخش‌های ICU، CCU و NICU با تجهیزات پایش تخصصی',
|
|||
|
|
icon: '/resource/icons/ICU.png'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'تصویربرداری',
|
|||
|
|
description: 'خدمات تصویربرداری و سونوگرافی در مجموعه بیمارستان',
|
|||
|
|
icon: '/resource/icons/x-rays.png'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'آزمایشگاه',
|
|||
|
|
description: 'فضای تخصصی آزمایشگاه و خدمات سلامت‌سنجی',
|
|||
|
|
icon: '/resource/icons/test-tubes.png'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const quickLinks = [
|
|||
|
|
{
|
|||
|
|
title: 'تماس با بیمارستان',
|
|||
|
|
caption: 'پاسخ‌گویی و راهنمایی',
|
|||
|
|
href: 'tel:02153457000',
|
|||
|
|
icon: FiPhone,
|
|||
|
|
external: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'بخش‌های درمانی',
|
|||
|
|
caption: 'آشنایی با خدمات',
|
|||
|
|
href: '/components/service',
|
|||
|
|
icon: FiActivity
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'گالری بیمارستان',
|
|||
|
|
caption: 'مشاهده فضای مجموعه',
|
|||
|
|
href: '/Gallery',
|
|||
|
|
icon: FiCamera
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'موقعیت و مسیر',
|
|||
|
|
caption: 'آدرس و راه‌های ارتباطی',
|
|||
|
|
href: '/page/contact-us',
|
|||
|
|
icon: FiMapPin
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const galleryImages = [
|
|||
|
|
{
|
|||
|
|
src: '/resource/images/gallery/IMG-20260910-WA0040.jpg',
|
|||
|
|
alt: 'فضای بستری بیمارستان مهر ایرانیان پرند',
|
|||
|
|
className: 'gallery-large'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: '/resource/images/gallery/IMG-20260910-WA0059.jpg',
|
|||
|
|
alt: 'راهروی درمانگاه بیمارستان مهر ایرانیان پرند',
|
|||
|
|
className: ''
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: '/resource/images/gallery/IMG-20260910-WA0000.jpg',
|
|||
|
|
alt: 'ایستگاه پرستاری بیمارستان مهر ایرانیان پرند',
|
|||
|
|
className: ''
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const Landing = () => {
|
|||
|
|
return (
|
|||
|
|
<AppContainer title='بیمارستان مهر ایرانیان پرند | همراه سلامت شما'>
|
|||
|
|
<style jsx>{`
|
|||
|
|
.landing {
|
|||
|
|
direction: rtl;
|
|||
|
|
overflow: hidden;
|
|||
|
|
color: #15323a;
|
|||
|
|
background: #f8fbfb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
width: min(1180px, calc(100% - 2rem));
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero {
|
|||
|
|
position: relative;
|
|||
|
|
min-height: 680px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
isolation: isolate;
|
|||
|
|
background: #0b3c45;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-image,
|
|||
|
|
.hero-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-image {
|
|||
|
|
z-index: -2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-image :global(img) {
|
|||
|
|
object-position: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-overlay {
|
|||
|
|
z-index: -1;
|
|||
|
|
background:
|
|||
|
|
linear-gradient(90deg, rgba(7, 37, 44, 0.18) 0%, rgba(7, 37, 44, 0.5) 48%, rgba(7, 37, 44, 0.94) 100%),
|
|||
|
|
linear-gradient(0deg, rgba(7, 37, 44, 0.28), transparent 45%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-content {
|
|||
|
|
max-width: 650px;
|
|||
|
|
padding: 6rem 0 8rem;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.eyebrow {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.55rem;
|
|||
|
|
margin-bottom: 1.25rem;
|
|||
|
|
padding: 0.5rem 0.85rem;
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.28);
|
|||
|
|
border-radius: 999px;
|
|||
|
|
color: #d9ffff;
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
font-size: 0.82rem;
|
|||
|
|
backdrop-filter: blur(8px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.eyebrow-dot {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #69d2c9;
|
|||
|
|
box-shadow: 0 0 0 5px rgba(105, 210, 201, 0.17);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero h1 {
|
|||
|
|
max-width: 620px;
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: clamp(2.2rem, 5vw, 4.35rem);
|
|||
|
|
font-weight: 800;
|
|||
|
|
line-height: 1.28;
|
|||
|
|
letter-spacing: -0.04em;
|
|||
|
|
text-shadow: 0 7px 28px rgba(0, 0, 0, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero h1 span {
|
|||
|
|
color: #8fe4dc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-description {
|
|||
|
|
max-width: 580px;
|
|||
|
|
margin: 1.5rem 0 0;
|
|||
|
|
color: rgba(255, 255, 255, 0.84);
|
|||
|
|
font-size: 1.03rem;
|
|||
|
|
line-height: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-actions {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.8rem;
|
|||
|
|
margin-top: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button {
|
|||
|
|
min-height: 52px;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 0.65rem;
|
|||
|
|
padding: 0.75rem 1.2rem;
|
|||
|
|
border: 1px solid transparent;
|
|||
|
|
border-radius: 0.8rem;
|
|||
|
|
font-size: 0.92rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-primary {
|
|||
|
|
color: #07383d;
|
|||
|
|
background: #8fe4dc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-primary:hover {
|
|||
|
|
color: #07383d;
|
|||
|
|
background: #b2f1eb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-secondary {
|
|||
|
|
border-color: rgba(255, 255, 255, 0.32);
|
|||
|
|
color: #fff;
|
|||
|
|
background: rgba(255, 255, 255, 0.09);
|
|||
|
|
backdrop-filter: blur(8px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-secondary:hover {
|
|||
|
|
color: #fff;
|
|||
|
|
background: rgba(255, 255, 255, 0.16);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-access-wrap {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
margin-top: -74px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-access {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(4, 1fr);
|
|||
|
|
overflow: hidden;
|
|||
|
|
border: 1px solid rgba(23, 113, 113, 0.1);
|
|||
|
|
border-radius: 1.15rem;
|
|||
|
|
background: #fff;
|
|||
|
|
box-shadow: 0 22px 60px rgba(28, 73, 78, 0.14);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-link {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.9rem;
|
|||
|
|
min-height: 145px;
|
|||
|
|
padding: 1.25rem;
|
|||
|
|
color: #15323a;
|
|||
|
|
border-left: 1px solid #e7eeee;
|
|||
|
|
transition: color 180ms ease, background 180ms ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-link:last-child {
|
|||
|
|
border-left: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-link:hover {
|
|||
|
|
color: #126f70;
|
|||
|
|
text-decoration: none;
|
|||
|
|
background: #f0fbfa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-icon {
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
flex: 0 0 50px;
|
|||
|
|
display: grid;
|
|||
|
|
place-items: center;
|
|||
|
|
border-radius: 0.85rem;
|
|||
|
|
color: #167a7b;
|
|||
|
|
background: #e2f6f4;
|
|||
|
|
font-size: 1.3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-copy strong,
|
|||
|
|
.quick-copy span {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-copy strong {
|
|||
|
|
margin-bottom: 0.3rem;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-copy span {
|
|||
|
|
color: #718387;
|
|||
|
|
font-size: 0.76rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section {
|
|||
|
|
padding: 7rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-white {
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-heading {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 2rem;
|
|||
|
|
margin-bottom: 2.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-label {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 0.65rem;
|
|||
|
|
color: #168182;
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
margin: 0;
|
|||
|
|
color: #14363c;
|
|||
|
|
font-size: clamp(1.65rem, 3vw, 2.55rem);
|
|||
|
|
font-weight: 800;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-link {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.45rem;
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
color: #167a7b;
|
|||
|
|
font-size: 0.88rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-link:hover {
|
|||
|
|
color: #0d5556;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1.03fr;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: clamp(2rem, 6vw, 5.5rem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-visual {
|
|||
|
|
position: relative;
|
|||
|
|
min-height: 520px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-image {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0 0 2.2rem 2.2rem;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 1.5rem;
|
|||
|
|
box-shadow: 0 22px 55px rgba(23, 75, 80, 0.16);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-image :global(img) {
|
|||
|
|
object-position: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-badge {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 180px;
|
|||
|
|
min-height: 155px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 1.35rem;
|
|||
|
|
border: 8px solid #fff;
|
|||
|
|
border-radius: 1.25rem;
|
|||
|
|
color: #fff;
|
|||
|
|
background: #147778;
|
|||
|
|
box-shadow: 0 16px 38px rgba(20, 119, 120, 0.24);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-badge strong {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-badge span {
|
|||
|
|
margin-top: 0.4rem;
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
line-height: 1.7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-copy p {
|
|||
|
|
margin: 1.3rem 0 1.8rem;
|
|||
|
|
color: #64777b;
|
|||
|
|
font-size: 0.94rem;
|
|||
|
|
line-height: 2.15;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-points {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 0.9rem;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-point {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.55rem;
|
|||
|
|
color: #38555a;
|
|||
|
|
font-size: 0.84rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-point :global(svg) {
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
color: #21a196;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(4, 1fr);
|
|||
|
|
gap: 1rem;
|
|||
|
|
margin-top: 5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat {
|
|||
|
|
padding: 1.55rem;
|
|||
|
|
border: 1px solid #e3eeee;
|
|||
|
|
border-radius: 1rem;
|
|||
|
|
background: #f8fbfb;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat strong,
|
|||
|
|
.stat span {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat strong {
|
|||
|
|
color: #147778;
|
|||
|
|
font-size: clamp(1.55rem, 3vw, 2.25rem);
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat span {
|
|||
|
|
margin-top: 0.3rem;
|
|||
|
|
color: #6d8185;
|
|||
|
|
font-size: 0.78rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.departments-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.department-card {
|
|||
|
|
min-height: 230px;
|
|||
|
|
padding: 1.65rem;
|
|||
|
|
border: 1px solid #e3eeee;
|
|||
|
|
border-radius: 1.1rem;
|
|||
|
|
background: #fff;
|
|||
|
|
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.department-card:hover {
|
|||
|
|
transform: translateY(-5px);
|
|||
|
|
border-color: #bfe7e3;
|
|||
|
|
box-shadow: 0 18px 38px rgba(25, 82, 87, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.department-icon {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
display: grid;
|
|||
|
|
place-items: center;
|
|||
|
|
margin-bottom: 1.25rem;
|
|||
|
|
border-radius: 1rem;
|
|||
|
|
background: #eaf8f6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.department-icon img {
|
|||
|
|
width: 34px;
|
|||
|
|
height: 34px;
|
|||
|
|
object-fit: contain;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.department-card h3 {
|
|||
|
|
margin: 0 0 0.65rem;
|
|||
|
|
color: #183b41;
|
|||
|
|
font-size: 1.02rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.department-card p {
|
|||
|
|
margin: 0;
|
|||
|
|
color: #76878a;
|
|||
|
|
font-size: 0.82rem;
|
|||
|
|
line-height: 1.9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1.5fr 1fr;
|
|||
|
|
grid-template-rows: repeat(2, 220px);
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-item {
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 1.15rem;
|
|||
|
|
background: #dce7e7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-large {
|
|||
|
|
grid-row: 1 / 3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-item :global(img) {
|
|||
|
|
transition: transform 350ms ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-item:hover :global(img) {
|
|||
|
|
transform: scale(1.035);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.values {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 1rem;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 1rem;
|
|||
|
|
padding: 1.45rem;
|
|||
|
|
border-radius: 1rem;
|
|||
|
|
color: #dceeed;
|
|||
|
|
background: #103f47;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value-icon {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
flex: 0 0 44px;
|
|||
|
|
display: grid;
|
|||
|
|
place-items: center;
|
|||
|
|
border-radius: 0.8rem;
|
|||
|
|
color: #8fe4dc;
|
|||
|
|
background: rgba(143, 228, 220, 0.1);
|
|||
|
|
font-size: 1.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value h3 {
|
|||
|
|
margin: 0 0 0.35rem;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 0.92rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value p {
|
|||
|
|
margin: 0;
|
|||
|
|
color: #b6cecf;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-card {
|
|||
|
|
position: relative;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1.3fr 0.7fr;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 2rem;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: clamp(2rem, 6vw, 4.5rem);
|
|||
|
|
border-radius: 1.5rem;
|
|||
|
|
color: #fff;
|
|||
|
|
background: #147778;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-card::before,
|
|||
|
|
.contact-card::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(255, 255, 255, 0.06);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-card::before {
|
|||
|
|
width: 280px;
|
|||
|
|
height: 280px;
|
|||
|
|
top: -150px;
|
|||
|
|
right: -90px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-card::after {
|
|||
|
|
width: 200px;
|
|||
|
|
height: 200px;
|
|||
|
|
bottom: -120px;
|
|||
|
|
left: 15%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-copy,
|
|||
|
|
.contact-actions {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-card h2 {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: clamp(1.5rem, 3vw, 2.35rem);
|
|||
|
|
font-weight: 800;
|
|||
|
|
line-height: 1.55;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-card p {
|
|||
|
|
max-width: 650px;
|
|||
|
|
margin: 0.8rem 0 0;
|
|||
|
|
color: rgba(255, 255, 255, 0.78);
|
|||
|
|
font-size: 0.88rem;
|
|||
|
|
line-height: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-actions {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-actions .button {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 992px) {
|
|||
|
|
.hero {
|
|||
|
|
min-height: 620px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-access {
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-link:nth-child(2) {
|
|||
|
|
border-left: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-link:nth-child(-n + 2) {
|
|||
|
|
border-bottom: 1px solid #e7eeee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-grid {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-visual {
|
|||
|
|
min-height: 480px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.departments-grid {
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-card {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-actions {
|
|||
|
|
max-width: 330px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 700px) {
|
|||
|
|
.container {
|
|||
|
|
width: min(100% - 1.25rem, 1180px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero {
|
|||
|
|
min-height: 670px;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-overlay {
|
|||
|
|
background: linear-gradient(0deg, rgba(7, 37, 44, 0.98) 8%, rgba(7, 37, 44, 0.76) 58%, rgba(7, 37, 44, 0.18) 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-content {
|
|||
|
|
padding: 8rem 0 7rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero h1 {
|
|||
|
|
font-size: 2.35rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-description {
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-actions,
|
|||
|
|
.hero-actions .button {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-access-wrap {
|
|||
|
|
margin-top: -45px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-access {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-link {
|
|||
|
|
min-height: 105px;
|
|||
|
|
border-left: 0;
|
|||
|
|
border-bottom: 1px solid #e7eeee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quick-link:last-child {
|
|||
|
|
border-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section {
|
|||
|
|
padding: 4.5rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-heading {
|
|||
|
|
align-items: flex-start;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-visual {
|
|||
|
|
min-height: 350px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-image {
|
|||
|
|
inset: 0 0 1.5rem 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-badge {
|
|||
|
|
width: 150px;
|
|||
|
|
min-height: 125px;
|
|||
|
|
padding: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-badge strong {
|
|||
|
|
font-size: 1.55rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.about-points,
|
|||
|
|
.stats,
|
|||
|
|
.departments-grid,
|
|||
|
|
.values {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats {
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
margin-top: 3.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-grid {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
grid-template-rows: repeat(3, 230px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-large {
|
|||
|
|
grid-row: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-card {
|
|||
|
|
border-radius: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-actions {
|
|||
|
|
max-width: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
`}</style>
|
|||
|
|
|
|||
|
|
<main className='landing'>
|
|||
|
|
<section className='hero'>
|
|||
|
|
<div className='hero-image'>
|
|||
|
|
<Image
|
|||
|
|
src='/resource/images/gallery/IMG-20260910-WA0040.jpg'
|
|||
|
|
alt='بخش بستری بیمارستان مهر ایرانیان پرند'
|
|||
|
|
layout='fill'
|
|||
|
|
objectFit='cover'
|
|||
|
|
priority
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className='hero-overlay' />
|
|||
|
|
<div className='container'>
|
|||
|
|
<div className='hero-content'>
|
|||
|
|
<div className='eyebrow'>
|
|||
|
|
<span className='eyebrow-dot' />
|
|||
|
|
بیمارستان تخصصی در قلب شهر پرند
|
|||
|
|
</div>
|
|||
|
|
<h1>
|
|||
|
|
همراه مطمئن شما، برای <span>زندگی سالم‌تر</span>
|
|||
|
|
</h1>
|
|||
|
|
<p className='hero-description'>
|
|||
|
|
بیمارستان مهر ایرانیان پرند با تکیه بر زیرساخت درمانی مدرن، بخش‌های تخصصی و فضای طراحی‌شده برای
|
|||
|
|
آرامش بیماران، در مسیر تبدیل‌شدن به یکی از قطب‌های سلامت جنوب‌غرب تهران است.
|
|||
|
|
</p>
|
|||
|
|
<div className='hero-actions'>
|
|||
|
|
<a className='button button-primary' href='tel:02153457000'>
|
|||
|
|
<FiPhone /> تماس با بیمارستان
|
|||
|
|
</a>
|
|||
|
|
<Link href='/page/about'>
|
|||
|
|
<a className='button button-secondary'>
|
|||
|
|
درباره بیمارستان <FiArrowLeft />
|
|||
|
|
</a>
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<div className='quick-access-wrap'>
|
|||
|
|
<div className='container'>
|
|||
|
|
<nav className='quick-access' aria-label='دسترسی سریع'>
|
|||
|
|
{quickLinks.map(item => {
|
|||
|
|
const Icon = item.icon
|
|||
|
|
const content = (
|
|||
|
|
<>
|
|||
|
|
<span className='quick-icon'>
|
|||
|
|
<Icon />
|
|||
|
|
</span>
|
|||
|
|
<span className='quick-copy'>
|
|||
|
|
<strong>{item.title}</strong>
|
|||
|
|
<span>{item.caption}</span>
|
|||
|
|
</span>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
return item.external ? (
|
|||
|
|
<a className='quick-link' href={item.href} key={item.title}>
|
|||
|
|
{content}
|
|||
|
|
</a>
|
|||
|
|
) : (
|
|||
|
|
<Link href={item.href} key={item.title}>
|
|||
|
|
<a className='quick-link'>{content}</a>
|
|||
|
|
</Link>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<section className='section section-white'>
|
|||
|
|
<div className='container'>
|
|||
|
|
<div className='about-grid'>
|
|||
|
|
<div className='about-visual'>
|
|||
|
|
<div className='about-image'>
|
|||
|
|
<Image
|
|||
|
|
src='/resource/images/gallery/IMG-20260910-WA0000.jpg'
|
|||
|
|
alt='فضای داخلی بیمارستان مهر ایرانیان پرند'
|
|||
|
|
layout='fill'
|
|||
|
|
objectFit='cover'
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className='about-badge'>
|
|||
|
|
<strong>۹۶ تخت</strong>
|
|||
|
|
<span>ظرفیت فاز نخست بیمارستان</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className='about-copy'>
|
|||
|
|
<span className='section-label'>درباره مهر ایرانیان</span>
|
|||
|
|
<h2 className='section-title'>زیرساختی مدرن برای پاسخ به نیاز درمانی منطقه</h2>
|
|||
|
|
<p>
|
|||
|
|
بیمارستان تخصصی مهر ایرانیان در یکی از بهترین موقعیت‌های شهر پرند و در مجاورت بزرگ‌ترین فرودگاه
|
|||
|
|
کشور قرار دارد. این مجموعه با فضای درمانی گسترده، بخش‌های تخصصی و فوق‌تخصصی و دسترسی مناسب، برای
|
|||
|
|
خدمت‌رسانی به ساکنان پرند، رباط‌کریم، نسیم‌شهر و شهرهای پیرامون طراحی شده است.
|
|||
|
|
</p>
|
|||
|
|
<div className='about-points'>
|
|||
|
|
<div className='about-point'>
|
|||
|
|
<FiCheckCircle /> طراحی بیمارمحور
|
|||
|
|
</div>
|
|||
|
|
<div className='about-point'>
|
|||
|
|
<FiCheckCircle /> تجهیزات تخصصی
|
|||
|
|
</div>
|
|||
|
|
<div className='about-point'>
|
|||
|
|
<FiCheckCircle /> دسترسی شهری مناسب
|
|||
|
|
</div>
|
|||
|
|
<div className='about-point'>
|
|||
|
|
<FiCheckCircle /> پوشش خدمات متنوع
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Link href='/page/about'>
|
|||
|
|
<a className='text-link'>
|
|||
|
|
داستان بیمارستان را بخوانید <FiArrowLeft />
|
|||
|
|
</a>
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className='stats'>
|
|||
|
|
<div className='stat'>
|
|||
|
|
<strong>۲۱,۰۰۰</strong>
|
|||
|
|
<span>مترمربع فضای درمانی</span>
|
|||
|
|
</div>
|
|||
|
|
<div className='stat'>
|
|||
|
|
<strong>۴,۰۰۰</strong>
|
|||
|
|
<span>مترمربع پارکینگ طبقاتی</span>
|
|||
|
|
</div>
|
|||
|
|
<div className='stat'>
|
|||
|
|
<strong>۹۶</strong>
|
|||
|
|
<span>تخت در فاز نخست</span>
|
|||
|
|
</div>
|
|||
|
|
<div className='stat'>
|
|||
|
|
<strong>۱۴+</strong>
|
|||
|
|
<span>بخش درمانی و تخصصی</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section className='section'>
|
|||
|
|
<div className='container'>
|
|||
|
|
<div className='section-heading'>
|
|||
|
|
<div>
|
|||
|
|
<span className='section-label'>خدمات درمانی</span>
|
|||
|
|
<h2 className='section-title'>مراقبت تخصصی، در یک مجموعه یکپارچه</h2>
|
|||
|
|
</div>
|
|||
|
|
<Link href='/components/service'>
|
|||
|
|
<a className='text-link'>
|
|||
|
|
مشاهده همه بخش‌ها <FiArrowLeft />
|
|||
|
|
</a>
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className='departments-grid'>
|
|||
|
|
{departments.map(department => (
|
|||
|
|
<article className='department-card' key={department.title}>
|
|||
|
|
<div className='department-icon'>
|
|||
|
|
<img src={department.icon} alt='' aria-hidden='true' />
|
|||
|
|
</div>
|
|||
|
|
<h3>{department.title}</h3>
|
|||
|
|
<p>{department.description}</p>
|
|||
|
|
</article>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section className='section section-white'>
|
|||
|
|
<div className='container'>
|
|||
|
|
<div className='section-heading'>
|
|||
|
|
<div>
|
|||
|
|
<span className='section-label'>فضای بیمارستان</span>
|
|||
|
|
<h2 className='section-title'>محیطی آرام، روشن و مجهز برای درمان</h2>
|
|||
|
|
</div>
|
|||
|
|
<Link href='/Gallery'>
|
|||
|
|
<a className='text-link'>
|
|||
|
|
مشاهده گالری کامل <FiArrowLeft />
|
|||
|
|
</a>
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className='gallery-grid'>
|
|||
|
|
{galleryImages.map(image => (
|
|||
|
|
<div className={`gallery-item ${image.className}`} key={image.src}>
|
|||
|
|
<Image src={image.src} alt={image.alt} layout='fill' objectFit='cover' />
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className='values'>
|
|||
|
|
<div className='value'>
|
|||
|
|
<span className='value-icon'>
|
|||
|
|
<FiHeart />
|
|||
|
|
</span>
|
|||
|
|
<div>
|
|||
|
|
<h3>مراقبت بیمارمحور</h3>
|
|||
|
|
<p>طراحی مسیر درمان با توجه به آرامش و نیازهای بیمار و همراهان</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className='value'>
|
|||
|
|
<span className='value-icon'>
|
|||
|
|
<FiShield />
|
|||
|
|
</span>
|
|||
|
|
<div>
|
|||
|
|
<h3>کیفیت و ایمنی</h3>
|
|||
|
|
<p>زیرساخت‌های درمانی مدرن برای ارائه خدمات ایمن و قابل‌اعتماد</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className='value'>
|
|||
|
|
<span className='value-icon'>
|
|||
|
|
<FiClock />
|
|||
|
|
</span>
|
|||
|
|
<div>
|
|||
|
|
<h3>دسترسی بهتر</h3>
|
|||
|
|
<p>موقعیت مناسب در پرند و دسترسی آسان برای شهرهای جنوب‌غرب تهران</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section className='section'>
|
|||
|
|
<div className='container'>
|
|||
|
|
<div className='contact-card'>
|
|||
|
|
<div className='contact-copy'>
|
|||
|
|
<h2>برای راهنمایی و ارتباط با بیمارستان کنار شما هستیم</h2>
|
|||
|
|
<p>
|
|||
|
|
تهران، شهر جدید پرند، بلوار شهید قاسم سلیمانی، انتهای فاز ۵، نبش بلوار رسول اکرم (ص)
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className='contact-actions'>
|
|||
|
|
<a className='button button-primary' href='tel:02153457000'>
|
|||
|
|
<FiPhone /> ۰۲۱-۵۳۴۵۷۰۰۰
|
|||
|
|
</a>
|
|||
|
|
<Link href='/page/contact-us'>
|
|||
|
|
<a className='button button-secondary'>
|
|||
|
|
<FiMapPin /> مشاهده اطلاعات تماس
|
|||
|
|
</a>
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
</AppContainer>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Landing
|