Feature Carousel

The Feature Carousel component requires custom images (StaticImageData) to be provided for each step. It also depends on react-wrap-balancer. To see it in action, provide your own images via the image prop.

import { FeatureCarousel } from "@/components/ui/feature-carousel";

<FeatureCarousel
  title="My Feature"
  description="Feature description"
  image={{
    step1light1: "/step1-1.png",
    step1light2: "/step1-2.png",
    step2light1: "/step2-1.png",
    step2light2: "/step2-2.png",
    step3light: "/step3.png",
    step4light: "/step4.png",
    alt: "Feature carousel images",
  }}
/>

Add this to your globals.css for the gradient hover effect:

.animated-cards::before {
  @apply pointer-events-none absolute select-none
         rounded-3xl opacity-0 transition-opacity
         duration-300 hover:opacity-100;
  background: radial-gradient(
    1000px circle at var(--x) var(--y),
    #c9ee80 0, #eebbe2 10%, #adc0ec 25%,
    #c9ee80 35%, transparent 50%
  );
  z-index: -1;
  content: "";
  inset: -1px;
}