Feature Carousel

Copy
export default function Example() {
  return (
    <FeatureCarousel
      title="Your Feature Title"
      description="Your feature description"
      image={{
        step1light1: Image1,
        step1light2: Image2,
        step2light1: Image3,
        step2light2: Image4,
        step3light: Image5,
        step4light: Image6,
        alt: "Feature showcase",
      }}
    />
  )
}

Copy
export default function BasicExample() {
  return (
    <FeatureCarousel
      title="Feature Showcase"
      description="Explore our amazing features"
      image={{
        step1light1: "/images/feature1.png",
        step1light2: "/images/feature2.png",
        step2light1: "/images/feature3.png",
        step2light2: "/images/feature4.png",
        step3light: "/images/feature5.png",
        step4light: "/images/feature6.png",
        alt: "Feature showcase",
      }}
    />
  )
}

Copy
export default function StyledExample() {
  return (
    <FeatureCarousel
      title="Custom Styled Features"
      description="With custom positioning and effects"
      step1img1Class={cn(
        "pointer-events-none w-[50%] border border-stone-100/10",
        "rounded-2xl left-[25%] top-[50%]",
        "hover:scale-105 transition-transform"
      )}
      image={{
        step1light1: "/images/feature1.png",
        step1light2: "/images/feature2.png",
        step2light1: "/images/feature3.png",
        step2light2: "/images/feature4.png",
        step3light: "/images/feature5.png",
        step4light: "/images/feature6.png",
        alt: "Feature showcase",
      }}
      bgClass="bg-gradient-to-tr from-blue-900/90 to-purple-800/90"
    />
  )
}