| 1 | import Slider from "react-slick" |
| 2 | const settings = { |
| 3 | dots: true, |
| 4 | autoplay: true, |
| 5 | arrows: false, |
| 6 | infinite: true, |
| 7 | speed: 500, |
| 8 | slidesToShow: 1, |
| 9 | slidesToScroll: 1, |
| 10 | } |
| 11 | |
| 12 | export default function Testimonial3() { |
| 13 | return ( |
| 14 | <> |
| 15 | <section className="testimonial-area-three parallax pt-115 pb-120 position-relative"> |
| 16 | <div className="container"> |
| 17 | <div className="row justify-content-center"> |
| 18 | <div className="col-xl-6"> |
| 19 | <div className="section-title text-center mb-50"> |
| 20 | <span className="sub-title">Our Testimonial</span> |
| 21 | <h2 className="title">What Our Client Feedback</h2> |
| 22 | </div> |
| 23 | </div> |
| 24 | </div> |
| 25 | <div className="row justify-content-center"> |
| 26 | <div className="col-lg-10"> |
| 27 | <div className="testimonial-inner"> |
| 28 | <Slider {...settings} className="testimonial-active-two"> |
| 29 | <div className="testimonial-item-two"> |
| 30 | <div className="testimonial-avatar-two"> |
| 31 | <img src="/assets/img/images/h2_testi_avatar01.png" alt="" /> |
| 32 | </div> |
| 33 | <div className="testimonial-content-two"> |
| 34 | <div className="content-top"> |
| 35 | <div className="icon"> |
| 36 | <i className="fas fa-quote-left" /> |
| 37 | </div> |
| 38 | <div className="rating"> |
| 39 | <i className="fas fa-star" /> |
| 40 | <i className="fas fa-star" /> |
| 41 | <i className="fas fa-star" /> |
| 42 | <i className="fas fa-star" /> |
| 43 | <i className="fas fa-star" /> |
| 44 | </div> |
| 45 | </div> |
| 46 | <p>There are many varation of paissages of Lorem as the Ipum available but our majority have sufferied alterations in some form, by our by injected hsumour randomised worids which don't looks even slightly there as believable. If you going to use a passage of Lorem Ipsum.</p> |
| 47 | <div className="content-bottom"> |
| 48 | <h4 className="title">Darrell Steward</h4> |
| 49 | <span>Roofing Expert</span> |
| 50 | </div> |
| 51 | </div> |
| 52 | </div> |
| 53 | <div className="testimonial-item-two"> |
| 54 | <div className="testimonial-avatar-two"> |
| 55 | <img src="/assets/img/images/h2_testi_avatar02.png" alt="" /> |
| 56 | </div> |
| 57 | <div className="testimonial-content-two"> |
| 58 | <div className="content-top"> |
| 59 | <div className="icon"> |
| 60 | <i className="fas fa-quote-left" /> |
| 61 | </div> |
| 62 | <div className="rating"> |
| 63 | <i className="fas fa-star" /> |
| 64 | <i className="fas fa-star" /> |
| 65 | <i className="fas fa-star" /> |
| 66 | <i className="fas fa-star" /> |
| 67 | <i className="fas fa-star" /> |
| 68 | </div> |
| 69 | </div> |
| 70 | <p>Lorem Ipsum are many varation of paissages of Lorem as the Ipum available but our majority have sufferied alterations in some form, by our by injected hsumour randomised worids which don't looks even slightly there as believable. If you going to use a passage of Lorem Ipsum.</p> |
| 71 | <div className="content-bottom"> |
| 72 | <h4 className="title">Robert C. Simmons</h4> |
| 73 | <span>Roofing Expert</span> |
| 74 | </div> |
| 75 | </div> |
| 76 | </div> |
| 77 | <div className="testimonial-item-two"> |
| 78 | <div className="testimonial-avatar-two"> |
| 79 | <img src="/assets/img/images/h2_testi_avatar03.png" alt="" /> |
| 80 | </div> |
| 81 | <div className="testimonial-content-two"> |
| 82 | <div className="content-top"> |
| 83 | <div className="icon"> |
| 84 | <i className="fas fa-quote-left" /> |
| 85 | </div> |
| 86 | <div className="rating"> |
| 87 | <i className="fas fa-star" /> |
| 88 | <i className="fas fa-star" /> |
| 89 | <i className="fas fa-star" /> |
| 90 | <i className="fas fa-star" /> |
| 91 | <i className="fas fa-star" /> |
| 92 | </div> |
| 93 | </div> |
| 94 | <p>Lorem Ipsum are many varation of paissages of Lorem as the Ipum available but our majority have sufferied alterations in some form, by our by injected hsumour randomised worids which don't looks even slightly there as believable. If you going to use a passage of Lorem Ipsum.</p> |
| 95 | <div className="content-bottom"> |
| 96 | <h4 className="title">Karikoka Ahli</h4> |
| 97 | <span>Executive Manager</span> |
| 98 | </div> |
| 99 | </div> |
| 100 | </div> |
| 101 | </Slider> |
| 102 | </div> |
| 103 | </div> |
| 104 | </div> |
| 105 | <div className="testimonial-avatar-wrap"> |
| 106 | <ul className="list-wrap"> |
| 107 | <li> |
| 108 | <img src="/assets/img/images/h4_testi_avatar01.png" className="layer" data-depth="0.1" alt="" /> |
| 109 | </li> |
| 110 | <li> |
| 111 | <img src="/assets/img/images/h4_testi_avatar02.png" className="layer" data-depth="0.2" alt="" /> |
| 112 | </li> |
| 113 | <li> |
| 114 | <img src="/assets/img/images/h4_testi_avatar03.png" className="layer" data-depth="0.05" alt="" /> |
| 115 | </li> |
| 116 | <li> |
| 117 | <img src="/assets/img/images/h4_testi_avatar03.png" className="layer" data-depth="0.2" alt="" /> |
| 118 | </li> |
| 119 | <li> |
| 120 | <img src="/assets/img/images/h4_testi_avatar02.png" className="layer" data-depth="0.05" alt="" /> |
| 121 | </li> |
| 122 | <li> |
| 123 | <img src="/assets/img/images/h4_testi_avatar01.png" className="layer" data-depth="0.1" alt="" /> |
| 124 | </li> |
| 125 | </ul> |
| 126 | </div> |
| 127 | </div> |
| 128 | </section> |
| 129 | |
| 130 | </> |
| 131 | ) |
| 132 | } |
huncholane