import { ScrollXCarousel,
ScrollXCarouselContainer,
ScrollXCarouselProgress,
ScrollXCarouselWrap } from "@/components/ui/scroll-x-carousel";
import {CardHoverReveal,
CardHoverRevealContent,
CardHoverRevealMain,} from '@/components/ui/reveal-on-hover'
import { Badge } from '@/components/ui/badge'
const SLIDES = [
{
id: 'slide-6',
title: 'UI UX design',
description:
'We build a car rental platform for the masses, with a focus on user experience and security, and data privacy.',
services: ['branding', 'design'],
type: 'Agency',
imageUrl:
'https://cdn.21st.dev/assets/mirror/e5/e53e3c7473052546682df15ee99f20ccf6b5413039fc6cafa1b23717237091d0.jpg',
},
{
id: 'slide-2',
title: 'Blockchain wallet',
description:
'We build a Blockchain wallet for the masses, with a focus on security and usability.',
services: ['branding', 'design', 'development'],
type: 'blockchain',
imageUrl:
'https://cdn.21st.dev/assets/mirror/93/9309cec6a1caedbe56f26432bc56830785f7f06089f66190cfebcbe65e92789b.jpg',
},
{
id: 'slide-3',
title: 'ecommerce store',
description:
'We build an ecommerce store for the masses, with a focus on performance and user experience.',
services: ['branding', 'design', 'payment getaway', 'development'],
type: 'ecommerce',
imageUrl:
'https://cdn.21st.dev/assets/mirror/48/4875e9daf51a4045c9f1e1f3e58885d32b7f28e04a5c1471c86c135f0b1c8cd2.jpg',
},
{
id: 'slide-1',
title: 'SaaS platform',
description:
'We build a SaaS platform for the masses, with a focus on user experience and security, and data privacy.',
services: ['branding', 'design', 'development'],
type: 'SaaS',
imageUrl:
'https://cdn.21st.dev/assets/mirror/8c/8c0f960426250d158fbd13dcb4c244268f0847b8b3f2ae7788a62b9bcf6b7b02.jpg',
},
{
id: 'slide-4',
title: 'SEO Optimization',
description:
'We build a SaaS platform for the masses, with a focus on user experience and security, and data privacy.',
services: ['branding', 'design', 'development'],
type: 'SaaS',
imageUrl:
'https://cdn.21st.dev/assets/mirror/64/64d1fa5c32ed1dc0c2ee577155618270fdff26e47f63c2fb4bc68c127d66d669.jpg',
},
];
export default function DemoOne() {
return (
<ScrollXCarousel className="h-[150vh]">
<ScrollXCarouselContainer className="h-dvh place-content-center flex flex-col gap-8 py-12">
<div className=" pointer-events-none w-[12vw] h-[103%] absolute inset-[0_auto_0_0] z-10 bg-[linear-gradient(90deg,_var(--background)_35%,_transparent)]" />
<div className="pointer-events-none bg-[linear-gradient(270deg,_var(--background)_35%,_transparent)] w-[15vw] h-[103%] absolute inset-[0_0_0_auto] z-10" />
<ScrollXCarouselWrap className="flex-4/5 flex space-x-8 [&>*:first-child]:ml-8">
{SLIDES.map((slide) => (
<CardHoverReveal
key={slide.id}
className="min-w-[70vw] md:min-w-[38vw] shadow-xl border xl:min-w-[30vw] rounded-xl"
>
<CardHoverRevealMain>
<img
alt={slide.title}
src={slide.imageUrl}
className="size-full aspect-square object-cover"
/>
</CardHoverRevealMain>
<CardHoverRevealContent className="space-y-4 rounded-2xl bg-[rgba(0,0,0,.5)] backdrop-blur-3xl p-4">
<div className="space-y-2">
<h3 className="text-sm text-white/80">Type</h3>
<div className="flex flex-wrap gap-2">
<Badge className="capitalize rounded-full bg-indigo-500">
{slide.type}
</Badge>
</div>
</div>
<div className="space-y-2">
<h3 className="text-sm text-white/80">Services</h3>
<div className="flex flex-wrap gap-2">
{slide.services.map((service) => (
<Badge
key={service}
className="capitalize rounded-full"
variant={'secondary'}
>
{service}
</Badge>
))}
</div>
</div>
<div className="space-y-2 mt-2">
<h3 className="text-white capitalize font-medium">
{slide.title}
</h3>
<p className="text-white/80 text-sm">{slide.description}</p>
</div>
</CardHoverRevealContent>
</CardHoverReveal>
))}
</ScrollXCarouselWrap>
<ScrollXCarouselProgress
className="bg-secondary mx-8 h-1 rounded-full overflow-hidden"
progressStyle="size-full bg-indigo-500/70 rounded-full"
/>
</ScrollXCarouselContainer>
</ScrollXCarousel>
)
}
Part of Systaliko UI — browse the full library on 21st.dev.