huncholanetestimonials on about
huncholane1 file changed, +36 -102
+36-102pages/about.js
| @@ -1,3 +1,4 @@ | ||
| 1 | +import testimonialData from "@/components/data/testimonialData"; | |
| 1 | 2 | import VideoPopup from "@/components/elements/VideoPopup"; |
| 2 | 3 | import Layout from "@/components/layout/Layout"; |
| 3 | 4 | import Brand3 from "@/components/sections/Brand3"; |
| @@ -14,6 +15,35 @@ const settings = { | ||
| 14 | 15 | slidesToScroll: 1, |
| 15 | 16 | }; |
| 16 | 17 | |
| 18 | +function TestimonialItem(props) { | |
| 19 | + return ( | |
| 20 | + <div className="testimonial-item-two"> | |
| 21 | + <div className="testimonial-avatar-two"> | |
| 22 | + <img src="/assets/img/images/h2_testi_avatar01.png" alt="" /> | |
| 23 | + </div> | |
| 24 | + <div className="testimonial-content-two"> | |
| 25 | + <div className="content-top"> | |
| 26 | + <div className="icon"> | |
| 27 | + <i className="fas fa-quote-left" /> | |
| 28 | + </div> | |
| 29 | + <div className="rating"> | |
| 30 | + <i className="fas fa-star" /> | |
| 31 | + <i className="fas fa-star" /> | |
| 32 | + <i className="fas fa-star" /> | |
| 33 | + <i className="fas fa-star" /> | |
| 34 | + <i className="fas fa-star" /> | |
| 35 | + </div> | |
| 36 | + </div> | |
| 37 | + <p>{props.quote}</p> | |
| 38 | + <div className="content-bottom"> | |
| 39 | + <h4 className="title">{props.name}</h4> | |
| 40 | + <span>{props.profession}</span> | |
| 41 | + </div> | |
| 42 | + </div> | |
| 43 | + </div> | |
| 44 | + ); | |
| 45 | +} | |
| 46 | + | |
| 17 | 47 | export default function About() { |
| 18 | 48 | return ( |
| 19 | 49 | <> |
| @@ -265,108 +295,12 @@ export default function About() { | ||
| 265 | 295 | <div className="col-lg-10"> |
| 266 | 296 | <div className="testimonial-inner"> |
| 267 | 297 | <Slider {...settings} className="testimonial-active-two"> |
| 268 | - <div className="testimonial-item-two"> | |
| 269 | - <div className="testimonial-avatar-two"> | |
| 270 | - <img | |
| 271 | - src="/assets/img/images/h2_testi_avatar01.png" | |
| 272 | - alt="" | |
| 273 | - /> | |
| 274 | - </div> | |
| 275 | - <div className="testimonial-content-two"> | |
| 276 | - <div className="content-top"> | |
| 277 | - <div className="icon"> | |
| 278 | - <i className="fas fa-quote-left" /> | |
| 279 | - </div> | |
| 280 | - <div className="rating"> | |
| 281 | - <i className="fas fa-star" /> | |
| 282 | - <i className="fas fa-star" /> | |
| 283 | - <i className="fas fa-star" /> | |
| 284 | - <i className="fas fa-star" /> | |
| 285 | - <i className="fas fa-star" /> | |
| 286 | - </div> | |
| 287 | - </div> | |
| 288 | - <p> | |
| 289 | - There are many varation of paissages of Lorem as the | |
| 290 | - Ipum available but our majority have sufferied | |
| 291 | - alterations in some form, by our by injected hsumour | |
| 292 | - randomised worids which don't looks even slightly | |
| 293 | - there as believable. If you going to use a passage | |
| 294 | - of Lorem Ipsum. | |
| 295 | - </p> | |
| 296 | - <div className="content-bottom"> | |
| 297 | - <h4 className="title">Darrell Steward</h4> | |
| 298 | - <span>Roofing Expert</span> | |
| 299 | - </div> | |
| 300 | - </div> | |
| 301 | - </div> | |
| 302 | - <div className="testimonial-item-two"> | |
| 303 | - <div className="testimonial-avatar-two"> | |
| 304 | - <img | |
| 305 | - src="/assets/img/images/h2_testi_avatar02.png" | |
| 306 | - alt="" | |
| 307 | - /> | |
| 308 | - </div> | |
| 309 | - <div className="testimonial-content-two"> | |
| 310 | - <div className="content-top"> | |
| 311 | - <div className="icon"> | |
| 312 | - <i className="fas fa-quote-left" /> | |
| 313 | - </div> | |
| 314 | - <div className="rating"> | |
| 315 | - <i className="fas fa-star" /> | |
| 316 | - <i className="fas fa-star" /> | |
| 317 | - <i className="fas fa-star" /> | |
| 318 | - <i className="fas fa-star" /> | |
| 319 | - <i className="fas fa-star" /> | |
| 320 | - </div> | |
| 321 | - </div> | |
| 322 | - <p> | |
| 323 | - Lorem Ipsum are many varation of paissages of Lorem | |
| 324 | - as the Ipum available but our majority have | |
| 325 | - sufferied alterations in some form, by our by | |
| 326 | - injected hsumour randomised worids which don't looks | |
| 327 | - even slightly there as believable. If you going to | |
| 328 | - use a passage of Lorem Ipsum. | |
| 329 | - </p> | |
| 330 | - <div className="content-bottom"> | |
| 331 | - <h4 className="title">Robert C. Simmons</h4> | |
| 332 | - <span>Roofing Expert</span> | |
| 333 | - </div> | |
| 334 | - </div> | |
| 335 | - </div> | |
| 336 | - <div className="testimonial-item-two"> | |
| 337 | - <div className="testimonial-avatar-two"> | |
| 338 | - <img | |
| 339 | - src="/assets/img/images/h2_testi_avatar03.png" | |
| 340 | - alt="" | |
| 341 | - /> | |
| 342 | - </div> | |
| 343 | - <div className="testimonial-content-two"> | |
| 344 | - <div className="content-top"> | |
| 345 | - <div className="icon"> | |
| 346 | - <i className="fas fa-quote-left" /> | |
| 347 | - </div> | |
| 348 | - <div className="rating"> | |
| 349 | - <i className="fas fa-star" /> | |
| 350 | - <i className="fas fa-star" /> | |
| 351 | - <i className="fas fa-star" /> | |
| 352 | - <i className="fas fa-star" /> | |
| 353 | - <i className="fas fa-star" /> | |
| 354 | - </div> | |
| 355 | - </div> | |
| 356 | - <p> | |
| 357 | - Lorem Ipsum are many varation of paissages of Lorem | |
| 358 | - as the Ipum available but our majority have | |
| 359 | - sufferied alterations in some form, by our by | |
| 360 | - injected hsumour randomised worids which don't looks | |
| 361 | - even slightly there as believable. If you going to | |
| 362 | - use a passage of Lorem Ipsum. | |
| 363 | - </p> | |
| 364 | - <div className="content-bottom"> | |
| 365 | - <h4 className="title">Karikoka Ahli</h4> | |
| 366 | - <span>Executive Manager</span> | |
| 367 | - </div> | |
| 368 | - </div> | |
| 369 | - </div> | |
| 298 | + {testimonialData.map((item, index) => ( | |
| 299 | + <TestimonialItem | |
| 300 | + key={`testimonial-${index}`} | |
| 301 | + {...item} | |
| 302 | + /> | |
| 303 | + ))} | |
| 370 | 304 | </Slider> |
| 371 | 305 | </div> |
| 372 | 306 | </div> |