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

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

diff --git a/components/problem-section.tsx b/components/problem-section.tsx
new file mode 100644
index 0000000..824ae40
--- /dev/null
+++ b/components/problem-section.tsx
@@ -0,0 +1,57 @@
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { XCircle } from "lucide-react";
+
+const problems = [
+  {
+    title: "Lack of practical skills",
+    description: "Indian students often graduate with theoretical knowledge but zero hands-on experience required by the industry.",
+  },
+  {
+    title: "High dropout rates",
+    description: "Traditional EdTech platforms are boring and theory-heavy, leading to low completion and high student frustration.",
+  },
+  {
+    title: "Career Confusion",
+    description: "Students have no clarity on future careers or which skills actually align with their natural interests.",
+  },
+  {
+    title: "The Digital Divide",
+    description: "Lack of affordable, scalable skilling solutions that can reach every corner of India effectively.",
+  },
+];
+
+export function ProblemSection() {
+  return (
+    <section className="py-20 bg-neutral-50">
+      <Container>
+        <div className="text-center max-w-3xl mx-auto mb-16">
+          <Heading level="h2" className="text-3xl md:text-4xl">The Indian Student Problem</Heading>
+          <Subheading className="mt-4">
+            This problem exists at school, college, and early career levels. We are here to bridge this gap.
+          </Subheading>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {problems.map((problem, index) => (
+            <Card key={index} className="border-none shadow-sm bg-white">
+              <CardHeader className="flex flex-row items-start space-x-4 space-y-0">
+                <div className="mt-1">
+                  <XCircle className="h-6 w-6 text-red-500" />
+                </div>
+                <div>
+                  <CardTitle className="text-xl mb-2">{problem.title}</CardTitle>
+                  <CardDescription className="text-neutral-600 text-base">
+                    {problem.description}
+                  </CardDescription>
+                </div>
+              </CardHeader>
+            </Card>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}