29 lines
4.7 KiB
TypeScript
29 lines
4.7 KiB
TypeScript
'use client';
|
|
import { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { ArrowDownLeft, MoveLeft, ShieldCheck, Pause, Play, ChevronLeft, ChevronRight } from 'lucide-react';
|
|
const slides = [
|
|
{image:'laboratory.jpg',alt:'محیط آزمایشگاهی و تجهیزات تخصصی',title:'اعتماد، نخستین گام',line:'در مسیر',accent:'سلامت.',description:'راهکارهای تخصصی استریلیزاسیون و کنترل عفونت؛',detail:'همراه مراکز درمانی، از انتخاب تا استفاده.',caption:'دانش، دقت، اعتماد',en:'SCIENCE IN SERVICE OF HEALTH',cta:'محصولات تخصصی ما',href:'#products'},
|
|
{image:'care.jpg',alt:'متخصصان در محیط پزشکی',title:'همراه شما، در مسیر',line:'مراقبت',accent:'آگاهانه.',description:'محصولات تخصصی بهداشت و کنترل عفونت؛',detail:'برای بیمارستان‌ها، آزمایشگاه‌ها و مراکز درمانی.',caption:'همراه مراکز درمانی',en:'INFECTION CONTROL',cta:'مشاوره و انتخاب محصول',href:'/tmas-bama'},
|
|
{image:'research.jpg',alt:'پژوهش و فعالیت در آزمایشگاه',title:'دانش، پایهٔ پیشرفت',line:'و انتخاب',accent:'مطمئن.',description:'آموزش، کلید توسعه و تخصص ما است؛',detail:'هر روز، بهتر از دیروز.',caption:'بهبود مستمر، با دانش و تجربه',en:'KNOWLEDGE AND EXPERIENCE',cta:'آشنایی با سلامت گستر',href:'/about-us'},
|
|
];
|
|
export default function HeroSlider(){
|
|
const [index,setIndex]=useState(0);
|
|
const [paused,setPaused]=useState(false);
|
|
const [hovered,setHovered]=useState(false);
|
|
const [reduced,setReduced]=useState(true);
|
|
const [hidden,setHidden]=useState(false);
|
|
useEffect(()=>{const query=window.matchMedia('(prefers-reduced-motion: reduce)');const sync=()=>setReduced(query.matches);const visibility=()=>setHidden(document.hidden);sync();visibility();query.addEventListener('change',sync);document.addEventListener('visibilitychange',visibility);return()=>{query.removeEventListener('change',sync);document.removeEventListener('visibilitychange',visibility)}},[]);
|
|
const running=!paused&&!hovered&&!reduced&&!hidden;
|
|
useEffect(()=>{if(!running)return;const timer=setTimeout(()=>setIndex(i=>(i+1)%slides.length),6500);return()=>clearTimeout(timer)},[index,running]);
|
|
const choose=(next:number)=>{setPaused(true);setIndex((next+slides.length)%slides.length)};
|
|
const slide=slides[index];
|
|
return <section className="hero hero-slider" aria-label="معرفی سلامت گستر اعتماد" aria-roledescription="اسلایدر" onMouseEnter={()=>setHovered(true)} onMouseLeave={()=>setHovered(false)} onFocusCapture={()=>setPaused(true)}>
|
|
<div className="hero-photo"><div className="hero-images">{slides.map((s,i)=><img key={s.image} src={'/images/'+s.image} alt={i===index?s.alt:''} aria-hidden={i!==index} className={i===index?'active':''} loading="eager"/>)}</div><div key={index} className="photo-label"><span className="cross">+</span><div>{slide.caption}<small>{slide.en}</small></div></div></div>
|
|
<div className="hero-copy"><div key={index} className="hero-sequence" aria-live={paused?'polite':'off'} aria-atomic="true"><span className="eyebrow">SGE MEDICAL GROUP <i/></span><h1><span>{slide.title}</span><span>{slide.line} <em>{slide.accent}</em></span></h1><p>{slide.description}<br/>{slide.detail}</p><div className="actions"><Link className="button" href={slide.href}>{slide.cta}<MoveLeft size={19}/></Link><Link className="textlink" href="/about-us">درباره ما <ArrowDownLeft size={19}/></Link></div></div>
|
|
<div className="hero-bottom"><ShieldCheck size={25}/><span>شرکت مهندسی سلامت گستر اعتماد<small>مشاور و مجری استریل و کنترل عفونت</small></span></div>
|
|
<div className="slider-controls"><div className="slider-dots">{slides.map((s,i)=><button key={s.image} aria-label={'اسلاید '+(i+1)+': '+s.caption} aria-current={index===i?'true':undefined} onClick={()=>choose(i)}><span className={index===i?'selected':''}/></button>)}</div><span className="slide-count" dir="ltr">0{index+1} / 03</span><div className="slider-arrows"><button aria-label="اسلاید قبلی" onClick={()=>choose(index-1)}><ChevronRight size={18}/></button><button aria-label={paused?'پخش خودکار':'توقف پخش خودکار'} aria-pressed={paused} disabled={reduced} onClick={()=>setPaused(p=>!p)}>{paused||reduced?<Play size={15}/>:<Pause size={15}/>}</button><button aria-label="اسلاید بعدی" onClick={()=>choose(index+1)}><ChevronLeft size={18}/></button></div></div>
|
|
</div>
|
|
</section>
|
|
}
|