"use client"; import { useState } from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; export interface TeamMember { name: string; role: string; gradient?: [string, string]; } function initials(name: string) { return name .split(" ") .map((p) => p[0]) .slice(0, 2) .join("") .toUpperCase(); } function TeamCard({ member, index }: { member: TeamMember; index: number }) { const [hovering, setHovering] = useState(false); const [from, to] = member.gradient ?? ["#7c6cff", "#5b8cff"]; return ( setHovering(true)} onMouseLeave={() => setHovering(false)} className="relative aspect-[3/3.4] overflow-hidden rounded-2xl border border-line" >

{initials(member.name)}

{member.name}

{member.role} ); } export function TeamGrid({ members, className, }: { members: TeamMember[]; className?: string; }) { return (

{members.map((m, i) => ( ))}

); } const DEMO: TeamMember[] = [ { name: "Ava Chen", role: "Founder & CEO", gradient: ["#7c6cff", "#5b8cff"] }, { name: "Marcus Reed", role: "Head of Design", gradient: ["#5b8cff", "#4fd1c5"] }, { name: "Sofia Lima", role: "Lead Engineer", gradient: ["#a78bfa", "#7c6cff"] }, { name: "Jonah Park", role: "Growth", gradient: ["#f2734f", "#7c6cff"] }, ]; export default function Demo() { return (

); }

Team Grid