209 lines
10 KiB
TypeScript
209 lines
10 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { DollarSign, TrendingUp, Zap, Globe, ArrowRight, BarChart3 } from "lucide-react"
|
|
|
|
const MonetizeSection = () => {
|
|
return (
|
|
<section id="monetize" className="py-24 relative overflow-hidden">
|
|
{/* Background grid pattern */}
|
|
<div className="absolute inset-0 grid-glow opacity-20"></div>
|
|
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-16">
|
|
<div className="inline-flex items-center space-x-2 border border-yellow-500/50 glassmorphic rounded-full px-4 py-2 mb-6">
|
|
<DollarSign className="h-4 w-4 text-yellow-500" />
|
|
<span className="text-sm font-medium">Revenue Streams</span>
|
|
</div>
|
|
|
|
<h2 className="text-4xl md:text-5xl mb-6">
|
|
<span className="text-foreground/70">Monetize</span> Your Creations
|
|
</h2>
|
|
|
|
<p className="text-xl text-foreground/70 max-w-3xl mx-auto leading-relaxed">
|
|
Turn your MCPs into profitable APIs. Create disposable apps that live and die per use.
|
|
Build the future of AI-powered commerce.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Revenue Models */}
|
|
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
|
<div className="glassmorphic rounded-2xl p-8 hover-lift">
|
|
<div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
|
|
<Zap className="h-6 w-6 text-foreground" />
|
|
</div>
|
|
<h3 className="text-xl mb-4">Per-Use Pricing</h3>
|
|
<p className="text-sm text-foreground/70 mb-6">
|
|
Charge users each time they access your MCP. Perfect for high-value, specialized tools.
|
|
</p>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">Typical range:</span>
|
|
<span className="font-semibold">$0.01 - $50</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">Revenue share:</span>
|
|
<span className="font-semibold text-foreground">85% to you</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glassmorphic rounded-2xl p-8 hover-lift">
|
|
<div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
|
|
<BarChart3 className="h-6 w-6 text-foreground" />
|
|
</div>
|
|
<h3 className="text-xl mb-4">Subscription Series</h3>
|
|
<p className="text-sm text-foreground/70 mb-6">
|
|
Monthly recurring revenue from your Everyday Series. Build loyal audiences that pay regularly.
|
|
</p>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">Monthly pricing:</span>
|
|
<span className="font-semibold">$2.99 - $99</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">Revenue share:</span>
|
|
<span className="font-semibold text-foreground">90% to you</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glassmorphic rounded-2xl p-8 hover-lift">
|
|
<div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
|
|
<Globe className="h-6 w-6 text-foreground" />
|
|
</div>
|
|
<h3 className="text-xl mb-4">Disposable Apps</h3>
|
|
<p className="text-sm text-foreground/70 mb-6">
|
|
Lightweight apps that serve one purpose, then disappear. Zero maintenance, pure profit.
|
|
</p>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">App lifespan:</span>
|
|
<span className="font-semibold">1 use - 24 hours</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/60">Revenue share:</span>
|
|
<span className="font-semibold text-foreground">85% to you</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Network Effect Visualization */}
|
|
<div className="glassmorphic rounded-3xl p-8 mb-16">
|
|
<h3 className="text-2xl text-center mb-8">The MCP Network Effect</h3>
|
|
|
|
<div className="relative max-w-4xl mx-auto">
|
|
{/* Central hub */}
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-foreground/10 rounded-full flex items-center justify-center z-10">
|
|
<span className="text-foreground font-bold text-sm">YOU</span>
|
|
</div>
|
|
|
|
{/* Connection lines */}
|
|
<div className="absolute inset-0 flex items-center justify-center z-1">
|
|
<div className="w-96 h-96 relative z-1">
|
|
{/* Animated connection lines */}
|
|
{[0, 45, 90, 135, 180, 225, 270, 315].map((angle, index) => (
|
|
<div
|
|
key={angle}
|
|
className="absolute w-40 h-0.5 bg-gradient-to-r from-foreground/20 to-transparent origin-left"
|
|
style={{
|
|
transform: `rotate(${angle}deg)`,
|
|
top: '50%',
|
|
left: '50%',
|
|
animationDelay: `${index * 0.2}s`
|
|
}}
|
|
></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Network nodes */}
|
|
<div className="grid grid-cols-4 gap-8 items-center justify-items-center py-8">
|
|
<div className="glassmorphic rounded-xl p-4 text-center hover-lift">
|
|
<div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
<Zap className="h-4 w-4 text-foreground" />
|
|
</div>
|
|
<div className="text-sm font-medium">AI Agents</div>
|
|
<div className="text-xs text-foreground/60">+$2.4k/mo</div>
|
|
</div>
|
|
|
|
<div className="glassmorphic rounded-xl p-4 text-center hover-lift">
|
|
<div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
<Globe className="h-4 w-4 text-foreground" />
|
|
</div>
|
|
<div className="text-sm font-medium">Users</div>
|
|
<div className="text-xs text-foreground/60">8.2k active</div>
|
|
</div>
|
|
|
|
<div className="glassmorphic rounded-xl p-4 text-center hover-lift">
|
|
<div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
<BarChart3 className="h-4 w-4 text-foreground" />
|
|
</div>
|
|
<div className="text-sm font-medium">Apps</div>
|
|
<div className="text-xs text-foreground/60">150+ deployed</div>
|
|
</div>
|
|
|
|
<div className="glassmorphic rounded-xl p-4 text-center hover-lift">
|
|
<div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
<DollarSign className="h-4 w-4 text-foreground" />
|
|
</div>
|
|
<div className="text-sm font-medium">Revenue</div>
|
|
<div className="text-xs text-foreground/60">$45k total</div>
|
|
</div>
|
|
|
|
<div className="glassmorphic rounded-xl p-4 text-center hover-lift">
|
|
<div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
<TrendingUp className="h-4 w-4 text-foreground" />
|
|
</div>
|
|
<div className="text-sm font-medium">APIs</div>
|
|
<div className="text-xs text-foreground/60">24/7 uptime</div>
|
|
</div>
|
|
|
|
<div className="glassmorphic rounded-xl p-4 text-center hover-lift">
|
|
<div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
<ArrowRight className="h-4 w-4 text-foreground" />
|
|
</div>
|
|
<div className="text-sm font-medium">Analytics</div>
|
|
<div className="text-xs text-foreground/60">Real-time</div>
|
|
</div>
|
|
|
|
<div className="glassmorphic rounded-xl p-4 text-center hover-lift">
|
|
<div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
<Globe className="h-4 w-4 text-foreground" />
|
|
</div>
|
|
<div className="text-sm font-medium">Global CDN</div>
|
|
<div className="text-xs text-foreground/60">Edge compute</div>
|
|
</div>
|
|
|
|
<div className="glassmorphic rounded-xl p-4 text-center hover-lift">
|
|
<div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
<ArrowRight className="h-4 w-4 text-foreground" />
|
|
</div>
|
|
<div className="text-sm font-medium">Scaling</div>
|
|
<div className="text-xs text-foreground/60">Auto-scale</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-center text-foreground/70 mt-8 max-w-2xl mx-auto">
|
|
Your MCPs become nodes in a global AI network. Every connection multiplies your earning potential.
|
|
Build once, earn everywhere.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<Button
|
|
size="lg"
|
|
className="bg-foreground text-background hover:bg-foreground/90 px-8 py-4 text-lg font-semibold hover-lift group"
|
|
>
|
|
<TrendingUp className="h-5 w-5 mr-2 text-green-300 dark:text-green-700" />
|
|
Start Earning Today
|
|
<ArrowRight className="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default MonetizeSection
|