diff --git a/next.config.js b/next.config.js index a843cbe..e12d5a3 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,9 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, + images: { + domains: ['images.unsplash.com'], + }, } module.exports = nextConfig diff --git a/package-lock.json b/package-lock.json index 37073e4..b8be651 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "react-hot-toast": "^2.4.1", "react-icons": "^4.11.0", "react-router-dom": "^6.10.0", + "swiper": "^10.3.1", "swr": "^2.1.5", "tailwindcss": "3.3.1" } @@ -4752,6 +4753,24 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz", + "integrity": "sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/swr": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.4.tgz", diff --git a/package.json b/package.json index 24e4237..33d914b 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-hot-toast": "^2.4.1", "react-icons": "^4.11.0", "react-router-dom": "^6.10.0", + "swiper": "^10.3.1", "swr": "^2.1.5", "tailwindcss": "3.3.1" } diff --git a/src/components/Testimonial/Testimonial.js b/src/components/Testimonial/Testimonial.js new file mode 100644 index 0000000..740fdab --- /dev/null +++ b/src/components/Testimonial/Testimonial.js @@ -0,0 +1,72 @@ +import React from "react"; +import Image from "next/image"; +import { AiFillStar } from "react-icons/ai"; + +// Import Swiper React components +import { Swiper, SwiperSlide } from "swiper/react"; + +// Import Swiper styles +import "swiper/css"; +import "swiper/css/pagination"; + +// import required modules +import { Pagination } from "swiper/modules"; + +import { loremMessage, profiles } from "./TestimonialData"; + +const Testimonial = () => { + return ( + <> +
+
+ What our members say +
+ + {profiles.map((profile, i) => ( + +
+
+ + + + + +
+
+ {loremMessage} +
+
+
+ prifle +
+ {profile.name} +
+
+ + ))} + +
+ + + ); +}; + +export default Testimonial; diff --git a/src/components/Testimonial/TestimonialData.js b/src/components/Testimonial/TestimonialData.js new file mode 100644 index 0000000..e90aed1 --- /dev/null +++ b/src/components/Testimonial/TestimonialData.js @@ -0,0 +1,12 @@ +const loremMessage = "Lorem ipsum dolor sit amet consectetur. In at sed sit tempor. Sed venenatis sodales Maurice bibendum blanket condiments curses."; + +const profiles = []; + +for (let i = 0; i < 6; i++) { + profiles.push({ + name: `Brooklyn Simmons`, + profilePictureUrl: `https://images.unsplash.com/photo-1573497019236-17f8177b81e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8cHJvZmVzc2lvbmFsJTIwd29tZW58ZW58MHwwfDB8fHww&auto=format&fit=crop&w=500&q=60`, + }); +} + +module.exports = { loremMessage, profiles }; diff --git a/src/components/Testimonial/styles.css b/src/components/Testimonial/styles.css new file mode 100644 index 0000000..e6f5a25 --- /dev/null +++ b/src/components/Testimonial/styles.css @@ -0,0 +1,22 @@ +.swiper { + width: 100%; + height: 100%; + } + + .swiper-slide { + text-align: center; + font-size: 18px; + background: #fff; + + /* Center slide text vertically */ + display: flex; + justify-content: center; + align-items: center; + } + + .swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } \ No newline at end of file diff --git a/src/pages/_app.js b/src/pages/_app.js index 2764976..10a0857 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -1,5 +1,6 @@ import Footer from '@/components/Footer/Footer' import MainHeader from '@/components/Headers/MainHeader' +import Testimonial from '@/components/Testimonial/Testimonial' import MobileMainHeader from '@/components/Headers/MobileMainHeader' import '@/styles/globals.css' import '@/styles/tailwind.common.css' @@ -19,6 +20,7 @@ export default function App({ Component, pageProps }) { +