From d8251de74cb1f37a5a723d4ad74d5ef10983d1ba Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 18:22:13 +0000
Subject: [PATCH] Update components/business-gtm.tsx

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

diff --git a/components/business-gtm.tsx b/components/business-gtm.tsx
new file mode 100644
index 0000000..4fe8043
--- /dev/null
+++ b/components/business-gtm.tsx
@@ -0,0 +1,104 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { TrendingUp, Users, Globe, ShieldCheck } from "lucide-react";
+
+export function BusinessGTM() {
+  return (
+    <section className="py-20">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          {/* Business Model */}
+          <div>
+            <Heading className="text-3xl mb-8">Business Model</Heading>
+            <div className="space-y-4">
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-xl flex justify-between">
+                    Subscription <span>₹500/month</span>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground text-sm">Access to all skill roadmaps, projects, and community.</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-xl">Certifications</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground text-sm">Secondary revenue from industry-recognized skill badges.</p>
+                </CardContent>
+              </Card>
+              <div className="grid grid-cols-3 gap-4 mt-6">
+                <div className="text-center p-4 bg-slate-50 dark:bg-neutral-900 rounded-lg">
+                  <p className="text-xs text-muted-foreground uppercase font-bold">CAC</p>
+                  <p className="text-xl font-bold text-primary">₹150</p>
+                </div>
+                <div className="text-center p-4 bg-slate-50 dark:bg-neutral-900 rounded-lg">
+                  <p className="text-xs text-muted-foreground uppercase font-bold">LTV</p>
+                  <p className="text-xl font-bold text-primary">₹4500</p>
+                </div>
+                <div className="text-center p-4 bg-slate-50 dark:bg-neutral-900 rounded-lg">
+                  <p className="text-xs text-muted-foreground uppercase font-bold">Margin</p>
+                  <p className="text-xl font-bold text-primary">85%</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* GTM Strategy */}
+          <div>
+            <Heading className="text-3xl mb-8">Go-To-Market</Heading>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="p-4 border rounded-xl flex gap-3">
+                <Users className="w-5 h-5 text-primary shrink-0" />
+                <div>
+                  <h4 className="font-bold text-sm">Influencers</h4>
+                  <p className="text-xs text-muted-foreground">Collabs with education creators.</p>
+                </div>
+              </div>
+              <div className="p-4 border rounded-xl flex gap-3">
+                <TrendingUp className="w-5 h-5 text-primary shrink-0" />
+                <div>
+                  <h4 className="font-bold text-sm">Referrals</h4>
+                  <p className="text-xs text-muted-foreground">Student-led growth loops.</p>
+                </div>
+              </div>
+              <div className="p-4 border rounded-xl flex gap-3">
+                <Globe className="w-5 h-5 text-primary shrink-0" />
+                <div>
+                  <h4 className="font-bold text-sm">College Events</h4>
+                  <p className="text-xs text-muted-foreground">Live workshops and clubs.</p>
+                </div>
+              </div>
+              <div className="p-4 border rounded-xl flex gap-3">
+                <ShieldCheck className="w-5 h-5 text-primary shrink-0" />
+                <div>
+                  <h4 className="font-bold text-sm">Scalability</h4>
+                  <p className="text-xs text-muted-foreground">AI layer for millions of users.</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className="mt-8 p-6 bg-primary/5 border border-primary/20 rounded-xl">
+              <h4 className="font-bold mb-4">Vision for Scale</h4>
+              <div className="flex justify-between items-end gap-2">
+                {[1000, 10000, 50000, "1M+"].map((val, i) => (
+                  <div key={i} className="flex flex-col items-center gap-2 flex-1">
+                    <div 
+                      className="w-full bg-primary rounded-t-md" 
+                      style={{ height: `${(i + 1) * 25}px`, opacity: 0.4 + (i * 0.2) }}
+                    />
+                    <span className="text-[10px] font-bold">{val}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}