fix ai-integration page hero image, added linear fade

Author: DavidK4leido5

apps/codebility/app/(marketing)/ai-integration/_components/AiIntegrationHeroBg.tsx

@@ -16,7 +16,9 @@ const HeroBackground = () => {
           height={0}
           src={outerSpace}
           alt="Outer's Space Background"
-          className="absolute top-0 -translate-x-1/2 object-contain"
+          className="mask-fade-x absolute left-1/2 top-0 h-auto w-full max-w-[1440px] -translate-x-1/2 object-contain"
+          sizes="(min-width: 1441px) 1440px, 100vw"
+          priority
         />
         <div
           className="absolute -top-96 left-0 h-[1100px] w-80 blur-3xl md:w-1/2 xl:-top-96 xl:left-10 xl:h-[1229.24px] xl:w-[663.11px]"
@@ -25,7 +27,7 @@ const HeroBackground = () => {
             background:
               "radial-gradient(50% 50% at 50% 50%, rgba(151, 71, 255, 0.3) 0%, rgba(3, 3, 3, 0.3) 100%)",
           }}
-        ></div>
+        />
       </div>
     </>
   );

apps/codebility/app/(marketing)/ai-integration/page.tsx

@@ -48,7 +48,6 @@ const AiIntegration = () => {
             <Partner />
             <PartnerReactFlow />
             <NextStep />
-            <Footer />
         </div>
     );
 };

apps/codebility/app/globals.css

@@ -17,6 +17,25 @@
     @apply flex items-center justify-start;
   }
 
+  @media (min-width: 1441px) {
+    .mask-fade-x {
+      -webkit-mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        #000 14%,
+        #000 86%,
+        transparent 100%
+      );
+      mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        #000 14%,
+        #000 86%,
+        transparent 100%
+      );
+    }
+  }
+
   .no-horizontal-scroll {
     overflow-x: hidden;
   }