kleap
/
app-stellar-gecko-hug
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update components/business-gtm.tsx

This commit is contained in:
kleap-admin 2026-01-18 18:22:13 +00:00
parent 01a06eaab3
commit d8251de74c
1 changed files with 104 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
components/business-gtm.tsx Normal file
View File

@ -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>
);
}