Team Section

Component

About

Team Section This component provides a responsive and visually appealing section to introduce your team members. It uses framer-motion for smooth, on-scroll animations and is styled with shadcn/ui theme variables for easy adaptation to your project's light and dark modes.

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 { TeamSection, TeamMember } from "@/components/ui/team-section-2"; // Adjust the import path as needed

// Sample data for team members
const teamMembers: TeamMember[] = [
  {
    name: "Matthew Bennet",
    role: "CEO",
    image: "https://cdn.21st.dev/assets/mirror/a4/a4dd47498f54944edb9cd8095fb751847193faac01d922bae494e68d0cf90f4f.jpg",
  },
  {
    name: "Martin Paes",
    role: "Market Analyst",
    image: "https://cdn.21st.dev/assets/mirror/b2/b2cd3e4ad761fd9954c265df5f86090c4f17c388c07f78332e75edfd7420f66a.jpg",
  },
  {
    name: "Raffael Struick",
    role: "Financial Consultant",
    image: "https://cdn.21st.dev/assets/mirror/fa/fae47bb0faba45d1e0696b6557ca36c551a738c7d6e3950e82bb69dd2f963a72.jpg",
  },
];

/**
 * A demo page showcasing the TeamSection component.
 */
export default function TeamSectionDemo() {
  return (
    <div className="w-full">
      <TeamSection
        title="Meet the Minds Behind Steerwise"
        subtitle="Team Expertise"
        members={teamMembers}
      />
    </div>
  );
}