diff --git a/apps/docs/app/blog/layout.tsx b/apps/docs/app/blog/layout.tsx
index 81b173e1f0..a105d13a2c 100644
--- a/apps/docs/app/blog/layout.tsx
+++ b/apps/docs/app/blog/layout.tsx
@@ -16,13 +16,21 @@ export default function DocsLayout({children}: DocsLayoutProps) {
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
       >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+        <Image
+          removeWrapper
+          alt="docs left background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
+        />
       </div>
       <div
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
       >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+        <Image
+          removeWrapper
+          alt="docs right background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png"
+        />
       </div>
 
       <ScriptProviders />
diff --git a/apps/docs/app/docs/layout.tsx b/apps/docs/app/docs/layout.tsx
index 9ed37fa8ab..1f527d98df 100644
--- a/apps/docs/app/docs/layout.tsx
+++ b/apps/docs/app/docs/layout.tsx
@@ -21,15 +21,23 @@ export default function DocsLayout({children}: DocsLayoutProps) {
       </main>
       <div
         aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
+        className="fixed hidden dark:md:block dark:opacity-100 -bottom-[30%] -left-[30%] z-0"
       >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+        <Image
+          removeWrapper
+          alt="docs left background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
+        />
       </div>
       <div
         aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
+        className="fixed hidden dark:md:block dark:opacity-70 -top-[50%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
       >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+        <Image
+          removeWrapper
+          alt="docs right background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png"
+        />
       </div>
 
       <ScriptProviders />
diff --git a/apps/docs/app/figma/page.tsx b/apps/docs/app/figma/page.tsx
index 95217bdfbb..0a1043de81 100644
--- a/apps/docs/app/figma/page.tsx
+++ b/apps/docs/app/figma/page.tsx
@@ -36,13 +36,21 @@ export default function FigmaPage() {
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
       >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+        <Image
+          removeWrapper
+          alt="docs left background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
+        />
       </div>
       <div
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
       >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+        <Image
+          removeWrapper
+          alt="docs right background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png  "
+        />
       </div>
 
       <ScriptProviders />
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
index d14b899a21..7477c05c2c 100644
--- a/apps/docs/app/page.tsx
+++ b/apps/docs/app/page.tsx
@@ -13,7 +13,7 @@ import {Community} from "@/components/marketing/community";
 import Support from "@/components/marketing/support";
 import landingContent from "@/content/landing";
 import {Sponsors} from "@/components/marketing/sponsors";
-import {NextUIProSection} from "@/components/marketing/nextui-pro-section";
+import {NextUIProSection} from "@/components/marketing/nextui-pro-section/nextui-pro-section";
 
 export default async function Home() {
   return (
diff --git a/apps/docs/components/marketing/marquee.tsx b/apps/docs/components/marketing/marquee.tsx
index dc4ed47f78..fc01c979d4 100644
--- a/apps/docs/components/marketing/marquee.tsx
+++ b/apps/docs/components/marketing/marquee.tsx
@@ -9,6 +9,7 @@ import {cn} from "@nextui-org/react";
 
 interface MarqueeProps {
   className?: string;
+  wrapperClassName?: string;
   reverse?: boolean;
   shadow?: boolean;
   duration?: number;
@@ -20,6 +21,7 @@ interface MarqueeProps {
 
 export const Marquee = ({
   className,
+  wrapperClassName,
   reverse,
   duration = 40,
   shadow = false,
@@ -59,14 +61,18 @@ export const Marquee = ({
       }}
     >
       <div
-        className={cn("flex w-max items-stretch gap-[--gap]", {
-          "flex-col": vertical,
-          "h-full": vertical,
-          "animate-scrolling-banner": !vertical,
-          "animate-scrolling-banner-vertical": vertical,
-          "[animation-direction:reverse]": reverse,
-          "hover:[animation-play-state:paused]": pauseOnHover,
-        })}
+        className={cn(
+          "flex w-max items-stretch gap-[--gap]",
+          {
+            "flex-col": vertical,
+            "h-full": vertical,
+            "animate-scrolling-banner": !vertical,
+            "animate-scrolling-banner-vertical": vertical,
+            "[animation-direction:reverse]": reverse,
+            "hover:[animation-play-state:paused]": pauseOnHover,
+          },
+          wrapperClassName,
+        )}
       >
         {Children.map(children, (child) =>
           child && typeof child === "object" && "type" in child ? cloneElement(child) : child,
diff --git a/apps/docs/components/marketing/nextui-pro-section.tsx b/apps/docs/components/marketing/nextui-pro-section.tsx
deleted file mode 100644
index 0563046d73..0000000000
--- a/apps/docs/components/marketing/nextui-pro-section.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-"use client";
-
-import {Button, Chip} from "@nextui-org/react";
-import {useEffect, useState} from "react";
-import {useTheme} from "next-themes";
-
-import {sectionWrapper, title, titleWrapper, subtitle} from "../primitives";
-
-import Marquee from "./marquee";
-
-import {useIsMobile} from "@/hooks/use-media-query";
-
-export const NextUIProSection = () => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const isMobile = useIsMobile();
-  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";
-  }
-
-  const mobileClassName: string = isDarkMode
-    ? "h-full w-full bg-[radial-gradient(at_40%_80%,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,_0.8)_50%,_rgba(0,0,0,1)_100%)]"
-    : "h-full w-full bg-[radial-gradient(at_40%_80%,_rgba(0,0,0,_0)_5%,_rgba(255,255,255,_0.8)_50%,_rgba(255,255,255,1)_100%)]";
-
-  const webClassName: string = isDarkMode
-    ? "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%)]"
-    : "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 = () => (
-    <svg fill="none" height="11" viewBox="0 0 13 11" width="13" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M1 6.4L4.14286 10L12 1"
-        stroke="#006FEE"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-      />
-    </svg>
-  );
-
-  return (
-    <section className={sectionWrapper({class: "mt-16 lg:mt-44 overflow-hidden"})}>
-      <div className="flex flex-col gap-8 min-h-[480px]">
-        <div className="z-30 flex w-screen h-full flex-col items-start justify-center leading-8 pt-4">
-          <Chip
-            classNames={{
-              base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
-              content: "text-tiny font-semibold",
-            }}
-            color="primary"
-            size="sm"
-          >
-            PRO
-          </Chip>
-          <div className={titleWrapper({class: "mt-2 inline md:block"})}>
-            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
-              Ship&nbsp;
-            </h1>
-            <h1
-              className={title({
-                size: "lg",
-                color: "blue",
-                class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]",
-              })}
-            >
-              faster&nbsp;
-            </h1>
-            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
-              with&nbsp;
-            </h1>
-            <div className="flex flex-col sm:flex-row">
-              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
-                beautiful&nbsp;
-              </h1>
-              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
-                components
-              </h1>
-            </div>
-          </div>
-          <p className={subtitle({class: "pr-12 text-foreground-500"})}>
-            Premade templates of over 210+ beautiful and responsive components, professionally
-            created by the team behind NextUI.
-          </p>
-          <div className="mt-4 text-foreground-600 font-medium">
-            <div className="flex gap-x-4 items-center">
-              <CheckmarkIcon />
-              210+ Components
-            </div>
-            <div className="flex gap-x-4 items-center">
-              <CheckmarkIcon />
-              Lifetime Access
-            </div>
-            <div className="flex gap-x-4 items-center">
-              <CheckmarkIcon />
-              Free Updates
-            </div>
-            <div className="flex gap-x-4 items-center">
-              <CheckmarkIcon />
-              Figma Files Included
-            </div>
-          </div>
-          <div className="mt-4">
-            <Button
-              as={"a"}
-              className="px-6 flex items-center"
-              color="primary"
-              href="https://nextui.pro?utm_source=nextui.org&utm_medium=nextui-homepage-section"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              Explore NextUI Pro
-              <svg
-                fill="none"
-                height="21"
-                viewBox="0 0 20 21"
-                width="20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12.0254 5.44189L17.0837 10.5002L12.0254 15.5586"
-                  stroke="white"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeMiterlimit="10"
-                  strokeWidth="1.5"
-                />
-                <path
-                  d="M2.91602 10.5H16.941"
-                  stroke="white"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeMiterlimit="10"
-                  strokeWidth="1.5"
-                />
-              </svg>
-            </Button>
-          </div>
-        </div>
-        <div className="overflow-hidden">
-          <Marquee
-            vertical
-            className="h-78 hidden md:flex w-screen mt-4 md:absolute md:top-0 md:inset-0 isolate md:max-h-dvh"
-            duration={isMobile ? 240 : 60}
-          >
-            <img
-              alt="Hero Background"
-              className="w-full"
-              height={3255}
-              loading="lazy"
-              src={imgSrc}
-              width={1920}
-            />
-          </Marquee>
-          <div className="absolute md:hidden inset-0 pointer-events-none top-0 z-20">
-            <div className={mobileClassName} />
-          </div>
-
-          <div className="absolute hidden md:block md:inset-0 md:pointer-events-none md:top-0 md:z-20">
-            <div className={webClassName} />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
diff --git a/apps/docs/components/marketing/nextui-pro-section/index.ts b/apps/docs/components/marketing/nextui-pro-section/index.ts
new file mode 100644
index 0000000000..20e3f8cf66
--- /dev/null
+++ b/apps/docs/components/marketing/nextui-pro-section/index.ts
@@ -0,0 +1 @@
+export {NextUIProSection} from "./nextui-pro-section";
diff --git a/apps/docs/components/marketing/nextui-pro-section/nextui-pro-button.tsx b/apps/docs/components/marketing/nextui-pro-section/nextui-pro-button.tsx
new file mode 100644
index 0000000000..2abaab67c8
--- /dev/null
+++ b/apps/docs/components/marketing/nextui-pro-section/nextui-pro-button.tsx
@@ -0,0 +1,32 @@
+import {Button} from "@nextui-org/react";
+
+export const NextUIProButton = () => (
+  <Button
+    as={"a"}
+    className="px-6 flex items-center"
+    color="primary"
+    href="https://nextui.pro?utm_source=nextui.org&utm_medium=nextui-homepage-section"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    Explore NextUI Pro
+    <svg fill="none" height="21" viewBox="0 0 20 21" width="20" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.0254 5.44189L17.0837 10.5002L12.0254 15.5586"
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M2.91602 10.5H16.941"
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+    </svg>
+  </Button>
+);
diff --git a/apps/docs/components/marketing/nextui-pro-section/nextui-pro-chip.tsx b/apps/docs/components/marketing/nextui-pro-section/nextui-pro-chip.tsx
new file mode 100644
index 0000000000..755149f205
--- /dev/null
+++ b/apps/docs/components/marketing/nextui-pro-section/nextui-pro-chip.tsx
@@ -0,0 +1,14 @@
+import {Chip} from "@nextui-org/react";
+
+export const NextUIProChip = () => (
+  <Chip
+    classNames={{
+      base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
+      content: "text-tiny font-semibold",
+    }}
+    color="primary"
+    size="sm"
+  >
+    PRO
+  </Chip>
+);
diff --git a/apps/docs/components/marketing/nextui-pro-section/nextui-pro-image.tsx b/apps/docs/components/marketing/nextui-pro-section/nextui-pro-image.tsx
new file mode 100644
index 0000000000..20aec165dc
--- /dev/null
+++ b/apps/docs/components/marketing/nextui-pro-section/nextui-pro-image.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import {useTheme} from "next-themes";
+import NextImage from "next/image";
+import {useEffect, useState} from "react";
+
+export const NextUIProImage = () => {
+  const [mounted, setMounted] = useState(false);
+  const {theme} = useTheme();
+  const isDarkMode = theme === "dark";
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  let imgSrc = isDarkMode
+    ? "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextuipro-section-background.webp"
+    : "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextuipro-section-background-light.webp";
+
+  if (!mounted) return null;
+
+  return (
+    <NextImage
+      alt="Hero Background"
+      className="opacity-0 animate-fadeIn"
+      height={3255}
+      quality={100}
+      src={imgSrc}
+      width={1920}
+    />
+  );
+};
diff --git a/apps/docs/components/marketing/nextui-pro-section/nextui-pro-section.tsx b/apps/docs/components/marketing/nextui-pro-section/nextui-pro-section.tsx
new file mode 100644
index 0000000000..97c98964f9
--- /dev/null
+++ b/apps/docs/components/marketing/nextui-pro-section/nextui-pro-section.tsx
@@ -0,0 +1,105 @@
+import {memo} from "react";
+import clsx from "clsx";
+
+import {sectionWrapper, title, titleWrapper, subtitle} from "../../primitives";
+import Marquee from "../marquee";
+
+import {NextUIProButton} from "./nextui-pro-button";
+import {NextUIProChip} from "./nextui-pro-chip";
+import {NextUIProImage} from "./nextui-pro-image";
+
+const CheckmarkIcon = memo(() => (
+  <svg fill="none" height="11" viewBox="0 0 13 11" width="13" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1 6.4L4.14286 10L12 1"
+      stroke="#006FEE"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+  </svg>
+));
+
+CheckmarkIcon.displayName = "CheckmarkIcon";
+
+export const NextUIProSection = () => {
+  return (
+    <section
+      className={sectionWrapper({
+        class: "flex-row items-end relative mt-16 lg:mt-44 overflow-hidden",
+      })}
+    >
+      <div className="flex min-h-[480px]">
+        <div className="w-full w-full relative z-30 flex h-full flex-col items-start justify-center leading-8 pt-4">
+          <NextUIProChip />
+          <div className={titleWrapper({class: "mt-2 inline md:block"})}>
+            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+              Ship&nbsp;
+            </h1>
+            <h1
+              className={title({
+                size: "lg",
+                color: "blue",
+                class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]",
+              })}
+            >
+              faster&nbsp;
+            </h1>
+            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+              with&nbsp;
+            </h1>
+            <div className="flex flex-col sm:flex-row">
+              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+                beautiful&nbsp;
+              </h1>
+              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+                components
+              </h1>
+            </div>
+          </div>
+          <p className={subtitle({class: "pr-12 text-foreground-500"})}>
+            Premade templates of over 210+ beautiful and responsive components, professionally
+            created by the team behind NextUI.
+          </p>
+          <ul className="mt-4 text-foreground-600 font-medium">
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              210+ Components
+            </li>
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Lifetime Access
+            </li>
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Free Updates
+            </li>
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Figma Files Included
+            </li>
+          </ul>
+          <div className="mt-4">
+            <NextUIProButton />
+          </div>
+        </div>
+      </div>
+      <div className="w-screen">
+        <Marquee
+          vertical
+          className="relative flex overflow-visible items-center min-h-[480px]"
+          duration={90}
+          wrapperClassName="absolute md:top-24 -left-[47%] w-[1000px]"
+        >
+          <NextUIProImage />
+        </Marquee>
+        <div
+          className={clsx(
+            "absolute inset-0 pointer-events-none z-20 bg-white dark:bg-black",
+            "[-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%)]",
+          )}
+        />
+      </div>
+    </section>
+  );
+};
diff --git a/apps/docs/config/github-info.json b/apps/docs/config/github-info.json
index b779a1cf27..7b69d9f4f6 100644
--- a/apps/docs/config/github-info.json
+++ b/apps/docs/config/github-info.json
@@ -1,6 +1,6 @@
 {
-  "stars": { "raw": 22226, "formatted": "22.2K" },
-  "forks": 1566,
-  "subscribers": 83,
-  "openIssues": 406
+  "stars": { "raw": 22380, "formatted": "22.4K" },
+  "forks": 1580,
+  "subscribers": 85,
+  "openIssues": 428
 }
diff --git a/apps/docs/content/docs/guide/introduction.mdx b/apps/docs/content/docs/guide/introduction.mdx
index 242c7f8a8c..85428bebb6 100644
--- a/apps/docs/content/docs/guide/introduction.mdx
+++ b/apps/docs/content/docs/guide/introduction.mdx
@@ -9,7 +9,7 @@ Welcome to the NextUI documentation!
 
 <NextImage
   priority
-  src="https://nextui.org/nextui-banner.png"
+  src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextui-banner.jpeg"
   quality={100}
   width={700}
   height={350}
diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js
index 0b9b8529dc..472b829f60 100644
--- a/apps/docs/next.config.js
+++ b/apps/docs/next.config.js
@@ -34,6 +34,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "nextui.org",
       },
+      {
+        protocol: "https",
+        hostname: "heroui-assets.nyc3.cdn.digitaloceanspaces.com",
+      },
     ],
   },
 };
diff --git a/apps/docs/package.json b/apps/docs/package.json
index f051f18fcc..eb4c555a86 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -39,6 +39,7 @@
     "@nextui-org/use-clipboard": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
+    "clsx": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@react-aria/focus": "3.19.0",
     "@react-aria/i18n": "3.12.4",
diff --git a/apps/docs/public/images/nextuipro-section-background-light.webp b/apps/docs/public/images/nextuipro-section-background-light.webp
index 7d9b6abf91..55699e9d6a 100644
Binary files a/apps/docs/public/images/nextuipro-section-background-light.webp and b/apps/docs/public/images/nextuipro-section-background-light.webp differ
diff --git a/apps/docs/public/images/nextuipro-section-background-light@mobile.webp b/apps/docs/public/images/nextuipro-section-background-light@mobile.webp
index 9a56585d08..8ea197c90c 100644
Binary files a/apps/docs/public/images/nextuipro-section-background-light@mobile.webp and b/apps/docs/public/images/nextuipro-section-background-light@mobile.webp differ
diff --git a/apps/docs/public/images/nextuipro-section-background.webp b/apps/docs/public/images/nextuipro-section-background.webp
index b73836c219..d5a2758b20 100644
Binary files a/apps/docs/public/images/nextuipro-section-background.webp and b/apps/docs/public/images/nextuipro-section-background.webp differ
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
index 8636036624..391e7fdc27 100644
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@@ -327,6 +327,10 @@ module.exports = {
           from: {transform: "translateY(0)"},
           to: {transform: "translateY(calc(-50% - var(--gap)/2))"},
         },
+        fadeIn: {
+          "0%": { opacity: 0 },
+          "100%": { opacity: 1 },
+        },
       },
       animation: {
         heartbeat: "heartbeat 1s ease-in-out infinite",
@@ -336,6 +340,7 @@ module.exports = {
         "text-gradient": "text-gradient 4s linear 0s infinite normal forwards running",
         "scrolling-banner": "scrolling-banner var(--duration) linear infinite",
         "scrolling-banner-vertical": "scrolling-banner-vertical var(--duration) linear infinite",
+        fadeIn: "fadeIn 0.5s ease-in-out forwards",
       },
       maxWidth: {
         "8xl": "90rem", // 1440px
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a37dc0a492..0d04cfe078 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -382,6 +382,9 @@ importers:
       canvas-confetti:
         specifier: ^1.9.2
         version: 1.9.3
+      clsx:
+        specifier: ^1.2.1
+        version: 1.2.1
       cmdk:
         specifier: ^0.2.0
         version: 0.2.1(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)