added transition on right side, fixed styling a little bit

src/app/components/Testimonial/Testimonial.scss

@@ -0,0 +1,89 @@
+.testimonials {
+  margin-top: 1rem;
+  width: 100%;
+
+  [class^='number-slide'],
+  [class*=' number-slide'] {
+    background: grey;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 50px;
+    color: #fff;
+    font-weight: 500;
+    height: 300px;
+    max-height: 100vh;
+  }
+
+  h3 {
+    @media (max-width: $tablet-breakpoint) {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+    }
+
+    margin-bottom: 2rem;
+  }
+
+  .slider-wrapper {
+    position: relative;
+    width: 100%;
+
+    ul {
+      background-color: white;
+      padding-left: 0;
+      list-style-type: none;
+      position: relative;
+
+      &::before {
+        content: '';
+        display: block;
+        width: 50px;
+        height: 100%;
+        background-color: white;
+        background: linear-gradient(to right, white, transparent);
+        position: absolute;
+        left: 0;
+      }
+
+      &::after {
+        content: '';
+        display: block;
+        width: 50px;
+        height: 100%;
+        background-color: white;
+        background: linear-gradient(to left, white, transparent);
+        position: absolute;
+        right: 0;
+      }
+
+      li {
+        .reviewer {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .arrow-container {
+    display: flex;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    .arrow {
+      width: 30px;
+      height: 30px;
+      top: 0;
+      transform: translateY(-50%);
+      -webkit-transform: translateY(-50%);
+      fill: #fff;
+      cursor: pointer;
+    }
+
+    .arrow--left,
+    .arrow--right {
+      background-color: black;
+      padding: 10% 0;
+    }
+  }
+}

src/app/components/Testimonial/Testimonial.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import './Testimonial.scss';
+import { useKeenSlider } from 'keen-slider/react';
+import 'keen-slider/keen-slider.min.css';
+import { TESTIMONIAL_LIST } from './constants';
+
+export default function Testimonial() {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [loaded, setLoaded] = useState(false);
+  const [sliderRef, instanceRef] = useKeenSlider<HTMLUListElement>({
+    loop: true,
+    slideChanged(slider) {
+      setCurrentSlide(slider.track.details.rel);
+    },
+    created() {
+      setLoaded(true);
+    },
+    slides: {
+      perView: 3,
+      spacing: 40
+    }
+  });
+
+  return (
+    <div className="testimonials">
+      <h3>See some testimonials from previous participants:</h3>
+      <div className="slider-wrapper">
+        <ul ref={sliderRef} className="keen-slider">
+          {TESTIMONIAL_LIST.map(testimonial => (
+            <li key={testimonial.id} className="keen-slider__slide">
+              <p>{testimonial.text}</p>
+              <p className="reviewer">- PAST UPGRADER</p>
+            </li>
+          ))}
+        </ul>
+        {loaded && instanceRef.current && (
+          <div className="arrow-container">
+            <Arrow
+              left
+              onClick={(e: any) =>
+                e.stopPropagation() || instanceRef.current?.prev()
+              }
+              disabled={currentSlide === 0}
+            />
+            <Arrow
+              onClick={(e: any) =>
+                e.stopPropagation() || instanceRef.current?.next()
+              }
+              disabled={
+                currentSlide ===
+                instanceRef.current.track.details.slides.length - 1
+              }
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Arrow(props: {
+  disabled: boolean;
+  left?: boolean;
+  // eslint-disable-next-line no-unused-vars
+  onClick: (e: any) => void;
+}) {
+  const disabled = props.disabled ? ' arrow--disabled' : '';
+  return (
+    <svg
+      onClick={props.onClick}
+      className={`arrow ${
+        props.left ? 'arrow--left' : 'arrow--right'
+      } ${disabled}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      {props.left && (
+        <path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
+      )}
+      {!props.left && (
+        <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
+      )}
+    </svg>
+  );
+}

src/app/components/Testimonial/constants.ts

@@ -0,0 +1,18 @@
+export const TESTIMONIAL_LIST = [
+  {
+    id: 'testimonial-1',
+    text: '“Learning about marketing and social media branding was a plus for sure, I feel like I needed an intro to many of the topics covered and there was no better way to do so than taking a part of such a versatile and dedicated team that ranged in skills, talents, and industry knowledge.”'
+  },
+  {
+    id: 'testimonial-2',
+    text: '“Learning about marketing and social media branding was a plus for sure, I feel like I needed an intro to many of the topics covered and there was no better way to do so than taking a part of such a versatile and dedicated team that ranged in skills, talents, and industry knowledge.”'
+  },
+  {
+    id: 'testimonial-3',
+    text: '“Learning about marketing and social media branding was a plus for sure, I feel like I needed an intro to many of the topics covered and there was no better way to do so than taking a part of such a versatile and dedicated team that ranged in skills, talents, and industry knowledge.”'
+  },
+  {
+    id: 'testimonial-4',
+    text: '“Learning about marketing and social media branding was a plus for sure, I feel like I needed an intro to many of the topics covered and there was no better way to do so than taking a part of such a versatile and dedicated team that ranged in skills, talents, and industry knowledge.”'
+  }
+];

src/app/pages/Apply/Apply.scss

@@ -1,17 +1,18 @@
 #apply {
   position: relative;
   width: 100%;
+  overflow: hidden;
 
   h2 {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
   }
 
   h3 {
     text-transform: uppercase;
   }
 
   hr {
-    background-color: lightgray;
+    border: 1px solid lightgray;
     display: none;
 
     @media (min-width: $tablet-breakpoint) {
@@ -23,15 +24,18 @@
     list-style-type: none;
     padding-left: 0;
     display: grid;
-    gap: 1rem;
+    gap: 0.5rem;
     padding-block: 0;
 
     @media (min-width: $tablet-breakpoint) {
       grid-template-columns: repeat(2, 1fr);
-      padding-top: 1rem;
+      gap: 2.5rem;
+      padding-block: 1rem;
+    }
 
-      li:not-nth-child() {
-        margin-right: 60px;
+    li {
+      h3 {
+        margin-bottom: 0.5rem;
       }
     }
   }
@@ -41,29 +45,4 @@
       display: none;
     }
   }
-
-  .testimonials {
-    * {
-      margin-top: 0.5rem;
-    }
-
-    .navigation-wrapper {
-      border: 2px solid lightgray;
-    }
-
-    .testimonial-slide {
-      p.reviewer {
-        float: right;
-      }
-    }
-
-    .buttons {
-      float: right;
-
-      button {
-        background-color: black;
-        color: white;
-      }
-    }
-  }
 }

src/app/pages/Apply/Apply.tsx

@@ -2,34 +2,11 @@
 
 import Footer from '@/components/Footer/Footer';
 import 'keen-slider/keen-slider.min.css';
-import { useKeenSlider } from 'keen-slider/react';
-import { useState } from 'react';
 import './Apply.scss';
 import { applyInfo } from './apply-info';
-import { testimonialInfo } from './testimonial-info';
+import Testimonial from '@/components/Testimonial/Testimonial';
 
 export default function Apply() {
-  const [currentSlide, setCurrentSlide] = useState(0);
-  const [loaded, setLoaded] = useState(false);
-
-  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({
-    loop: true,
-    defaultAnimation: {
-      duration: 3000
-    },
-    initial: currentSlide,
-    slides: {
-      perView: 1,
-      origin: 'center'
-    },
-    slideChanged(slider) {
-      setCurrentSlide(slider.track.details.rel);
-    },
-    created() {
-      setLoaded(true);
-    }
-  });
-
   return (
     <section id="apply">
       <p className="breadcrumb">.05 / Apply</p>
@@ -42,47 +19,9 @@ export default function Apply() {
             <p>{item.content}</p>
           </li>
         ))}
-        <li></li>
       </ul>
       <hr className="line"></hr>
-      <div className="testimonials">
-        <h3>See some testimonials from previous participants:</h3>
-        <div className="navigation-wrapper">
-          <div
-            ref={sliderRef}
-            className="keen-slider"
-            style={{ maxWidth: 700, minWidth: 700 }}
-          >
-            {testimonialInfo.map(item => (
-              <div
-                className="keen-slider__slide testimonial-slide"
-                key={item.id}
-              >
-                <p className="testimonial-text">{item.testimonial}</p>
-                <p className="reviewer">- {item.reviewer}</p>
-              </div>
-            ))}
-          </div>
-          {loaded && instanceRef.current && (
-            <div className="buttons">
-              <button
-                onClick={(e: any) =>
-                  e.stopPropagation() || instanceRef.current?.prev()
-                }
-              >
-                &lt;
-              </button>
-              <button
-                onClick={(e: any) =>
-                  e.stopPropagation() || instanceRef.current?.next()
-                }
-              >
-                &gt;
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
+      <Testimonial />
       <Footer />
     </section>
   );