700 lines
26 KiB
TypeScript
700 lines
26 KiB
TypeScript
import { useState, useEffect, useRef } from "react";
|
|
import Layout from "@/components/Layout";
|
|
import SEO from "@/components/SEO";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import LoadingScreen from "@/components/LoadingScreen";
|
|
import { aethexToast } from "@/lib/aethex-toast";
|
|
import { Link } from "react-router-dom";
|
|
import {
|
|
Users,
|
|
BookOpen,
|
|
Star,
|
|
Trophy,
|
|
Target,
|
|
ArrowRight,
|
|
CheckCircle,
|
|
Clock,
|
|
User,
|
|
Heart,
|
|
Sparkles,
|
|
Code,
|
|
Rocket,
|
|
Globe,
|
|
Award,
|
|
Calendar,
|
|
MessageCircle,
|
|
Video,
|
|
GraduationCap,
|
|
} from "lucide-react";
|
|
|
|
export default function MentorshipPrograms() {
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [selectedTrack, setSelectedTrack] = useState(0);
|
|
|
|
const toastShownRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false);
|
|
if (!toastShownRef.current) {
|
|
aethexToast.system("Mentorship Programs loaded successfully");
|
|
toastShownRef.current = true;
|
|
}
|
|
}, 1000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
const programs = [
|
|
{
|
|
title: "Individual Mentorship",
|
|
description:
|
|
"One-on-one guidance tailored to your specific goals and challenges",
|
|
icon: User,
|
|
duration: "3-12 months",
|
|
commitment: "2 hours/week",
|
|
price: "Starting at $300/month",
|
|
features: [
|
|
"Weekly 1-on-1 sessions",
|
|
"Personalized learning path",
|
|
"Code reviews & feedback",
|
|
"Career guidance",
|
|
"Portfolio development",
|
|
"24/7 chat support",
|
|
],
|
|
color: "from-blue-500 to-purple-600",
|
|
participants: "1:1",
|
|
},
|
|
{
|
|
title: "Group Workshops",
|
|
description:
|
|
"Collaborative learning with peers in structured group sessions",
|
|
icon: Users,
|
|
duration: "8-16 weeks",
|
|
commitment: "4 hours/week",
|
|
price: "Starting at $150/month",
|
|
features: [
|
|
"Weekly group sessions",
|
|
"Peer collaboration",
|
|
"Project-based learning",
|
|
"Industry guest speakers",
|
|
"Team challenges",
|
|
"Group portfolio projects",
|
|
],
|
|
color: "from-green-500 to-blue-600",
|
|
participants: "6-12 people",
|
|
},
|
|
{
|
|
title: "Intensive Boot Camps",
|
|
description:
|
|
"Fast-track your skills with immersive, intensive training programs",
|
|
icon: Rocket,
|
|
duration: "12-24 weeks",
|
|
commitment: "20+ hours/week",
|
|
price: "Starting at $2,500",
|
|
features: [
|
|
"Full-time immersive program",
|
|
"Industry-standard projects",
|
|
"Job placement assistance",
|
|
"Capstone project",
|
|
"Certification",
|
|
"Alumni network access",
|
|
],
|
|
color: "from-orange-500 to-red-600",
|
|
participants: "15-25 people",
|
|
},
|
|
{
|
|
title: "Corporate Training",
|
|
description: "Upskill your team with customized training programs",
|
|
icon: Trophy,
|
|
duration: "4-52 weeks",
|
|
commitment: "Flexible",
|
|
price: "Custom pricing",
|
|
features: [
|
|
"Customized curriculum",
|
|
"On-site or remote delivery",
|
|
"Team assessments",
|
|
"Progress tracking",
|
|
"Certification programs",
|
|
"Ongoing support",
|
|
],
|
|
color: "from-purple-500 to-pink-600",
|
|
participants: "10-100+ people",
|
|
},
|
|
];
|
|
|
|
const tracks = [
|
|
{
|
|
name: "Game Development",
|
|
description: "Master game development from concept to publishing",
|
|
icon: Code,
|
|
skills: [
|
|
"Unity/Unreal",
|
|
"C#/C++",
|
|
"Game Design",
|
|
"3D Modeling",
|
|
"Audio",
|
|
"Publishing",
|
|
],
|
|
level: "Beginner to Advanced",
|
|
duration: "6-12 months",
|
|
projects: 5,
|
|
},
|
|
{
|
|
name: "Web Development",
|
|
description:
|
|
"Build modern web applications with cutting-edge technologies",
|
|
icon: Globe,
|
|
skills: [
|
|
"React/Vue",
|
|
"Node.js",
|
|
"Databases",
|
|
"Cloud Deploy",
|
|
"Testing",
|
|
"DevOps",
|
|
],
|
|
level: "Beginner to Expert",
|
|
duration: "4-8 months",
|
|
projects: 8,
|
|
},
|
|
{
|
|
name: "Mobile Development",
|
|
description: "Create native and cross-platform mobile applications",
|
|
icon: Rocket,
|
|
skills: [
|
|
"React Native",
|
|
"Flutter",
|
|
"iOS/Android",
|
|
"API Integration",
|
|
"Publishing",
|
|
"Analytics",
|
|
],
|
|
level: "Intermediate to Advanced",
|
|
duration: "5-10 months",
|
|
projects: 6,
|
|
},
|
|
{
|
|
name: "Data Science & AI",
|
|
description: "Harness the power of data and artificial intelligence",
|
|
icon: Sparkles,
|
|
skills: [
|
|
"Python",
|
|
"Machine Learning",
|
|
"Data Analysis",
|
|
"Neural Networks",
|
|
"Big Data",
|
|
"Visualization",
|
|
],
|
|
level: "Beginner to Expert",
|
|
duration: "8-16 months",
|
|
projects: 10,
|
|
},
|
|
];
|
|
|
|
const mentors = [
|
|
{
|
|
name: "Sarah Chen",
|
|
title: "Senior Game Developer",
|
|
company: "Epic Games",
|
|
experience: "12 years",
|
|
specialty: "Unreal Engine, C++",
|
|
students: 85,
|
|
rating: 4.9,
|
|
avatar:
|
|
"https://images.unsplash.com/photo-1494790108755-2616b612b029?w=150&h=150&fit=crop&crop=face",
|
|
},
|
|
{
|
|
name: "Marcus Rodriguez",
|
|
title: "Full Stack Architect",
|
|
company: "Netflix",
|
|
experience: "15 years",
|
|
specialty: "React, Node.js, AWS",
|
|
students: 120,
|
|
rating: 4.8,
|
|
avatar:
|
|
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
|
|
},
|
|
{
|
|
name: "Dr. Aisha Patel",
|
|
title: "AI Research Scientist",
|
|
company: "Google DeepMind",
|
|
experience: "10 years",
|
|
specialty: "Machine Learning, Python",
|
|
students: 95,
|
|
rating: 5.0,
|
|
avatar:
|
|
"https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=150&h=150&fit=crop&crop=face",
|
|
},
|
|
];
|
|
|
|
const testimonials = [
|
|
{
|
|
name: "Alex Thompson",
|
|
role: "Junior Developer → Senior Developer",
|
|
company: "Stripe",
|
|
content:
|
|
"The mentorship program completely transformed my career. Within 8 months, I went from struggling with basic concepts to landing a senior role at a top tech company.",
|
|
program: "Individual Mentorship",
|
|
mentor: "Marcus Rodriguez",
|
|
},
|
|
{
|
|
name: "Jamie Wu",
|
|
role: "Career Changer → Game Developer",
|
|
company: "Indie Studio",
|
|
content:
|
|
"Coming from a marketing background, I never thought I could become a game developer. The boot camp gave me the skills and confidence to launch my own indie studio.",
|
|
program: "Intensive Boot Camp",
|
|
mentor: "Sarah Chen",
|
|
},
|
|
{
|
|
name: "Taylor Davis",
|
|
role: "Student → ML Engineer",
|
|
company: "OpenAI",
|
|
content:
|
|
"The AI track mentorship opened doors I never knew existed. The hands-on projects and expert guidance helped me land my dream job in machine learning.",
|
|
program: "Group Workshop",
|
|
mentor: "Dr. Aisha Patel",
|
|
},
|
|
];
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<LoadingScreen
|
|
message="Loading Mentorship Programs..."
|
|
showProgress={true}
|
|
duration={1000}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
pageTitle="Mentorship"
|
|
description="AeThex mentorship programs: 1:1 guidance, workshops, and boot camps to accelerate your journey."
|
|
canonical={
|
|
typeof window !== "undefined"
|
|
? window.location.href
|
|
: (undefined as any)
|
|
}
|
|
/>
|
|
<Layout>
|
|
<div className="min-h-screen bg-aethex-gradient">
|
|
{/* Hero Section */}
|
|
<section className="relative py-16 sm:py-24 lg:py-32 overflow-hidden">
|
|
<div className="absolute inset-0 opacity-10">
|
|
{[...Array(25)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute text-emerald-400/80 animate-float"
|
|
style={{
|
|
left: `${Math.random() * 100}%`,
|
|
top: `${Math.random() * 100}%`,
|
|
animationDelay: `${Math.random() * 3}s`,
|
|
animationDuration: `${3 + Math.random() * 2}s`,
|
|
fontSize: `${8 + Math.random() * 6}px`,
|
|
}}
|
|
>
|
|
{"🎓📚💡🚀".charAt(Math.floor(Math.random() * 4))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 text-center relative z-10">
|
|
<div className="max-w-4xl mx-auto space-y-8">
|
|
<Badge
|
|
variant="outline"
|
|
className="border-emerald-400/50 text-emerald-300 animate-bounce-gentle"
|
|
>
|
|
<GraduationCap className="h-3 w-3 mr-1" />
|
|
Mentorship & Education Division
|
|
</Badge>
|
|
|
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight">
|
|
<span className="bg-gradient-to-r from-emerald-300 via-aethex-400 to-neon-blue bg-clip-text text-transparent">
|
|
Accelerate Your Tech Journey
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
Learn from industry experts through personalized mentorship,
|
|
hands-on workshops, and intensive boot camps designed to
|
|
fast-track your technology career.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-gradient-to-r from-emerald-400 to-neon-blue shadow-[0_0_25px_rgba(16,185,129,0.35)] hover:from-emerald-500 hover:to-aethex-500 hover-lift"
|
|
>
|
|
<Link
|
|
to="/engage#mentorship"
|
|
className="flex items-center space-x-2"
|
|
>
|
|
<BookOpen className="h-5 w-5" />
|
|
<span>Apply Now</span>
|
|
<ArrowRight className="h-5 w-5" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-emerald-400/50 text-emerald-200 hover:border-emerald-400 hover:bg-emerald-500/10 hover-lift"
|
|
>
|
|
<Link to="/docs">Program Details</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Programs Overview */}
|
|
<section className="py-16 sm:py-20 bg-background/30">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Mentorship Programs
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
Choose the learning format that best fits your schedule and
|
|
goals
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
|
|
{programs.map((program, index) => {
|
|
const Icon = program.icon;
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div
|
|
className={`p-3 rounded-lg bg-gradient-to-r ${program.color}`}
|
|
>
|
|
<Icon className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-xl">
|
|
{program.title}
|
|
</CardTitle>
|
|
<CardDescription className="mt-1">
|
|
{program.description}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
<Badge variant="outline" className="shrink-0">
|
|
{program.participants}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
|
{program.features.map((feature, featureIndex) => (
|
|
<div
|
|
key={featureIndex}
|
|
className="flex items-center space-x-2 text-sm"
|
|
>
|
|
<CheckCircle className="h-3 w-3 text-emerald-400 flex-shrink-0" />
|
|
<span>{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-border/30">
|
|
<div className="text-center">
|
|
<Clock className="h-4 w-4 text-muted-foreground mx-auto mb-1" />
|
|
<div className="text-xs text-muted-foreground">
|
|
{program.duration}
|
|
</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<Calendar className="h-4 w-4 text-muted-foreground mx-auto mb-1" />
|
|
<div className="text-xs text-muted-foreground">
|
|
{program.commitment}
|
|
</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<span className="text-sm font-semibold text-emerald-400">
|
|
{program.price}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Learning Tracks */}
|
|
<section className="py-16 sm:py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Specialized Learning Tracks
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Focused curricula designed by industry experts
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
|
{tracks.map((track, index) => {
|
|
const Icon = track.icon;
|
|
const isSelected = selectedTrack === index;
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className={`cursor-pointer transition-all duration-300 hover-lift animate-scale-in ${
|
|
isSelected
|
|
? "border-emerald-500 shadow-[0_0_25px_rgba(16,185,129,0.35)] scale-105"
|
|
: "border-border/50 hover:border-emerald-400/60"
|
|
}`}
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
onClick={() => setSelectedTrack(index)}
|
|
>
|
|
<CardHeader className="text-center">
|
|
<Icon className="h-12 w-12 text-emerald-400 mx-auto mb-3" />
|
|
<CardTitle
|
|
className={`text-lg ${
|
|
isSelected
|
|
? "bg-gradient-to-r from-emerald-400 to-aethex-500 bg-clip-text text-transparent"
|
|
: ""
|
|
}`}
|
|
>
|
|
{track.name}
|
|
</CardTitle>
|
|
<CardDescription className="text-sm">
|
|
{track.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex flex-wrap gap-1">
|
|
{track.skills.slice(0, 4).map((skill, skillIndex) => (
|
|
<Badge
|
|
key={skillIndex}
|
|
variant="secondary"
|
|
className="text-xs"
|
|
>
|
|
{skill}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<div className="text-center space-y-1">
|
|
<div className="text-sm text-muted-foreground">
|
|
{track.level}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{track.duration} • {track.projects} projects
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Mentors */}
|
|
<section className="py-16 sm:py-20 bg-background/30">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Meet Our Expert Mentors
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Learn from industry leaders at top technology companies
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
|
{mentors.map((mentor, index) => (
|
|
<Card
|
|
key={index}
|
|
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
|
|
style={{ animationDelay: `${index * 0.2}s` }}
|
|
>
|
|
<CardContent className="p-6 text-center">
|
|
<img
|
|
src={mentor.avatar}
|
|
alt={mentor.name}
|
|
className="w-24 h-24 rounded-full mx-auto mb-4 ring-4 ring-emerald-400/20"
|
|
/>
|
|
<h3 className="font-semibold text-lg bg-gradient-to-r from-emerald-400 to-aethex-500 bg-clip-text text-transparent">
|
|
{mentor.name}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{mentor.title}
|
|
</p>
|
|
<p className="text-sm font-medium text-emerald-400">
|
|
{mentor.company}
|
|
</p>
|
|
|
|
<div className="mt-4 space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span>Experience:</span>
|
|
<span className="font-medium">
|
|
{mentor.experience}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span>Students Mentored:</span>
|
|
<span className="font-medium">
|
|
{mentor.students}+
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span>Rating:</span>
|
|
<div className="flex items-center space-x-1">
|
|
<Star className="h-3 w-3 text-yellow-500 fill-current" />
|
|
<span className="font-medium">{mentor.rating}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Badge variant="outline" className="mt-3 text-xs">
|
|
{mentor.specialty}
|
|
</Badge>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Success Stories */}
|
|
<section className="py-16 sm:py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Success Stories
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Real career transformations from our mentorship programs
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
|
{testimonials.map((testimonial, index) => (
|
|
<Card
|
|
key={index}
|
|
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
|
|
style={{ animationDelay: `${index * 0.2}s` }}
|
|
>
|
|
<CardHeader>
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-12 h-12 rounded-full bg-gradient-to-r from-emerald-500 via-aethex-500 to-neon-blue flex items-center justify-center text-white font-semibold">
|
|
{testimonial.name.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold">{testimonial.name}</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{testimonial.role}
|
|
</p>
|
|
<Badge variant="outline" className="text-xs">
|
|
{testimonial.company}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<blockquote className="text-sm italic text-muted-foreground">
|
|
"{testimonial.content}"
|
|
</blockquote>
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
|
<span>Program: {testimonial.program}</span>
|
|
<span>Mentor: {testimonial.mentor}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-16 sm:py-20 bg-background/30">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<div className="max-w-3xl mx-auto space-y-8 animate-scale-in">
|
|
<h2 className="text-3xl lg:text-4xl font-bold bg-gradient-to-r from-emerald-300 via-aethex-400 to-neon-blue bg-clip-text text-transparent">
|
|
Start Your Learning Journey Today
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground">
|
|
Join thousands of developers who have accelerated their
|
|
careers through our mentorship programs.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-gradient-to-r from-emerald-400 to-neon-blue shadow-[0_0_25px_rgba(16,185,129,0.35)] hover:from-emerald-500 hover:to-aethex-500 hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
|
|
>
|
|
<Link
|
|
to="/engage#mentorship"
|
|
className="flex items-center space-x-2"
|
|
>
|
|
<Heart className="h-5 w-5" />
|
|
<span>Apply for Mentorship</span>
|
|
<ArrowRight className="h-5 w-5" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-emerald-400/60 text-emerald-200 hover:border-emerald-400 hover:bg-emerald-500/10 hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
|
|
>
|
|
<Link to="/docs/curriculum">View Curriculum</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 mt-12">
|
|
<div className="text-center">
|
|
<MessageCircle className="h-8 w-8 text-emerald-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">24/7 Support</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Always available
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<Video className="h-8 w-8 text-emerald-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">Live Sessions</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Interactive learning
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<Award className="h-8 w-8 text-emerald-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">Certification</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Industry recognized
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|