Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/mentor-section// 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://images.unsplash.com/photo-1570295999919-56ceb5ecca61?q=80&w=2080&auto=format&fit=crop",
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://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1961&auto=format&fit=crop",
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://images.unsplash.com/photo-1531427186611-ecfd6d936c79?q=80&w=1974&auto=format&fit=crop",
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://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?q=80&w=1974&auto=format&fit=crop",
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://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1974&auto=format&fit=crop",
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://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1974&auto=format&fit=crop",
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>
);
}