A smooth gallery where cards stack on scroll, each showing an image, title, and description.
import {CardsParallax, type iCardItem} from "@/components/ui/scroll-cards";
const cardItems: iCardItem[] = [
{
title: "Everest Camp",
description: "Experience the ultimate trek to the world's highest mountain",
tag: "trekking",
src: "https://cdn.21st.dev/assets/mirror/05/05368fb8d22fcb8abc3f9c0843ef1d31c7e30fc0771f1018bda42c7972d08d48.jpg",
link: "#",
color: "white",
textColor: "white",
},
{
title: "Annapurna",
description: "Journey through the stunning landscapes of Nepal",
src: "https://cdn.21st.dev/assets/mirror/5c/5caece9d06d43b4ccbbb9664d46ddfcddc56de6fa604cc8f120251416378fc66.jpg",
tag: "hiking",
link: "#",
color: "green",
textColor: "white",
},
{
title: "Inca Trail",
description: "Ancient paths leading to Machu Picchu",
src: "https://cdn.21st.dev/assets/mirror/1c/1ccf77005133704782622927f27869facf75034d3b07c187bc115a2b6617da2f.jpg",
tag: "adventure",
link: "#",
color: "white",
textColor: "black",
},
{
title: "Swiss Alps",
description: "Discover the breathtaking beauty of European mountains",
src: "https://cdn.21st.dev/assets/mirror/9a/9a810b81f107aed0d8f38fa9432a5d2a77f326cf44530d1d0b15d10660f702b4.jpg",
tag: "mountains",
link: "#",
color: "white",
textColor: "white",
},
];
const DemoOne = () => {
return (
<CardsParallax items={cardItems} />
);
};
export { DemoOne };