import { Parallax,
ParallaxItem,
PrallaxContainer,
} from "@/components/ui/parallax";
import {StaggerText } from '@/components/ui/stagger-text'
import {Button } from '@/components/ui/button'
export default function DemoOne() {
return (<Parallax className="h-[3200px] md:h-[2000px] p-12 text-black bg-white">
<div className="sticky top-0 h-screen space-y-4 w-full flex flex-col justify-center items-center text-center">
<StaggerText
className="text-5xl font-bold tracking-tighter md:w-2/3 mx-auto"
text="Creating brands that brings people to the shop"
direction="z"
/>
<p
className="max-w-prose "
>
Defining the brand’s unique value proposition and positioning it in
the market, creating a brand identity that resonates with the target
audience.
</p>
<Button className="bg-indigo-600 hover:bg-indigo-400" size="lg">Get Started</Button>
</div>
<PrallaxContainer className="flex flex-wrap justify-between gap-4 w-full">
<ParallaxItem
className="w-11/12 md:w-1/4 max-h-96"
start={200}
end={-200}
>
<img
className="size-full object-cover object-[50%_50%]"
src="https://cdn.21st.dev/assets/mirror/90/90cfd5c4284486471dfe4125d756573aefd8c19dd7b9718cf687dc701571236f.jpg"
alt="street"
/>
</ParallaxItem>
<ParallaxItem
className="w-11/12 md:w-1/4 max-h-96"
start={500}
end={20}
>
<img
className="size-full object-cover object-[50%_50%]"
src="https://cdn.21st.dev/assets/mirror/46/46c3bd4150375e98bef564f8e290923c6973912f291eef93c9817f9ddc101d8e.jpg"
alt="street"
/>
</ParallaxItem>
<ParallaxItem
className="w-11/12 md:w-1/4 max-h-96"
start={800}
end={50}
>
<img
className="size-full object-cover object-[50%_50%]"
src="https://cdn.21st.dev/assets/mirror/07/070c5559af71dc96ff1dd399227c31c89d43334da9dd33bdb8ade8df57048d86.jpg"
alt="street"
/>
</ParallaxItem>
<ParallaxItem
className="w-11/12 md:w-1/4 max-h-96"
start={500}
end={50}
>
<img
className="size-full object-cover object-[50%_50%]"
src="https://cdn.21st.dev/assets/mirror/42/42f757b81c90002a2b08741e332a2393ccfc0f95d5d5c64314781a7f8fa4045a.jpg"
alt="street"
/>
</ParallaxItem>
<ParallaxItem
className="w-11/12 md:w-1/4 max-h-96"
start={800}
end={70}
>
<img
className="size-full object-cover object-[50%_50%]"
src="https://cdn.21st.dev/assets/mirror/99/99eb9cd4856185b6a83210bd3e28d24a6c2db32c9c1020119360219e90bc1aaa.jpg"
alt="street"
/>
</ParallaxItem>
</PrallaxContainer>
</Parallax>
);
}Part of Systaliko UI — browse the full library on 21st.dev.