fix: making the transitions smoother

nextui-org · Dec 16, 2024 · e8abe24 · e8abe24
1 parent 3b3135a
commit e8abe24
Showing 1 changed file with 30 additions and 12 deletions.
diff --git a/apps/docs/components/marketing/nextui-pro-section.tsx b/apps/docs/components/marketing/nextui-pro-section.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import {Button, Chip} from "@nextui-org/react";
+import {Button, Chip, cn} from "@nextui-org/react";
 import {useEffect, useState} from "react";
 import {useTheme} from "next-themes";
 
@@ -32,15 +32,6 @@ export const NextUIProSection = () => {
       ? "/images/nextuipro-section-background-light@mobile.webp"
       : "/images/nextuipro-section-background-light.webp";
   }
-
-  const mobileClassName: string = isDarkMode
-    ? "h-full w-full bg-[linear-gradient(to_left,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,1)_100%)]"
-    : "h-full w-full bg-[linear-gradient(to_left,_rgba(0,0,0,_0)_5%,_rgba(255,255,255,1)_100%)]";
-
-  const webClassName: string = isDarkMode
-    ? "ease-in-out h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(255,255,255,_0)_20%,_rgba(0,0,0,_0.8)_40%,_rgba(0,0,0,1)_100%)]"
-    : "ease-in-out h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(0,0,0,_0)_20%,_rgba(255,255,255,_0.9)_40%,_rgba(255,255,255,1)_100%)]";
-
   if (!mounted) return null;
 
   const CheckmarkIcon = () => (
@@ -168,12 +159,39 @@ export const NextUIProSection = () => {
               width={1920}
             />
           </Marquee>
+
+          <div className="absolute md:hidden inset-0 pointer-events-none top-0 z-20">
+            <div
+              className={cn(
+                "transition transition-opacity h-full w-full bg-[linear-gradient(to_left,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,1)_100%)]",
+                isDarkMode && isMobile ? "opacity-100" : "opacity-0",
+              )}
+            />
+          </div>
           <div className="absolute md:hidden inset-0 pointer-events-none top-0 z-20">
-            <div className={mobileClassName} />
+            <div
+              className={cn(
+                "transition transition-opacity  h-full w-full bg-[linear-gradient(to_left,_rgba(0,0,0,_0)_5%,_rgba(255,255,255,1)_100%)]",
+                !isDarkMode && isMobile ? "opacity-100" : "opacity-0",
+              )}
+            />
           </div>
 
           <div className="absolute hidden md:block md:inset-0 md:pointer-events-none md:top-0 md:z-20">
-            <div className={webClassName} />
+            <div
+              className={cn(
+                "transition transition-opacity ease-linear delay-75 duration-300 h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(255,255,255,_0)_20%,_rgba(0,0,0,_0.8)_40%,_rgba(0,0,0,1)_100%)]",
+                isDarkMode && !isMobile ? "opacity-100" : "opacity-0",
+              )}
+            />
+          </div>
+          <div className="absolute hidden md:block md:inset-0 md:pointer-events-none md:top-0 md:z-20">
+            <div
+              className={cn(
+                "transition transition-opacity ease-linear delay-75 duration-300 h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(0,0,0,_0)_20%,_rgba(255,255,255,_0.9)_40%,_rgba(255,255,255,1)_100%)]",
+                !isDarkMode && !isMobile ? "opacity-100" : "opacity-0",
+              )}
+            />
           </div>
         </div>
       </div>