11 lines
2.8 KiB
JavaScript
11 lines
2.8 KiB
JavaScript
'use client';
|
|
import { useRef, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import { A11y, EffectFade, Keyboard } from 'swiper/modules';
|
|
import { ArrowLeft, ArrowRight, ArrowDown, ArrowUpLeft } from 'lucide-react';
|
|
import 'swiper/css';
|
|
import 'swiper/css/effect-fade';
|
|
const slides=[{image:'1',title:<>رویای شما،<br/>تبدیل به <em>واقعیت</em> می‌شود.</>,label:'معماری، در امتداد زندگی',link:'/aboutus/',cta:'آشنایی با گروه'}, {image:'2',title:<>فضایی برای زندگی،<br/><em>به سبک شما.</em></>,label:'طراحی ویلایی و آپارتمانی',link:'/ourservices/#residential',cta:'خدمات طراحی مسکونی'}, {image:'3',title:<>زیبایی،<br/>در تمام <em>جزئیات.</em></>,label:'طراحی تخصصی سالن‌های زیبایی',link:'/ourservices/#beauty',cta:'طراحی سالن زیبایی'}];
|
|
export default function Hero(){const swiper=useRef(null);const [active,setActive]=useState(0);return <section className="hero" aria-label="معرفی گروه معماری"><Swiper modules={[A11y,EffectFade,Keyboard]} effect="fade" fadeEffect={{crossFade:true}} speed={650} loop keyboard={{enabled:true,onlyInViewport:true}} onSwiper={s=>swiper.current=s} onSlideChange={s=>setActive(s.realIndex)} a11y={{prevSlideMessage:'اسلاید قبلی',nextSlideMessage:'اسلاید بعدی',slideLabelMessage:'اسلاید {{index}} از {{slidesLength}}'}}>{slides.map((slide,i)=><SwiperSlide key={slide.image}><img className="hero-image" src={`/img/slider/${slide.image}.jpg`} alt={['دکوراسیون داخلی با جزئیات طلایی و دیوار زغالی','طراحی اتاق خواب با نور طبیعی','طراحی داخلی سالن زیبایی'][i]} fetchPriority={i===0?'high':'auto'}/><div className="hero-shade"/><div className="hero-content container"><span className="eyebrow">{slide.label}</span><h1>{slide.title}</h1><p>گروه معماری و دکوراسیون ساناز گودرزی</p><Link tabIndex={active===i?0:-1} className="button button-gold" href={slide.link}>{slide.cta}<ArrowUpLeft size={20}/></Link></div></SwiperSlide>)}</Swiper><div className="hero-bottom container"><a className="scroll-cue" href="#services"><ArrowDown size={18}/> کشف فضاهای تازه</a><div className="slider-controls"><button aria-label="اسلاید قبلی" onClick={()=>swiper.current?.slidePrev()}><ArrowRight size={20}/></button><span className="slide-count" dir="ltr"><b>0{active+1}</b><span>/</span>03</span><button aria-label="اسلاید بعدی" onClick={()=>swiper.current?.slideNext()}><ArrowLeft size={20}/></button></div><span className="hero-signature" dir="ltr">SANAZ GOODARZI — ARCHITECTURE</span></div></section>}
|