58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
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>
|
|
);
|
|
}
|