Team 2

1"use client";
2 
3import { getAllPeople, getAvatarUrl, type Person } from "@/lib/smoothui-data";
4import { motion, useReducedMotion } from "motion/react";
5import { useEffect, useState } from "react";
6 
7const CARDS_PER_VIEW = 3; // Number of cards visible at once
8const CARD_WIDTH = 288;
9const CARD_GAP = 16;
10const AUTOPLAY_INTERVAL = 5000;
11const TRANSITION_TIMEOUT = 1500;
12const AVATAR_SIZE = 160;
13const STAGGER_DELAY = 0.1;
14 
15interface TeamCarouselProps {
16  description?: string;
17  members?: Person[];
18  subtitle?: string;
19  title?: string;
20}
21 
22export function TeamCarousel({
23  title = "Tech Pioneers",
24  subtitle = "building the future",
25  description = "We bring together brilliant developers, engineers, and tech innovators to create groundbreaking digital solutions.",
26  members = getAllPeople(),
27}: TeamCarouselProps) {
28  const shouldReduceMotion = useReducedMotion();
29  const [currentIndex, setCurrentIndex] = useState(0);
30  const [isAutoPlaying, setIsAutoPlaying] = useState(true);
31  const [isTransitioning, setIsTransitioning] = useState(false);
32 
33  useEffect(() => {
34    if (!isAutoPlaying || isTransitioning) {
35      return;
36    }
37 
38    const interval = setInterval(() => {
39      setCurrentIndex(
40        (prev) => (prev + 1) % (members.length - CARDS_PER_VIEW + 1)
41      );
42    }, AUTOPLAY_INTERVAL);
43 
44    return () => clearInterval(interval);
45  }, [members.length, isAutoPlaying, isTransitioning]);
46 
47  const nextSlide = () => {
48    if (isTransitioning) {
49      return;
50    }
51    const maxIndex = members.length - CARDS_PER_VIEW;
52    if (currentIndex >= maxIndex) {
53      return;
54    }
55 
56    setIsTransitioning(true);
57    setCurrentIndex((prev) => Math.min(prev + 1, maxIndex));
58    setIsAutoPlaying(false);
59 
60    setTimeout(() => {
61      setIsTransitioning(false);
62      setIsAutoPlaying(true);
63    }, TRANSITION_TIMEOUT);
64  };
65 
66  const prevSlide = () => {
67    if (isTransitioning) {
68      return;
69    }
70    if (currentIndex <= 0) {
71      return;
72    }
73 
74    setIsTransitioning(true);
75    setCurrentIndex((prev) => Math.max(prev - 1, 0));
76    setIsAutoPlaying(false);
77 
78    setTimeout(() => {
79      setIsTransitioning(false);
80      setIsAutoPlaying(true);
81    }, TRANSITION_TIMEOUT);
82  };
83 
84  return (
85    <section className="overflow-hidden py-32">
86      <div className="mx-auto max-w-5xl px-8 lg:px-0">
87        <motion.div
88          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
89          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
90// … truncated