Get a nice landing page with smooth scroll with lenis and parallax effect
import { SmoothScrollContainer, Navigation, ParallaxHero, ParallaxImage, ScheduleSection } from "@/components/ui/smooth-scroll-parallax-effect";
import { SiSpacex } from "react-icons/si";
const SmoothScrollHeroDemo = () => {
const scheduleItems = [
{ title: "NG-21", date: "Dec 9th", location: "Florida" },
{ title: "Starlink", date: "Dec 20th", location: "Texas" },
{ title: "Starlink", date: "Jan 13th", location: "Florida" },
{ title: "Turksat 6A", date: "Feb 22nd", location: "Florida" },
{ title: "NROL-186", date: "Mar 1st", location: "California" },
{ title: "GOES-U", date: "Mar 8th", location: "California" },
{ title: "ASTRA 1P", date: "Apr 8th", location: "Texas" },
];
const parallaxImages = [
{
src: "https://cdn.21st.dev/assets/mirror/68/68fd4edf19855762d0020e6ddbf3fdd31b7f768a6c65014d50ec6b36ef305b54.jpg",
alt: "Space launch example",
start: -200,
end: 200,
className: "w-1/3"
},
{
src: "https://cdn.21st.dev/assets/mirror/bc/bca64f76b38b6b3e0f1c2357292903fc428e16d47b49005201be8ba51377ce8c.jpg",
alt: "Space launch example",
start: 200,
end: -250,
className: "mx-auto w-2/3"
},
{
src: "https://cdn.21st.dev/assets/mirror/04/04691b2e29925f30eac3817ea8f65d973484b711822252a13c15248859e464da.jpg",
alt: "Orbiting satellite",
start: -200,
end: 200,
className: "ml-auto w-1/3"
},
{
src: "https://cdn.21st.dev/assets/mirror/71/711f1a9ccb3786dcc00e8031191dc4d58c9377cefb54bf927806921a4a05a818.jpg",
alt: "Orbiting satellite",
start: 0,
end: -500,
className: "ml-24 w-5/12"
}
];
const handleCtaClick = () => {
document.getElementById("launch-schedule")?.scrollIntoView({
behavior: "smooth",
});
};
return (
<SmoothScrollContainer className="bg-background">
<Navigation
logo={<SiSpacex className="text-3xl" />}
ctaText="LAUNCH SCHEDULE"
onCtaClick={handleCtaClick}
/>
<ParallaxHero
backgroundImage="https://cdn.21st.dev/assets/mirror/3e/3ea1ee3ce8a8134c194baf880a7afabc7a43bad8d5672f7b0f74fff87344dcc4.jpg"
>
<div className="mx-auto max-w-5xl px-4 pt-[200px]">
{parallaxImages.map((img, index) => (
<ParallaxImage key={index} {...img} />
))}
</div>
</ParallaxHero>
<ScheduleSection
title="Launch Schedule"
items={scheduleItems}
id="launch-schedule"
/>
</SmoothScrollContainer>
);
};
export default SmoothScrollHeroDemo