Components
Loading preview...
Here is Special Card component
npx shadcn@latest add https://21st.dev/r/reuno-ui/special-cardimport { 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://plus.unsplash.com/premium_photo-1749857804698-270c9cdc544b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
const family = "https://plus.unsplash.com/premium_photo-1748880489948-5ccf839bd9a9?q=80&w=1384&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
const carousel = "https://images.unsplash.com/photo-1750096319146-6310519b5af2?q=80&w=1064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
const textureFull = "https://images.unsplash.com/photo-1748365335160-566e2b914b45?q=80&w=3132&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
const skiper = "https://images.unsplash.com/photo-1749742756679-678e39a9b31d?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDIxfENEd3V3WEpBYkV3fHxlbnwwfHx8fHw%3D";
const textureCard = "https://images.unsplash.com/photo-1706781273757-4ed613b26e9b?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
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;