Skip to content

Commit

Permalink
fix: making the transitions smoother
Browse files Browse the repository at this point in the history
  • Loading branch information
@macci001
macci001 committed Dec 17, 2024
1 parent c325a2f commit 7828510
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 116 deletions.
249 changes: 133 additions & 116 deletions apps/docs/components/marketing/nextui-pro-section.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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;

Expand All @@ -56,127 +68,132 @@ export const NextUIProSection = () => {
);

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: "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>
<div className={titleWrapper({class: "mt-2 inline md:block"})}>
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
Ship&nbsp;
</h1>
<h1
className={title({
size: "lg",
color: "blue",
class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]",
})}
<>
<Head>
<link as="image" href="/images/nextuipro-section-background.webp?v=1" rel="preload" />
<link as="image" href="/images/nextuipro-section-background-light.webp?v=1" rel="preload" />
</Head>
<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: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
content: "text-tiny font-semibold",
}}
color="primary"
size="sm"
>
faster&nbsp;
</h1>
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
with&nbsp;
</h1>
<div className="flex flex-col sm:flex-row">
PRO
</Chip>
<div className={titleWrapper({class: "mt-2 inline md:block"})}>
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
beautiful&nbsp;
Ship&nbsp;
</h1>
<h1
className={title({
size: "lg",
color: "blue",
class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]",
})}
>
faster&nbsp;
</h1>
<h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
components
with&nbsp;
</h1>
<div className="flex flex-col sm:flex-row">
<h1
className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}
>
beautiful&nbsp;
</h1>
<h1
className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}
>
components
</h1>
</div>
</div>
</div>
<p className={subtitle({class: "pr-12 text-foreground-500"})}>
Premade templates of over 210+ beautiful and responsive components, professionally
created by the team behind NextUI.
</p>
<div className="mt-4 text-foreground-600 font-medium">
<div className="flex gap-x-4 items-center">
<CheckmarkIcon />
210+ Components
</div>
<div className="flex gap-x-4 items-center">
<CheckmarkIcon />
Lifetime Access
<p className={subtitle({class: "pr-12 text-foreground-500"})}>
Premade templates of over 210+ beautiful and responsive components, professionally
created by the team behind NextUI.
</p>
<div className="mt-4 text-foreground-600 font-medium">
<div className="flex gap-x-4 items-center">
<CheckmarkIcon />
210+ Components
</div>
<div className="flex gap-x-4 items-center">
<CheckmarkIcon />
Lifetime Access
</div>
<div className="flex gap-x-4 items-center">
<CheckmarkIcon />
Free Updates
</div>
<div className="flex gap-x-4 items-center">
<CheckmarkIcon />
Figma Files Included
</div>
</div>
<div className="flex gap-x-4 items-center">
<CheckmarkIcon />
Free Updates
</div>
<div className="flex gap-x-4 items-center">
<CheckmarkIcon />
Figma Files Included
<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"
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>
</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"
target="_blank"
<div className="overflow-hidden">
<Marquee
vertical
className="flex opacity-15 md:opacity-100 w-screen mt-4 absolute top-0 inset-0 isolate max-h-dvh "
duration={60}
>
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="flex opacity-15 md:opacity-100 w-screen mt-4 absolute top-0 inset-0 isolate max-h-dvh"
duration={60}
>
<img
alt="Hero Background"
className="w-full"
height={3255}
loading="lazy"
src={imgSrc}
width={1920}
<img alt="Hero Background" className="w-full opacity-0 animate-fadeIn" src={imgSrc} />
</Marquee>
<div
className={cn(
"absolute inset-0 pointer-events-none z-20 bg-white dark:bg-black transition transition-all duration-300",
!isMobile &&
"[-webkit-mask-image:radial-gradient(at_70%_50%,_rgba(255,255,255,0)_20%,_rgba(255,255,255,0.8)_40%,_rgba(0,0,0,1)_60%)]",
isMobile &&
"[-webkit-mask-image:linear-gradient(to_left,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,1)_100%)]",
)}
/>
</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>
</section>
</>
);
};
5 changes: 5 additions & 0 deletions apps/docs/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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
Expand Down

0 comments on commit 7828510

Please sign in to comment.