1300 lines
36 KiB
JavaScript
1300 lines
36 KiB
JavaScript
import React from 'react'
|
||
import Image from 'next/image'
|
||
import Link from 'next/link'
|
||
import {
|
||
FiActivity,
|
||
FiArrowLeft,
|
||
FiBriefcase,
|
||
FiCamera,
|
||
FiCheckCircle,
|
||
FiClock,
|
||
FiFileText,
|
||
FiHeart,
|
||
FiMapPin,
|
||
FiPhone,
|
||
FiPlay,
|
||
FiShield
|
||
} from 'react-icons/fi'
|
||
import AppContainer from './appContainer'
|
||
|
||
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 = () => {
|
||
const videoRef = React.useRef(null)
|
||
const [videoStarted, setVideoStarted] = React.useState(false)
|
||
|
||
const handlePlayVideo = async () => {
|
||
if (!videoRef.current) return
|
||
|
||
try {
|
||
await videoRef.current.play()
|
||
setVideoStarted(true)
|
||
} catch {
|
||
setVideoStarted(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<AppContainer title='بیمارستان مهر پرند | همراه سلامت شما'>
|
||
<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-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
||
align-items: center;
|
||
gap: clamp(2rem, 5vw, 4rem);
|
||
}
|
||
|
||
.hero-content {
|
||
max-width: 650px;
|
||
padding: 6rem 0 8rem;
|
||
color: #fff;
|
||
}
|
||
|
||
.hero-video {
|
||
min-width: 0;
|
||
padding: 0.6rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 1.4rem;
|
||
background: rgba(255, 255, 255, 0.12);
|
||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.hero-video-media {
|
||
position: relative;
|
||
}
|
||
|
||
.hero-video video {
|
||
display: block;
|
||
width: 100%;
|
||
aspect-ratio: 8 / 9;
|
||
border-radius: 0.95rem;
|
||
background: #092e35;
|
||
object-fit: cover;
|
||
object-position: center top;
|
||
}
|
||
|
||
.hero-video-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.8rem;
|
||
width: 100%;
|
||
padding: 1rem;
|
||
border: 0;
|
||
border-radius: 0.95rem;
|
||
color: #fff;
|
||
background: rgba(5, 35, 41, 0.48);
|
||
font: inherit;
|
||
cursor: pointer;
|
||
transition: background 180ms ease;
|
||
}
|
||
|
||
.hero-video-overlay:hover {
|
||
background: rgba(5, 35, 41, 0.36);
|
||
}
|
||
|
||
.hero-video-overlay:focus-visible {
|
||
outline: 3px solid #8fe4dc;
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
.hero-play-icon {
|
||
width: 76px;
|
||
height: 76px;
|
||
display: grid;
|
||
place-items: center;
|
||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
|
||
font-size: 2rem;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.hero-play-text {
|
||
font-size: 0.95rem;
|
||
font-weight: 700;
|
||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
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;
|
||
}
|
||
|
||
.recruitment-panel {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
align-items: center;
|
||
gap: clamp(2rem, 5vw, 4rem);
|
||
padding: clamp(1.75rem, 5vw, 3.5rem);
|
||
border: 1px solid #dcebea;
|
||
border-radius: 1.5rem;
|
||
background: linear-gradient(125deg, #fff, #f1faf9);
|
||
box-shadow: 0 18px 45px rgba(18, 87, 90, 0.07);
|
||
}
|
||
|
||
.recruitment-intro p {
|
||
max-width: 520px;
|
||
margin: 1rem 0 0;
|
||
color: #64777b;
|
||
font-size: 0.94rem;
|
||
line-height: 2;
|
||
}
|
||
|
||
.recruitment-links {
|
||
display: grid;
|
||
gap: 0.9rem;
|
||
}
|
||
|
||
.recruitment-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
min-height: 96px;
|
||
padding: 1rem 1.2rem;
|
||
border: 1px solid #e0eeec;
|
||
border-radius: 1rem;
|
||
color: #15323a;
|
||
background: #fff;
|
||
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
|
||
}
|
||
|
||
.recruitment-link:hover {
|
||
border-color: #9fdcd5;
|
||
color: #15323a;
|
||
box-shadow: 0 10px 28px rgba(18, 87, 90, 0.1);
|
||
text-decoration: none;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.recruitment-icon {
|
||
width: 52px;
|
||
height: 52px;
|
||
flex: 0 0 52px;
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 0.85rem;
|
||
color: #147778;
|
||
background: #e6f7f4;
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.recruitment-copy strong,
|
||
.recruitment-copy span {
|
||
display: block;
|
||
}
|
||
|
||
.recruitment-copy strong {
|
||
margin-bottom: 0.25rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.recruitment-copy span {
|
||
color: #718387;
|
||
font-size: 0.78rem;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.recruitment-arrow {
|
||
flex: 0 0 auto;
|
||
margin-right: auto;
|
||
color: #147778;
|
||
}
|
||
|
||
.contact-card {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 1.3fr 0.7fr;
|
||
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: auto;
|
||
}
|
||
|
||
.hero-layout {
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.hero-content {
|
||
padding: 5rem 0 0;
|
||
}
|
||
|
||
.hero-video {
|
||
width: min(100%, 720px);
|
||
margin-bottom: 7rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.recruitment-panel {
|
||
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 {
|
||
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: 7rem 0 0;
|
||
}
|
||
|
||
.hero-video {
|
||
margin-bottom: 5rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.recruitment-panel {
|
||
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-layout'>
|
||
<div className='hero-content'>
|
||
<div className='eyebrow'>
|
||
<span className='eyebrow-dot' />
|
||
بیمارستان تخصصی در قلب شهر پرند
|
||
</div>
|
||
<h1>
|
||
همراه مطمئن شما، برای <span>زندگی سالم‌تر</span>
|
||
</h1>
|
||
<p className='hero-description'>
|
||
بیمارستان مهر پرند با تکیه بر زیرساخت درمانی مدرن، بخش‌های تخصصی و فضای طراحی‌شده برای
|
||
آرامش بیماران، در مسیر تبدیل‌شدن به یکی از قطب‌های سلامت جنوب‌غرب تهران است.
|
||
</p>
|
||
<div className='hero-actions'>
|
||
<a className='button button-primary' href='tel:02153457000'>
|
||
<FiPhone /> تماس با بیمارستان
|
||
</a>
|
||
<Link href='/page/about'>
|
||
<a className='button button-secondary'>
|
||
درباره بیمارستان <FiArrowLeft />
|
||
</a>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
<div className='hero-video'>
|
||
<div className='hero-video-media'>
|
||
<video
|
||
ref={videoRef}
|
||
controls
|
||
preload='metadata'
|
||
playsInline
|
||
aria-label='ویدیوی بیمارستان مهر پرند'
|
||
onPlay={() => setVideoStarted(true)}
|
||
>
|
||
<source src='/resource/video/Video-7535.mp4' type='video/mp4' />
|
||
مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
|
||
</video>
|
||
{!videoStarted && (
|
||
<button className='hero-video-overlay' type='button' onClick={handlePlayVideo}>
|
||
<span className='hero-play-icon' aria-hidden='true'><FiPlay /></span>
|
||
<span className='hero-play-text'>پخش ویدیو</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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' aria-labelledby='recruitment-title'>
|
||
<div className='container'>
|
||
<div className='recruitment-panel'>
|
||
<div className='recruitment-intro'>
|
||
<span className='section-label'>استخدام و همکاری</span>
|
||
<h2 className='section-title' id='recruitment-title'>به تیم بیمارستان مهر پرند بپیوندید</h2>
|
||
<p>فرصت‌های شغلی بیمارستان را ببینید، درخواست همکاری ثبت کنید و وضعیت درخواست خود را پیگیری کنید.</p>
|
||
</div>
|
||
<div className='recruitment-links'>
|
||
<Link href='/recruitment'>
|
||
<a className='recruitment-link'>
|
||
<span className='recruitment-icon'><FiBriefcase /></span>
|
||
<span className='recruitment-copy'>
|
||
<strong>فرصت‌های شغلی</strong>
|
||
<span>مشاهده موقعیت‌ها و ثبت درخواست</span>
|
||
</span>
|
||
<span className='recruitment-arrow'><FiArrowLeft /></span>
|
||
</a>
|
||
</Link>
|
||
<Link href='/recruitment/inquiry'>
|
||
<a className='recruitment-link'>
|
||
<span className='recruitment-icon'><FiFileText /></span>
|
||
<span className='recruitment-copy'>
|
||
<strong>پیگیری درخواست</strong>
|
||
<span>استعلام وضعیت درخواست ثبت‌شده</span>
|
||
</span>
|
||
<span className='recruitment-arrow'><FiArrowLeft /></span>
|
||
</a>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className='section'>
|
||
<div className='container'>
|
||
<div className='contact-card'>
|
||
<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
|