-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: adding nextui pro section on the landing page
- Loading branch information
Showing
8 changed files
with
295 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| "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 ( | ||
| <Wrapper | ||
| {...componentProps} | ||
| className={cn( | ||
| "flex [--gap:1rem]", | ||
| { | ||
| "w-full": !vertical, | ||
| "overflow-y-hidden": vertical, | ||
| "overflow-x-hidden": !vertical, | ||
| "max-h-[calc(100vh_-_200px)]": vertical, | ||
| }, | ||
| className, | ||
| )} | ||
| style={{ | ||
| // @ts-ignore | ||
| "--duration": `${duration}s`, | ||
| }} | ||
| > | ||
| <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, | ||
| })} | ||
| > | ||
| {Children.map(children, (child) => cloneElement(child as any))} | ||
| </div> | ||
| </Wrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default Marquee; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,206 @@ | ||
| "use client"; | ||
|
|
||
| import {Button, Chip} from "@nextui-org/react"; | ||
| import {useEffect, useState} from "react"; | ||
| import {useTheme} from "next-themes"; | ||
|
|
||
| import Marquee from "../demos/marquee"; | ||
| import {sectionWrapper, title} from "../primitives"; | ||
|
|
||
| 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/hero-background@mobile.webp" : "/images/hero-background.webp"; | ||
| } else { | ||
| imgSrc = isMobile | ||
| ? "/images/hero-background-light@mobile.webp" | ||
| : "/images/hero-background-light.webp"; | ||
| } | ||
|
|
||
| const mobileClassName: string = isDarkMode | ||
| ? "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%)]" | ||
| : "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%)]"; | ||
|
|
||
| const webClassName: string = isDarkMode | ||
| ? "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%)]" | ||
| : "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%)]"; | ||
|
|
||
| if (!mounted) return null; | ||
|
|
||
| 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: "my-2 bg-gradient-to-r from-blue-400 to-blue-600 font-semibold", | ||
| content: "font-medium text-default-900", | ||
| }} | ||
| color="primary" | ||
| size="sm" | ||
| variant="flat" | ||
| > | ||
| PRO | ||
| </Chip> | ||
| <div> | ||
| <h1 className={title({size: "lg"})}>Ship </h1> | ||
| <h1 className={title({size: "lg", color: "blue"})}>faster </h1> | ||
| <h1 className={title({size: "lg"})}>with </h1> | ||
| </div> | ||
| <div> | ||
| <h1 className={title({size: "lg"})}>beautiful components</h1> | ||
| </div> | ||
| <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"> | ||
| Premade templates of over 210+ beautiful and responsive components, professionally | ||
| created by the team behind NextUI. | ||
| </div> | ||
| <div className="mt-4 text-foreground-500 font-medium"> | ||
| <div className="flex gap-x-4 items-center"> | ||
| <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> | ||
| 210+ Components | ||
| </div> | ||
| <div className="flex gap-x-4 items-center"> | ||
| <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> | ||
| Lifetime Access | ||
| </div> | ||
| <div className="flex gap-x-4 items-center"> | ||
| <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> | ||
| Free Updates | ||
| </div> | ||
| <div className="flex gap-x-4 items-center"> | ||
| <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> | ||
| 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" | ||
| > | ||
| 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 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> | ||
| ); | ||
| }; |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters