black line removed from gif

src/components/FeatureCardSection.tsx

@@ -65,7 +65,12 @@ const FeatureCardSection: React.FC<FeatureCardSectionProps> = ({
                   alt={card.imageAlt}
                   width={360}
                   height={480}
-                  className="h-full w-full"
+                  className="h-full w-full clip-path"
+                  style={
+                    card.imageUrl.endsWith(".gif")
+                      ? { clipPath: "inset(0 4px 0 0)" }
+                      : {}
+                  }
                 />
               </div>
               <div className="text-[#252525] w-[90%] mx-auto mt-[20px] text-2xl font-semibold font-['Inter']">

src/components/FeatureSection.tsx

@@ -66,13 +66,16 @@ const FeatureSection: React.FC<DesignToolProps> = ({
       className={`w-full  rotate-180 ${imageContainerClasses}`}
       style={{ backgroundColor }}
     >
-      <div className="rotate-180 ">
+      <div className="rotate-180">
         <Image
           className="clip-path"
           src={imageUrl}
           alt={imageAlt}
-          width={684}
+          width={650}
           height={491}
+          style={
+            imageUrl.endsWith(".gif") ? { clipPath: "inset(0 4px 0 0)" } : {}
+          }
         />
       </div>
     </div>

src/components/PricingSection.tsx

@@ -72,7 +72,7 @@ export default function PricingSection() {
       name: "Growth",
       users: "10 user",
       monthlyPrice: "$59",
-      yearlyPrice: "$50",
+      yearlyPrice: "$30",
       description:
         "Advanced features to boost productivity and expand your reach",
       highlight: true,