Update components/problem-section.tsx

2026-01-18 18:22:55 +00:00 · 2026-01-18 18:22:55 +00:00 · 629f8e6fac
parent 3fe7c31af2
commit 629f8e6fac
1 changed files with 57 additions and 0 deletions
--- a/components/problem-section.tsx
+++ 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>
+  );
+}