604 lines
31 KiB
HTML
604 lines
31 KiB
HTML
<!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-16">
|
|
<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>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
|
|
<!-- Field Service -->
|
|
<a href="servicetitan.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
|
|
<i data-lucide="wrench" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">ServiceTitan</div>
|
|
<div class="text-xs text-slate-500 mt-1">Field Service</div>
|
|
</a>
|
|
|
|
<a href="jobber.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
|
<i data-lucide="briefcase" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Jobber</div>
|
|
<div class="text-xs text-slate-500 mt-1">Field Service</div>
|
|
</a>
|
|
|
|
<a href="housecallpro.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
|
|
<i data-lucide="home" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Housecall Pro</div>
|
|
<div class="text-xs text-slate-500 mt-1">Field Service</div>
|
|
</a>
|
|
|
|
<a href="fieldedge.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
|
|
<i data-lucide="tool" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">FieldEdge</div>
|
|
<div class="text-xs text-slate-500 mt-1">Field Service</div>
|
|
</a>
|
|
|
|
<!-- HR -->
|
|
<a href="gusto.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
|
|
<i data-lucide="users" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Gusto</div>
|
|
<div class="text-xs text-slate-500 mt-1">HR & Payroll</div>
|
|
</a>
|
|
|
|
<a href="bamboohr.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
|
|
<i data-lucide="user-check" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">BambooHR</div>
|
|
<div class="text-xs text-slate-500 mt-1">HR</div>
|
|
</a>
|
|
|
|
<a href="rippling.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
|
|
<i data-lucide="building-2" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Rippling</div>
|
|
<div class="text-xs text-slate-500 mt-1">HR & IT</div>
|
|
</a>
|
|
|
|
<!-- Scheduling -->
|
|
<a href="calendly.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
|
|
<i data-lucide="calendar" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Calendly</div>
|
|
<div class="text-xs text-slate-500 mt-1">Scheduling</div>
|
|
</a>
|
|
|
|
<a href="acuity.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-orange-500 to-pink-600 flex items-center justify-center">
|
|
<i data-lucide="clock" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Acuity</div>
|
|
<div class="text-xs text-slate-500 mt-1">Scheduling</div>
|
|
</a>
|
|
|
|
<!-- Restaurant/POS -->
|
|
<a href="toast.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-red-500 to-orange-600 flex items-center justify-center">
|
|
<i data-lucide="utensils" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Toast</div>
|
|
<div class="text-xs text-slate-500 mt-1">Restaurant POS</div>
|
|
</a>
|
|
|
|
<a href="touchbistro.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
|
|
<i data-lucide="smartphone" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">TouchBistro</div>
|
|
<div class="text-xs text-slate-500 mt-1">POS</div>
|
|
</a>
|
|
|
|
<a href="clover.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-lime-600 flex items-center justify-center">
|
|
<i data-lucide="credit-card" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Clover</div>
|
|
<div class="text-xs text-slate-500 mt-1">Retail POS</div>
|
|
</a>
|
|
|
|
<a href="lightspeed.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-yellow-500 to-amber-600 flex items-center justify-center">
|
|
<i data-lucide="zap" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Lightspeed</div>
|
|
<div class="text-xs text-slate-500 mt-1">Commerce</div>
|
|
</a>
|
|
|
|
<!-- Email Marketing -->
|
|
<a href="mailchimp.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
|
|
<i data-lucide="mail" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Mailchimp</div>
|
|
<div class="text-xs text-slate-500 mt-1">Email Marketing</div>
|
|
</a>
|
|
|
|
<a href="brevo.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
|
<i data-lucide="send" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Brevo</div>
|
|
<div class="text-xs text-slate-500 mt-1">Marketing</div>
|
|
</a>
|
|
|
|
<a href="constantcontact.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
|
|
<i data-lucide="megaphone" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Constant Contact</div>
|
|
<div class="text-xs text-slate-500 mt-1">Email</div>
|
|
</a>
|
|
|
|
<!-- CRM -->
|
|
<a href="closecrm.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
|
|
<i data-lucide="target" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Close</div>
|
|
<div class="text-xs text-slate-500 mt-1">Sales CRM</div>
|
|
</a>
|
|
|
|
<a href="pipedrive.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
|
|
<i data-lucide="trending-up" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Pipedrive</div>
|
|
<div class="text-xs text-slate-500 mt-1">Pipeline CRM</div>
|
|
</a>
|
|
|
|
<a href="keap.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
|
|
<i data-lucide="sparkles" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Keap</div>
|
|
<div class="text-xs text-slate-500 mt-1">CRM</div>
|
|
</a>
|
|
|
|
<!-- Project Management -->
|
|
<a href="trello.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
|
<i data-lucide="layout-grid" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Trello</div>
|
|
<div class="text-xs text-slate-500 mt-1">Project Mgmt</div>
|
|
</a>
|
|
|
|
<a href="clickup.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center">
|
|
<i data-lucide="check-circle" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">ClickUp</div>
|
|
<div class="text-xs text-slate-500 mt-1">Productivity</div>
|
|
</a>
|
|
|
|
<a href="basecamp.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
|
|
<i data-lucide="mountain" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Basecamp</div>
|
|
<div class="text-xs text-slate-500 mt-1">Collaboration</div>
|
|
</a>
|
|
|
|
<a href="wrike.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
|
|
<i data-lucide="layers" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Wrike</div>
|
|
<div class="text-xs text-slate-500 mt-1">Enterprise PM</div>
|
|
</a>
|
|
|
|
<!-- Support -->
|
|
<a href="zendesk.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
|
|
<i data-lucide="headphones" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Zendesk</div>
|
|
<div class="text-xs text-slate-500 mt-1">Support</div>
|
|
</a>
|
|
|
|
<a href="freshdesk.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
|
<i data-lucide="message-circle" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Freshdesk</div>
|
|
<div class="text-xs text-slate-500 mt-1">Helpdesk</div>
|
|
</a>
|
|
|
|
<a href="helpscout.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
|
|
<i data-lucide="life-buoy" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Help Scout</div>
|
|
<div class="text-xs text-slate-500 mt-1">Customer Support</div>
|
|
</a>
|
|
|
|
<!-- E-commerce -->
|
|
<a href="squarespace.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
|
|
<i data-lucide="square" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Squarespace</div>
|
|
<div class="text-xs text-slate-500 mt-1">E-commerce</div>
|
|
</a>
|
|
|
|
<a href="bigcommerce.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
|
|
<i data-lucide="shopping-bag" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">BigCommerce</div>
|
|
<div class="text-xs text-slate-500 mt-1">Enterprise Commerce</div>
|
|
</a>
|
|
|
|
<!-- Accounting -->
|
|
<a href="freshbooks.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
|
|
<i data-lucide="receipt" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">FreshBooks</div>
|
|
<div class="text-xs text-slate-500 mt-1">Accounting</div>
|
|
</a>
|
|
|
|
<a href="wave.html" class="platform-card p-6 rounded-xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
|
|
<i data-lucide="wallet" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="font-semibold text-sm">Wave</div>
|
|
<div class="text-xs text-slate-500 mt-1">Free Accounting</div>
|
|
</a>
|
|
</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, or let us manage the infrastructure for you.
|
|
</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">GitHub repository 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>
|
|
|
|
<!-- 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">Managed</div>
|
|
<div class="text-5xl font-black mb-6">
|
|
$99
|
|
<span class="text-xl text-slate-500 font-normal">/month</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">Everything in Open Source</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">Hosted infrastructure</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 Soon
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Enterprise -->
|
|
<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">Enterprise</div>
|
|
<div class="text-5xl font-black mb-6">
|
|
Custom
|
|
</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">Everything in Managed</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 platforms</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">Private 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">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:enterprise@mcpengine.com" class="block w-full py-3 px-6 rounded-lg bg-slate-800 hover:bg-slate-700 text-center font-semibold transition">
|
|
Contact Sales
|
|
</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>
|