From 375d1db7c1b4bdf8bce775ac12f16229985af877 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 18:29:43 +0000
Subject: [PATCH] Update components/business-model.tsx

---
 components/business-model.tsx | 98 +++++++++++++++++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 components/business-model.tsx

diff --git a/components/business-model.tsx b/components/business-model.tsx
new file mode 100644
index 0000000..6edebc6
--- /dev/null
+++ b/components/business-model.tsx
@@ -0,0 +1,98 @@
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Card, CardContent } from "@/components/ui/card";
+import { TrendingUp, Users, DollarSign, Rocket } from "lucide-react";
+
+export function BusinessModel() {
+  return (
+    <section className="py-20 bg-blue-50">
+      <Container>
+        <div className="text-center max-w-3xl mx-auto mb-16">
+          <Heading level="h2" className="text-3xl md:text-4xl">Business Model & Vision</Heading>
+          <Subheading className="mt-4">
+            How we scale and sustain the impact across India.
+          </Subheading>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+          <Card className="border-none shadow-sm">
+            <CardContent className="p-8 text-center">
+              <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <DollarSign className="h-6 w-6 text-blue-600" />
+              </div>
+              <h3 className="text-3xl font-bold mb-2">₹500/mo</h3>
+              <p className="text-neutral-600 font-medium">Subscription Model</p>
+              <p className="text-sm text-neutral-500 mt-2">Affordable access to all premium tracks and certifications.</p>
+            </CardContent>
+          </Card>
+          
+          <Card className="border-none shadow-sm">
+            <CardContent className="p-8 text-center">
+              <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <TrendingUp className="h-6 w-6 text-green-600" />
+              </div>
+              <h3 className="text-3xl font-bold mb-2">75%</h3>
+              <p className="text-neutral-600 font-medium">Gross Margin</p>
+              <p className="text-sm text-neutral-500 mt-2">Highly scalable digital infrastructure with low operational overhead.</p>
+            </CardContent>
+          </Card>
+
+          <Card className="border-none shadow-sm">
+            <CardContent className="p-8 text-center">
+              <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Users className="h-6 w-6 text-purple-600" />
+              </div>
+              <h3 className="text-3xl font-bold mb-2">3.5x</h3>
+              <p className="text-neutral-600 font-medium">LTV / CAC Ratio</p>
+              <p className="text-sm text-neutral-500 mt-2">Strong unit economics driven by organic student referrals.</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="bg-white p-8 md:p-12 rounded-3xl shadow-sm border border-neutral-100">
+          <div className="flex items-center gap-3 mb-8">
+            <Rocket className="h-8 w-8 text-blue-600" />
+            <h3 className="text-2xl font-bold">Vision for Scale</h3>
+          </div>
+          
+          <div className="space-y-8">
+            <div className="relative">
+              <div className="flex justify-between mb-2 text-sm font-bold">
+                <span>Phase 1: Foundation</span>
+                <span>1,000 Students</span>
+              </div>
+              <div className="w-full h-3 bg-neutral-100 rounded-full overflow-hidden">
+                <div className="w-[10%] h-full bg-blue-600 rounded-full" />
+              </div>
+            </div>
+            
+            <div className="relative">
+              <div className="flex justify-between mb-2 text-sm font-bold">
+                <span>Phase 2: Growth</span>
+                <span>50,000 Students</span>
+              </div>
+              <div className="w-full h-3 bg-neutral-100 rounded-full overflow-hidden">
+                <div className="w-[40%] h-full bg-blue-400 rounded-full" />
+              </div>
+            </div>
+
+            <div className="relative">
+              <div className="flex justify-between mb-2 text-sm font-bold">
+                <span>Phase 3: Pan-India Impact</span>
+                <span>1,000,000+ Students</span>
+              </div>
+              <div className="w-full h-3 bg-neutral-100 rounded-full overflow-hidden">
+                <div className="w-[100%] h-full bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full" />
+              </div>
+            </div>
+          </div>
+          
+          <p className="mt-10 text-center text-neutral-600 italic">
+            "Our long-term goal is to become the pan-India skill platform and job marketplace for the next generation."
+          </p>
+        </div>
+      </Container>
+    </section>
+  );
+}