Team Section

Component 319

About

TeamSection A responsive team showcase section with member profiles, designations, social media links, and an animated hover effect for individual member cards.

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

import React from "react";
import { TeamSection } from "@/components/ui/team-section-1"; // Adjust path as necessary
import {
  Twitter,
  Facebook,
  Instagram,
  Youtube,
  Github,
  Linkedin,
} from "lucide-react"; // Example icons from lucide-react

export default function TeamSectionDemo() {
  const teamMembers = [
    {
      name: "EMMA",
      designation: "Product Designer",
      imageSrc:
        "https://cdn.21st.dev/assets/mirror/e8/e87dd9c3d7e7c987901cef2bcca30db0157a1b51824e8628ccbfb27637ab9902.jpg", // Example image for Emma
      socialLinks: [
        { icon: Twitter, href: "#" },
        { icon: Linkedin, href: "#" },
      ],
    },
    {
      name: "HENRY",
      designation: "Lead Developer",
      imageSrc:
        "https://cdn.21st.dev/assets/mirror/99/9962a124f42fc85ab70e0ffc89c7b61b9851ecea9aaeba8168a53824a2d74cad.jpg", // Example image for Henry
      socialLinks: [
        { icon: Github, href: "#" },
        { icon: Twitter, href: "#" },
      ],
    },
    {
      name: "JOHN",
      designation: "Marketing Specialist",
      imageSrc:
        "https://cdn.21st.dev/assets/mirror/ee/eec32305a7a6a9464effe3b43b1eb474d84c03fdd0fe8bc8e2c8f596dca65f98.jpg", // Example image for John
      socialLinks: [
        { icon: Facebook, href: "#" },
        { icon: Instagram, href: "#" },
      ],
    },
  ];

  const mainSocialLinks = [
    { icon: Twitter, href: "#" },
    { icon: Facebook, href: "#" },
    { icon: Instagram, href: "#" },
    { icon: Youtube, href: "#" },
  ];

  return (
    <TeamSection
      title="CREATIVE TEAM"
      description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat."
      members={teamMembers}
      registerLink="#"
      logo="RAVI" // You could pass an actual SVG or Image component here
      socialLinksMain={mainSocialLinks}
    />
  );
}