87 lines
3.4 KiB
TypeScript
87 lines
3.4 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { CheckCircle2, Sparkles, Target, Gamepad2, Trophy, Briefcase } from "lucide-react";
|
|
|
|
const solutions = [
|
|
{
|
|
title: "AI-based Skill Discovery",
|
|
icon: <Sparkles className="h-6 w-6 text-blue-500" />,
|
|
description: "Personalized assessment to find your natural strengths.",
|
|
},
|
|
{
|
|
title: "Personalized Roadmap",
|
|
icon: <Target className="h-6 w-6 text-indigo-500" />,
|
|
description: "A step-by-step path tailored to your specific career goals.",
|
|
},
|
|
{
|
|
title: "Gamified Learning",
|
|
icon: <Gamepad2 className="h-6 w-6 text-purple-500" />,
|
|
description: "Engaging experience that keeps you motivated to finish.",
|
|
},
|
|
{
|
|
title: "Practical Projects",
|
|
icon: <CheckCircle2 className="h-6 w-6 text-green-500" />,
|
|
description: "Learn by doing with real-world tasks and industry projects.",
|
|
},
|
|
{
|
|
title: "Rewards & Motivation",
|
|
icon: <Trophy className="h-6 w-6 text-yellow-500" />,
|
|
description: "Earn points and badges as you master new skills.",
|
|
},
|
|
{
|
|
title: "Career Preparation",
|
|
icon: <Briefcase className="h-6 w-6 text-orange-500" />,
|
|
description: "Get ready for the job market with interview prep and portfolios.",
|
|
},
|
|
];
|
|
|
|
export function SolutionSection() {
|
|
return (
|
|
<section className="py-20">
|
|
<Container>
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<Heading level="h2" className="text-3xl md:text-4xl">Our Solution: The Core Vision</Heading>
|
|
<Subheading className="mt-4">
|
|
A holistic platform that solves career confusion and skill gaps simultaneously.
|
|
</Subheading>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{solutions.map((solution, index) => (
|
|
<div key={index} className="p-6 rounded-2xl border border-neutral-100 hover:border-blue-100 hover:bg-blue-50/30 transition-all group">
|
|
<div className="mb-4 p-3 rounded-xl bg-neutral-50 group-hover:bg-white w-fit transition-colors">
|
|
{solution.icon}
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2">{solution.title}</h3>
|
|
<p className="text-neutral-600">{solution.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-16 p-8 rounded-3xl bg-blue-600 text-white text-center">
|
|
<h3 className="text-2xl font-bold mb-4">Our Unique Selling Proposition (USP)</h3>
|
|
<div className="flex flex-wrap justify-center gap-6 md:gap-12">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
<span>Gamified Learning</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
<span>AI-Personalized Roadmaps</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
<span>Reward Points</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
<span>Real-life Mastery</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|