117 lines
5.9 KiB
JavaScript
117 lines
5.9 KiB
JavaScript
'use client'; // If this component is client-side only
|
|
|
|
import React from "react";
|
|
import Slider from "react-slick";
|
|
import Link from 'next/link';
|
|
import { useTranslation } from 'next-i18next';
|
|
import "slick-carousel/slick/slick.css";
|
|
import "slick-carousel/slick/slick-theme.css";
|
|
|
|
const settings = {
|
|
dots: true,
|
|
arrows: false,
|
|
speed: 1200,
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
autoplay: false,
|
|
autoplaySpeed: 2500,
|
|
fade: true
|
|
};
|
|
|
|
const Hero = () => {
|
|
const { t } = useTranslation('homeHero'); // Use 'home' namespace
|
|
|
|
return (
|
|
<section className="wpo-hero-slider">
|
|
<div className="hero-container">
|
|
<div className="hero-wrapper">
|
|
<Slider {...settings}>
|
|
<div className="hero-slide">
|
|
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-1.webp)` }}>
|
|
<div className="container-fluid">
|
|
<div className="slide-content">
|
|
<div data-swiper-parallax="300" className="slide-title">
|
|
<h2>{t('hero.slide1.title')}</h2>
|
|
</div>
|
|
<div data-swiper-parallax="400" className="slide-text">
|
|
<p>{t('hero.slide1.text')}</p>
|
|
</div>
|
|
<div className="clearfix"></div>
|
|
<div className="slide-btns">
|
|
<Link href="/about" className="theme-btn">{t('hero.slide1.button')}</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hero-slide">
|
|
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-2.webp)` }}>
|
|
<div className="container-fluid">
|
|
<div className="slide-content">
|
|
<div data-swiper-parallax="300" className="slide-title">
|
|
<h2>{t('hero.slide2.title')}</h2>
|
|
</div>
|
|
<div data-swiper-parallax="400" className="slide-text">
|
|
<p>{t('hero.slide2.text')}</p>
|
|
</div>
|
|
<div className="clearfix"></div>
|
|
<div className="slide-btns">
|
|
<Link href="/our-approach" className="theme-btn">{t('hero.slide2.button')}</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hero-slide">
|
|
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-3.webp)` }}>
|
|
<div className="container-fluid">
|
|
<div className="slide-content">
|
|
<div data-swiper-parallax="300" className="slide-title">
|
|
<h2>{t('hero.slide3.title')}</h2>
|
|
</div>
|
|
<div data-swiper-parallax="400" className="slide-text">
|
|
<p>{t('hero.slide3.text')}</p>
|
|
</div>
|
|
<div className="clearfix"></div>
|
|
<div className="slide-btns">
|
|
<Link href="/services" className="theme-btn">{t('hero.slide3.button')}</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hero-slide">
|
|
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-4.webp)` }}>
|
|
<div className="container-fluid">
|
|
<div className="slide-content">
|
|
<div data-swiper-parallax="300" className="slide-title">
|
|
<h2>{t('hero.slide4.title')}</h2>
|
|
</div>
|
|
<div data-swiper-parallax="400" className="slide-text">
|
|
<p>{t('hero.slide4.text')}</p>
|
|
</div>
|
|
<div className="clearfix"></div>
|
|
<div className="slide-btns">
|
|
<Link href="/contact" className="theme-btn">{t('hero.slide4.button')}</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Slider>
|
|
</div>
|
|
</div>
|
|
<div className="hero-shape">
|
|
<svg viewBox="0 0 1920 193" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 0L960 193L1920 0V193H0V0Z" fill="white" />
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|