From 2a6bbbfe1a90c959b10d329326708941299ae226 Mon Sep 17 00:00:00 2001
From: Keshav Maheshwari <94895949+keshav861@users.noreply.github.com>
Date: Wed, 10 Apr 2024 22:17:20 +0530
Subject: [PATCH] navigation arrow fixed for sponsor and testimonial. (#30)

* Fix invalid import in contentlayer config

* Update globals.css

* navigation arrows fixed

---------

Co-authored-by: Matteo Lodi <30625432+mlodic@users.noreply.github.com>
Co-authored-by: Abheek Tripathy <90976669+abheektripathy@users.noreply.github.com>
Co-authored-by: Syed Ahkam <smahkam57@gmail.com>
---
 components/Slider.tsx | 89 ++++++++++++++++++++++++-------------------
 src/app/globals.css   | 64 ++++++++++++++++++++++++++-----
 2 files changed, 105 insertions(+), 48 deletions(-)

diff --git a/components/Slider.tsx b/components/Slider.tsx
index 8a3fcaa..ca34234 100644
--- a/components/Slider.tsx
+++ b/components/Slider.tsx
@@ -4,21 +4,24 @@
 import { TestimonialData } from "../constants/testimonialsdata";
 import { Sponsordata } from "../constants/sponsordata";
 import Link from "next/link";
-import { Autoplay } from "swiper";
+import SwiperCore, { Autoplay, Navigation } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
+import "swiper/swiper-bundle.css";
 
-interface sliderProps {
+SwiperCore.use([Autoplay, Navigation]);
+
+interface SliderProps {
   isTestimonial: boolean;
 }
 
-export default function Slider(props: sliderProps) {
+export default function Slider(props: SliderProps) {
   const { isTestimonial } = props;
 
   return (
     <>
       {isTestimonial ? (
-        <div id="testimonials-element" className="w-[100%]">
+        <div id="testimonials-element" className="w-[100%] relative">
           <div className="mx-auto max-w-screen-xl py-16 sm:px-6 lg:px-8">
             <Swiper
               spaceBetween={25}
@@ -40,49 +43,48 @@ export default function Slider(props: sliderProps) {
                 delay: 4000,
                 disableOnInteraction: false,
               }}
-              modules={[Autoplay]}
+              navigation={{
+                prevEl: ".swiper-button-prev",
+                nextEl: ".swiper-button-next",
+              }}
               className="h-full"
             >
-              {TestimonialData.map((testimonial, index) => {
-                return (
-                  <div key={index} className="swiper-slide h-full bg-white">
-                    <SwiperSlide className="bg-[#16161D] md:!h-[30rem] lg:!h-[30rem] p-8 xl:p-8 rounded-xl mx-2 border-solid border border-[#39393F]">
-                      <div className="h-full w-full flex flex-col justify-between">
-                        <p className="relative mt-4 text-gray-500">
-                          <span className="text-xl">&ldquo;</span>
-                          {testimonial.review.length <= 300
-                            ? testimonial.review
-                            : testimonial.review.slice(0, 300) + "..."}
-                          <span className="text-xl">&rdquo;</span>
-                        </p>
-                        <div className="flex flex-row gap-4 text-left items-start">
-                          <figcaption className="flex justify-center items-center space-x-3">
-                            <img
-                              className="w-12 h-12 rounded-full"
-                              src="/images/favicon.png"
-                              alt="profile picture"
-                            />
-                            <div className="space-y-0.5 font-medium dark:text-white text-left">
-                              <p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
-                                {testimonial.name}
-                              </p>
-                              <p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md text-left">
-                                {testimonial.designation}
-                              </p>
-                            </div>
-                          </figcaption>
+              {TestimonialData.map((testimonial, index) => (
+                <SwiperSlide key={index} className="bg-[#16161D] md:!h-[30rem] lg:!h-[30rem] p-8 xl:p-8 rounded-xl mx-2 border-solid border border-[#39393F]">
+                  <div className="h-full w-full flex flex-col justify-between">
+                    <p className="relative mt-4 text-gray-500">
+                      <span className="text-xl">&ldquo;</span>
+                      {testimonial.review.length <= 300 ? testimonial.review : testimonial.review.slice(0, 300) + "..."}
+                      <span className="text-xl">&rdquo;</span>
+                    </p>
+                    <div className="flex flex-row gap-4 text-left items-start">
+                      <figcaption className="flex justify-center items-center space-x-3">
+                        <img
+                          className="w-12 h-12 rounded-full"
+                          src="/images/favicon.png"
+                          alt="profile picture"
+                        />
+                        <div className="space-y-0.5 font-medium dark:text-white text-left">
+                          <p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
+                            {testimonial.name}
+                          </p>
+                          <p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md text-left">
+                            {testimonial.designation}
+                          </p>
                         </div>
-                      </div>
-                    </SwiperSlide>
+                      </figcaption>
+                    </div>
                   </div>
-                );
-              })}
+                </SwiperSlide>
+              ))}
             </Swiper>
+            <div className="swiper-button-next"></div>
+            <div className="swiper-button-prev"></div>
           </div>
         </div>
       ) : (
         <div id="sponsor-element" className="w-[90%]">
-          <div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8 relative">
             <Swiper
               spaceBetween={25}
               breakpoints={{
@@ -103,13 +105,20 @@ export default function Slider(props: sliderProps) {
                 delay: 4000,
                 disableOnInteraction: false,
               }}
-              modules={[Autoplay]}
+              navigation={{
+                prevEl: ".swiper-button-prev",
+                nextEl: ".swiper-button-next",
+              }}
+              className="h-full"
             >
               {Sponsordata.map((sponsor, index) => {
                 return (
                   <div key={index} className="swiper-slide">
+
                     <SwiperSlide className="bg-[#16161D] md:!h-[35rem] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F]">
+
                       <div className="flex flex-col items-center justify-around space-y-7 ">
+
                         <p className="relative  mt-4 text-gray-500">
                           {sponsor.companydesc}
                         </p>
@@ -138,6 +147,8 @@ export default function Slider(props: sliderProps) {
                 );
               })}
             </Swiper>
+            <div className="swiper-button-next ssn"></div>
+            <div className="swiper-button-prev ssp"></div>
           </div>
         </div>
       )}
diff --git a/src/app/globals.css b/src/app/globals.css
index c776c8c..aa56829 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -22,35 +22,81 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
+  background: linear-gradient(to bottom,
       transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-    overflow-x: hidden;
+      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+  overflow-x: hidden;
 
 }
+
 body::-webkit-scrollbar {
   width: 8px;
 }
+
 body::-webkit-scrollbar-track {
   background-color: #0E1016;
-  
+
 }
 
 body::-webkit-scrollbar-thumb {
   background-color: #2c2c2c;
-  
+
 }
 
 body::-webkit-scrollbar-thumb:hover {
   background-color: #555;
 }
-.prose{
+
+.prose {
   display: grid;
   justify-content: center;
   align-items: center;
   text-align: justify;
   max-width: 1200px;
+}
+.ssp,
+.ssn {
+  width: -700px !important;
+  color: white !important;
+  z-index: 10 !important;
+  transition: all 0.3s ease !important;
+  cursor: pointer;
+}
+.ssp:after{
+  position: absolute !important;
+  left: -100px !important;
+}
+.ssn:after{
+  position: absolute !important;
+  right: -100px !important;
+}
+.swiper-button-prev,
+.swiper-button-next {
+  color: white !important;
+  z-index: 10 !important;
+  transition: all 0.3s ease !important;
+  cursor: pointer;
+}
+.swiper-button-prev {
+  left: 100px !important;
+}
+
+.swiper-button-next {
+  right: 90px !important;
+}
+
+.swiper-container {
+  position: relative !important;
+}
+
+.swiper-wrapper {
+  overflow: visible !important;
+}
+
+
+@media (max-width: 768px) {
+  .swiper-button-prev,
+  .swiper-button-next {
+    display: none !important;
+  }
 }
\ No newline at end of file