From f5d64a10913054e6e8c3aa0c560b132241610801 Mon Sep 17 00:00:00 2001
From: Maharshi Alpesh <maharshialpesh@gmail.com>
Date: Fri, 20 Dec 2024 11:35:51 +0530
Subject: [PATCH] chore: removing the bg on mobile devices

---
 .../marketing/nextui-pro-section.tsx          | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/apps/docs/components/marketing/nextui-pro-section.tsx b/apps/docs/components/marketing/nextui-pro-section.tsx
index 102676b308..f8c554c10f 100644
--- a/apps/docs/components/marketing/nextui-pro-section.tsx
+++ b/apps/docs/components/marketing/nextui-pro-section.tsx
@@ -22,24 +22,14 @@ export const NextUIProSection = () => {
   const {theme} = useTheme();
   const isDarkMode = theme === "dark";
 
-  let imgSrc: string;
-
-  if (isDarkMode) {
-    imgSrc = isMobile
-      ? "/images/nextuipro-section-background@mobile.webp"
-      : "/images/nextuipro-section-background.webp";
-  } else {
-    imgSrc = isMobile
-      ? "/images/nextuipro-section-background-light@mobile.webp"
-      : "/images/nextuipro-section-background-light.webp";
-  }
+  let imgSrc: string = isDarkMode
+    ? "/images/nextuipro-section-background.webp"
+    : "/images/nextuipro-section-background-light.webp";
 
   useEffect(() => {
     const imagesToPreload = [
       "/images/nextuipro-section-background.webp",
       "/images/nextuipro-section-background-light.webp",
-      "/images/nextuipro-section-background@mobile.webp",
-      "/images/nextuipro-section-background-light@mobile.webp",
     ];
     const preloadImages = (images) => {
       images.forEach((src) => {
@@ -164,7 +154,7 @@ export const NextUIProSection = () => {
             </Button>
           </div>
         </div>
-        <div className="overflow-hidden">
+        <div className={cn("overflow-hidden", isMobile && "hidden")}>
           <Marquee
             vertical
             className="flex opacity-15 md:opacity-100 w-screen mt-4 absolute top-0 inset-0 isolate max-h-dvh "
@@ -184,8 +174,6 @@ export const NextUIProSection = () => {
               "absolute inset-0 pointer-events-none z-20 bg-white dark:bg-black",
               !isMobile &&
                 "[-webkit-mask-image:radial-gradient(at_70%_50%,_rgba(255,255,255,0)_20%,_rgba(255,255,255,0.8)_40%,_rgba(0,0,0,1)_60%)]",
-              isMobile &&
-                "[-webkit-mask-image:linear-gradient(to_left,_rgba(255,255,255,_0)_10%,_rgba(0,0,0,1)_100%)]",
             )}
           />
         </div>