165 lines
5.1 KiB
JavaScript
165 lines
5.1 KiB
JavaScript
"use client";
|
|
import AnimatedText from "@/components/common/AnimatedText";
|
|
import { Autoplay, Navigation } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import ModalVideo from "react-modal-video";
|
|
import { useState } from "react";
|
|
export default function Hero() {
|
|
const [isOpen, setOpen] = useState(false);
|
|
const swiperOptions = {
|
|
spaceBetween: 30,
|
|
speed: 2000,
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 2000,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
prevEl: ".array-prevs",
|
|
nextEl: ".array-nexts",
|
|
},
|
|
modules: [Autoplay, Navigation],
|
|
breakpoints: {
|
|
1199: {
|
|
slidesPerView: 2,
|
|
},
|
|
991: {
|
|
slidesPerView: 2,
|
|
},
|
|
767: {
|
|
slidesPerView: 2,
|
|
},
|
|
575: {
|
|
slidesPerView: 1,
|
|
},
|
|
0: {
|
|
slidesPerView: 1,
|
|
},
|
|
},
|
|
};
|
|
const images = [
|
|
"/assets/img/hero/01.jpg",
|
|
"/assets/img/hero/02.jpg",
|
|
"/assets/img/hero/01.jpg",
|
|
"/assets/img/hero/02.jpg",
|
|
// Add more image paths as needed
|
|
];
|
|
return (
|
|
<>
|
|
<section className="hero-section hero-1 fix section-padding">
|
|
<div className="line-shape">
|
|
<Image
|
|
src="/assets/img/hero/line-shape.png"
|
|
width={365}
|
|
height={603}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="container-fluid">
|
|
<div className="row g-4">
|
|
<div className="col-lg-7">
|
|
<div className="hero-content">
|
|
<div className="vector-shape">
|
|
<Image
|
|
src="/assets/img/hero/vector.png"
|
|
width={254}
|
|
height={296}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="vector-shape-2">
|
|
<Image
|
|
src="/assets/img/hero/vector-2.png"
|
|
width={254}
|
|
height={296}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<h1 className="splt-txt wow">
|
|
<AnimatedText text="Create the" />
|
|
<br /> <AnimatedText text="building you" />
|
|
<br /> <AnimatedText text="want here" />
|
|
</h1>
|
|
<p className="wow fadeInUp" data-wow-delay=".5s">
|
|
Proactively pontificate client-centered relationships visavis
|
|
process centric leadership skills. Credibly.
|
|
</p>
|
|
<div className="hero-button">
|
|
<Link
|
|
href={`/about`}
|
|
className="theme-btn bg-white wow fadeInUp"
|
|
data-wow-delay=".3s"
|
|
>
|
|
Explore More
|
|
<i className="fa-regular fa-arrow-right"></i>
|
|
</Link>
|
|
<span
|
|
className="button-text wow fadeInUp"
|
|
data-wow-delay=".5s"
|
|
>
|
|
<a
|
|
onClick={() => setOpen(true)}
|
|
className="video-btn video-popup"
|
|
>
|
|
<i className="fa-solid fa-play"></i>
|
|
</a>
|
|
<span className="ms-3 d-line">play reel</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-5">
|
|
<div className="hero-image-items">
|
|
<Swiper {...swiperOptions} className="swiper hero-slider">
|
|
{images.map((src, index) => (
|
|
<SwiperSlide className="swiper-slide" key={index}>
|
|
<div className="hero-image">
|
|
<Image
|
|
width={475}
|
|
height={635}
|
|
src={src}
|
|
alt={`Hero ${index + 1}`}
|
|
/>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
|
|
<div className="array-button">
|
|
<button className="array-prevs">
|
|
<Image
|
|
src="/assets/img/hero/prev.png"
|
|
width={15}
|
|
height={11}
|
|
alt="img"
|
|
/>
|
|
Previews
|
|
</button>
|
|
<button className="array-nexts">
|
|
Next{" "}
|
|
<Image
|
|
src="/assets/img/hero/next.png"
|
|
width={15}
|
|
height={11}
|
|
alt="img"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<ModalVideo
|
|
channel="youtube"
|
|
youtube={{ mute: 0, autoplay: 0 }}
|
|
isOpen={isOpen}
|
|
videoId="Cn4G2lZ_g2I"
|
|
onClose={() => setOpen(false)}
|
|
/>{" "}
|
|
</>
|
|
);
|
|
}
|