From 309e77ac0f520ba6c3569fcdf9d5fbc39d813bae Mon Sep 17 00:00:00 2001
From: Rudransh Pratap Singh <87255169+CoderFleet@users.noreply.github.com>
Date: Tue, 29 Oct 2024 01:54:59 +0530
Subject: [PATCH 1/3] =?UTF-8?q?Improvement=E2=9C=A8:=20Add=20slide=20anima?=
 =?UTF-8?q?tion=20to=20next=20and=20prev=20buttons=20using=20Framer=20Moti?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ui/ReviewCarousel.jsx | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx
index 670aa375..d55862e2 100644
--- a/frontend/src/components/ui/ReviewCarousel.jsx
+++ b/frontend/src/components/ui/ReviewCarousel.jsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
 
 const ReviewCarousel = () => {
   const [active, setActive] = useState(3);
@@ -148,8 +149,27 @@ const ReviewCarousel = () => {
 
         ))}
 
-        <button id="next" className=' absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 right-[50px] max-sm:text-white max-sm:text-2xl max-sm:right-2' onClick={() => setActive(prev => (prev + 1 < items.length ? prev + 1 : prev))}>{">>"}</button>
-        <button id="prev" className=' absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 left-[50px] max-sm:text-white max-sm:text-2xl max-sm:left-2' onClick={() => setActive(prev => (prev - 1 >= 0 ? prev - 1 : prev))}> {"<<"}</button>
+        <motion.button
+          id="next"
+          className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 right-[50px] max-sm:text-white max-sm:text-2xl max-sm:right-2"
+          onClick={() =>
+            setActive((prev) => (prev + 1 < items.length ? prev + 1 : prev))
+          }
+          whileHover={{ x: 10, color: '#00B2CA', opacity: 1 }}
+        >
+          {'>>'}
+        </motion.button>
+        <motion.button
+          id="prev"
+          className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 left-[50px] max-sm:text-white max-sm:text-2xl max-sm:left-2"
+          onClick={() => 
+            setActive((prev) => (prev - 1 >= 0 ? prev - 1 : prev))
+          }
+          whileHover={{ x: -10, color: '#00B2CA', opacity: 1 }}
+        >
+          {' '}
+          {'<<'}
+        </motion.button>
       </div>
     </div>
   );

From bdcc4e5cec0cfd5f3b078195dd7335685c495fec Mon Sep 17 00:00:00 2001
From: Rudransh Pratap Singh <87255169+CoderFleet@users.noreply.github.com>
Date: Tue, 29 Oct 2024 02:00:14 +0530
Subject: [PATCH 2/3] Improved Code Documentation

---
 frontend/src/components/ui/ReviewCarousel.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx
index d55862e2..4ea6e50c 100644
--- a/frontend/src/components/ui/ReviewCarousel.jsx
+++ b/frontend/src/components/ui/ReviewCarousel.jsx
@@ -149,6 +149,9 @@ const ReviewCarousel = () => {
 
         ))}
 
+        // Changed Buttons to motion.button provided by framer
+        // whileHover is a framer specific attribute
+        // It displaces buttons by 10px on hover for that nice slide animation
         <motion.button
           id="next"
           className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 right-[50px] max-sm:text-white max-sm:text-2xl max-sm:right-2"

From 8fe39a48651965a5e0b1a4766eb39347f2411e8b Mon Sep 17 00:00:00 2001
From: Rudransh Pratap Singh <87255169+CoderFleet@users.noreply.github.com>
Date: Tue, 29 Oct 2024 02:09:32 +0530
Subject: [PATCH 3/3] More Fixes

---
 frontend/src/components/ui/ReviewCarousel.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx
index 4ea6e50c..7031b5f8 100644
--- a/frontend/src/components/ui/ReviewCarousel.jsx
+++ b/frontend/src/components/ui/ReviewCarousel.jsx
@@ -149,9 +149,10 @@ const ReviewCarousel = () => {
 
         ))}
 
-        // Changed Buttons to motion.button provided by framer
+        {// Changed Buttons to motion.button provided by framer
         // whileHover is a framer specific attribute
         // It displaces buttons by 10px on hover for that nice slide animation
+        }
         <motion.button
           id="next"
           className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 right-[50px] max-sm:text-white max-sm:text-2xl max-sm:right-2"
@@ -165,9 +166,7 @@ const ReviewCarousel = () => {
         <motion.button
           id="prev"
           className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 left-[50px] max-sm:text-white max-sm:text-2xl max-sm:left-2"
-          onClick={() => 
-            setActive((prev) => (prev - 1 >= 0 ? prev - 1 : prev))
-          }
+          onClick={() => setActive((prev) => (prev - 1 >= 0 ? prev - 1 : prev))}
           whileHover={{ x: -10, color: '#00B2CA', opacity: 1 }}
         >
           {' '}