// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Team 02 * @description A team section with larger cards featuring full bio, * background image overlay, and prominent social links. * * @slots team, team-container, team-header, team-heading, team-description, * team-grid, team-card, team-image, team-card-content, team-name, * team-role, team-bio, team-social * @variant cards * * @registryDependencies icon-button button card * @dependencies lucide-react */ import * as React from "react" import { Linkedin, Mail } from "lucide-react" import { FaXTwitter } from "react-icons/fa6" import { cn } from "@/registry/lib/utils" import { IconButtonLink } from "@/registry/ui/icon-button" import { Card, CardContent } from "@/registry/ui/card" // ============================================================================ // TYPES // ============================================================================ interface SocialLinks { /** Email address */ email?: string /** Twitter profile URL */ twitter?: string /** LinkedIn profile URL */ linkedin?: string } interface TeamMember { /** Unique identifier */ id: string /** Member name */ name: string /** Role/title */ role: string /** Avatar image URL */ image: string /** Full bio */ bio: string /** Social links */ social?: SocialLinks } interface Team02Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Team members */ members?: TeamMember[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultMembers: TeamMember[] = [ { id: "member-1", name: "Alexandra Wright", role: "Chief Executive Officer", image: "/assets/placeholders/placeholder-3x4.svg", bio: "Alexandra brings over 20 years of experience in technology leadership. She previously served as COO at a Fortune 500 company and is passionate about building inclusive workplaces.", social: { email: "#mailto:alex@example.com", twitter: "#", linkedin: "#", }, }, { id: "member-2", name: "James Mitchell", role: "Chief Technology Officer", image: "/assets/placeholders/placeholder-3x4.svg", bio: "James is a renowned engineer who has built systems serving millions of users. He holds multiple patents and is a frequent speaker at technology conferences worldwide.", social: { email: "#mailto:james@example.com", linkedin: "#", }, }, { id: "member-3", name: "Priya Sharma", role: "Chief Product Officer", image: "/assets/placeholders/placeholder-3x4.svg", bio: "Priya has launched products used by over 100 million people. Her user-centered approach to product development has earned her recognition as a top product leader.", social: { email: "#mailto:priya@example.com", twitter: "#", linkedin: "#", }, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Team02({ heading = "Leadership team", description = "Meet the people driving our mission forward. Our diverse leadership team brings decades of combined experience.", members = defaultMembers, className, }: Team02Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Team Grid */}

{members.map((member) => ( {/* Image */}

{/* Gradient Overlay */} {/* Bio */}

{member.bio}

{/* Social Links */} {member.social && (

{member.social.email && ( )} {member.social.twitter && ( )} {member.social.linkedin && ( )}

)} ))}

) } export default Team02 export { Team02, type Team02Props, type TeamMember, type SocialLinks }