diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index 411e86fb08..d14b899a21 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -13,6 +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"; export default async function Home() { return ( @@ -25,6 +26,7 @@ export default async function Home() { + Loading...}> diff --git a/apps/docs/components/marketing/marquee.tsx b/apps/docs/components/marketing/marquee.tsx new file mode 100644 index 0000000000..dc4ed47f78 --- /dev/null +++ b/apps/docs/components/marketing/marquee.tsx @@ -0,0 +1,79 @@ +"use client"; + +import type {ReactNode} from "react"; +import type {ScrollShadowProps} from "@nextui-org/react"; + +import {Children, cloneElement} from "react"; +import {ScrollShadow} from "@nextui-org/react"; +import {cn} from "@nextui-org/react"; + +interface MarqueeProps { + className?: string; + reverse?: boolean; + shadow?: boolean; + duration?: number; + pauseOnHover?: boolean; + vertical?: boolean; + children?: ReactNode; + [key: string]: unknown; +} + +export const Marquee = ({ + className, + reverse, + duration = 40, + shadow = false, + pauseOnHover = false, + vertical = false, + children, + ...props +}: MarqueeProps) => { + const shadowProps: ScrollShadowProps = { + isEnabled: shadow, + offset: -20, + size: 300, + orientation: "vertical", + visibility: "both", + }; + + const Wrapper = shadow ? ScrollShadow : "div"; + + const componentProps = shadow ? {...props, ...shadowProps} : props; + + return ( + +
+ {Children.map(children, (child) => + child && typeof child === "object" && "type" in child ? cloneElement(child) : child, + )} +
+ + ); +}; + +export default Marquee; diff --git a/apps/docs/components/marketing/nextui-pro-section.tsx b/apps/docs/components/marketing/nextui-pro-section.tsx new file mode 100644 index 0000000000..0563046d73 --- /dev/null +++ b/apps/docs/components/marketing/nextui-pro-section.tsx @@ -0,0 +1,182 @@ +"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 = () => ( + + + + ); + + return ( +
+
+
+ + PRO + +
+

+ Ship  +

+

+ faster  +

+

+ with  +

+
+

+ beautiful  +

+

+ components +

+
+
+

+ 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 +
+
+
+ +
+
+
+ + Hero Background + +
+
+
+ +
+
+
+
+
+
+ ); +}; diff --git a/apps/docs/public/images/nextuipro-section-background-light.webp b/apps/docs/public/images/nextuipro-section-background-light.webp new file mode 100644 index 0000000000..7d9b6abf91 Binary files /dev/null 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 new file mode 100644 index 0000000000..9a56585d08 Binary files /dev/null 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 new file mode 100644 index 0000000000..b73836c219 Binary files /dev/null and b/apps/docs/public/images/nextuipro-section-background.webp differ diff --git a/apps/docs/public/images/nextuipro-section-background@mobile.webp b/apps/docs/public/images/nextuipro-section-background@mobile.webp new file mode 100644 index 0000000000..ad97230242 Binary files /dev/null and b/apps/docs/public/images/nextuipro-section-background@mobile.webp differ diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js index 1a169f16ed..8636036624 100644 --- a/apps/docs/tailwind.config.js +++ b/apps/docs/tailwind.config.js @@ -319,6 +319,14 @@ module.exports = { backgroundPosition: "-200% center", }, }, + "scrolling-banner": { + from: {transform: "translateX(0)"}, + to: {transform: "translateX(calc(-50% - var(--gap)/2))"}, + }, + "scrolling-banner-vertical": { + from: {transform: "translateY(0)"}, + to: {transform: "translateY(calc(-50% - var(--gap)/2))"}, + }, }, animation: { heartbeat: "heartbeat 1s ease-in-out infinite", @@ -326,6 +334,8 @@ module.exports = { expand: "expand 6s ease-out infinite both", "expand-opacity": "expand-opacity 6s linear infinite both", "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", }, maxWidth: { "8xl": "90rem", // 1440px