Components
Loading preview...
Carousel with auto animation
npx shadcn@latest add https://21st.dev/r/designali-in/carouselimport { Carousel } from "@/components/ui/carousel";
import Link from "next/link";
import { Button } from "@/components/ui/button";
export default function DemoOne() {
return (
<div className="">
<Carousel
slides={[
<div
key={"4"}
className="border h-full w-full relative overflow-hidden rounded-md bg-card text-card-foreground"
>
<div className="w-full h-full overflow-hidden">
<img
src="https://raw.githubusercontent.com/aliimam-in/aliimam/refs/heads/main/apps/www/public/templates/ai-icons.jpg"
className="object-cover h-full w-full"
/>
</div>
</div>,
<div
key={"1"}
className="border h-full w-full relative overflow-hidden rounded-md bg-card text-card-foreground"
>
<div className="w-full h-full overflow-hidden">
<img
src="https://raw.githubusercontent.com/aliimam-in/aliimam/refs/heads/main/apps/www/public/works/social-media-posts.jpg"
className="object-cover h-full w-full"
/>
</div>
</div>,
<div
key={"2"}
className="border h-full w-full relative overflow-hidden rounded-md bg-card text-card-foreground"
>
<div className="w-full h-full overflow-hidden">
<img
src="https://raw.githubusercontent.com/aliimam-in/aliimam/refs/heads/main/apps/www/public/works/dalim.jpg"
className="object-cover h-full w-full"
/>
</div>
</div>,
<div
key={"3"}
className="border h-full w-full relative overflow-hidden rounded-md bg-card text-card-foreground"
>
<div className="w-full h-full overflow-hidden">
<img
src="https://raw.githubusercontent.com/aliimam-in/aliimam/refs/heads/main/apps/www/public/works/website-designs.jpg"
className="object-cover h-full w-full"
/>
</div>
</div>,
<div
key={"5"}
className="border h-full w-full relative overflow-hidden rounded-md bg-card text-card-foreground"
>
<div className="w-full h-full overflow-hidden">
<img
src="https://raw.githubusercontent.com/aliimam-in/aliimam/refs/heads/main/apps/www/public/templates/ai-logos.jpg"
className="object-cover h-full w-full"
/>
</div>
</div>,
]}
/>
<Link className="flex justify-center mt-10" href="https://aliimam.in/works">
<Button className="h-14 cursor-pointer rounded-full px-10">
See All Works
</Button>
</Link>
</div>
);
}