Mentor Section

Cards 111

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Mentor Section to your project and fits it to your theme.

Code

How Mentor Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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