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.
// 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;