681 lines
25 KiB
TypeScript
681 lines
25 KiB
TypeScript
import { useState, useEffect, useRef } from "react";
|
||
import Layout from "@/components/Layout";
|
||
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,
|
||
Lightbulb,
|
||
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: Lightbulb,
|
||
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 (
|
||
<Layout>
|
||
<div className="min-h-screen bg-aethex-gradient">
|
||
{/* Hero Section */}
|
||
<section className="relative py-20 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`,
|
||
}}
|
||
>
|
||
{"🎓📚💡<F09F939A><F09F92A1>".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 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="/pricing#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-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 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-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-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-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 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-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 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-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 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-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-lg px-8 py-6"
|
||
>
|
||
<Link to="/contact" 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-lg px-8 py-6"
|
||
>
|
||
<Link to="/docs">View Curriculum</Link>
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="grid 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>
|
||
);
|
||
}
|