Components
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.
Loading preview...
// 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://i.pravatar.cc/150?img=1", // 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://i.pravatar.cc/150?img=3", // 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://i.pravatar.cc/150?img=5", // 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://i.pravatar.cc/150?img=8", // 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;