67 lines
3.0 KiB
JavaScript
67 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import testimonialsData from 'data/CloudHosting/testimonials.json';
|
|
|
|
const Testimonials = () => {
|
|
return (
|
|
<section className="testimonials style-9 section-padding">
|
|
<div className="container">
|
|
<div className="testi-head mb-80 wow fadeInUp">
|
|
<div className="row justify-content-between">
|
|
<div className="col-lg-5">
|
|
<h3> Trusted by 20+ Million Users Around The World. </h3>
|
|
</div>
|
|
<div className="col-lg-4 text-lg-end">
|
|
<div className="reviews-numb">
|
|
<div className="img">
|
|
<img src="/assets/img/testimonials/trust_logo.png" alt="" className="logo" />
|
|
<div className="stars">
|
|
<img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
|
|
<img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
|
|
<img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
|
|
<img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
|
|
<img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
|
|
</div>
|
|
</div>
|
|
<div className="info text-start">
|
|
<p className="color-666"> { testimonialsData.totalRating } out of 5 based on </p>
|
|
<h6 className="color-darkBlue2 fw-bold"> { testimonialsData.totalReviews } reviews </h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="testi-body">
|
|
<div className="row gx-5">
|
|
{
|
|
testimonialsData.testimonials.map((testimonial, index) => (
|
|
<div className={`col-lg-4 ${index !== testimonialsData.testimonials.length - 1 ? 'border-1 border-end brd-gray wow fadeInUp':''}`} key={index}>
|
|
<div className={`testi-card p${index === 0 ? 'e' : index === 1 ? 'x' : 's'}-lg-4`}>
|
|
<div className="stars">
|
|
{
|
|
Array(testimonial.stars).fill().map((_,i) => <img key={i} src="/assets/img/testimonials/trust_star.png" alt="" className="star" />)
|
|
}
|
|
</div>
|
|
<div className="text">
|
|
“ { testimonial.content } ”
|
|
</div>
|
|
<div className="author">
|
|
<div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
|
|
<img src={testimonial.author.image} alt="" />
|
|
</div>
|
|
<div className="inf">
|
|
<p> { testimonial.author.position } </p>
|
|
<h6> { testimonial.author.name } </h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Testimonials |