🐛 UI fixes to Key Features Component (#2424)

* UI fixes * rm empty var * rm logic from nonHoveredStyles
tinacms · Nov 5, 2024 · adf2e78 · adf2e78
1 parent 39b30ef
commit adf2e78
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/components/blocks/CarouselFeature.tsx b/components/blocks/CarouselFeature.tsx
@@ -22,7 +22,6 @@ const CarouselItem = ({
 
   const commonStyles =
     'transition-all delay-[50] duration-500 hover:scale-105 hover:z-20';
-  const nonHoveredStyles = 'pl-4';
 
   const actionsArray = button ? [button] : [];
 
@@ -36,11 +35,8 @@ const CarouselItem = ({
 
   return (
     <div
-      className={`${
-        isHovered && !isSmallOrMediumScreen
-          ? 'group block bg-gradient-to-br from-white/25 via-white/50 to-white/75 shadow-2xl pl-6 pr-8 md:py-9 md:pr-11 lg:pb-8 lg:pt-8 lg:pr-4 rounded-2xl'
-          : nonHoveredStyles
-      } ${commonStyles}`}
+      className={`
+           'group block bg-gradient-to-br from-white/25 via-white/50 to-white/75 shadow-2xl pl-6 pr-8 md:py-9 md:pr-11 lg:pb-8 lg:pt-8 lg:pr-4 rounded-2xl ${commonStyles}`}
       onClick={() => onClick(index)}
       style={{ textDecoration: 'none', overflow: 'visible' }}
     >
@@ -63,7 +59,7 @@ const CarouselItem = ({
           )}
           {headline && (
             <h3
-              className={` md:text-3xl text-2xl font-tuner leading-tight cursor-pointer pl-4 ${
+              className={` md:text-3xl text-2xl font-tuner leading-tight cursor-pointer pl-3 ${
                 isHovered && !isSmallOrMediumScreen
                   ? 'text-transparent lg:text-3xl bg-gradient-to-br from-orange-400 cursor-default via-orange-500 to-orange-600 bg-clip-text'
                   : 'text-black lg:text-xl'
@@ -81,12 +77,14 @@ const CarouselItem = ({
           }`}
         >
           {textDisplayCondition && (
-            <p className={`md:pl-12 lg:pl-9 text-lg font-medium slide-up`}>
+            <p
+              className={`md:pl-12 lg:pl-13 pl-9 text-lg font-medium slide-up`}
+            >
               {text}
             </p>
           )}
           {buttonDisplayCondition && (
-            <div className={`md:pl-6 lg:pl-7 slide-up`}>
+            <div className={`md:pl-6 lg:pl-6 pl-3 slide-up flex justify-start`}>
               <Actions items={actionsArray} />
             </div>
           )}