import { ContainerAnimated,
ContainerScroll,
ContainerStagger,
ContainerSticky,
GalleryCol,
GalleryContainer } from "@/components/blocks/animated-gallery"
import { Button } from "@/components/ui/button"
import { VideoIcon } from "lucide-react"
const IMAGES_1 = [
"https://cdn.21st.dev/assets/mirror/db/db8e72b6f6e2f325ec74898fdab6a02f3c0ba7962f3cf0b89f0ee3b22aa2a083.jpg",
"https://cdn.21st.dev/assets/mirror/77/777c9bd220f0c47c9eb699ebbd77fb0c6c9a8d8b0cd77f089bab93a18586d578.jpg",
"https://cdn.21st.dev/assets/mirror/f9/f992831c368ea7e12c51417be55fda812d1502e9bb6730d94bc6b1e0c6a2ae57.jpg",
"https://cdn.21st.dev/assets/mirror/8c/8c0a104646b9b9d6680c2222cf84cfd3e4e10ada11fd0d0759093db9a69cfd3d.jpg",
]
const IMAGES_2 = [
"https://cdn.21st.dev/assets/mirror/4e/4eb85747c8113c6edcbec2671a5aa4e62d0569488ad75652c16dd7598a1196e1.jpg",
"https://cdn.21st.dev/assets/mirror/ab/ab1fd4fd007ecad2ad9a5350341b1013589f05f8f30b8fdd4a35728a800e9fce.jpg",
"https://cdn.21st.dev/assets/mirror/4d/4de1f4952d0420f95ade25fc723d8042ece00762429cdccb79fd3a29ffe5f33d.jpg",
"https://cdn.21st.dev/assets/mirror/53/53f281293f06536d7f60b1786b0a39404390a55e1675e99e089d2b72234cf8cb.jpg",
]
const IMAGES_3 = [
"https://cdn.21st.dev/assets/mirror/35/358a63f0c4cb478488bdf1bfb90ed5fd785c28bcddbf058b4a7287fe8ed75fff.jpg",
"https://cdn.21st.dev/assets/mirror/e8/e81126a3c16766e36ed84d2226b0b11507e86b999d4d07cd7e88c0f04e14c0eb.jpg",
"https://cdn.21st.dev/assets/mirror/77/777c9bd220f0c47c9eb699ebbd77fb0c6c9a8d8b0cd77f089bab93a18586d578.jpg",
"https://cdn.21st.dev/assets/mirror/85/85a98f8253097be06cfdaa5a312c644d4df00749aad17dda4468ab8d3dce7bd0.jpg",
]
export const DemoVariant1 = () => {
return (
<div className="relative bg-white ">
<ContainerStagger className="relative z-[9999] -mb-12 place-self-center px-6 pt-12 text-center">
<ContainerAnimated>
<h1 className="font-serif text-4xl font-extralight md:text-5xl">
Your{" "}
<span className=" font-serif font-extralight text-indigo-600">
one source
</span>
</h1>
</ContainerAnimated>
<ContainerAnimated>
<h1 className="font-serif text-4xl font-extralight md:text-5xl">
for all your designs
</h1>
</ContainerAnimated>
<ContainerAnimated className="my-4">
<p className="leading-normal tracking-tight text-muted-foreground">
No waste of time and money, we provide you with
<br /> collection of designs to plan your next project.
</p>
</ContainerAnimated>
<ContainerAnimated>
<Button
className="gap-1 bg-indigo-700"
>
Book free call <VideoIcon className="size-4 " />
</Button>
<Button variant={"link"} className="text-sencondary">
About Us
</Button>
</ContainerAnimated>
</ContainerStagger>
<div className="pointer-events-none absolute z-10 h-[70vh] w-full "
style={{
background: "linear-gradient(to right, gray, rebeccapurple, blue)",
filter: "blur(84px)",
mixBlendMode: "screen",
}}
/>
<ContainerScroll className="relative h-[350vh]">
<ContainerSticky className="h-svh">
<GalleryContainer className="">
<GalleryCol yRange={["-10%", "2%"]} className="-mt-2">
{IMAGES_1.map((imageUrl, index) => (
// eslint-disable-next-line @next/next/no-img-element
<img
key={index}
className="aspect-video block h-auto max-h-full w-full rounded-md object-cover shadow"
src={imageUrl}
alt="gallery item"
/>
))}
</GalleryCol>
<GalleryCol className="mt-[-50%]" yRange={["15%", "5%"]}>
{IMAGES_2.map((imageUrl, index) => (
// eslint-disable-next-line @next/next/no-img-element
<img
key={index}
className="aspect-video block h-auto max-h-full w-full rounded-md object-cover shadow"
src={imageUrl}
alt="gallery item"
/>
))}
</GalleryCol>
<GalleryCol yRange={["-10%", "2%"]} className="-mt-2">
{IMAGES_3.map((imageUrl, index) => (
// eslint-disable-next-line @next/next/no-img-element
<img
key={index}
className="aspect-video block h-auto max-h-full w-full rounded-md object-cover shadow"
src={imageUrl}
alt="gallery item"
/>
))}
</GalleryCol>
</GalleryContainer>
</ContainerSticky>
</ContainerScroll>
</div>
)
}
Part of Systaliko UI — browse the full library on 21st.dev.