Merge pull request #18 from NegativE333/testimonial-slider

Testimonial slider added in website with swiper js.

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: ['images.unsplash.com'],
+  },
 }
 
 module.exports = nextConfig

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"
   }

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 (
+    <>
+        <div className="h-[90vh] flex flex-col items-center justify-center bg-[#fbfafe]">
+            <div className="text-4xl text-secondary text-[#23263b] font-semibold">
+                What our members say
+            </div>
+      <Swiper
+        slidesPerView={3}
+        spaceBetween={150}
+        autoplay={{
+          delay: 2500,
+          disableOnInteraction: false,
+        }}
+        pagination={{
+          clickable: true,
+        }}
+        modules={[Pagination]}
+        className="mySwiper"
+      >
+        {profiles.map((profile, i) => (
+          <SwiperSlide key={i}>
+            <div className="flex items-center justify-center flex-col gap-4 #23263b">
+              <div className="text-[#fb4a6e] flex gap-1">
+                <AiFillStar />
+                <AiFillStar />
+                <AiFillStar />
+                <AiFillStar />
+                <AiFillStar />
+              </div>
+              <div className="font-medium text-secondary text-xl">
+                {loremMessage}
+              </div>
+              <div className="flex justify-center items-center gap-4">
+                <div className="h-10 w-10">
+                  <Image
+                    className="rounded-full"
+                    width={100}
+                    height={100}
+                    src={profile.profilePictureUrl}
+                    alt="prifle"
+                  />
+                </div>
+                {profile.name}
+              </div>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+    </>
+
+  );
+};
+
+export default Testimonial;

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 };

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;
+  }

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 }) {
                 <MainHeader />
             </div>
             <Component {...pageProps} />
+            <Testimonial />
             <Footer />
         </main>
     </>

src/styles/globals.css

@@ -26,4 +26,30 @@
 body {
     overflow-x: hidden;
     font-family: 'Raleway', sans-serif;
-}
+}
+
+.swiper {
+    width: 80%;
+    height: 50%;
+  }
+
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fbfafe;
+    /* Center slide text vertically */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .swiper-pagination-bullet {
+    background-color: red; /* Change this to your desired color */
+  }

yarn.lock

@@ -2646,12 +2646,10 @@ reflect.getprototypeof@^1.0.4:
     get-intrinsic "^1.2.1"
     globalthis "^1.0.3"
     which-builtin-type "^1.1.3"
-
 regenerator-runtime@^0.14.0:
   version "0.14.0"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz"
   integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
-
 regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz"
@@ -2906,6 +2904,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swiper@^10.3.1:
+  version "10.3.1"
+  resolved "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz"
+  integrity sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==
+
 swr@^2.1.5:
   version "2.2.4"
   resolved "https://registry.npmjs.org/swr/-/swr-2.2.4.tgz"