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

Update components/gamification.tsx

This commit is contained in:
kleap-admin 2026-01-18 18:22:22 +00:00
parent d8251de74c
commit 26179aa477
1 changed files with 81 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
components/gamification.tsx Normal file
View File

@ -0,0 +1,81 @@
"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Card, CardContent } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/badge";
import { Trophy, Star, Zap, Target } from "lucide-react";
export function GamificationSection() {
return (
<section className="py-20 bg-slate-50 dark:bg-neutral-900/50">
<Container>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<Heading className="text-3xl md:text-4xl mb-6">Engagement Engine</Heading>
<p className="text-lg text-muted-foreground mb-8">
Gamification reduces dropout and increases completion. We turn learning into a rewarding journey.
</p>
<div className="space-y-6">
<div className="bg-white dark:bg-neutral-800 p-6 rounded-xl shadow-sm border">
<div className="flex justify-between mb-2">
<span className="font-semibold">Overall Progress</span>
<span className="text-primary font-bold">65%</span>
</div>
<Progress value={65} className="h-3" />
</div>
<div className="grid grid-cols-2 gap-4">
<Card className="bg-primary/5 border-primary/20">
<CardContent className="p-4 flex flex-col items-center text-center">
<Trophy className="w-8 h-8 text-yellow-500 mb-2" />
<span className="text-sm font-bold">Skill Explorer</span>
<span className="text-xs text-muted-foreground">Badge Earned</span>
</CardContent>
</Card>
<Card className="bg-primary/5 border-primary/20">
<CardContent className="p-4 flex flex-col items-center text-center">
<Star className="w-8 h-8 text-blue-500 mb-2" />
<span className="text-sm font-bold">Curious Learner</span>
<span className="text-xs text-muted-foreground">Badge Earned</span>
</CardContent>
</Card>
</div>
</div>
</div>
<div className="space-y-6">
<div className="flex items-start gap-4 p-4 bg-white dark:bg-neutral-800 rounded-lg border">
<Zap className="w-6 h-6 text-orange-500 shrink-0" />
<div>
<h4 className="font-bold">Weekly Challenges</h4>
<p className="text-sm text-muted-foreground">Complete 3 practical tasks this week to earn 500 bonus points.</p>
</div>
</div>
<div className="flex items-start gap-4 p-4 bg-white dark:bg-neutral-800 rounded-lg border">
<Target className="w-6 h-6 text-green-500 shrink-0" />
<div>
<h4 className="font-bold">Monthly Hackathons</h4>
<p className="text-sm text-muted-foreground">Join the "Build-a-Bot" challenge and win industry certifications.</p>
</div>
</div>
<div className="p-6 bg-slate-900 text-white rounded-xl">
<div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-2xl">🤖</div>
<div>
<p className="text-sm font-medium text-primary">AI Mentor</p>
<p className="text-lg italic">"Learn skills that actually matter in real life."</p>
</div>
</div>
<div className="flex gap-2">
<Badge variant="outline" className="text-white border-white/20">Creative Skills</Badge>
<Badge variant="outline" className="text-white border-white/20">Motivation Nudges</Badge>
</div>
</div>
</div>
</div>
</Container>
</section>
);
}