128 lines
6.7 KiB
TypeScript
128 lines
6.7 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Code, Cpu, DollarSign, Zap, ArrowRight, Box } from "lucide-react"
|
|
|
|
const MCPSection = () => {
|
|
return (
|
|
<section id="mcps" className="relative h-full pt-20 flex mt-10 items-center justify-center overflow-hidden hero-gradient bg-transparent grain">
|
|
|
|
<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">
|
|
<Box className="h-4 w-4 text-yellow-500" />
|
|
<span className="text-sm font-medium">Monetizable Code Packages</span>
|
|
</div>
|
|
|
|
<h2 className="text-2xl md:text-3xl mb-6">
|
|
What is an <span className="text-foreground/70">MCP</span>?
|
|
</h2>
|
|
|
|
<p className="text-lg text-foreground/70 max-w-3xl mx-auto leading-relaxed">
|
|
MCP = a wrapper on an API that works with LLMs. Think of it as a packaged AI behavior
|
|
ready to be deployed or sold. No complex infrastructure needed.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
|
|
{/* Simple to Create */}
|
|
<div className="glassmorphic rounded-2xl p-6 hover:scale-105 border border-foreground/20 transition-transform duration-300">
|
|
<div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
|
|
<Code className="h-6 w-6 text-foreground" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-4">Simple to Create</h3>
|
|
<p className="text-sm text-foreground/70 mb-2">
|
|
Use our visual builder or write custom code. MCPs wrap your logic into LLM-compatible packages.
|
|
</p>
|
|
<div className="glassmorphic bg-foreground/10 rounded-lg p-4 text-sm font-mono">
|
|
<span className="text-green-800">// Example MCP</span><br/>
|
|
<span className="text-red-500">function</span> <span className="text-foreground/80">weatherBot</span>()<br/>
|
|
<span className="text-foreground/60">→ Returns: Live weather data</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Easy to Deploy */}
|
|
<div className="glassmorphic rounded-2xl p-6 hover:scale-105 border border-foreground/20 transition-transform duration-300">
|
|
<div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
|
|
<Cpu className="h-6 w-6 text-foreground" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-4">Easy to Deploy</h3>
|
|
<p className="text-sm text-foreground/70 mb-6">
|
|
One-click deployment to our global network. Your MCP becomes instantly available to LLMs worldwide.
|
|
</p>
|
|
<div className="flex items-center space-x-2 text-xs">
|
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
|
<span className="text-foreground/70">Status: Live & Earning</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Ready to Monetize */}
|
|
<div className="glassmorphic rounded-2xl p-6 hover:scale-105 border border-foreground/20 transition-transform duration-300">
|
|
<div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
|
|
<DollarSign className="h-6 w-6 text-foreground" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-4">Ready to Monetize</h3>
|
|
<p className="text-sm text-foreground/70 mb-6">
|
|
Set your pricing, track usage, and get paid automatically. Turn your AI ideas into recurring revenue.
|
|
</p>
|
|
<div className="space-y-2 text-xs mx-6 ml-auto">
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/70">Per-use pricing:</span>
|
|
<span className="text-yellow-500">$0.01 - $10.00</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-foreground/70">Monthly revenue:</span>
|
|
<span className="text-yellow-500">$500 - $5000+</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Example MCPs */}
|
|
<div className="glassmorphic rounded-2xl p-8 mb-12">
|
|
<h3 className="text-2xl mb-6 text-center">Popular MCP Examples</h3>
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
<div className="text-center p-6 rounded-xl bg-foreground/5">
|
|
<div className="w-12 h-12 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<Code className="h-6 w-6 text-foreground" />
|
|
</div>
|
|
<h4 className="font-semibold mb-2">Code Generator</h4>
|
|
<p className="text-sm text-foreground/70">Generates clean, documented code in any language</p>
|
|
<div className="text-xs text-foreground/60 mt-2">$2.50/use • 1.2k uses this month</div>
|
|
</div>
|
|
|
|
<div className="text-center p-6 rounded-xl bg-foreground/5">
|
|
<div className="w-12 h-12 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<Cpu className="h-6 w-6 text-foreground" />
|
|
</div>
|
|
<h4 className="font-semibold mb-2">Data Analyzer</h4>
|
|
<p className="text-sm text-foreground/70">Converts raw data into actionable insights</p>
|
|
<div className="text-xs text-foreground/60 mt-2">$5.00/use • 800 uses this month</div>
|
|
</div>
|
|
|
|
<div className="text-center p-6 rounded-xl bg-foreground/5">
|
|
<div className="w-12 h-12 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<DollarSign className="h-6 w-6 text-foreground" />
|
|
</div>
|
|
<h4 className="font-semibold mb-2">Content Creator</h4>
|
|
<p className="text-sm text-foreground/70">Writes engaging content for any platform</p>
|
|
<div className="text-xs text-foreground/60 mt-2">$1.00/use • 2.1k uses this month</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<Button
|
|
size="lg"
|
|
className="bg-foreground text-background hover:bg-foreground/90 px-8 py-4 text-md font-normal btn-hover-scale group"
|
|
>
|
|
<Zap className="h-5 w-5 mr-2" />
|
|
Create Your First MCP
|
|
<ArrowRight className="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default MCPSection
|