45 lines
2.3 KiB
TypeScript
45 lines
2.3 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import { Brain, Map, Gamepad2, Briefcase, Trophy, Rocket } from "lucide-react";
|
|
|
|
const solutions = [
|
|
{ title: "AI-based Skill Discovery", description: "Personalized assessment to find your true potential.", icon: Brain },
|
|
{ title: "Personalized Skill Roadmap", description: "A step-by-step guide tailored to your goals.", icon: Map },
|
|
{ title: "Gamified Learning", description: "Engaging content that feels like playing a game.", icon: Gamepad2 },
|
|
{ title: "Practical Tasks + Projects", description: "Learn by doing with real-world industry projects.", icon: Rocket },
|
|
{ title: "Rewards & Motivation", description: "Earn points and badges as you master new skills.", icon: Trophy },
|
|
{ title: "Career Preparation", description: "Get ready for jobs, freelancing, or business.", icon: Briefcase },
|
|
];
|
|
|
|
export function SolutionSection() {
|
|
return (
|
|
<section className="py-20">
|
|
<Container>
|
|
<div className="text-center mb-16">
|
|
<Heading className="text-3xl md:text-4xl">Our Solution: The Core Vision</Heading>
|
|
<div className="mt-6 flex flex-wrap justify-center gap-4">
|
|
<span className="px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-semibold">Gamified Learning</span>
|
|
<span className="px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-semibold">AI Roadmap</span>
|
|
<span className="px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-semibold">Reward Points</span>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{solutions.map((item, index) => (
|
|
<Card key={index} className="hover:shadow-lg transition-shadow">
|
|
<CardHeader>
|
|
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
|
|
<item.icon className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<CardTitle>{item.title}</CardTitle>
|
|
<CardDescription>{item.description}</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|