Components
Loading preview...
Animated Team Section This component displays a title, a description, and a list of team members in a visually appealing animated arc layout. It's designed to be highly reusable through props.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/team-sectionimport { AnimatedTeamSection } from "@/components/ui/team-section";
// Sample data for the demo
const teamMembers = [
{
name: "Johnathan Doe",
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=200&auto=format&fit=crop",
},
{
name: "Jane Smith",
image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=200&auto=format&fit=crop",
},
{
name: "Peter Jones",
image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=200&auto=format&fit=crop",
},
{
name: "Sarah Williams",
image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop",
},
{
name: "Michael Brown",
image: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=200&auto=format&fit=crop",
},
{
name: "Emily Davis",
image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=200&auto=format&fit=crop",
},
{
name: "David Garcia",
image: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=200&auto=format&fit=crop",
},
];
export default function AnimatedTeamSectionDemo() {
return (
<div className="w-full bg-background">
<AnimatedTeamSection
title="Our commitment to integrity and innovation"
description="At TopOpti, we believe in forging strong partnerships build on integrity and honesty. Our mission is to drive innovation and ensure our clients success through dedicated service and creative solutions."
members={teamMembers}
/>
</div>
);
}