Mentor Section A responsive and animated component to display a filterable grid of mentors. It features smooth layout animations for filtering and subtle hover effects on each card, built with Framer Motion.
// demo.tsx
import { MentorsSection } from "@/components/ui/mentor-section";
const mentorData = [
{
id: 1,
name: "Benyamin Rolocov",
role: "Python Developer",
category: "Science & Engineering",
gigs: 8,
rating: 5.0,
reviews: 126,
imageUrl: "https://cdn.21st.dev/assets/mirror/ba/baab813e1ee38ecce0d70b0422ac386b9f4786e3318c1ed25be39c2d565c9f5f.jpg",
description: "Learn from industry professionals offering their services.",
},
{
id: 2,
name: "Alexandra Chabon",
role: "Graphic Designer",
category: "Graphic Design",
gigs: 32,
rating: 4.9,
reviews: 154,
imageUrl: "https://cdn.21st.dev/assets/mirror/e8/e87dd9c3d7e7c987901cef2bcca30db0157a1b51824e8628ccbfb27637ab9902.jpg",
description: "Creative guidance from seasoned design experts.",
},
{
id: 3,
name: "Rezchwag Shibana",
role: "Strategist & Manager",
category: "Sustainability",
gigs: 79,
rating: 4.8,
reviews: 231,
imageUrl: "https://cdn.21st.dev/assets/mirror/b6/b603c193bbeb390c229515b1bd2dee04c9482587c8e7e2e850526b0ff207495b.jpg",
description: "Expert insights for sustainable business growth.",
},
{
id: 4,
name: "Zhang Chiano",
role: "SEO Specialist",
category: "Science & Engineering",
gigs: 2,
rating: 3.8,
reviews: 16,
imageUrl: "https://cdn.21st.dev/assets/mirror/2c/2c41eb0dbdbe2793ee29724f084b185f13463bf42603c4e9292b30112d0d964f.jpg",
description: "Unlock your website's potential with proven SEO techniques.",
},
{
id: 5,
name: "Dr. Evelyn Reed",
role: "AI Researcher",
category: "Science & Engineering",
gigs: 15,
rating: 4.9,
reviews: 98,
imageUrl: "https://cdn.21st.dev/assets/mirror/df/df97b507b2514bdf2c110404528f71c007828848d866e9bba2358004cdb55f9f.jpg",
description: "Dive deep into machine learning with a leading researcher.",
},
{
id: 6,
name: "Marco Verratti",
role: "UI/UX Lead",
category: "Graphic Design",
gigs: 41,
rating: 4.9,
reviews: 310,
imageUrl: "https://cdn.21st.dev/assets/mirror/ec/ec403263c2ba2f3e811004208f9aeee1fc9661da826802c5a26ea7ad11c000ba.jpg",
description: "Design user-centric interfaces that people love to use.",
},
];
const categoryData = ["Science & Engineering", "Graphic Design", "Sustainability"];
export default function MentorPageDemo() {
return (
<div className="w-full bg-background">
<MentorsSection mentors={mentorData} categories={categoryData} />
</div>
);
}