jake/mcpengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
mcpengine/deploy/public/index.html
Jake Shore 2aaf6c8e48 MCPEngage update — 2026-02-06 
=== DONE ===
- 30 landing pages updated (all MCP servers)
- Deploy-ready static site (deploy/public/) with homepage + 30 server pages
- SEO battle plan added
- Homepage redesigned: cleaner platform grid by category, updated pricing

=== TO-DO ===
- [ ] Deploy to production (Vercel/Netlify/custom)
- [ ] SEO battle plan execution
- [ ] Add remaining MCP server pages (Stage 5-7 servers)
- [ ] Analytics/tracking setup
- [ ] Custom domain configuration
- [ ] Pricing page finalization
2026-02-06 06:25:42 -05:00

637 lines
32 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCPEngine — AI Infrastructure for Business Software</title>
<meta name="description" content="Connect AI assistants to 30+ business platforms in one click. Managed MCP servers for ServiceTitan, Mailchimp, Calendly, Zendesk, and more.">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
colors: {
engine: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 100% 60% at 50% -20%, rgba(14, 165, 233, 0.15), transparent);
}
.platform-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(148, 163, 184, 0.2);
}
.platform-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -12px rgba(14, 165, 233, 0.25);
border-color: rgba(14, 165, 233, 0.4);
}
.stat-number {
font-variant-numeric: tabular-nums;
}
</style>
</head>
<body class="bg-slate-950 text-slate-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-slate-800/50 bg-slate-950/80 backdrop-blur-xl">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-engine-500 to-purple-600 flex items-center justify-center">
<i data-lucide="zap" class="w-6 h-6 text-white"></i>
</div>
<span class="text-xl font-bold">MCPEngine</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#platforms" class="text-slate-400 hover:text-white transition">Platforms</a>
<a href="#pricing" class="text-slate-400 hover:text-white transition">Pricing</a>
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="text-slate-400 hover:text-white transition">GitHub</a>
<a href="#contact" class="px-5 py-2.5 rounded-lg bg-engine-500 hover:bg-engine-600 text-white font-medium transition">Get Started</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative pt-32 pb-24 px-6 hero-glow">
<div class="max-w-6xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700/50 text-sm text-slate-300 mb-8">
<span class="flex w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
30 platforms, 240+ tools, production-ready
</div>
<h1 class="text-6xl md:text-7xl lg:text-8xl font-black mb-8 leading-tight">
AI Infrastructure<br>
<span class="gradient-text">for Business Software</span>
</h1>
<p class="text-xl md:text-2xl text-slate-400 mb-12 max-w-3xl mx-auto leading-relaxed">
Connect Claude, ChatGPT, and other AI assistants to your business tools in one click. Managed MCP servers for 30+ platforms.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#platforms" class="px-8 py-4 rounded-xl bg-engine-500 hover:bg-engine-600 text-white font-semibold text-lg transition shadow-2xl shadow-engine-500/50">
Browse Platforms
</a>
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="px-8 py-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-semibold text-lg transition border border-slate-700">
View on GitHub
</a>
</div>
<!-- Stats -->
<div class="mt-20 grid grid-cols-3 gap-8 max-w-3xl mx-auto">
<div>
<div class="text-5xl font-black gradient-text stat-number mb-2">30</div>
<div class="text-slate-500 font-medium">Platforms</div>
</div>
<div>
<div class="text-5xl font-black gradient-text stat-number mb-2">240+</div>
<div class="text-slate-500 font-medium">Tools</div>
</div>
<div>
<div class="text-5xl font-black gradient-text stat-number mb-2">100%</div>
<div class="text-slate-500 font-medium">Open Source</div>
</div>
</div>
</div>
</section>
<!-- What is MCPEngine -->
<section class="py-24 px-6 border-t border-slate-800/50">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-black mb-6">What is MCPEngine?</h2>
<p class="text-xl text-slate-400 max-w-3xl mx-auto">
The infrastructure layer that connects AI assistants to business software through the Model Context Protocol.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="p-8 rounded-2xl bg-slate-900/50 border border-slate-800/50">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-engine-500 to-purple-600 flex items-center justify-center mb-6">
<i data-lucide="plug" class="w-7 h-7 text-white"></i>
</div>
<h3 class="text-2xl font-bold mb-4">One-Click Connect</h3>
<p class="text-slate-400 leading-relaxed">
No API wrappers to write. Deploy a server, add credentials, and your AI can instantly use ServiceTitan, Mailchimp, or any of 30+ platforms.
</p>
</div>
<div class="p-8 rounded-2xl bg-slate-900/50 border border-slate-800/50">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center mb-6">
<i data-lucide="shield-check" class="w-7 h-7 text-white"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Production-Ready</h3>
<p class="text-slate-400 leading-relaxed">
Built with TypeScript, comprehensive error handling, and battle-tested with real customer data. Not toy demos.
</p>
</div>
<div class="p-8 rounded-2xl bg-slate-900/50 border border-slate-800/50">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500 to-orange-600 flex items-center justify-center mb-6">
<i data-lucide="rocket" class="w-7 h-7 text-white"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Managed Hosting</h3>
<p class="text-slate-400 leading-relaxed">
Self-host from our GitHub repo or use our managed service. Auto-updates, monitoring, and 99.9% uptime SLA.
</p>
</div>
</div>
</div>
</section>
<!-- Platforms Grid -->
<section id="platforms" class="py-24 px-6 border-t border-slate-800/50">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-20">
<h2 class="text-4xl md:text-5xl font-black mb-6">30 Platforms. One Engine.</h2>
<p class="text-xl text-slate-400 max-w-3xl mx-auto">
From field service to e-commerce, we've built MCP servers for the tools your business actually uses.
</p>
</div>
<!-- Categories -->
<div class="space-y-16">
<!-- Field Service -->
<div>
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
<i data-lucide="wrench" class="w-6 h-6 text-orange-500"></i>
Field Service
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<a href="servicetitan.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
<i data-lucide="wrench" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">ServiceTitan</div>
</a>
<a href="jobber.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
<i data-lucide="briefcase" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Jobber</div>
</a>
<a href="housecallpro.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
<i data-lucide="home" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Housecall Pro</div>
</a>
<a href="fieldedge.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
<i data-lucide="tool" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">FieldEdge</div>
</a>
</div>
</div>
<!-- HR & Payroll -->
<div>
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
<i data-lucide="users" class="w-6 h-6 text-pink-500"></i>
HR & Payroll
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<a href="gusto.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
<i data-lucide="users" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Gusto</div>
</a>
<a href="bamboohr.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
<i data-lucide="user-check" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">BambooHR</div>
</a>
<a href="rippling.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
<i data-lucide="building-2" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Rippling</div>
</a>
</div>
</div>
<!-- Scheduling -->
<div>
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
<i data-lucide="calendar" class="w-6 h-6 text-blue-500"></i>
Scheduling
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<a href="calendly.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
<i data-lucide="calendar" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Calendly</div>
</a>
<a href="acuity.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-pink-600 flex items-center justify-center">
<i data-lucide="clock" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Acuity</div>
</a>
</div>
</div>
<!-- Restaurant & POS -->
<div>
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
<i data-lucide="utensils" class="w-6 h-6 text-red-500"></i>
Restaurant & POS
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<a href="toast.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-red-500 to-orange-600 flex items-center justify-center">
<i data-lucide="utensils" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Toast</div>
</a>
<a href="touchbistro.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
<i data-lucide="smartphone" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">TouchBistro</div>
</a>
<a href="clover.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-lime-600 flex items-center justify-center">
<i data-lucide="credit-card" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Clover</div>
</a>
<a href="lightspeed.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-amber-600 flex items-center justify-center">
<i data-lucide="zap" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Lightspeed</div>
</a>
</div>
</div>
<!-- Email Marketing -->
<div>
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
<i data-lucide="mail" class="w-6 h-6 text-yellow-500"></i>
Email Marketing
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<a href="mailchimp.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
<i data-lucide="mail" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Mailchimp</div>
</a>
<a href="brevo.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
<i data-lucide="send" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Brevo</div>
</a>
<a href="constantcontact.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
<i data-lucide="megaphone" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Constant Contact</div>
</a>
</div>
</div>
<!-- CRM -->
<div>
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
<i data-lucide="target" class="w-6 h-6 text-purple-500"></i>
CRM
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<a href="closecrm.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
<i data-lucide="target" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Close</div>
</a>
<a href="pipedrive.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
<i data-lucide="trending-up" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Pipedrive</div>
</a>
<a href="keap.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
<i data-lucide="sparkles" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Keap</div>
</a>
</div>
</div>
<!-- Project Management -->
<div>
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
<i data-lucide="layout-grid" class="w-6 h-6 text-blue-500"></i>
Project Management
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<a href="trello.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
<i data-lucide="layout-grid" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Trello</div>
</a>
<a href="clickup.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center">
<i data-lucide="check-circle" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">ClickUp</div>
</a>
<a href="basecamp.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
<i data-lucide="mountain" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Basecamp</div>
</a>
<a href="wrike.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
<i data-lucide="layers" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Wrike</div>
</a>
</div>
</div>
<!-- Customer Support -->
<div>
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
<i data-lucide="headphones" class="w-6 h-6 text-green-500"></i>
Customer Support
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<a href="zendesk.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
<i data-lucide="headphones" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Zendesk</div>
</a>
<a href="freshdesk.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
<i data-lucide="message-circle" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Freshdesk</div>
</a>
<a href="helpscout.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
<i data-lucide="life-buoy" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Help Scout</div>
</a>
</div>
</div>
<!-- E-commerce -->
<div>
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
<i data-lucide="shopping-bag" class="w-6 h-6 text-purple-500"></i>
E-commerce
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<a href="squarespace.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
<i data-lucide="square" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Squarespace</div>
</a>
<a href="bigcommerce.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
<i data-lucide="shopping-bag" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">BigCommerce</div>
</a>
</div>
</div>
<!-- Accounting -->
<div>
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
<i data-lucide="receipt" class="w-6 h-6 text-green-500"></i>
Accounting
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<a href="freshbooks.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
<i data-lucide="receipt" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">FreshBooks</div>
</a>
<a href="wave.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
<i data-lucide="wallet" class="w-8 h-8 text-white"></i>
</div>
<div class="font-bold">Wave</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="py-24 px-6 border-t border-slate-800/50">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-black mb-6">Simple, Transparent Pricing</h2>
<p class="text-xl text-slate-400 max-w-3xl mx-auto">
Self-host for free, use our managed service, or become a provider.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Open Source -->
<div class="p-8 rounded-2xl bg-slate-900/30 border border-slate-800/50">
<div class="text-lg font-semibold text-slate-400 mb-2">Open Source</div>
<div class="text-5xl font-black mb-6">
$0
<span class="text-xl text-slate-500 font-normal">/forever</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">All 30 MCP servers</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">Full source code access</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">Self-host anywhere</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">MIT license</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">Community support</span>
</li>
</ul>
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="block w-full py-3 px-6 rounded-lg bg-slate-800 hover:bg-slate-700 text-center font-semibold transition">
Get Started
</a>
</div>
<!-- Per-Platform Managed -->
<div class="p-8 rounded-2xl bg-gradient-to-br from-engine-500/10 to-purple-600/10 border-2 border-engine-500/50 relative">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-gradient-to-r from-engine-500 to-purple-600 text-sm font-bold text-white">
Most Popular
</div>
<div class="text-lg font-semibold text-engine-400 mb-2">Select Your Apps</div>
<div class="text-5xl font-black mb-6">
$49
<span class="text-xl text-slate-500 font-normal">/app/mo</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">Choose any platforms</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">Fully managed hosting</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">Auto-updates</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">99.9% uptime SLA</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">Email support</span>
</li>
</ul>
<a href="#contact" class="block w-full py-3 px-6 rounded-lg bg-engine-500 hover:bg-engine-600 text-center font-semibold transition text-white">
Coming Q2 2026
</a>
</div>
<!-- Enterprise / Reseller -->
<div class="p-8 rounded-2xl bg-slate-900/30 border border-slate-800/50">
<div class="text-lg font-semibold text-slate-400 mb-2">Become a Provider</div>
<div class="text-5xl font-black mb-6">
Partner
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">White-label deployment</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">Offer managed services</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">Revenue sharing model</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">Dedicated support</span>
</li>
<li class="flex items-start gap-3">
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
<span class="text-slate-300">Custom SLA</span>
</li>
</ul>
<a href="mailto:partners@mcpengine.com" class="block w-full py-3 px-6 rounded-lg bg-slate-800 hover:bg-slate-700 text-center font-semibold transition">
Become a Partner
</a>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section id="contact" class="py-24 px-6 border-t border-slate-800/50">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-4xl md:text-5xl font-black mb-6">Ready to Power Your AI?</h2>
<p class="text-xl text-slate-400 mb-12 max-w-2xl mx-auto">
Join early adopters building the future of AI-powered business automation.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="px-8 py-4 rounded-xl bg-engine-500 hover:bg-engine-600 text-white font-semibold text-lg transition shadow-2xl shadow-engine-500/50">
Explore on GitHub
</a>
<a href="mailto:hello@mcpengine.com" class="px-8 py-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-semibold text-lg transition border border-slate-700">
Get in Touch
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-slate-800/50 py-12 px-6">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-engine-500 to-purple-600 flex items-center justify-center">
<i data-lucide="zap" class="w-6 h-6 text-white"></i>
</div>
<span class="text-lg font-bold">MCPEngine</span>
</div>
<div class="flex items-center gap-6 text-slate-400 text-sm">
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="hover:text-white transition">GitHub</a>
<a href="mailto:hello@mcpengine.com" class="hover:text-white transition">Contact</a>
<span>© 2026 MCPEngine</span>
</div>
</div>
</div>
</footer>
<script>
// Initialize Lucide icons
lucide.createIcons();
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink