irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/components/sections/Testimonial1.js
68 lines2.1 KBJavaScript
RawDownloadHistory
1import Slider from "react-slick";
2import testimonialData from "../data/testimonialData";
3const settings = {
4 dots: true,
5 infinite: true,
6 speed: 1000,
7 autoplay: false,
8 arrows: false,
9 slidesToShow: 1,
10 slidesToScroll: 1,
11};
12
13function TestimonialItem(props) {
14 return (
15 <div className="testimonial-item">
16 <div className="testimonial-icon">
17 <i className="fas fa-quote-left" />
18 </div>
19 <div className="testimonial-content">
20 <p>{props.quote}</p>
21 </div>
22 <div className="testimonial-avatar">
23 <div className="avatar-thumb">
24 <img src="/assets/img/images/testi_avatar01.png" alt="" />
25 </div>
26 <div className="avatar-content">
27 <h6 className="title">{props.name}</h6>
28 <p>{props.profession}</p>
29 </div>
30 </div>
31 </div>
32 );
33}
34
35export default function Testimonial1() {
36 return (
37 <>
38 <section className="testimonial-area pt-115 pb-120">
39 <div className="container">
40 <div className="row align-items-center">
41 <div className="col-lg-6 wow fadeInLeft" data-wow-delay=".2s">
42 <div className="testimonial-img">
43 <img src="/assets/img/images/testimonial_img.jpg" alt="" />
44 </div>
45 </div>
46 <div className="col-lg-6">
47 <div className="testimonial-content">
48 <div className="section-title mb-45 tg-heading-subheading animation-style3">
49 <span className="sub-title tg-element-title">
50 Our Testimonial
51 </span>
52 <h2 className="title tg-element-title">
53 Some of Our Respected Happy Clients Says
54 </h2>
55 </div>
56 <Slider {...settings} className="testimonial-active">
57 {testimonialData.map((item, index) => (
58 <TestimonialItem key={`testimonial-${index}`} {...item} />
59 ))}
60 </Slider>
61 </div>
62 </div>
63 </div>
64 </div>
65 </section>
66 </>
67 );
68}