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.
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>
);
}