Team 1

1"use client";
2 
3import { getAllPeople, getAvatarUrl, type Person } from "@/lib/smoothui-data";
4import { motion, useInView, useReducedMotion } from "motion/react";
5import { useRef } from "react";
6 
7const DEFAULT_MEMBER_COUNT = 4;
8const AVATAR_SIZE = 400;
9const STAGGER_DELAY = 0.1;
10 
11interface TeamGridProps {
12  description?: string;
13  members?: Person[];
14  title?: string;
15}
16 
17export function TeamGrid({
18  title = "Our team",
19  description = "We're a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.",
20  members = getAllPeople().slice(0, DEFAULT_MEMBER_COUNT),
21}: TeamGridProps) {
22  const shouldReduceMotion = useReducedMotion();
23  const ref = useRef(null);
24  const isInView = useInView(ref, { once: true });
25 
26  return (
27    <section className="bg-primary py-24 sm:py-32">
28      <div className="mx-auto max-w-7xl px-6 lg:px-8">
29        <motion.div
30          className="mx-auto max-w-2xl lg:mx-0"
31          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
32          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
33          viewport={{ once: true }}
34          whileInView={
35            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
36          }
37        >
38          <h2 className="text-pretty font-semibold text-4xl text-foreground tracking-tight sm:text-5xl">
39            {title}
40          </h2>
41          <p className="mt-6 text-foreground/70 text-lg/8">{description}</p>
42        </motion.div>
43        <motion.ul
44          className="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-14 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 xl:grid-cols-4"
45          ref={ref}
46        >
47          {members.map((member, index) => (
48            <motion.li
49              animate={(() => {
50                if (shouldReduceMotion) {
51                  return { opacity: 1 };
52                }
53                return isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 };
54              })()}
55              initial={
56                shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 30 }
57              }
58              key={member.name}
59              transition={
60                shouldReduceMotion
61                  ? { duration: 0 }
62                  : { delay: index * STAGGER_DELAY, duration: 0.6 }
63              }
64            >
65              <motion.div
66                className="group"
67                transition={
68                  shouldReduceMotion
69// … truncated