Team Section

Component

About

Team Section This component displays a "Meet Our Team" section. It's designed to be highly reusable, accepting an array of team member data as a prop. It uses framer-motion for smooth, staggered entry animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Team Section to your project and fits it to your theme.

Code

How Team Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import { TeamSection, TeamMember } from "@/components/ui/team-section"; // Adjust the import path
import { Dribbble, Facebook, Twitter } from "lucide-react"; // Using lucide-react for icons

const TeamSectionDemo = () => {
  // Sample data for team members
  const teamMembers: TeamMember[] = [
    {
      name: "Anya Petrova",
      role: "Lead Designer",
      imageUrl: "https://cdn.21st.dev/assets/mirror/f0/f02fed36023656a5b5df6f247c83c96c53bfa9db5b98085cdee93ffc938a5f37.jpg", // Placeholder image URL
      socials: [
        { icon: <Dribbble className="h-5 w-5" />, url: "#", name: "Dribbble" },
        { icon: <Facebook className="h-5 w-5" />, url: "#", name: "Facebook" },
        { icon: <Twitter className="h-5 w-5" />, url: "#", name: "Twitter" },
      ],
    },
    {
      name: "Leo Kim",
      role: "Frontend Developer",
      imageUrl: "https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg", // Placeholder image URL
      socials: [
        { icon: <Dribbble className="h-5 w-5" />, url: "#", name: "Dribbble" },
        { icon: <Facebook className="h-5 w-5" />, url: "#", name: "Facebook" },
        { icon: <Twitter className="h-5 w-5" />, url: "#", name: "Twitter" },
      ],
    },
    {
      name: "Elena Rodriguez",
      role: "Product Manager",
      imageUrl: "https://cdn.21st.dev/assets/mirror/4f/4fb45af36b546e069b72527fdf4d904855a2b11b301fa738c8bc4d235595c4df.jpg", // Placeholder image URL
      socials: [
        { icon: <Dribbble className="h-5 w-5" />, url: "#", name: "Dribbble" },
        { icon: <Facebook className="h-5 w-5" />, url: "#", name: "Facebook" },
        { icon: <Twitter className="h-5 w-5" />, url: "#", name: "Twitter" },
      ],
    },
    {
      name: "Marco Chen",
      role: "Backend Engineer",
      imageUrl: "https://cdn.21st.dev/assets/mirror/9a/9a3f3f88dac2ceb807e98d4cbe99acc9813da6d0ce2859b1cf026747727e1667.jpg", // Placeholder image URL
      socials: [
        { icon: <Dribbble className="h-5 w-5" />, url: "#", name: "Dribbble" },
        { icon: <Facebook className="h-5 w-5" />, url: "#", name: "Facebook" },
        { icon: <Twitter className="h-5 w-5" />, url: "#", name: "Twitter" },
      ],
    },
  ];

  return (
    <div className="w-full bg-background">
      <TeamSection members={teamMembers} />
    </div>
  );
};

export default TeamSectionDemo;