import { SparklesIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { SkiperCard } from "@/components/ui/special-card"
const shiftCard = "https://cdn.21st.dev/assets/mirror/7e/7e2d0603908b1f6f4f3ebf226d0c7b4a4b46fc821d1cdd7699c24c9dc933d245.jpg";
const family = "https://cdn.21st.dev/assets/mirror/22/22040163f7342a3fb24afaf76e4124d98ba59a8e0de2374f22e169ca88086e2f.jpg";
const carousel = "https://cdn.21st.dev/assets/mirror/cb/cb3ce5dda94875d3f030afacdb1929a0396393966aaf9adb73516f9d8b727de8.jpg";
const textureFull = "https://cdn.21st.dev/assets/mirror/10/1073877731992a6207f5829f0a4d926d4245e02e61027ceae7fd1f0686c54326.jpg";
const skiper = "https://cdn.21st.dev/assets/mirror/96/961bcaea1b32aa0672ce1b57bd2653477c98fd8d0d52498f4fcdb7f9577b5cc8.jpg";
const textureCard = "https://cdn.21st.dev/assets/mirror/57/57ae88aeb307a404efb65a1a3b178ec6b4968f160b0a0c7332d57791da87c3fd.jpg";
const DemoComponent = () => {
return (
<section className="relative my-14 w-full overflow-hidden " id="features">
<div className=" p-2">
<div className="mb-8 mx-auto pt-4 md:container">
<div className=" mx-auto">
<div className="flex w-full items-center justify-center">
<Badge
variant="outline"
className="mb-8 rounded-[14px] border border-black/10 bg-white text-base dark:border dark:border-white/10 dark:bg-transparent md:left-6"
>
<SparklesIcon className=" fill-[#EEBDE0] stroke-1 text-neutral-800" />
Component Preview
</Badge>
</div>
<div className=" mx-auto max-w-4xl rounded-[34px] bg-neutral-700">
<div className="relative z-10 grid w-full gap-8 rounded-[28px] bg-neutral-950 p-2">
<SkiperCard
step1img1Class={cn(
"pointer-events-none w-[50%] border border-stone-100/10 transition-all duration-500 dark:border-stone-700/50",
"left-1/4 top-[57%] rounded-[24px] max-md:scale-[160%] max-md:rounded-[24px] md:left-[35px] md:top-[29%]",
"md:group-hover:translate-y-2"
)}
step1img2Class={cn(
"pointer-events-none w-3/5 overflow-hidden border border-stone-100/10 transition-all duration-500 dark:border-stone-700/50",
"left-[69%] top-[53%] rounded-2xl max-md:scale-[160%] max-md:rounded-[24px] md:left-[calc(50%+35px+1rem)] md:top-[21%]",
"md:group-hover:-translate-y-6 "
)}
step2img1Class={cn(
"pointer-events-none w-[50%] overflow-hidden rounded-t-[24px] border border-stone-100/10 transition-all duration-500 dark:border-stone-700",
"left-1/4 top-[69%] max-md:scale-[160%] md:left-[35px] md:top-[30%]",
"md:group-hover:translate-y-2"
)}
step2img2Class={cn(
"pointer-events-none w-2/5 overflow-hidden rounded-2xl rounded-t-[24px] border border-stone-100/10 transition-all duration-500 group-hover:-translate-y-6 dark:border-stone-700",
"left-[70%] top-[53%] max-md:scale-[140%] md:left-[calc(50%+27px+1rem)] md:top-1/4",
"md:group-hover:-translate-y-6"
)}
step3imgClass={cn(
"pointer-events-none w-[90%] overflow-hidden rounded-t-[24px] border border-stone-100/10 transition-all duration-500 dark:border-stone-700",
"left-[5%] top-[50%] md:left-1/2 md:left-[68px] md:top-[30%]"
)}
step4imgClass={cn(
"pointer-events-none w-[90%] overflow-hidden rounded-t-[24px] border border-stone-100/10 transition-all duration-500 dark:border-stone-700",
"left-[5%] top-[50%] md:left-1/2 md:left-[68px] md:top-[30%]"
)}
description="Make your app 🤌"
bgClass="lg:bg-gradient-to-tr"
image={{
step1light1: family,
step1light2: shiftCard,
step2light1: carousel,
step2light2: textureFull,
step3light: textureCard,
step4light: skiper,
alt: "Something",
}}
title="Components that pop"
/>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default DemoComponent;Part of reuno-ui — browse the full library on 21st.dev.