Carousel

import { Carousel, CardSlide } from "@/components/ui/carousel";

const slides = [
  {
    id: 1,
    content: (
      <CardSlide
        title="Mountain Adventure"
        description="Explore the highest peaks"
        gradient="from-emerald-600 to-teal-800"
      />
    ),
  },
  {
    id: 2,
    content: (
      <CardSlide
        title="Ocean Escape"
        description="Dive into crystal clear waters"
        gradient="from-blue-600 to-indigo-800"
      />
    ),
  },
  // Add more slides...
];

export default function MyPage() {
  return (
    <Carousel
      items={slides}
      slideWidth={300}
      slideHeight={400}
      showArrows={true}
      showDots={true}
      autoPlay={false}
    />
  );
}

import { Carousel } from "@/components/ui/carousel";

// Custom slide content
const customSlides = [
  {
    id: 1,
    content: (
      <div className="w-full h-full bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl p-6 flex flex-col justify-center items-center text-center">
        <h2 className="text-2xl font-bold text-white mb-2">Custom Card</h2>
        <p className="text-white/80">Any content works here!</p>
      </div>
    ),
  },
  // More custom slides...
];

<Carousel
  items={customSlides}
  slideWidth={350}
  slideHeight={250}
  gap={30}
/>

<Carousel
  items={slides}
  autoPlay={true}
  autoPlayInterval={3000} // 3 seconds
  showArrows={true}
  showDots={true}
/>