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