From 9b862b0fc9749d6c4db3b783e6456efb3137e331 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 18:29:33 +0000
Subject: [PATCH] Update components/solution-section.tsx

---
 components/solution-section.tsx | 86 +++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 components/solution-section.tsx

diff --git a/components/solution-section.tsx b/components/solution-section.tsx
new file mode 100644
index 0000000..bb21fa9
--- /dev/null
+++ b/components/solution-section.tsx
@@ -0,0 +1,86 @@
+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>
+  );
+}