diff --git a/client/pages/MenteeHub.tsx b/client/pages/MenteeHub.tsx new file mode 100644 index 00000000..e8c15015 --- /dev/null +++ b/client/pages/MenteeHub.tsx @@ -0,0 +1,352 @@ +import Layout from "@/components/Layout"; +import { useAuth } from "@/contexts/AuthContext"; +import { useEffect, useState } from "react"; +import { useNavigate, Link } from "react-router-dom"; +import { + Card, + CardHeader, + CardTitle, + CardDescription, + CardContent, +} from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Badge } from "@/components/ui/badge"; +import { Input } from "@/components/ui/input"; +import LoadingScreen from "@/components/LoadingScreen"; +import { aethexToast } from "@/lib/aethex-toast"; +import { + GraduationCap, + Star, + Users, + Trophy, + Target, + Calendar, + MessageCircle, + ArrowRight, + Search, + BookOpen, +} from "lucide-react"; + +export default function MenteeHub() { + const { user, profile, loading } = useAuth(); + const navigate = useNavigate(); + const [isLoading, setIsLoading] = useState(true); + const [searchTerm, setSearchTerm] = useState(""); + const [mentors, setMentors] = useState([ + { + id: "1", + name: "ByteSage", + specialty: "Game Development", + bio: "10+ years shipping games across 8 platforms", + avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=ByteSage", + rating: 4.9, + reviews: 48, + hourlyRate: "$50/hr", + availability: "Mon-Fri, 6-9pm EST", + students: 12, + }, + { + id: "2", + name: "AriaNova", + specialty: "Platform Engineering", + bio: "Lead architect at AeThex Platform", + avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=AriaNova", + rating: 4.8, + reviews: 35, + hourlyRate: "$60/hr", + availability: "Flexible", + students: 8, + }, + { + id: "3", + name: "FluxPilot", + specialty: "Community & Growth", + bio: "Built communities of 100k+ creators", + avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=FluxPilot", + rating: 4.7, + reviews: 52, + hourlyRate: "$45/hr", + availability: "Anytime", + students: 15, + }, + ]); + + useEffect(() => { + if (!loading && !user) navigate("/login", { replace: true }); + }, [loading, user, navigate]); + + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 1000); + + return () => clearTimeout(timer); + }, []); + + const filteredMentors = mentors.filter( + (mentor) => + mentor.name.toLowerCase().includes(searchTerm.toLowerCase()) || + mentor.specialty.toLowerCase().includes(searchTerm.toLowerCase()), + ); + + if (loading || isLoading) return ; + + return ( + +
+
+ {/* Header */} +
+
+
+

+ Mentee Hub +

+

+ Connect with experienced mentors and accelerate your growth +

+
+
+ +
+
+
+ + {/* Your Mentorship Stats */} +
+ + + + Current Mentors + + + +
0
+ + + + + + Hours Completed + + + +
0
+ + + + + + Goals Achieved + + + +
0
+ + + + + + Progress + + + +
0%
+ + +
+ + {/* Quick Actions */} +
+ + + + + Learning Path + + + Set your learning goals and track progress + + + + + + + + + + + + Programs + + + Explore structured mentorship programs + + + + + + +
+ + {/* Find a Mentor */} +
+

+ Find Your Mentor +

+ + {/* Search */} +
+ + setSearchTerm(e.target.value)} + className="pl-10 bg-background/60 border-border/40" + /> +
+ + {/* Mentors Grid */} +
+ {filteredMentors.length === 0 ? ( +
+

+ No mentors found matching your search +

+
+ ) : ( + filteredMentors.map((mentor) => ( + + +
+ + + {mentor.name[0]} + +
+ + {mentor.name} + + + {mentor.specialty} + +
+
+ + +

+ {mentor.bio} +

+ +
+
+ + {mentor.rating} + + ({mentor.reviews} reviews) + +
+
+ + {mentor.students} active students +
+
+ + + {mentor.availability} + +
+
+ +
+

+ {mentor.hourlyRate} +

+
+ + +
+
+ + + )) + )} +
+
+ + {/* Mentee Benefits */} +
+

+ Why Get a Mentor? +

+
+
+
+ + + Personalized Guidance + +
+

+ Get tailored advice based on your specific goals and + challenges +

+
+
+
+ + + Accelerated Growth + +
+

+ Learn from experienced professionals and avoid common pitfalls +

+
+
+
+ + + Network Building + +
+

+ Connect with industry leaders and expand your professional + network +

+
+
+
+
+
+ + ); +}