208 lines
12 KiB
JavaScript
208 lines
12 KiB
JavaScript
"use client";
|
|
import { Autoplay, Navigation, Pagination } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
const swiperOptions1 = {
|
|
modules: [Autoplay, Pagination, Navigation],
|
|
spaceBetween: 0,
|
|
slidesPerView: 4,
|
|
};
|
|
const swiperOptions2 = {
|
|
modules: [Autoplay, Pagination, Navigation],
|
|
spaceBetween: 10,
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 6000,
|
|
},
|
|
thumbs: {
|
|
swiper: swiperOptions1,
|
|
},
|
|
// And if we need scrollbar
|
|
scrollbar: {
|
|
el: ".swiper-scrollbar",
|
|
draggable: !0,
|
|
},
|
|
};
|
|
|
|
export default function Testimonial1() {
|
|
return (
|
|
<>
|
|
<section className="testimonial-area">
|
|
<div className="container">
|
|
<div className="row align-items-center justify-content-center">
|
|
<div className="col-lg-6 order-0 order-lg-2">
|
|
<div className="swiper-container testimonial-active">
|
|
<Swiper {...swiperOptions2}>
|
|
<SwiperSlide>
|
|
<div className="testimonial-item">
|
|
<div className="testimonial-info">
|
|
<h4 className="title">Mr.Robey Alexa</h4>
|
|
<span>CEO, Apexa Agency</span>
|
|
</div>
|
|
<div className="testimonial__rating">
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
</div>
|
|
<div className="testimonial-content">
|
|
<p>
|
|
“ Morem ipsum dolor sit amet, consectetur adipisc awing elita florai
|
|
sum dolor sit amet, consectetur area Borem ipsum dolor sit amet,
|
|
consectetur.”
|
|
</p>
|
|
<div className="icon">
|
|
<i className="fas fa-quote-right" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="testimonial-item">
|
|
<div className="testimonial-info">
|
|
<h4 className="title">Mr.Robey Alexa</h4>
|
|
<span>CEO, Apexa Agency</span>
|
|
</div>
|
|
<div className="testimonial__rating">
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
</div>
|
|
<div className="testimonial-content">
|
|
<p>
|
|
“ Morem ipsum dolor sit amet, consectetur adipisc awing elita florai
|
|
sum dolor sit amet, consectetur area Borem ipsum dolor sit amet,
|
|
consectetur.”
|
|
</p>
|
|
<div className="icon">
|
|
<i className="fas fa-quote-right" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="testimonial-item">
|
|
<div className="testimonial-info">
|
|
<h4 className="title">Mr.Robey Alexa</h4>
|
|
<span>CEO, Apexa Agency</span>
|
|
</div>
|
|
<div className="testimonial__rating">
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
</div>
|
|
<div className="testimonial-content">
|
|
<p>
|
|
“ Morem ipsum dolor sit amet, consectetur adipisc awing elita florai
|
|
sum dolor sit amet, consectetur area Borem ipsum dolor sit amet,
|
|
consectetur.”
|
|
</p>
|
|
<div className="icon">
|
|
<i className="fas fa-quote-right" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="testimonial-item">
|
|
<div className="testimonial-info">
|
|
<h4 className="title">Mr.Robey Alexa</h4>
|
|
<span>CEO, Apexa Agency</span>
|
|
</div>
|
|
<div className="testimonial__rating">
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
</div>
|
|
<div className="testimonial-content">
|
|
<p>
|
|
“ Morem ipsum dolor sit amet, consectetur adipisc awing elita florai
|
|
sum dolor sit amet, consectetur area Borem ipsum dolor sit amet,
|
|
consectetur.”
|
|
</p>
|
|
<div className="icon">
|
|
<i className="fas fa-quote-right" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
<div className="testimonial-slider-dot">
|
|
<div className="swiper testimonial-nav">
|
|
<Swiper {...swiperOptions1} className="swiper-wrapper">
|
|
<SwiperSlide>
|
|
<button>
|
|
<img src="/assets/img/images/testi_avatar01.png" alt="" />
|
|
</button>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<button>
|
|
<img src="/assets/img/images/testi_avatar02.png" alt="" />
|
|
</button>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<button>
|
|
<img src="/assets/img/images/testi_avatar03.png" alt="" />
|
|
</button>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<button>
|
|
<img src="/assets/img/images/testi_avatar04.png" alt="" />
|
|
</button>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6 col-md-8">
|
|
<div className="testimonial-img-wrap">
|
|
<img src="/assets/img/images/testimonial_img.png" alt="" />
|
|
<div className="img-shape">
|
|
<img src="/assets/img/images/testimonial_shape01.png" alt="" />
|
|
<img
|
|
src="/assets/img/images/testimonial_shape02.png"
|
|
alt=""
|
|
className="alltuchtopdown"
|
|
/>
|
|
<img
|
|
src="/assets/img/images/testimonial_shape03.png"
|
|
alt=""
|
|
data-parallax='{"y" : 80 }'
|
|
/>
|
|
<img
|
|
src="/assets/img/images/testimonial_shape04.png"
|
|
alt=""
|
|
className="rightToLeft"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="testimonial-shape-wrap">
|
|
<img
|
|
src="/assets/img/images/testimonial_shape05.png"
|
|
alt=""
|
|
data-aos="fade-up"
|
|
data-aos-delay={400}
|
|
/>
|
|
<img
|
|
src="/assets/img/images/testimonial_shape06.png"
|
|
alt=""
|
|
data-aos="fade-left"
|
|
data-aos-delay={400}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|