From 26179aa4779dcae2420e6bd24cc8867e90371bfd Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 18:22:22 +0000
Subject: [PATCH] Update components/gamification.tsx

---
 components/gamification.tsx | 81 +++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 components/gamification.tsx

diff --git a/components/gamification.tsx b/components/gamification.tsx
new file mode 100644
index 0000000..ea78fa4
--- /dev/null
+++ b/components/gamification.tsx
@@ -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>
+  );
+}