huncholaneright testimonials
huncholane2 files changed, +25 -82
+25-82components/sections/Testimonial1.js
| @@ -1,4 +1,5 @@ | ||
| 1 | 1 | import Slider from "react-slick"; |
| 2 | +import testimonialData from "../data/testimonialData"; | |
| 2 | 3 | const settings = { |
| 3 | 4 | dots: true, |
| 4 | 5 | infinite: true, |
| @@ -9,7 +10,27 @@ const settings = { | ||
| 9 | 10 | slidesToScroll: 1, |
| 10 | 11 | }; |
| 11 | 12 | |
| 12 | -function TestimonialItem(props) {} | |
| 13 | +function 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 | +} | |
| 13 | 34 | |
| 14 | 35 | export default function Testimonial1() { |
| 15 | 36 | return ( |
| @@ -33,87 +54,9 @@ export default function Testimonial1() { | ||
| 33 | 54 | </h2> |
| 34 | 55 | </div> |
| 35 | 56 | <Slider {...settings} className="testimonial-active"> |
| 36 | - <div className="testimonial-item"> | |
| 37 | - <div className="testimonial-icon"> | |
| 38 | - <i className="fas fa-quote-left" /> | |
| 39 | - </div> | |
| 40 | - <div className="testimonial-content"> | |
| 41 | - <p> | |
| 42 | - There are many varation of paissages of Lorem as the | |
| 43 | - Ipum available but our majority have sufferied | |
| 44 | - alterations in some form, by our by injected hsumour | |
| 45 | - randomised worids which don't looks even slightly there | |
| 46 | - as believable. If you going to use a passage of Lorem | |
| 47 | - Ipsum. | |
| 48 | - </p> | |
| 49 | - </div> | |
| 50 | - <div className="testimonial-avatar"> | |
| 51 | - <div className="avatar-thumb"> | |
| 52 | - <img | |
| 53 | - src="/assets/img/images/testi_avatar01.png" | |
| 54 | - alt="" | |
| 55 | - /> | |
| 56 | - </div> | |
| 57 | - <div className="avatar-content"> | |
| 58 | - <h6 className="title">Darrell Steward</h6> | |
| 59 | - <p>Roofing Expert</p> | |
| 60 | - </div> | |
| 61 | - </div> | |
| 62 | - </div> | |
| 63 | - <div className="testimonial-item"> | |
| 64 | - <div className="testimonial-icon"> | |
| 65 | - <i className="fas fa-quote-left" /> | |
| 66 | - </div> | |
| 67 | - <div className="testimonial-content"> | |
| 68 | - <p> | |
| 69 | - There are many varation of paissages of Lorem as the | |
| 70 | - Ipum available but our majority have sufferied | |
| 71 | - alterations in some form, by our by injected hsumour | |
| 72 | - randomised worids which don't looks even slightly there | |
| 73 | - as believable. If you going to use a passage of Lorem | |
| 74 | - Ipsum. | |
| 75 | - </p> | |
| 76 | - </div> | |
| 77 | - <div className="testimonial-avatar"> | |
| 78 | - <div className="avatar-thumb"> | |
| 79 | - <img | |
| 80 | - src="/assets/img/images/testi_avatar01.png" | |
| 81 | - alt="" | |
| 82 | - /> | |
| 83 | - </div> | |
| 84 | - <div className="avatar-content"> | |
| 85 | - <h6 className="title">Darrell Steward</h6> | |
| 86 | - <p>Roofing Expert</p> | |
| 87 | - </div> | |
| 88 | - </div> | |
| 89 | - </div> | |
| 90 | - <div className="testimonial-item"> | |
| 91 | - <div className="testimonial-icon"> | |
| 92 | - <i className="fas fa-quote-left" /> | |
| 93 | - </div> | |
| 94 | - <div className="testimonial-content"> | |
| 95 | - <p> | |
| 96 | - There are many varation of paissages of Lorem as the | |
| 97 | - Ipum available but our majority have sufferied | |
| 98 | - alterations in some form, by our by injected hsumour | |
| 99 | - randomised worids which don't looks even slightly there | |
| 100 | - as believable. If you going to use a passage of Lorem | |
| 101 | - Ipsum. | |
| 102 | - </p> | |
| 103 | - </div> | |
| 104 | - <div className="testimonial-avatar"> | |
| 105 | - <div className="avatar-thumb"> | |
| 106 | - <img | |
| 107 | - src="/assets/img/images/testi_avatar01.png" | |
| 108 | - alt="" | |
| 109 | - /> | |
| 110 | - </div> | |
| 111 | - <div className="avatar-content"> | |
| 112 | - <h6 className="title">Darrell Steward</h6> | |
| 113 | - <p>Roofing Expert</p> | |
| 114 | - </div> | |
| 115 | - </div> | |
| 116 | - </div> | |
| 57 | + {testimonialData.map((item, index) => ( | |
| 58 | + <TestimonialItem key={`testimonial-${index}`} {...item} /> | |
| 59 | + ))} | |
| 117 | 60 | </Slider> |
| 118 | 61 | </div> |
| 119 | 62 | </div> |
+0-0public/assets/img/favicon.png
Binary file changed.