diff --git a/apps/docs/components/marketing/nextui-pro-section.tsx b/apps/docs/components/marketing/nextui-pro-section.tsx index 5a842c2190..01d0575f94 100644 --- a/apps/docs/components/marketing/nextui-pro-section.tsx +++ b/apps/docs/components/marketing/nextui-pro-section.tsx @@ -1,8 +1,9 @@ "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"; +import Head from "next/head"; import {sectionWrapper, title, titleWrapper, subtitle} from "../primitives"; @@ -33,13 +34,24 @@ export const NextUIProSection = () => { : "/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%)]"; + 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) => { + const img = new Image(); - 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%)]"; + img.src = src; + }); + }; + + preloadImages(imagesToPreload); + }, []); if (!mounted) return null; @@ -56,127 +68,132 @@ export const NextUIProSection = () => { ); return ( -
-
-
- - PRO - -
-

- Ship  -

-

+ + + + +
+
+
+ - faster  -

-

- with  -

-
+ PRO + +

- beautiful  + Ship  +

+

+ faster 

- components + with 

+
+

+ beautiful  +

+

+ components +

+
-
-

- Premade templates of over 210+ beautiful and responsive components, professionally - created by the team behind NextUI. -

-
-
- - 210+ Components -
-
- - Lifetime Access +

+ Premade templates of over 210+ beautiful and responsive components, professionally + created by the team behind NextUI. +

+
+
+ + 210+ Components +
+
+ + Lifetime Access +
+
+ + Free Updates +
+
+ + Figma Files Included +
-
- - Free Updates -
-
- - Figma Files Included +
+
-
-
+ + ); }; 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