From 4346a0742f4e4edca35ae2b96fa5c635394d3f7f Mon Sep 17 00:00:00 2001
From: Rishabh Shah <shahrishabh7@gmail.com>
Date: Tue, 18 Jul 2023 11:30:44 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=99=20Added=20left=20chevron=20on=20la?=
 =?UTF-8?q?nding=20page=20(#1089)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fixed banner badge on landing :sparkles

* added left button to landing carousel :rewind
---
 next/src/components/BannerBadge.tsx  |  2 +-
 next/src/components/landing/Hero.tsx | 66 ++++++++++++++++++----------
 2 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/next/src/components/BannerBadge.tsx b/next/src/components/BannerBadge.tsx
index 0d8a7b5340..c98d3875d9 100644
--- a/next/src/components/BannerBadge.tsx
+++ b/next/src/components/BannerBadge.tsx
@@ -7,7 +7,7 @@ import clsx from "clsx";
 type BadgeProps = PropsWithChildren<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
 
 const BannerBadge = ({ children, className, ...props }: BadgeProps) => (
-  <div className="rounded-full bg-gradient-to-tl from-[#A02BFE] via-[#02FCF1] to-[#A02BFE] p-[0.75px] subpixel-antialiased">
+  <div className="rounded-full bg-gradient-to-tl from-[#A02BFE] via-[#02FCF1] to-[#A02BFE] p-[1px] subpixel-antialiased">
     <a
       className={clsx(
         "animate-border-pulse py group relative flex w-max cursor-pointer items-center gap-2 rounded-full bg-black px-4 py-2 text-sm text-white",
diff --git a/next/src/components/landing/Hero.tsx b/next/src/components/landing/Hero.tsx
index 8db73d02a7..9804ef47cf 100644
--- a/next/src/components/landing/Hero.tsx
+++ b/next/src/components/landing/Hero.tsx
@@ -7,7 +7,7 @@ import TextButton from "../TextButton";
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import Image from "next/image";
-import { FaChevronRight } from "react-icons/fa";
+import { FaChevronRight, FaChevronLeft } from "react-icons/fa";
 import HeroCard from "../HeroCard";
 import PurpleHeroIcon from "../../../public/icons/icon-hero-purple.svg";
 import GreenHeroIcon from "../../../public/icons/icon-hero-green.svg";
@@ -22,9 +22,18 @@ const Hero: React.FC<{ className?: string }> = ({ className }) => {
   const [sliderIndex, setSliderIndex] = useState(0);
   const totalCards = roles.length;
 
-  const handleSliderButton = (increment: number) => {
-    const newIndex = (sliderIndex + increment + totalCards) % totalCards;
-    setSliderIndex(newIndex);
+  const handleSliderButtonLeft = (decrement: number) => {
+    if (sliderIndex != 0) {
+      const newIndex = (sliderIndex - decrement + totalCards) % totalCards;
+      setSliderIndex(newIndex);
+    }
+  };
+
+  const handleSliderButtonRight = (increment: number) => {
+    if (sliderIndex != roles.length - 2) {
+      const newIndex = (sliderIndex + increment + totalCards) % totalCards;
+      setSliderIndex(newIndex);
+    }
   };
 
   return (
@@ -70,30 +79,42 @@ const Hero: React.FC<{ className?: string }> = ({ className }) => {
               Experience a new way of working.
             </p>
           </div>
-          <div className="relative hidden w-full items-center overflow-hidden sm:max-w-[40em] md:flex">
-            <motion.div
-              className="z-20 flex gap-5"
-              animate={{ x: `${sliderIndex * -308}px` }}
-              transition={{ duration: 0.5, type: "spring", stiffness: 60 }}
+
+          <div className="relative hidden w-full items-center sm:max-w-[40em] md:flex">
+            <button
+              onClick={() => handleSliderButtonLeft(1)}
+              className="group absolute left-0 -translate-x-5 z-30 flex h-6 w-8 items-center justify-center rounded-full border border-white/20 bg-black bg-gradient-to-r from-white/10 to-black hover:border-white/30"
             >
-              {roles.map((role, index) => (
-                <HeroCard
-                  key={role.title}
-                  title={role.title}
-                  subtitle={role.subtitle}
-                  leftIcon={role.icon}
-                  onClick={() => {
-                    router.push("/").catch(console.error);
-                  }}
-                />
-              ))}
-            </motion.div>
+              <FaChevronLeft
+                size={10}
+                className="text-gray-400 transition-transform group-hover:translate-x-0.5"
+              />
+            </button>
+            <div className="relative hidden w-full items-center overflow-hidden sm:max-w-[40em] md:flex">
+              <motion.div
+                className="z-20 flex gap-5"
+                animate={{ x: `${sliderIndex * -308}px` }}
+                transition={{ duration: 0.5, type: "spring", stiffness: 60 }}
+              >
+                {roles.map((role, index) => (
+                  <HeroCard
+                    key={role.title}
+                    title={role.title}
+                    subtitle={role.subtitle}
+                    leftIcon={role.icon}
+                    onClick={() => {
+                      router.push("/").catch(console.error);
+                    }}
+                  />
+                ))}
+              </motion.div>
+            </div>
             <div
               id="tests"
               className="absolute right-0 z-20 h-full w-10 bg-gradient-to-r from-transparent to-black to-75% text-white sm:w-40"
             />
             <button
-              onClick={() => handleSliderButton(1)}
+              onClick={() => handleSliderButtonRight(1)}
               className="group absolute right-10 z-30 flex h-6 w-8 items-center justify-center rounded-full border border-white/20 bg-black bg-gradient-to-r from-white/10 to-black hover:border-white/30"
             >
               <FaChevronRight
@@ -164,3 +185,4 @@ const roles = [
 ];
 
 export default Hero;
+