71 lines
2.7 KiB
JavaScript
71 lines
2.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import Slider from "react-slick";
|
|
import "slick-carousel/slick/slick.css";
|
|
import "slick-carousel/slick/slick-theme.css";
|
|
import Image from 'next/image';
|
|
import { useTranslation } from 'next-i18next';
|
|
|
|
import ts1 from '/public/images/testimonial/1.png';
|
|
import ts2 from '/public/images/testimonial/2.png';
|
|
import ts3 from '/public/images/testimonial/3.png';
|
|
import testiImage from '/public/images/home/quotes.webp';
|
|
|
|
const images = [ts1, ts2, ts3];
|
|
|
|
const Testimonial = (props) => {
|
|
const { t } = useTranslation('(home)/testimonial');
|
|
const [nav1, setNav1] = useState();
|
|
const [nav2, setNav2] = useState();
|
|
|
|
const testimonials = t('testimonials', { returnObjects: true });
|
|
|
|
return (
|
|
<section className={`wpo-testimonial-section section-padding ${props.tmClass}`}>
|
|
<div className="container">
|
|
<div className="wpo-testimonial-wrap">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6 col-12 order-lg-1 order-2">
|
|
<div className="testimonial-left">
|
|
<div className="testimonial-left-inner">
|
|
<div className="left-slide">
|
|
<div className="testimonial-img">
|
|
<Image src={testiImage} alt="testimonial quote image" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6 col-12 order-lg-1 order-1">
|
|
<div className="wpo-testimonial-items">
|
|
<div className="right-slide">
|
|
<Slider asNavFor={nav2} ref={(slider1) => setNav1(slider1)} dots={true} arrows={false}>
|
|
{testimonials.map((item, index) => (
|
|
<div className="wpo-testimonial-item" key={index}>
|
|
<div className="wpo-testimonial-text">
|
|
<i className="fi flaticon-right-quote-sign"></i>
|
|
<p>“{item.description}”</p>
|
|
{/* <div className="wpo-testimonial-text-btm">
|
|
<div className="wpo-testimonial-text-btm-img">
|
|
<Image src={images[index]} alt={item.name} />
|
|
</div>
|
|
<div className="wpo-testimonial-text-btm-info">
|
|
<h3>{item.name}</h3>
|
|
<span>{item.position}</span>
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Slider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Testimonial;
|