fix: replacing the light mode bg in to nextui-pro section (#4355)

* fix: replacing the light mode bg and adding bg to nextui-pro section on mobile * fix: making the transitions smoother * chore: removing the bg on mobile devices * fix: pro section and improvements --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
nextui-org · Dec 20, 2024 · c1baa74 · c1baa74
1 parent 7b7408c
commit c1baa74
Show file tree

Hide file tree

Showing 20 changed files with 249 additions and 204 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/apps/docs/components/marketing/nextui-pro-section/index.ts 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
@@ -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
@@ -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
@@ -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}
+    />
+  );
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export {NextUIProSection} from "./nextui-pro-section";