Card Carousel Hero

1"use client";
2 
3import React, { useRef, useEffect, useState } from "react";
4import { Card, CardContent } from "@/components/ui/card";
5import Image from "next/image";
6import gsap from "gsap";
7import { Button } from "@/components/ui/button";
8 
9export interface CardItem {
10  src?: string;
11  alt?: string;
12}
13 
14export interface CardCarouselHeroProps {
15  category?: string;
16  title?: string;
17  subtitle?: string;
18  cards?: CardItem[];
19}
20 
21export default function CardCarouselHero({
22  category = "Innovation Meets Simplicity",
23  title = "Build Exceptional Interfaces",
24  subtitle = "Use our component library powered by Shadcn UI & Tailwind CSS to craft beautiful, fast, and accessible UIs.",
25  cards = [],
26}: CardCarouselHeroProps) {
27  const totalCards = cards.length || 5;
28  const placeholders = Array.from({ length: totalCards }).map(() => ({
29    src: undefined,
30    alt: "",
31  }));
32  const data = cards.length > 0 ? cards : placeholders;
33 
34  const cardRefs = useRef<HTMLDivElement[]>([]);
35  const [activeIndex, setActiveIndex] = useState(0);
36 
37  const animateCards = () => {
38    const middleIndex = Math.floor(data.length / 2);
39 
40    gsap.set(cardRefs.current, {
41      x: 0,
42      scale: 0.5,
43      opacity: 0,
44      transformOrigin: "center bottom",
45    });
46 
47    const tl = gsap.timeline({
48      defaults: { duration: 0.6, ease: "power3.out" },
49    });
50 
51    tl.to(cardRefs.current[middleIndex], { x: 0, scale: 1, opacity: 1 });
52 
53    for (let offset = 1; offset <= middleIndex; offset++) {
54      const leftIndex = middleIndex - offset;
55      const rightIndex = middleIndex + offset;
56 
57      const animations: gsap.TweenTarget[] = [];
58      if (leftIndex >= 0) animations.push(cardRefs.current[leftIndex]);
59      if (rightIndex < data.length)
60        animations.push(cardRefs.current[rightIndex]);
61 
62      tl.to(
63        animations,
64        {
65          x: (i, target) => {
66            const idx = cardRefs.current.indexOf(target as HTMLDivElement);
67            return (idx - middleIndex) * 120;
68          },
69          scale: (i, target) => {
70            const idx = cardRefs.current.indexOf(target as HTMLDivElement);
71            return 1 - Math.abs(idx - middleIndex) * 0.1;
72          },
73          opacity: 1,
74        },
75        "+=0.1",
76      );
77    }
78  };
79 
80  useEffect(() => {
81    animateCards();
82  }, [activeIndex]);
83 
84  return (
85    <section className="py-20 px-4 bg-white dark:bg-black transition-colors duration-300">
86// … truncated