Skip to content

Commit 04fa848

Browse files
macci001macci001
committed
feat: adding nextui pro section on the landing page
1 parent b9e3e03 commit 04fa848

8 files changed

+295
-0
lines changed

‎apps/docs/app/page.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {Community} from "@/components/marketing/community";
1313
import Support from "@/components/marketing/support";
1414
import landingContent from "@/content/landing";
1515
import {Sponsors} from "@/components/marketing/sponsors";
16+
import {NextUIProSection} from "@/components/marketing/nextui-pro-section";
1617

1718
export default async function Home() {
1819
return (
@@ -25,6 +26,7 @@ export default async function Home() {
2526
<A11yOtb />
2627
<DarkMode />
2728
<Customization />
29+
<NextUIProSection />
2830
<LastButNotLeast />
2931
<Suspense fallback={<div>Loading...</div>}>
3032
<Support />

‎apps/docs/components/demos/marquee.tsx

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
"use client";
2+
3+
import type {ReactNode} from "react";
4+
import type {ScrollShadowProps} from "@nextui-org/react";
5+
6+
import {Children, cloneElement} from "react";
7+
import {ScrollShadow} from "@nextui-org/react";
8+
import {cn} from "@nextui-org/react";
9+
10+
interface MarqueeProps {
11+
className?: string;
12+
reverse?: boolean;
13+
shadow?: boolean;
14+
duration?: number;
15+
pauseOnHover?: boolean;
16+
vertical?: boolean;
17+
children?: ReactNode;
18+
[key: string]: unknown;
19+
}
20+
21+
export const Marquee = ({
22+
className,
23+
reverse,
24+
duration = 40,
25+
shadow = false,
26+
pauseOnHover = false,
27+
vertical = false,
28+
children,
29+
...props
30+
}: MarqueeProps) => {
31+
const shadowProps: ScrollShadowProps = {
32+
isEnabled: shadow,
33+
offset: -20,
34+
size: 300,
35+
orientation: "vertical",
36+
visibility: "both",
37+
};
38+
39+
const Wrapper = shadow ? ScrollShadow : "div";
40+
41+
const componentProps = shadow ? {...props, ...shadowProps} : props;
42+
43+
return (
44+
<Wrapper
45+
{...componentProps}
46+
className={cn(
47+
"flex [--gap:1rem]",
48+
{
49+
"w-full": !vertical,
50+
"overflow-y-hidden": vertical,
51+
"overflow-x-hidden": !vertical,
52+
"max-h-[calc(100vh_-_200px)]": vertical,
53+
},
54+
className,
55+
)}
56+
style={{
57+
// @ts-ignore
58+
"--duration": `${duration}s`,
59+
}}
60+
>
61+
<div
62+
className={cn("flex w-max items-stretch gap-[--gap]", {
63+
"flex-col": vertical,
64+
"h-full": vertical,
65+
"animate-scrolling-banner": !vertical,
66+
"animate-scrolling-banner-vertical": vertical,
67+
"[animation-direction:reverse]": reverse,
68+
"hover:[animation-play-state:paused]": pauseOnHover,
69+
})}
70+
>
71+
{Children.map(children, (child) => cloneElement(child as any))}
72+
</div>
73+
</Wrapper>
74+
);
75+
};
76+
77+
export default Marquee;

‎apps/docs/components/marketing/nextui-pro-section.tsx

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
"use client";
2+
3+
import {Button, Chip} from "@nextui-org/react";
4+
import {useEffect, useState} from "react";
5+
import {useTheme} from "next-themes";
6+
7+
import Marquee from "../demos/marquee";
8+
import {sectionWrapper, title} from "../primitives";
9+
10+
import {useIsMobile} from "@/hooks/use-media-query";
11+
12+
export const NextUIProSection = () => {
13+
const [mounted, setMounted] = useState(false);
14+
15+
useEffect(() => {
16+
setMounted(true);
17+
}, []);
18+
19+
const isMobile = useIsMobile();
20+
const {theme} = useTheme();
21+
const isDarkMode = theme === "dark";
22+
23+
let imgSrc: string;
24+
25+
if (isDarkMode) {
26+
imgSrc = isMobile ? "/images/hero-background@mobile.webp" : "/images/hero-background.webp";
27+
} else {
28+
imgSrc = isMobile
29+
? "/images/hero-background-light@mobile.webp"
30+
: "/images/hero-background-light.webp";
31+
}
32+
33+
const mobileClassName: string = isDarkMode
34+
? "h-full w-full bg-[radial-gradient(at_50%_70%,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,_0.8)_50%,_rgba(0,0,0,1)_100%)]"
35+
: "h-full w-full bg-[radial-gradient(at_50%_70%,_rgba(0,0,0,_0)_5%,_rgba(255,255,255,_0.8)_50%,_rgba(255,255,255,1)_100%)]";
36+
37+
const webClassName: string = isDarkMode
38+
? "h-full w-full bg-[radial-gradient(at_80%_60%,_rgba(255,255,255,_0)_20%,_rgba(0,0,0,_0.8)_40%,_rgba(0,0,0,1)_100%)]"
39+
: "h-full w-full bg-[radial-gradient(at_80%_60%,_rgba(0,0,0,_0)_20%,_rgba(255,255,255,_0.8)_40%,_rgba(255,255,255,1)_100%)]";
40+
41+
if (!mounted) return null;
42+
43+
return (
44+
<section className={sectionWrapper({class: "mt-16 lg:mt-44 overflow-hidden"})}>
45+
<div className="flex flex-col gap-8 min-h-[480px]">
46+
<div className="z-30 flex w-screen h-full flex-col items-start justify-center leading-8 pt-4">
47+
<Chip
48+
classNames={{
49+
base: "my-2 bg-gradient-to-r from-blue-400 to-blue-600 font-semibold",
50+
content: "font-medium text-default-900",
51+
}}
52+
color="primary"
53+
size="sm"
54+
variant="flat"
55+
>
56+
PRO
57+
</Chip>
58+
<div>
59+
<h1 className={title({size: "lg"})}>Ship&nbsp;</h1>
60+
<h1 className={title({size: "lg", color: "blue"})}>faster&nbsp;</h1>
61+
<h1 className={title({size: "lg"})}>with&nbsp;</h1>
62+
</div>
63+
<div>
64+
<h1 className={title({size: "lg"})}>beautiful components</h1>
65+
</div>
66+
<div className="mt-3 flex w-full max-w-2xl flex-wrap justify-center gap-3 md:mt-2 md:flex-nowrap text-foreground-400">
67+
Premade templates of over 210+ beautiful and responsive components, professionally
68+
created by the team behind NextUI.
69+
</div>
70+
<div className="mt-4 text-foreground-500 font-medium">
71+
<div className="flex gap-x-4 items-center">
72+
<svg
73+
fill="none"
74+
height="11"
75+
viewBox="0 0 13 11"
76+
width="13"
77+
xmlns="http://www.w3.org/2000/svg"
78+
>
79+
<path
80+
d="M1 6.4L4.14286 10L12 1"
81+
stroke="#006FEE"
82+
strokeLinecap="round"
83+
strokeLinejoin="round"
84+
strokeWidth="2"
85+
/>
86+
</svg>
87+
210+ Components
88+
</div>
89+
<div className="flex gap-x-4 items-center">
90+
<svg
91+
fill="none"
92+
height="11"
93+
viewBox="0 0 13 11"
94+
width="13"
95+
xmlns="http://www.w3.org/2000/svg"
96+
>
97+
<path
98+
d="M1 6.4L4.14286 10L12 1"
99+
stroke="#006FEE"
100+
strokeLinecap="round"
101+
strokeLinejoin="round"
102+
strokeWidth="2"
103+
/>
104+
</svg>
105+
Lifetime Access
106+
</div>
107+
<div className="flex gap-x-4 items-center">
108+
<svg
109+
fill="none"
110+
height="11"
111+
viewBox="0 0 13 11"
112+
width="13"
113+
xmlns="http://www.w3.org/2000/svg"
114+
>
115+
<path
116+
d="M1 6.4L4.14286 10L12 1"
117+
stroke="#006FEE"
118+
strokeLinecap="round"
119+
strokeLinejoin="round"
120+
strokeWidth="2"
121+
/>
122+
</svg>
123+
Free Updates
124+
</div>
125+
<div className="flex gap-x-4 items-center">
126+
<svg
127+
fill="none"
128+
height="11"
129+
viewBox="0 0 13 11"
130+
width="13"
131+
xmlns="http://www.w3.org/2000/svg"
132+
>
133+
<path
134+
d="M1 6.4L4.14286 10L12 1"
135+
stroke="#006FEE"
136+
strokeLinecap="round"
137+
strokeLinejoin="round"
138+
strokeWidth="2"
139+
/>
140+
</svg>
141+
Figma Files Included
142+
</div>
143+
</div>
144+
<div className="mt-4">
145+
<Button
146+
as={"a"}
147+
className="px-6 flex items-center"
148+
color="primary"
149+
href="https://nextui.pro?utm_source=nextui.org&utm_medium=nextui-homepage-section"
150+
rel="noopener noreferrer"
151+
>
152+
Explore NextUI Pro
153+
<svg
154+
fill="none"
155+
height="21"
156+
viewBox="0 0 20 21"
157+
width="20"
158+
xmlns="http://www.w3.org/2000/svg"
159+
>
160+
<path
161+
d="M12.0254 5.44189L17.0837 10.5002L12.0254 15.5586"
162+
stroke="white"
163+
strokeLinecap="round"
164+
strokeLinejoin="round"
165+
strokeMiterlimit="10"
166+
strokeWidth="1.5"
167+
/>
168+
<path
169+
d="M2.91602 10.5H16.941"
170+
stroke="white"
171+
strokeLinecap="round"
172+
strokeLinejoin="round"
173+
strokeMiterlimit="10"
174+
strokeWidth="1.5"
175+
/>
176+
</svg>
177+
</Button>
178+
</div>
179+
</div>
180+
<div className="overflow-hidden">
181+
<Marquee
182+
vertical
183+
className="h-78 w-screen mt-4 md:absolute md:top-0 md:inset-0 isolate md:max-h-dvh"
184+
duration={isMobile ? 240 : 60}
185+
>
186+
<img
187+
alt="Hero Background"
188+
className="w-full"
189+
height={3255}
190+
loading="lazy"
191+
src={imgSrc}
192+
width={1920}
193+
/>
194+
</Marquee>
195+
<div className="absolute md:hidden inset-0 pointer-events-none top-0 z-20">
196+
<div className={mobileClassName} />
197+
</div>
198+
199+
<div className="absolute hidden md:block md:inset-0 md:pointer-events-none md:top-0 md:z-20">
200+
<div className={webClassName} />
201+
</div>
202+
</div>
203+
</div>
204+
</section>
205+
);
206+
};

‎apps/docs/public/images/hero-background-light.webp

2.48 MB
Binary file not shown.

‎apps/docs/public/images/hero-background-light@mobile.webp

2.03 MB
Binary file not shown.

‎apps/docs/public/images/hero-background.webp

404 KB
Binary file not shown.

‎apps/docs/public/images/hero-background@mobile.webp

197 KB
Binary file not shown.

‎apps/docs/tailwind.config.js

+10
Original file line numberDiff line numberDiff line change
@@ -319,13 +319,23 @@ module.exports = {
319319
backgroundPosition: "-200% center",
320320
},
321321
},
322+
"scrolling-banner": {
323+
from: {transform: "translateX(0)"},
324+
to: {transform: "translateX(calc(-50% - var(--gap)/2))"},
325+
},
326+
"scrolling-banner-vertical": {
327+
from: {transform: "translateY(0)"},
328+
to: {transform: "translateY(calc(-50% - var(--gap)/2))"},
329+
},
322330
},
323331
animation: {
324332
heartbeat: "heartbeat 1s ease-in-out infinite",
325333
levitate: "levitate 5s ease infinite",
326334
expand: "expand 6s ease-out infinite both",
327335
"expand-opacity": "expand-opacity 6s linear infinite both",
328336
"text-gradient": "text-gradient 4s linear 0s infinite normal forwards running",
337+
"scrolling-banner": "scrolling-banner var(--duration) linear infinite",
338+
"scrolling-banner-vertical": "scrolling-banner-vertical var(--duration) linear infinite",
329339
},
330340
maxWidth: {
331341
"8xl": "90rem", // 1440px

0 commit comments

Comments
 (0)