kleap
/
app-stellar-gecko-hug
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update components/solution.tsx

This commit is contained in:
kleap-admin 2026-01-18 18:27:43 +00:00
parent b96f445e2d
commit 3827e232a2
1 changed files with 44 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/solution.tsx Normal file
View File

@ -0,0 +1,44 @@
"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>
);
}