Animated Card Carousel

import { useState } from "react"
 
import AnimatedCard from "@/components/ui/animated-card-carousel"
 
export default function AnimatedCardDemo() {
  const [activeIndex, setActiveIndex] = useState(0)
 
  // Example cards data
  const cards = [
    {
      title: "Portfolio Builder",
      description:
        "Create stunning professional portfolios with our intuitive drag-and-drop interface.",
      imgSrc: "/images/portfolio.webp",
      color: "#3b82f6",
      href: "#",
    },
    {
      title: "Health Tracker",
      description:
        "Monitor your fitness journey with comprehensive health analytics.",
      imgSrc: "/images/health.webp",
      color: "#10b981",
      href: "#",
    },
    // Add more cards as needed
  ]
 
  return (
    <div className="grid gap-3 md:grid-cols-2">
      {cards.map((card, index) => (
        <AnimatedCard
          key={index}
          title={card.title}
          description={card.description}
          imgSrc={card.imgSrc}
          color={card.color}
          href={card.href}
          isActive={index === activeIndex}
          onMouseEnter={() => setActiveIndex(index)}
          onMouseLeave={() => {}}
          animationDuration={0.5}
          animationEase="easeInOut"
        />
      ))}
    </div>
  )
}

import { useEffect, useState } from "react"
 
import AnimatedCard from "@/components/ui/animated-card-carousel"
 
export default function RotatingAnimatedCardDemo() {
  const cards = [
    // Your card data here
  ]
  const [activeIndex, setActiveIndex] = useState(0)
  const [isHovering, setIsHovering] = useState(false)
  const [rotationSpeed, setRotationSpeed] = useState(3000)
  const [animationDuration, setAnimationDuration] = useState(0.5)
  const [animationEase, setAnimationEase] = useState("easeInOut")
 
  useEffect(() => {
    let interval: NodeJS.Timeout
 
    if (!isHovering) {
      interval = setInterval(() => {
        setActiveIndex((prevIndex) => (prevIndex + 1) % cards.length)
      }, rotationSpeed)
    }
 
    return () => clearInterval(interval)
  }, [isHovering, cards.length, rotationSpeed])
 
  const handleMouseEnter = (index: number) => {
    setIsHovering(true)
    setActiveIndex(index)
  }
 
  const handleMouseLeave = () => {
    setIsHovering(false)
  }
 
  return (
    <div className="grid gap-3 md:grid-cols-2">
      {cards.map((card, index) => (
        <AnimatedCard
          key={index}
          title={card.title}
          description={card.description}
          imgSrc={card.imgSrc}
          color={card.color}
          href={card.href}
          isActive={index === activeIndex}
          onMouseEnter={() => handleMouseEnter(index)}
          onMouseLeave={handleMouseLeave}
          animationDuration={animationDuration}
          animationEase={animationEase}
        />
      ))}
    </div>
  )
}

<AnimatedCard
  title="Project Title"
  description="Project description goes here"
  imgSrc="/path/to/image.png"
  color="#2e428a"
  href="#"
  isActive={true}
  onMouseEnter={() => {}}
  onMouseLeave={() => {}}
  className="my-custom-class"
  imageClassName="my-image-class"
  titleClassName="text-2xl font-bold"
  descriptionClassName="text-sm"
  linkClassName="font-medium"
  animationDuration={0.7}
  animationEase="backOut"
/>