feat: add poromtional langinh
This commit is contained in:
reza karimi
+287
-30
@@ -4,12 +4,15 @@ import Link from 'next/link'
|
||||
import {
|
||||
FiActivity,
|
||||
FiArrowLeft,
|
||||
FiBriefcase,
|
||||
FiCamera,
|
||||
FiCheckCircle,
|
||||
FiClock,
|
||||
FiFileText,
|
||||
FiHeart,
|
||||
FiMapPin,
|
||||
FiPhone,
|
||||
FiPlay,
|
||||
FiShield
|
||||
} from 'react-icons/fi'
|
||||
import AppContainer from './appContainer'
|
||||
@@ -78,24 +81,38 @@ const quickLinks = [
|
||||
const galleryImages = [
|
||||
{
|
||||
src: '/resource/images/gallery/IMG-20260910-WA0040.jpg',
|
||||
alt: 'فضای بستری بیمارستان مهر ایرانیان پرند',
|
||||
alt: 'فضای بستری بیمارستان مهر پرند',
|
||||
className: 'gallery-large'
|
||||
},
|
||||
{
|
||||
src: '/resource/images/gallery/IMG-20260910-WA0059.jpg',
|
||||
alt: 'راهروی درمانگاه بیمارستان مهر ایرانیان پرند',
|
||||
alt: 'راهروی درمانگاه بیمارستان مهر پرند',
|
||||
className: ''
|
||||
},
|
||||
{
|
||||
src: '/resource/images/gallery/IMG-20260910-WA0000.jpg',
|
||||
alt: 'ایستگاه پرستاری بیمارستان مهر ایرانیان پرند',
|
||||
alt: 'ایستگاه پرستاری بیمارستان مهر پرند',
|
||||
className: ''
|
||||
}
|
||||
]
|
||||
|
||||
const Landing = () => {
|
||||
const videoRef = React.useRef(null)
|
||||
const [videoStarted, setVideoStarted] = React.useState(false)
|
||||
|
||||
const handlePlayVideo = async () => {
|
||||
if (!videoRef.current) return
|
||||
|
||||
try {
|
||||
await videoRef.current.play()
|
||||
setVideoStarted(true)
|
||||
} catch {
|
||||
setVideoStarted(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AppContainer title='بیمارستان مهر ایرانیان پرند | همراه سلامت شما'>
|
||||
<AppContainer title='بیمارستان مهر پرند | همراه سلامت شما'>
|
||||
<style jsx>{`
|
||||
.landing {
|
||||
direction: rtl;
|
||||
@@ -139,12 +156,90 @@ const Landing = () => {
|
||||
linear-gradient(0deg, rgba(7, 37, 44, 0.28), transparent 45%);
|
||||
}
|
||||
|
||||
.hero-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
||||
align-items: center;
|
||||
gap: clamp(2rem, 5vw, 4rem);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 650px;
|
||||
padding: 6rem 0 8rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero-video {
|
||||
min-width: 0;
|
||||
padding: 0.6rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 1.4rem;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.hero-video-media {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-video video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 8 / 9;
|
||||
border-radius: 0.95rem;
|
||||
background: #092e35;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
}
|
||||
|
||||
.hero-video-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.8rem;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 0;
|
||||
border-radius: 0.95rem;
|
||||
color: #fff;
|
||||
background: rgba(5, 35, 41, 0.48);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
transition: background 180ms ease;
|
||||
}
|
||||
|
||||
.hero-video-overlay:hover {
|
||||
background: rgba(5, 35, 41, 0.36);
|
||||
}
|
||||
|
||||
.hero-video-overlay:focus-visible {
|
||||
outline: 3px solid #8fe4dc;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.hero-play-icon {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
|
||||
font-size: 2rem;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.hero-play-text {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -579,6 +674,86 @@ const Landing = () => {
|
||||
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;
|
||||
@@ -647,7 +822,21 @@ const Landing = () => {
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.hero {
|
||||
min-height: 620px;
|
||||
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 {
|
||||
@@ -666,6 +855,10 @@ const Landing = () => {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.recruitment-panel {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-visual {
|
||||
min-height: 480px;
|
||||
}
|
||||
@@ -689,7 +882,6 @@ const Landing = () => {
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-height: 670px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@@ -698,7 +890,11 @@ const Landing = () => {
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding: 8rem 0 7rem;
|
||||
padding: 7rem 0 0;
|
||||
}
|
||||
|
||||
.hero-video {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
@@ -785,6 +981,10 @@ const Landing = () => {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.recruitment-panel {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.contact-actions {
|
||||
max-width: none;
|
||||
}
|
||||
@@ -796,7 +996,7 @@ const Landing = () => {
|
||||
<div className='hero-image'>
|
||||
<Image
|
||||
src='/resource/images/gallery/IMG-20260910-WA0040.jpg'
|
||||
alt='بخش بستری بیمارستان مهر ایرانیان پرند'
|
||||
alt='بخش بستری بیمارستان مهر پرند'
|
||||
layout='fill'
|
||||
objectFit='cover'
|
||||
priority
|
||||
@@ -804,27 +1004,50 @@ const Landing = () => {
|
||||
</div>
|
||||
<div className='hero-overlay' />
|
||||
<div className='container'>
|
||||
<div className='hero-content'>
|
||||
<div className='eyebrow'>
|
||||
<span className='eyebrow-dot' />
|
||||
بیمارستان تخصصی در قلب شهر پرند
|
||||
</div>
|
||||
<h1>
|
||||
همراه مطمئن شما، برای <span>زندگی سالم‌تر</span>
|
||||
</h1>
|
||||
<p className='hero-description'>
|
||||
بیمارستان مهر ایرانیان پرند با تکیه بر زیرساخت درمانی مدرن، بخش‌های تخصصی و فضای طراحی‌شده برای
|
||||
آرامش بیماران، در مسیر تبدیل‌شدن به یکی از قطب‌های سلامت جنوب‌غرب تهران است.
|
||||
</p>
|
||||
<div className='hero-actions'>
|
||||
<a className='button button-primary' href='tel:02153457000'>
|
||||
<FiPhone /> تماس با بیمارستان
|
||||
</a>
|
||||
<Link href='/page/about'>
|
||||
<a className='button button-secondary'>
|
||||
درباره بیمارستان <FiArrowLeft />
|
||||
<div className='hero-layout'>
|
||||
<div className='hero-content'>
|
||||
<div className='eyebrow'>
|
||||
<span className='eyebrow-dot' />
|
||||
بیمارستان تخصصی در قلب شهر پرند
|
||||
</div>
|
||||
<h1>
|
||||
همراه مطمئن شما، برای <span>زندگی سالم‌تر</span>
|
||||
</h1>
|
||||
<p className='hero-description'>
|
||||
بیمارستان مهر پرند با تکیه بر زیرساخت درمانی مدرن، بخش‌های تخصصی و فضای طراحی‌شده برای
|
||||
آرامش بیماران، در مسیر تبدیل‌شدن به یکی از قطب‌های سلامت جنوب‌غرب تهران است.
|
||||
</p>
|
||||
<div className='hero-actions'>
|
||||
<a className='button button-primary' href='tel:02153457000'>
|
||||
<FiPhone /> تماس با بیمارستان
|
||||
</a>
|
||||
</Link>
|
||||
<Link href='/page/about'>
|
||||
<a className='button button-secondary'>
|
||||
درباره بیمارستان <FiArrowLeft />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className='hero-video'>
|
||||
<div className='hero-video-media'>
|
||||
<video
|
||||
ref={videoRef}
|
||||
controls
|
||||
preload='metadata'
|
||||
playsInline
|
||||
aria-label='ویدیوی بیمارستان مهر پرند'
|
||||
onPlay={() => setVideoStarted(true)}
|
||||
>
|
||||
<source src='/resource/video/Video-7535.mp4' type='video/mp4' />
|
||||
مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
|
||||
</video>
|
||||
{!videoStarted && (
|
||||
<button className='hero-video-overlay' type='button' onClick={handlePlayVideo}>
|
||||
<span className='hero-play-icon' aria-hidden='true'><FiPlay /></span>
|
||||
<span className='hero-play-text'>پخش ویدیو</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -868,13 +1091,13 @@ const Landing = () => {
|
||||
<div className='about-image'>
|
||||
<Image
|
||||
src='/resource/images/gallery/IMG-20260910-WA0000.jpg'
|
||||
alt='فضای داخلی بیمارستان مهر ایرانیان پرند'
|
||||
alt='فضای داخلی بیمارستان مهر پرند'
|
||||
layout='fill'
|
||||
objectFit='cover'
|
||||
/>
|
||||
</div>
|
||||
<div className='about-badge'>
|
||||
<strong>۹۶ تخت</strong>
|
||||
<strong>۱۵۰ تخت</strong>
|
||||
<span>ظرفیت فاز نخست بیمارستان</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1012,6 +1235,40 @@ const Landing = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className='section' aria-labelledby='recruitment-title'>
|
||||
<div className='container'>
|
||||
<div className='recruitment-panel'>
|
||||
<div className='recruitment-intro'>
|
||||
<span className='section-label'>استخدام و همکاری</span>
|
||||
<h2 className='section-title' id='recruitment-title'>به تیم بیمارستان مهر پرند بپیوندید</h2>
|
||||
<p>فرصت‌های شغلی بیمارستان را ببینید، درخواست همکاری ثبت کنید و وضعیت درخواست خود را پیگیری کنید.</p>
|
||||
</div>
|
||||
<div className='recruitment-links'>
|
||||
<Link href='/recruitment'>
|
||||
<a className='recruitment-link'>
|
||||
<span className='recruitment-icon'><FiBriefcase /></span>
|
||||
<span className='recruitment-copy'>
|
||||
<strong>فرصت‌های شغلی</strong>
|
||||
<span>مشاهده موقعیت‌ها و ثبت درخواست</span>
|
||||
</span>
|
||||
<span className='recruitment-arrow'><FiArrowLeft /></span>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href='/recruitment/inquiry'>
|
||||
<a className='recruitment-link'>
|
||||
<span className='recruitment-icon'><FiFileText /></span>
|
||||
<span className='recruitment-copy'>
|
||||
<strong>پیگیری درخواست</strong>
|
||||
<span>استعلام وضعیت درخواست ثبت‌شده</span>
|
||||
</span>
|
||||
<span className='recruitment-arrow'><FiArrowLeft /></span>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className='section'>
|
||||
<div className='container'>
|
||||
<div className='contact-card'>
|
||||
|
||||
Reference in New Issue
Block a user