-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#3929] Create Testimonials Carousel
- Loading branch information
1 parent
a2b8521
commit 6b6006f
Showing
2 changed files
with
219 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import React from "react"; | ||
| import "./index.scss"; | ||
| import oneDrop from "../../images/organisations/one-drop-logo.png"; | ||
| import { Navigation, Pagination, A11y } from "swiper"; | ||
|
|
||
| import { Swiper, SwiperSlide } from "swiper/react"; | ||
|
|
||
| // Import Swiper styles | ||
| import "swiper/css"; | ||
| import "swiper/css/navigation"; | ||
| import "swiper/css/pagination"; | ||
|
|
||
| const Testimonial = () => { | ||
| const testimonials = [ | ||
| { | ||
| name: "Anna Zisa", | ||
| description: | ||
| "Akvo Flow has allowed the Lazos de Agua Program supported by the One Drop Foundation to monitor water, sanitation and hygiene service levels for households and WASH behaviours. Akvo Flow supported collecting data through over 5,000 household surveys in 5 countries in Latin America. At a program level, using a harmonized data collection tool has facilitated data analysis saving plenty of time and effort. Implementing partners of the program have even found other beneficial uses for the app than those originally planned. Plus, the technical support from Akvo has been timely any time it was needed.", | ||
| role: "Manager - Monitoring, evaluation, research and learning, International Programs at One Drop Foundation", | ||
| organisation: { name: "One Drop", logo: oneDrop }, | ||
| }, | ||
| { | ||
| name: "Anna Zisa", | ||
| description: | ||
| "Akvo Flow has allowed the Lazos de Agua Program supported by the One Drop Foundation to monitor water, sanitation and hygiene service levels for households and WASH behaviours. Akvo Flow supported collecting data through over 5,000 household surveys in 5 countries in Latin America. At a program level, using a harmonized data collection tool has facilitated data analysis saving plenty of time and effort. Implementing partners of the program have even found other beneficial uses for the app than those originally planned. Plus, the technical support from Akvo has been timely any time it was needed.", | ||
| role: "Manager - Monitoring, evaluation, research and learning, International Programs at One Drop Foundation", | ||
| organisation: { name: "One Drop", logo: oneDrop }, | ||
| }, | ||
| { | ||
| name: "Anna Zisa", | ||
| description: | ||
| "Akvo Flow has allowed the Lazos de Agua Program supported by the One Drop Foundation to monitor water, sanitation and hygiene service levels for households and WASH behaviours. Akvo Flow supported collecting data through over 5,000 household surveys in 5 countries in Latin America. At a program level, using a harmonized data collection tool has facilitated data analysis saving plenty of time and effort. Implementing partners of the program have even found other beneficial uses for the app than those originally planned. Plus, the technical support from Akvo has been timely any time it was needed.", | ||
| role: "Manager - Monitoring, evaluation, research and learning, International Programs at One Drop Foundation", | ||
| organisation: { name: "One Drop", logo: oneDrop }, | ||
| }, | ||
| { | ||
| name: "Anna Zisa", | ||
| description: | ||
| "Akvo Flow has allowed the Lazos de Agua Program supported by the One Drop Foundation to monitor water, sanitation and hygiene service levels for households and WASH behaviours. Akvo Flow supported collecting data through over 5,000 household surveys in 5 countries in Latin America. At a program level, using a harmonized data collection tool has facilitated data analysis saving plenty of time and effort. Implementing partners of the program have even found other beneficial uses for the app than those originally planned. Plus, the technical support from Akvo has been timely any time it was needed.", | ||
| role: "Manager - Monitoring, evaluation, research and learning, International Programs at One Drop Foundation", | ||
| organisation: { name: "One Drop", logo: oneDrop }, | ||
| }, | ||
| ]; | ||
| return ( | ||
| <div className="testimonial"> | ||
| <h3 className="heading"> | ||
| What our <span>partners</span> say | ||
| </h3> | ||
| <Swiper | ||
| modules={[Navigation, A11y]} | ||
| spaceBetween={50} | ||
| slidesPerView={1} | ||
| navigation | ||
| pagination={{ clickable: true }} | ||
| > | ||
| {testimonials.map((testimonial, index) => { | ||
| return ( | ||
| <SwiperSlide key={index}> | ||
| <div> | ||
| <div className="wrapper"> | ||
| <blockquote className="testimonial-quote"> | ||
| <q>{testimonial.description}</q> | ||
| </blockquote> | ||
| <div className="container"> | ||
| <b className="testimonial-name">{testimonial.name}</b> | ||
| <p className="testimonial-role">{testimonial.role}</p> | ||
| </div> | ||
| <img | ||
| className="testimonial-organisation-logo" | ||
| src={testimonial.organisation.logo} | ||
| alt={testimonial.organisation.name} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </SwiperSlide> | ||
| ); | ||
| })} | ||
| </Swiper> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Testimonial; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| @import "../../variables.scss"; | ||
|
|
||
| .testimonial { | ||
| text-align: center; | ||
| margin-top: 30px; | ||
| padding: 0 20px; | ||
| margin: 30px auto 0 auto; | ||
| .heading { | ||
| font-weight: 700; | ||
| font-size: 32px; | ||
| line-height: 36px; | ||
| margin: 0; | ||
| margin-bottom: 30px; | ||
| span { | ||
| display: inline; | ||
| color: $orange; | ||
| } | ||
| } | ||
| .swiper { | ||
| .swiper-button-prev, | ||
| .swiper-button-next { | ||
| width: 44px; | ||
| height: 44px; | ||
| background-image: url("../../images/left-arrow.svg"); | ||
| background-position: center; | ||
| border-radius: 50%; | ||
| background-color: #f1f2f4; | ||
| transition: all ease-out 0.3s; | ||
| &:hover { | ||
| background-color: #fefaf0; | ||
| box-shadow: 0px 12px 16px -4px rgba(51, 51, 51, 0.08), | ||
| 0px 4px 6px -2px rgba(51, 51, 51, 0.03); | ||
| } | ||
| &::after { | ||
| content: ""; | ||
| } | ||
| } | ||
|
|
||
| .swiper-button-next { | ||
| transform: rotate(180deg); | ||
| &:hover { | ||
| box-shadow: 0px -12px 16px -4px rgba(51, 51, 51, 0.08), | ||
| 0px 4px 6px -2px rgba(51, 51, 51, 0.03); | ||
| } | ||
| } | ||
| .swiper-slide { | ||
| background-color: #fff; | ||
| & > div { | ||
| padding: 10px; | ||
| background: #f1f2f4; | ||
| box-shadow: 3px 3px 25px rgba(0, 0, 0, 0.05), | ||
| 0px 8px 20px rgba(0, 0, 0, 0.04); | ||
| border-radius: 15px; | ||
| max-width: 60%; | ||
| margin: auto; | ||
| } | ||
| .wrapper { | ||
| background-color: #fff; | ||
| padding: 20px 20px 10px 20px; | ||
| border-radius: 10px; | ||
| .testimonial-quote { | ||
| margin: 0 0 30px 0; | ||
| q { | ||
| font-size: 14px; | ||
| line-height: 20px; | ||
| } | ||
| } | ||
|
|
||
| .container { | ||
| .testimonial-name { | ||
| font-size: 14px; | ||
| line-height: 18px; | ||
| } | ||
| .testimonial-role { | ||
| font-size: 14px; | ||
| line-height: 20px; | ||
| } | ||
| } | ||
|
|
||
| .testimonial-organisation-logo { | ||
| width: 100%; | ||
| max-width: 122.56px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| @media (min-width: 601px) { | ||
| margin-top: 50px; | ||
| padding: 0 40px; | ||
| .heading { | ||
| font-size: 48px; | ||
| line-height: 52px; | ||
| } | ||
| .swiper { | ||
| .swiper-slide { | ||
| .wrapper { | ||
| padding: 25px 25px 10px 25px; | ||
| .container { | ||
| .testimonial-name { | ||
| font-size: 16px; | ||
| line-height: 20px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| margin-top: 127px; | ||
| padding: 0 156px; | ||
| .heading { | ||
| font-size: 56px; | ||
| line-height: 64px; | ||
| } | ||
| .swiper { | ||
| .swiper-slide { | ||
| & > div { | ||
| max-width: 744px; | ||
| } | ||
| .wrapper { | ||
| .container { | ||
| .testimonial-name { | ||
| font-size: 20px; | ||
| line-height: 24px; | ||
| } | ||
| .testimonial-role { | ||
| font-size: 18px; | ||
| line-height: 28px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |