Add animated chat demos with embedded data widgets

This commit is contained in:
Jake Shore 2026-02-13 20:23:06 -05:00
parent 85be3bb1ef
commit c87ab15d8a
61 changed files with 12379 additions and 20467 deletions

408
acuity.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Acuity Scheduling Connect — AI-Power Your Bookings in 2 Clicks</title>
<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&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: {
brand: {
500: '#315B7D',
600: '#315B7Ddd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #315B7D 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #315B7D25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #315B7D20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #315B7D">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Acuity Scheduling Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #315B7D; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #315B7D"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Acuity Scheduling</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Acuity MCP server. Appointments, availability, and clients. <strong class="text-white">38 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #315B7D; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/acuity.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #315B7D; color: #fff">
38 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Acuity Scheduling data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #315B7D, #315B7D99)">
<span class="font-bold text-xs" style="color: #fff">AC</span>
</div>
<div>
<div class="font-semibold text-sm">Acuity Scheduling Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 38 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Acuity Scheduling Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #315B7D">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Acuity Scheduling + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Phone tag with clients</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #315B7D30">
<i data-lucide="check" class="w-4 h-4" style="color: #315B7D"></i>
</div>
<p class="text-white font-medium">AI handles all booking comms</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">No-show revenue loss</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #315B7D30">
<i data-lucide="check" class="w-4 h-4" style="color: #315B7D"></i>
</div>
<p class="text-white font-medium">Smart reminders reduce no-shows</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual intake processing</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #315B7D30">
<i data-lucide="check" class="w-4 h-4" style="color: #315B7D"></i>
</div>
<p class="text-white font-medium">AI extracts and acts on form data</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Acuity Scheduling API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #315B7D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #315B7D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Appointment Management</h3>
<p class="text-zinc-400 text-sm">Book, reschedule, cancel appointments automatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #315B7D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #315B7D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Availability Control</h3>
<p class="text-zinc-400 text-sm">Set hours, block time, manage calendars.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #315B7D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #315B7D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Client Data</h3>
<p class="text-zinc-400 text-sm">Access intake forms, history, and preferences.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #315B7D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #315B7D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Payment Integration</h3>
<p class="text-zinc-400 text-sm">Track payments, packages, and gift certificates.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #315B7D; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Acuity Scheduling account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Acuity Scheduling API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Acuity Scheduling settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Acuity Scheduling?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Acuity Scheduling Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #315B7D; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Acuity Scheduling Connect. Not affiliated with Acuity Scheduling.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"How's booking volume looking for this month? Any patterns?"},{"type":"ai","text":"Here's your booking dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eWeek 1\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:100%;border-radius:3px;background:#10B981;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003e34 appts\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eWeek 2\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:100%;border-radius:3px;background:#10B981;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003e41 appts\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eWeek 3\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:100%;border-radius:3px;background:#F59E0B;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003e28 appts\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eWeek 4\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:100%;border-radius:3px;background:#EF4444;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003e18 appts\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:6px;font-size:10px;color:#FBBF24;\"\u003e📉 Booking drop-off in Weeks 3-4 · 4 no-shows this month\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Send reminder emails for all upcoming appointments and offer discounts to fill slow days"},{"type":"ai","text":"Sent 24-hour reminders to all 46 upcoming appointments. Created a 15% off promotion for Week 4 slots and emailed to 230 past clients.","action":"✓ 46 reminders queued · Promo campaign sent to 230 clients"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #315B7D20; border: 1px solid #315B7D40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#315B7D;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #315B7D, #315B7D99)"><span class="font-bold text-[10px]" style="color: #fff">AC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,654 +0,0 @@
<!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>Acuity Connect — AI-Power Your Bookings in 2 Clicks</title>
<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&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: {
brand: {
50: '#f0f7ff',
100: '#e0efff',
200: '#b9ddff',
300: '#7cc4ff',
400: '#36a7ff',
500: '#315B7D',
600: '#2a4e6b',
700: '#234159',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #315B7D 0%, #6366f1 50%, #a855f7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(49, 91, 125, 0.25), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(49, 91, 125, 0.2);
transform: translateY(-4px);
border-color: rgba(49, 91, 125, 0.5);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(49, 91, 125, 0.4); }
50% { box-shadow: 0 0 40px rgba(49, 91, 125, 0.6); }
}
.video-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animated-gradient {
background-size: 200% 200%;
animation: gradient-shift 8s ease infinite;
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(49, 91, 125, 0.4), 0 0 40px 0 rgba(49, 91, 125, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(49, 91, 125, 0.6), 0 0 60px 10px rgba(49, 91, 125, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.icon-float {
animation: float 4s ease-in-out infinite;
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
}
.gradient-border {
background: linear-gradient(135deg, rgba(49, 91, 125, 0.5), rgba(99, 102, 241, 0.2));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Orbs Background -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="orb w-96 h-96 bg-brand-500/30 top-1/4 -left-48 animate-float"></div>
<div class="orb w-64 h-64 bg-purple-500/20 top-1/2 -right-32 animate-float-delayed"></div>
<div class="orb w-72 h-72 bg-indigo-500/20 bottom-1/4 left-1/3 animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-brand-500 to-indigo-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="calendar-check" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Acuity Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-indigo-600 hover:from-brand-600 hover:to-indigo-700 rounded-xl font-medium transition shadow-lg shadow-brand-500/25">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
Connect <span class="gradient-text">Acuity</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10 leading-relaxed">
The complete Acuity Scheduling MCP server. <strong class="text-white">38 tools</strong> for appointments, availability, and clients.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-indigo-600 hover:from-brand-600 hover:to-indigo-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/30">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
<i data-lucide="play-circle" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col items-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">300+</strong> service professionals
</p>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI manages your Acuity calendar</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/acuity.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="calendar-days" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Appointments</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="clock" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Availability</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Clients</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold mb-8 leading-tight">
Setting up Acuity + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Phone tag with clients</p>
<p class="text-zinc-500">Back-and-forth scheduling eats up hours every week.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">No-show revenue loss</p>
<p class="text-zinc-500">Missed appointments mean money walking out the door.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Manual intake processing</p>
<p class="text-zinc-500">Copy-pasting form data into your systems wastes time.</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-700/50 p-8 shadow-2xl">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-green-600 flex items-center justify-center shadow-lg shadow-emerald-500/25">
<i data-lucide="check" class="w-6 h-6 text-white"></i>
</div>
<h3 class="text-2xl font-bold">With Acuity Connect</h3>
</div>
<div class="space-y-5 text-lg">
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
</div>
AI handles all booking communications
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
</div>
Smart reminders reduce no-shows by 60%
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
</div>
Auto-extract and act on form data
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
</div>
Works with Claude, GPT, any MCP client
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
</div>
Connect in 2 clicks via OAuth
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Acuity API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-indigo-500/20 flex items-center justify-center mb-5 border border-brand-500/20">
<i data-lucide="calendar-days" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Appointment Management</h3>
<p class="text-zinc-400 leading-relaxed">Book, reschedule, cancel appointments automatically. Full control over your schedule.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 border border-purple-500/20">
<i data-lucide="clock" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Availability Control</h3>
<p class="text-zinc-400 leading-relaxed">Set hours, block time, manage calendars. Let AI optimize your availability.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-green-500/20 flex items-center justify-center mb-5 border border-emerald-500/20">
<i data-lucide="users" class="w-7 h-7 text-emerald-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Client Data</h3>
<p class="text-zinc-400 leading-relaxed">Access intake forms, history, and preferences. AI remembers every detail.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center mb-5 border border-amber-500/20">
<i data-lucide="credit-card" class="w-7 h-7 text-amber-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Payment Integration</h3>
<p class="text-zinc-400 leading-relaxed">Track payments, packages, and gift certificates. Complete financial visibility.</p>
</div>
</div>
<div class="mt-16 text-center">
<p class="text-zinc-400 mb-6">Full API coverage including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Appointment Types</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Calendars</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Forms</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Products</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Coupons</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Certificates</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Labels</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Webhooks</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6 border border-brand-500/30">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-700/50 p-8 shadow-2xl">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="+1 (555) 000-0000"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-indigo-600 hover:from-brand-600 hover:to-indigo-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message (hidden by default) -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-emerald-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-emerald-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const submitBtn = document.getElementById('submit-btn');
const successMsg = document.getElementById('success-message');
submitBtn.disabled = true;
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
// Simulate API call
setTimeout(() => {
form.classList.add('hidden');
successMsg.classList.remove('hidden');
}, 1000);
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-800/50 rounded-3xl border border-zinc-700/50 p-8 md:p-12 shadow-2xl">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6 border border-zinc-700">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6 text-lg leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium text-lg group">
View on GitHub
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800 shadow-xl">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 leading-relaxed"><code><span class="text-zinc-500">$</span> git clone github.com/acuity-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-emerald-400">✓ Acuity MCP Server running</span>
<span class="text-emerald-400">✓ 38 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Acuity account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Acuity API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Acuity settings.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Acuity?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 300+ service professionals already automating with Acuity Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-indigo-600 hover:from-brand-600 hover:to-indigo-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/30">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 rounded-xl font-semibold text-lg transition border border-zinc-700">
Watch Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-500 to-indigo-500 flex items-center justify-center">
<i data-lucide="calendar-check" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Acuity Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition flex items-center gap-2">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub
</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Acuity Connect. Not affiliated with Acuity Scheduling.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-indigo-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
// Show/hide sticky CTA based on scroll position
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
bamboohr.html Normal file
View File

@ -0,0 +1,408 @@
<!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>BambooHR Connect — AI-Power Your HR in 2 Clicks</title>
<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&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: {
brand: {
500: '#73C41D',
600: '#73C41Ddd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #73C41D 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #73C41D25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #73C41D20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #73C41D">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">BambooHR Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #73C41D; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #73C41D"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">BambooHR</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete BambooHR MCP server. Employees, time-off, and performance. <strong class="text-white">56 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #73C41D; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/bamboohr.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #73C41D; color: #fff">
56 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your BambooHR data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #73C41D, #73C41D99)">
<span class="font-bold text-xs" style="color: #fff">BH</span>
</div>
<div>
<div class="font-semibold text-sm">BambooHR Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 56 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask BambooHR Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #73C41D">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up BambooHR + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">PTO request chaos</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #73C41D30">
<i data-lucide="check" class="w-4 h-4" style="color: #73C41D"></i>
</div>
<p class="text-white font-medium">AI handles approvals instantly</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Onboarding checklists</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #73C41D30">
<i data-lucide="check" class="w-4 h-4" style="color: #73C41D"></i>
</div>
<p class="text-white font-medium">Automated new hire workflows</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Scattered employee data</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #73C41D30">
<i data-lucide="check" class="w-4 h-4" style="color: #73C41D"></i>
</div>
<p class="text-white font-medium">AI answers HR questions fast</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full BambooHR API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #73C41D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #73C41D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Employee Directory</h3>
<p class="text-zinc-400 text-sm">Access profiles, org charts, and contact info.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #73C41D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #73C41D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Time-Off Management</h3>
<p class="text-zinc-400 text-sm">Request, approve, track PTO automatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #73C41D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #73C41D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Onboarding</h3>
<p class="text-zinc-400 text-sm">Manage new hire tasks, documents, and training.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #73C41D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #73C41D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Performance</h3>
<p class="text-zinc-400 text-sm">Track goals, reviews, and feedback cycles.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #73C41D; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your BambooHR account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your BambooHR API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your BambooHR settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your BambooHR?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with BambooHR Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #73C41D; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 BambooHR Connect. Not affiliated with BambooHR.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"We have 3 new hires starting Monday. What's their onboarding status?"},{"type":"ai","text":"Here's the onboarding tracker:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eSarah K.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eEngineering - 8/12 tasks done\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003e67%\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eLaptop pending\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eMarcus L.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eSales - 11/12 tasks done\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003e92%\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eReady\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003ePriya R.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eDesign - 5/12 tasks done\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003e42%\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e7 items left\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003eMon start date · 2 of 3 on track\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Rush Priya's remaining items and order Sarah's laptop"},{"type":"ai","text":"Sent IT ticket for Sarah's MacBook Pro (expedited). Notified Priya's 4 task owners with urgent flags. Benefits enrollment link sent to all 3.","action":"✓ Laptop ordered · 4 urgent reminders · Benefits links sent"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #73C41D20; border: 1px solid #73C41D40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#73C41D;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #73C41D, #73C41D99)"><span class="font-bold text-[10px]" style="color: #fff">BH</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,666 +0,0 @@
<!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>BambooHR Connect — AI-Power Your HR in 2 Clicks</title>
<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&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: {
brand: {
50: '#f7fee7',
100: '#ecfccb',
200: '#d9f99d',
300: '#bef264',
400: '#a3e635',
500: '#73C41D',
600: '#65a30d',
700: '#4d7c0f',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #73C41D 0%, #84cc16 50%, #65a30d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(115, 196, 29, 0.2), transparent);
}
.card-glow:hover {
box-shadow: 0 0 60px rgba(115, 196, 29, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(-4px);
}
.video-glow {
box-shadow: 0 0 80px rgba(115, 196, 29, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite 2s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite 1s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(115, 196, 29, 0.4); }
50% { box-shadow: 0 0 40px rgba(115, 196, 29, 0.6); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(115, 196, 29, 0.4), 0 0 40px 0 rgba(115, 196, 29, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(115, 196, 29, 0.6), 0 0 60px 10px rgba(115, 196, 29, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.feature-icon {
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.gradient-border {
background: linear-gradient(135deg, rgba(115, 196, 29, 0.5), rgba(101, 163, 13, 0.2));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
.text-shadow {
text-shadow: 0 0 40px rgba(115, 196, 29, 0.5);
}
.bg-grid {
background-image:
linear-gradient(rgba(115, 196, 29, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(115, 196, 29, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
}
.stat-card {
background: linear-gradient(135deg, rgba(115, 196, 29, 0.1) 0%, rgba(115, 196, 29, 0.02) 100%);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Floating Background Elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-lime-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-green-400/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-lime-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="users" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">BambooHR Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20 bg-grid">
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text text-shadow">BambooHR</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10">
The most comprehensive BambooHR MCP server. <strong class="text-white">56 tools</strong> for employees, time-off, and performance.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Stats Row -->
<div class="grid grid-cols-3 gap-4 max-w-2xl mx-auto mb-12">
<div class="stat-card rounded-xl border border-brand-500/20 p-4">
<div class="text-3xl font-bold text-brand-400">56</div>
<div class="text-zinc-400 text-sm">API Tools</div>
</div>
<div class="stat-card rounded-xl border border-brand-500/20 p-4">
<div class="text-3xl font-bold text-brand-400">2s</div>
<div class="text-zinc-400 text-sm">Setup Time</div>
</div>
<div class="stat-card rounded-xl border border-brand-500/20 p-4">
<div class="text-3xl font-bold text-brand-400"></div>
<div class="text-zinc-400 text-sm">Token Refresh</div>
</div>
</div>
<!-- Social Proof -->
<div class="flex flex-col items-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">200+</strong> HR teams worldwide
</p>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your HR operations</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/bamboohr.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Employee Data</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="calendar-off" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Time-Off</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="trophy" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Performance</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">
HR + AI shouldn't<br>
<span class="text-zinc-500">require a dev team</span>
</h2>
<div class="space-y-5">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-medium text-white">PTO request chaos</p>
<p class="text-zinc-500 text-sm mt-1">Endless email threads. Lost requests. Frustrated employees.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-medium text-white">Onboarding checklists</p>
<p class="text-zinc-500 text-sm mt-1">Paper forms. Missed tasks. New hires left hanging.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-medium text-white">Scattered employee data</p>
<p class="text-zinc-500 text-sm mt-1">Hunting through spreadsheets for basic info.</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-8 shadow-2xl">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
</div>
<h3 class="text-2xl font-semibold">With BambooHR Connect</h3>
</div>
<div class="space-y-4">
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>AI handles approvals instantly</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>Automated new hire workflows</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>AI answers HR questions fast</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>Works with Claude, GPT, any MCP client</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>Full employee directory access</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full BambooHR API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:bg-brand-500/20 transition-all">
<i data-lucide="contact" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Employee Directory</h3>
<p class="text-zinc-400">Access profiles, org charts, and contact info. Full employee database.</p>
</div>
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:bg-purple-500/20 transition-all">
<i data-lucide="calendar-clock" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Time-Off Management</h3>
<p class="text-zinc-400">Request, approve, track PTO automatically. Balances & accruals.</p>
</div>
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-5 group-hover:bg-cyan-500/20 transition-all">
<i data-lucide="user-plus" class="w-7 h-7 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Onboarding</h3>
<p class="text-zinc-400">Manage new hire tasks, documents, and training. Seamless start.</p>
</div>
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center mb-5 group-hover:bg-amber-500/20 transition-all">
<i data-lucide="line-chart" class="w-7 h-7 text-amber-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Performance</h3>
<p class="text-zinc-400">Track goals, reviews, and feedback cycles. Continuous improvement.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ 50 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Benefits</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Compensation</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Documents</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Reports</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Training</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Applicants</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Timesheets</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Webhooks</span>
</div>
</div>
</div>
</section>
<!-- Use Cases -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">What you can automate</h2>
<p class="text-xl text-zinc-400">Real HR workflows, powered by AI</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-500/10 to-transparent border border-brand-500/20">
<div class="text-4xl mb-4">🏖️</div>
<h3 class="text-lg font-semibold mb-2">PTO Assistant</h3>
<p class="text-zinc-400 text-sm">"Check my PTO balance and submit a request for next Friday."</p>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20">
<div class="text-4xl mb-4">📋</div>
<h3 class="text-lg font-semibold mb-2">Onboarding Bot</h3>
<p class="text-zinc-400 text-sm">"Create onboarding tasks for our new engineer starting Monday."</p>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20">
<div class="text-4xl mb-4">📊</div>
<h3 class="text-lg font-semibold mb-2">HR Reports</h3>
<p class="text-zinc-400 text-sm">"Generate a headcount report by department for Q1."</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="Your phone number"
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6">
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-2xl">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4 transition group-hover:translate-x-1"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/bamboohr-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ BambooHR MCP Server running</span>
<span class="text-brand-400">✓ 56 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Is employee data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
Absolutely. We use OAuth 2.0 and never store your BambooHR API keys. All data is encrypted at rest and in transit.
You control exactly what the AI can access through BambooHR's permissions.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Can AI approve PTO requests?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
Yes! With the right permissions, AI can read requests, check balances, and approve or flag requests based on rules you define.
You stay in control of the approval logic.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Does it work with our HRIS setup?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
If you use BambooHR, yes. We support the full BambooHR API including custom fields, reports, and webhooks.
Works with any BambooHR plan that includes API access.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your HR?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 200+ HR teams already automating with BambooHR Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-lime-600 flex items-center justify-center">
<i data-lucide="users" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">BambooHR Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition flex items-center gap-1">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub
</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 BambooHR Connect. Not affiliated with BambooHR.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-lime-600 rounded-full font-semibold transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
basecamp.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Basecamp Connect — AI-Power Your Projects in 2 Clicks</title>
<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&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: {
brand: {
500: '#1D2D35',
600: '#1D2D35dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #1D2D35 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #1D2D3525, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #1D2D3520; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1D2D35">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Basecamp Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #1D2D35; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #1D2D35"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Basecamp</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Basecamp MCP server. Projects, todos, and messages. <strong class="text-white">62 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #1D2D35; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/basecamp.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #1D2D35; color: #fff">
62 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Basecamp data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #1D2D35, #1D2D3599)">
<span class="font-bold text-xs" style="color: #fff">BC</span>
</div>
<div>
<div class="font-semibold text-sm">Basecamp Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 62 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Basecamp Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1D2D35">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Basecamp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Project status meetings</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1D2D3530">
<i data-lucide="check" class="w-4 h-4" style="color: #1D2D35"></i>
</div>
<p class="text-white font-medium">AI summarizes progress</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Lost in message threads</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1D2D3530">
<i data-lucide="check" class="w-4 h-4" style="color: #1D2D35"></i>
</div>
<p class="text-white font-medium">AI finds what you need</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Forgotten deadlines</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1D2D3530">
<i data-lucide="check" class="w-4 h-4" style="color: #1D2D35"></i>
</div>
<p class="text-white font-medium">Proactive milestone alerts</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Basecamp API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1D2D3520">
<i data-lucide="layers" class="w-5 h-5" style="color: #1D2D35"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Project Management</h3>
<p class="text-zinc-400 text-sm">Create projects, manage access, organize work.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1D2D3520">
<i data-lucide="layers" class="w-5 h-5" style="color: #1D2D35"></i>
</div>
<h3 class="font-semibold text-lg mb-2">To-dos</h3>
<p class="text-zinc-400 text-sm">Create lists, assign tasks, track completion.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1D2D3520">
<i data-lucide="layers" class="w-5 h-5" style="color: #1D2D35"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Message Boards</h3>
<p class="text-zinc-400 text-sm">Post updates, discussions, and announcements.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1D2D3520">
<i data-lucide="layers" class="w-5 h-5" style="color: #1D2D35"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Schedule</h3>
<p class="text-zinc-400 text-sm">Manage milestones, events, and deadlines.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #1D2D35; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Basecamp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Basecamp API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Basecamp settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Basecamp?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Basecamp Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #1D2D35; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Basecamp Connect. Not affiliated with Basecamp.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"Give me a status update on all active projects. Any deadlines coming up?"},{"type":"ai","text":"Here's your project overview:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:6px;\"\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eWebsite v2\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#10B98120;border:1px solid #10B98140;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#10B981;\"\u003e8\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eQ3 Campaign\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#F59E0B20;border:1px solid #F59E0B40;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F59E0B;\"\u003e14\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eAPI Docs\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#10B98120;border:1px solid #10B98140;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#10B981;\"\u003e5\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eMobile App\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#EF444420;border:1px solid #EF444440;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#EF4444;\"\u003e22\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ Mobile App: 22 open to-dos · Deadline in 5 days\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Post a status update to the Mobile App project and flag overdue items"},{"type":"ai","text":"Posted status update to Mobile App message board with progress summary. Flagged 6 overdue to-dos and notified assignees. Added a milestone check-in for Wednesday.","action":"✓ Status posted · 6 overdue items flagged · Check-in scheduled Wed"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #1D2D3520; border: 1px solid #1D2D3540;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#1D2D35;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #1D2D35, #1D2D3599)"><span class="font-bold text-[10px]" style="color: #fff">BC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,631 +0,0 @@
<!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>Basecamp Connect — AI-Power Your Projects in 2 Clicks</title>
<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&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: {
brand: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#1D2D35',
600: '#18252c',
700: '#131d23',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #64748b 0%, #22d3ee 50%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 211, 238, 0.15), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(34, 211, 238, 0.15);
transform: translateY(-4px);
border-color: rgba(34, 211, 238, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-pulse-glow {
animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); }
50% { box-shadow: 0 0 40px rgba(34, 211, 238, 0.5); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(34, 211, 238, 0.4), 0 0 40px 0 rgba(34, 211, 238, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(34, 211, 238, 0.6), 0 0 60px 10px rgba(34, 211, 238, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.video-glow {
box-shadow: 0 0 80px rgba(34, 211, 238, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
}
.gradient-border {
background: linear-gradient(135deg, rgba(34, 211, 238, 0.5), rgba(167, 139, 250, 0.2));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
.accent-gradient {
background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg accent-gradient flex items-center justify-center">
<i data-lucide="mountain" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Basecamp Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 accent-gradient rounded-lg font-medium transition transform hover:scale-105">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
<!-- Floating background elements -->
<div class="absolute top-40 left-10 w-72 h-72 bg-cyan-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute bottom-20 right-10 w-96 h-96 bg-violet-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="text-center relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-cyan-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">Basecamp</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
The complete Basecamp MCP server. <strong class="text-white">62 tools</strong> for projects, todos, and messages.
No setup. No OAuth headaches. Just connect and ship.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
<a href="#pricing" class="px-8 py-4 accent-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-cyan-500/25">
Join the Waitlist
</a>
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center gap-4 justify-center">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 accent-gradient flex items-center justify-center text-xs font-bold">+75</div>
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">250+</strong> project teams
</p>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your project workflow</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/basecamp.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="folder-kanban" class="w-4 h-4 text-cyan-400"></i>
<span class="text-sm text-zinc-300">Projects</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="check-square" class="w-4 h-4 text-cyan-400"></i>
<span class="text-sm text-zinc-300">To-dos</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="message-square" class="w-4 h-4 text-cyan-400"></i>
<span class="text-sm text-zinc-300">Messages</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up Basecamp + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Pain Point 1 -->
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Project status meetings</h3>
<p class="text-zinc-500 mb-6">Endless check-ins. Everyone's time wasted. Progress buried in threads.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
</div>
<p class="text-white font-medium">AI summarizes progress</p>
</div>
</div>
</div>
</div>
<!-- Pain Point 2 -->
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Lost in message threads</h3>
<p class="text-zinc-500 mb-6">Important decisions buried. Context scattered. Nobody can find anything.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
</div>
<p class="text-white font-medium">AI finds what you need</p>
</div>
</div>
</div>
</div>
<!-- Pain Point 3 -->
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Forgotten deadlines</h3>
<p class="text-zinc-500 mb-6">Milestones slip. No one noticed until it's too late. Scramble mode.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
</div>
<p class="text-white font-medium">Proactive milestone alerts</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-cyan-500/10 text-cyan-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Basecamp API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="folder-kanban" class="w-7 h-7 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Project Management</h3>
<p class="text-zinc-400">Create projects, manage access, organize work — all automated.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="check-square" class="w-7 h-7 text-violet-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">To-dos</h3>
<p class="text-zinc-400">Create lists, assign tasks, track completion automatically.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-amber-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="message-square" class="w-7 h-7 text-orange-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Message Boards</h3>
<p class="text-zinc-400">Post updates, discussions, and announcements with AI help.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="calendar-days" class="w-7 h-7 text-pink-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Schedule</h3>
<p class="text-zinc-400">Manage milestones, events, and deadlines proactively.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ 55 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Campfires</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Documents</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">People</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Uploads</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Comments</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Questions</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Check-ins</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-cyan-500/20 text-cyan-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 to-violet-500/10 rounded-3xl blur-xl"></div>
<div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-cyan-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-cyan-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="Your phone number"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 accent-gradient hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-cyan-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message (hidden by default) -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const submitBtn = document.getElementById('submit-btn');
const successMsg = document.getElementById('success-message');
submitBtn.disabled = true;
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
setTimeout(() => {
form.classList.add('hidden');
successMsg.classList.remove('hidden');
}, 1000);
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
<div class="absolute top-0 right-0 w-96 h-96 bg-cyan-500/5 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 font-medium transition">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/basecamp-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ Basecamp MCP Server running</span>
<span class="text-green-400">✓ 62 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Basecamp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Basecamp API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Basecamp settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Basecamp?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 250+ project teams already automating with Basecamp Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 accent-gradient hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-cyan-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg accent-gradient flex items-center justify-center">
<i data-lucide="mountain" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Basecamp Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Basecamp Connect. Not affiliated with Basecamp.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 accent-gradient rounded-full font-semibold transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
bigcommerce.html Normal file
View File

@ -0,0 +1,408 @@
<!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>BigCommerce Connect — AI-Power Your Store in 2 Clicks</title>
<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&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: {
brand: {
500: '#34313F',
600: '#34313Fdd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #34313F 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #34313F25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #34313F20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #34313F">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">BigCommerce Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #34313F; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #34313F"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">BigCommerce</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete BigCommerce MCP server. Products, orders, and customers. <strong class="text-white">112 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #34313F; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/bigcommerce.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #34313F; color: #fff">
112 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your BigCommerce data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #34313F, #34313F99)">
<span class="font-bold text-xs" style="color: #fff">BC</span>
</div>
<div>
<div class="font-semibold text-sm">BigCommerce Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 112 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask BigCommerce Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #34313F">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up BigCommerce + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual product updates</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #34313F30">
<i data-lucide="check" class="w-4 h-4" style="color: #34313F"></i>
</div>
<p class="text-white font-medium">AI syncs catalog changes</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Cart abandonment</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #34313F30">
<i data-lucide="check" class="w-4 h-4" style="color: #34313F"></i>
</div>
<p class="text-white font-medium">AI recovers lost sales</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Generic promotions</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #34313F30">
<i data-lucide="check" class="w-4 h-4" style="color: #34313F"></i>
</div>
<p class="text-white font-medium">AI personalizes offers</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full BigCommerce API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #34313F20">
<i data-lucide="layers" class="w-5 h-5" style="color: #34313F"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Product Management</h3>
<p class="text-zinc-400 text-sm">Create, update, manage catalog at scale.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #34313F20">
<i data-lucide="layers" class="w-5 h-5" style="color: #34313F"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Order Processing</h3>
<p class="text-zinc-400 text-sm">Track orders, manage fulfillment, handle returns.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #34313F20">
<i data-lucide="layers" class="w-5 h-5" style="color: #34313F"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Customer Data</h3>
<p class="text-zinc-400 text-sm">Access profiles, order history, and preferences.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #34313F20">
<i data-lucide="layers" class="w-5 h-5" style="color: #34313F"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Promotions</h3>
<p class="text-zinc-400 text-sm">Create coupons, discounts, and special offers.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #34313F; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your BigCommerce account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your BigCommerce API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your BigCommerce settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your BigCommerce?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with BigCommerce Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #34313F; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 BigCommerce Connect. Not affiliated with BigCommerce.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"Show me abandoned cart stats. How much revenue are we leaving on the table?"},{"type":"ai","text":"Here's your cart recovery dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAbandoned\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$34,200\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e68 carts\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eRecovered\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$8,100\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e23.7%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eStill Open\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$26,100\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003erecoverable\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e💰 $26,100 recoverable · 12 carts have items \u003e$500\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Send a 10% discount to the high-value abandoned carts (over $500)"},{"type":"ai","text":"Sent personalized recovery emails to 12 high-value carts with unique 10% discount codes. Expiry set to 48 hours for urgency. Expected recovery: $3,800.","action":"✓ 12 recovery emails sent · 10% codes generated · 48hr expiry"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #34313F20; border: 1px solid #34313F40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#34313F;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #34313F, #34313F99)"><span class="font-bold text-[10px]" style="color: #fff">BC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,645 +0,0 @@
<!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>BigCommerce Connect — AI-Power Your Store in 2 Clicks</title>
<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: {
brand: {
50: '#f5f3ff',
100: '#ede9fe',
200: '#ddd6fe',
300: '#c4b5fd',
400: '#a78bfa',
500: '#34313F',
600: '#2a2833',
700: '#201f28',
accent: '#6366f1',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 40%, #a855f7 70%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(99, 102, 241, 0.2);
transform: translateY(-4px);
border-color: rgba(99, 102, 241, 0.4);
}
.video-glow {
box-shadow: 0 25px 80px rgba(99, 102, 241, 0.25), 0 10px 40px rgba(0, 0, 0, 0.5);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.pulse-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(99, 102, 241, 0.4), 0 0 40px 0 rgba(99, 102, 241, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(99, 102, 241, 0.6), 0 0 60px 10px rgba(99, 102, 241, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.1);
}
.gradient-border {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: #18181b;
border-radius: calc(1rem - 1px);
}
.text-glow {
text-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
}
.stat-card {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-80 h-80 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-indigo-500 to-purple-500 flex items-center justify-center shadow-lg shadow-indigo-500/25">
<i data-lucide="store" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl tracking-tight">BigCommerce Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-lg font-semibold transition-all shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40 hover:scale-105">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="max-w-4xl mx-auto text-center">
<div class="relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
</span>
Open Source + Hosted Cloud
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text text-glow">BigCommerce</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
The complete BigCommerce MCP server. <strong class="text-white">112 tools</strong> for products, orders, and customers.
No setup headaches. Just connect and scale.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-indigo-500/25 flex items-center justify-center gap-2">
Join the Waitlist
<i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2 backdrop-blur-sm">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center justify-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
</div>
<p class="text-zinc-400 text-sm">
Trusted by <strong class="text-white">500+</strong> e-commerce businesses
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your e-commerce operations</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/bigcommerce.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="package-search" class="w-4 h-4 text-indigo-400"></i>
<span class="text-sm text-zinc-300">Products</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="shopping-cart" class="w-4 h-4 text-indigo-400"></i>
<span class="text-sm text-zinc-300">Orders</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="bar-chart-3" class="w-4 h-4 text-indigo-400"></i>
<span class="text-sm text-zinc-300">Analytics</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div>
<span class="inline-block px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm font-medium mb-6">The Problem</span>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
Setting up BigCommerce + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4 group">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Manual product updates</p>
<p class="text-zinc-500 mt-1">Updating hundreds of products one by one is mind-numbing.</p>
</div>
</div>
<div class="flex items-start gap-4 group">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Cart abandonment bleeds revenue</p>
<p class="text-zinc-500 mt-1">70% of carts are abandoned. Recovery emails are generic.</p>
</div>
</div>
<div class="flex items-start gap-4 group">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Generic promotions don't convert</p>
<p class="text-zinc-500 mt-1">Same discount for everyone means leaving money on the table.</p>
</div>
</div>
</div>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8 md:p-10">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center shadow-lg shadow-indigo-500/25">
<i data-lucide="check" class="w-6 h-6 text-white"></i>
</div>
<h3 class="text-2xl font-bold">With BigCommerce Connect</h3>
</div>
<div class="space-y-5">
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
<span>AI syncs catalog changes automatically</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
<span>Smart recovery that actually converts</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
<span>AI personalizes offers per customer</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
<span>Works with Claude, GPT, any MCP client</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
<span>2-click OAuth — no API key headaches</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<span class="inline-block px-3 py-1 rounded-full bg-purple-500/10 text-purple-400 text-sm font-medium mb-4">Features</span>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full BigCommerce API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-indigo-500/20 to-indigo-500/5 flex items-center justify-center mb-5">
<i data-lucide="package-search" class="w-7 h-7 text-indigo-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Product Management</h3>
<p class="text-zinc-400">Create, update, and manage your entire catalog at scale with AI assistance.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
<i data-lucide="shopping-cart" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Order Processing</h3>
<p class="text-zinc-400">Track orders, manage fulfillment, and handle returns automatically.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-pink-500/5 flex items-center justify-center mb-5">
<i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Customer Data</h3>
<p class="text-zinc-400">Access profiles, order history, and preferences for personalization.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center mb-5">
<i data-lucide="percent" class="w-7 h-7 text-amber-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Promotions</h3>
<p class="text-zinc-400">Create coupons, discounts, and special offers intelligently.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 95 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Variants</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Categories</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Brands</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Shipping</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Taxes</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Webhooks</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Scripts</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Widgets</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/20 text-indigo-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-indigo-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-indigo-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-indigo-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
<div class="absolute top-0 right-0 w-96 h-96 bg-indigo-500/5 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 text-lg mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="https://github.com" class="inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 font-semibold transition-colors group">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/bigcommerce-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ BigCommerce MCP Server running</span>
<span class="text-green-400">✓ 112 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
<p class="text-zinc-400">Everything you need to know about BigCommerce Connect</p>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors" open>
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your BigCommerce account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your BigCommerce API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your BigCommerce settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What BigCommerce plans are supported?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
BigCommerce Connect works with all BigCommerce plans that have API access — Standard, Plus, Pro, and Enterprise.
Some advanced features may require higher-tier plans.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-indigo-500/5 to-transparent"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
Ready to AI-power your <span class="gradient-text">BigCommerce?</span>
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 500+ e-commerce businesses already automating with BigCommerce Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-indigo-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-indigo-500 to-purple-500 flex items-center justify-center">
<i data-lucide="store" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">BigCommerce Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition-colors">Privacy</a>
<a href="#" class="hover:text-white transition-colors">Terms</a>
<a href="https://github.com" class="hover:text-white transition-colors">GitHub</a>
<a href="#" class="hover:text-white transition-colors">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 BigCommerce Connect. Not affiliated with BigCommerce.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full font-semibold transition-all"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
brevo.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Brevo Connect — AI-Power Your Marketing in 2 Clicks</title>
<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&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: {
brand: {
500: '#0B996E',
600: '#0B996Edd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #0B996E 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #0B996E25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #0B996E20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0B996E">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Brevo Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #0B996E; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #0B996E"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Brevo</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Brevo MCP server. Email, SMS, and automation — unified. <strong class="text-white">82 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #0B996E; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/brevo.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #0B996E; color: #fff">
82 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Brevo data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #0B996E, #0B996E99)">
<span class="font-bold text-xs" style="color: #fff">BV</span>
</div>
<div>
<div class="font-semibold text-sm">Brevo Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 82 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Brevo Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0B996E">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Brevo + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Disconnected channels</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0B996E30">
<i data-lucide="check" class="w-4 h-4" style="color: #0B996E"></i>
</div>
<p class="text-white font-medium">Unified email + SMS from AI</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Low engagement rates</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0B996E30">
<i data-lucide="check" class="w-4 h-4" style="color: #0B996E"></i>
</div>
<p class="text-white font-medium">AI optimizes content and timing</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual campaign setup</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0B996E30">
<i data-lucide="check" class="w-4 h-4" style="color: #0B996E"></i>
</div>
<p class="text-white font-medium">AI builds campaigns from briefs</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Brevo API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0B996E20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0B996E"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Email Campaigns</h3>
<p class="text-zinc-400 text-sm">Create, send, and track email marketing at scale.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0B996E20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0B996E"></i>
</div>
<h3 class="font-semibold text-lg mb-2">SMS Marketing</h3>
<p class="text-zinc-400 text-sm">Send texts, manage opt-ins, track deliverability.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0B996E20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0B996E"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Contact Management</h3>
<p class="text-zinc-400 text-sm">Sync lists, manage attributes, segment audiences.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0B996E20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0B996E"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Transactional</h3>
<p class="text-zinc-400 text-sm">Trigger order confirmations, receipts, notifications.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #0B996E; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Brevo account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Brevo API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Brevo settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Brevo?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Brevo Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #0B996E; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Brevo Connect. Not affiliated with Brevo.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"Show me our email + SMS performance this month. Which channel converts better?"},{"type":"ai","text":"Here's your multi-channel breakdown:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eEmail Conv.\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e3.2%\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+0.4%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eSMS Conv.\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e7.8%\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+1.2%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eTotal Rev.\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$24,150\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+18%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e📱 SMS outperforms email 2.4x on conversion rate\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Shift 30% of next campaign budget to SMS and create a flash sale sequence"},{"type":"ai","text":"Created \"Flash Friday\" campaign: 3-SMS sequence over 6 hours with email backup for non-openers. Budget reallocated: 70/30 email-to-SMS split.","action":"✓ Campaign built · Budget split 70/30 · Launches Friday 9am"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #0B996E20; border: 1px solid #0B996E40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#0B996E;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #0B996E, #0B996E99)"><span class="font-bold text-[10px]" style="color: #fff">BV</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,653 +0,0 @@
<!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>Brevo Connect — AI-Power Your Marketing in 2 Clicks</title>
<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&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: {
brand: {
50: '#ecfdf5',
100: '#d1fae5',
200: '#a7f3d0',
300: '#6ee7b7',
400: '#34d399',
500: '#0B996E',
600: '#059669',
700: '#047857',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #0B996E 0%, #34d399 50%, #0B996E 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(11, 153, 110, 0.25), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(11, 153, 110, 0.2);
transform: translateY(-4px);
border-color: rgba(11, 153, 110, 0.5);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(11, 153, 110, 0.4); }
50% { box-shadow: 0 0 40px rgba(11, 153, 110, 0.6); }
}
.video-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animated-gradient {
background: linear-gradient(90deg, #0B996E, #34d399, #0B996E);
background-size: 200% 200%;
animation: gradient-shift 4s ease infinite;
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(11, 153, 110, 0.4), 0 0 40px 0 rgba(11, 153, 110, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(11, 153, 110, 0.6), 0 0 60px 10px rgba(11, 153, 110, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
}
.brevo-gradient {
background: linear-gradient(135deg, rgba(11, 153, 110, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
}
.gradient-border {
background: linear-gradient(135deg, rgba(11, 153, 110, 0.5), rgba(52, 211, 153, 0.2));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Orbs Background -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="orb w-96 h-96 bg-brand-500/30 top-1/4 -left-48 animate-float"></div>
<div class="orb w-64 h-64 bg-emerald-400/20 top-1/2 -right-32 animate-float-delayed"></div>
<div class="orb w-72 h-72 bg-teal-500/20 bottom-1/4 left-1/3 animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-brand-500 to-emerald-400 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="send" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Brevo Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-medium transition shadow-lg shadow-brand-500/25">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
Connect <span class="gradient-text">Brevo</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10 leading-relaxed">
The complete Brevo MCP server. <strong class="text-white">82 tools</strong> for email, SMS, and automation.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/30">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
<i data-lucide="play-circle" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col items-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">500+</strong> marketing teams
</p>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI manages your Brevo campaigns</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/brevo.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="mail" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Email</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="smartphone" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">SMS</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="zap" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Automation</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold mb-8 leading-tight">
Setting up Brevo + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Disconnected channels</p>
<p class="text-zinc-500">Email here, SMS there, no unified view of engagement.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Low engagement rates</p>
<p class="text-zinc-500">Generic blasts that land in spam or get ignored.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Manual campaign setup</p>
<p class="text-zinc-500">Hours spent building what AI could do in minutes.</p>
</div>
</div>
</div>
</div>
<div class="brevo-gradient rounded-3xl border border-brand-500/20 p-8 shadow-2xl">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="check" class="w-6 h-6 text-white"></i>
</div>
<h3 class="text-2xl font-bold">With Brevo Connect</h3>
</div>
<div class="space-y-5 text-lg">
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
Unified email + SMS from AI
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
AI optimizes content and timing
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
Build campaigns from simple briefs
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
Works with Claude, GPT, any MCP client
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
Connect in 2 clicks via OAuth
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Brevo API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-5 border border-brand-500/20">
<i data-lucide="mail" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Email Campaigns</h3>
<p class="text-zinc-400 leading-relaxed">Create, send, and track email marketing at scale. AI writes, you approve.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 border border-purple-500/20">
<i data-lucide="smartphone" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">SMS Marketing</h3>
<p class="text-zinc-400 leading-relaxed">Send texts, manage opt-ins, track deliverability. Reach customers instantly.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5 border border-blue-500/20">
<i data-lucide="users" class="w-7 h-7 text-blue-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Contact Management</h3>
<p class="text-zinc-400 leading-relaxed">Sync lists, manage attributes, segment audiences. AI keeps it organized.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center mb-5 border border-amber-500/20">
<i data-lucide="zap" class="w-7 h-7 text-amber-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Transactional</h3>
<p class="text-zinc-400 leading-relaxed">Trigger order confirmations, receipts, notifications. Automated and reliable.</p>
</div>
</div>
<div class="mt-16 text-center">
<p class="text-zinc-400 mb-6">Full API coverage including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Email Templates</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Lists</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Segments</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Workflows</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Webhooks</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Analytics</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Senders</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Domains</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6 border border-brand-500/30">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="brevo-gradient rounded-3xl border border-brand-500/20 p-8 shadow-2xl">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="+1 (555) 000-0000"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message (hidden by default) -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const submitBtn = document.getElementById('submit-btn');
const successMsg = document.getElementById('success-message');
submitBtn.disabled = true;
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
setTimeout(() => {
form.classList.add('hidden');
successMsg.classList.remove('hidden');
}, 1000);
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="brevo-gradient rounded-3xl border border-brand-500/20 p-8 md:p-12 shadow-2xl">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6 border border-zinc-700">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6 text-lg leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium text-lg group">
View on GitHub
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800 shadow-xl">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 leading-relaxed"><code><span class="text-zinc-500">$</span> git clone github.com/brevo-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ Brevo MCP Server running</span>
<span class="text-brand-400">✓ 82 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Brevo account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Brevo API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Brevo settings.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can AI send emails on my behalf?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes, with your approval. AI can draft campaigns, schedule sends, and trigger transactional emails.
You control the permissions and can require confirmation for any action.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Brevo?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 500+ marketing teams already automating with Brevo Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/30">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 rounded-xl font-semibold text-lg transition border border-zinc-700">
Watch Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-500 to-emerald-500 flex items-center justify-center">
<i data-lucide="send" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Brevo Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition flex items-center gap-2">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub
</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Brevo Connect. Not affiliated with Brevo (Sendinblue).</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-emerald-500 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
calendly.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Calendly Connect — AI-Power Your Scheduling in 2 Clicks</title>
<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&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: {
brand: {
500: '#006BFF',
600: '#006BFFdd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #006BFF 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #006BFF25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #006BFF20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #006BFF">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Calendly Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #006BFF; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #006BFF"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Calendly</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Calendly MCP server. Manage events, availability, and bookings with AI. <strong class="text-white">47 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #006BFF; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/calendly.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #006BFF; color: #fff">
47 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Calendly data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #006BFF, #006BFF99)">
<span class="font-bold text-xs" style="color: #fff">CL</span>
</div>
<div>
<div class="font-semibold text-sm">Calendly Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 47 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Calendly Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #006BFF">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Calendly + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual calendar juggling</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #006BFF30">
<i data-lucide="check" class="w-4 h-4" style="color: #006BFF"></i>
</div>
<p class="text-white font-medium">AI books optimal slots for you</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Copy-pasting meeting details</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #006BFF30">
<i data-lucide="check" class="w-4 h-4" style="color: #006BFF"></i>
</div>
<p class="text-white font-medium">Auto-extract and act on booking data</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Missed follow-ups</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #006BFF30">
<i data-lucide="check" class="w-4 h-4" style="color: #006BFF"></i>
</div>
<p class="text-white font-medium">Instant post-meeting actions triggered</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Calendly API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006BFF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #006BFF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Event Management</h3>
<p class="text-zinc-400 text-sm">Create, update, cancel events. Full control over your calendar.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006BFF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #006BFF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Availability</h3>
<p class="text-zinc-400 text-sm">Check slots, set buffers, manage scheduling rules automatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006BFF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #006BFF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Invitee Data</h3>
<p class="text-zinc-400 text-sm">Access booking details, custom questions, and attendee info.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006BFF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #006BFF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Webhooks</h3>
<p class="text-zinc-400 text-sm">React to bookings in real-time. Trigger automations instantly.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #006BFF; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Calendly account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Calendly API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Calendly settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Calendly?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Calendly Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #006BFF; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Calendly Connect. Not affiliated with Calendly.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"What does my schedule look like this week? Any double-bookings?"},{"type":"ai","text":"Here's your week at a glance:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eMon\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:40%;border-radius:3px;background:#10B981;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003eLight\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eTue\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:70%;border-radius:3px;background:#F59E0B;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003eBusy\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eWed\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:90%;border-radius:3px;background:#EF4444;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003eFull\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eThu\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:30%;border-radius:3px;background:#10B981;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003eLight\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eFri\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:60%;border-radius:3px;background:#F59E0B;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003eBusy\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:6px;font-size:10px;color:#FBBF24;\"\u003e⚠ 1 conflict: Tue 2-3pm overlap\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Fix the Tuesday conflict and block Friday afternoon for deep work"},{"type":"ai","text":"Done! Rescheduled the 2pm to 3:30pm and blocked Fri 1-5pm. The invitee has been notified automatically.","action":"✓ Conflict resolved · 1 rescheduled · 1 block created"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #006BFF20; border: 1px solid #006BFF40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#006BFF;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #006BFF, #006BFF99)"><span class="font-bold text-[10px]" style="color: #fff">CL</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,610 +0,0 @@
<!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>Calendly Connect — AI-Power Your Scheduling in 2 Clicks</title>
<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&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: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#006BFF',
600: '#0055cc',
700: '#004299',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #006BFF 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 107, 255, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 40px rgba(0, 107, 255, 0.15);
transform: translateY(-4px);
}
.video-glow {
box-shadow: 0 0 80px rgba(0, 107, 255, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-pulse-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes pulse-glow {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 107, 255, 0.4), 0 0 40px 0 rgba(0, 107, 255, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(0, 107, 255, 0.6), 0 0 60px 10px rgba(0, 107, 255, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.gradient-border {
background: linear-gradient(135deg, #006BFF, #8b5cf6, #ec4899);
padding: 2px;
border-radius: 1rem;
}
.gradient-border-inner {
background: #09090b;
border-radius: calc(1rem - 2px);
}
.feature-icon {
background: linear-gradient(135deg, rgba(0, 107, 255, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
}
.bg-grid {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
<!-- Floating decorative elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-10 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="calendar" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Calendly Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105 transform">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="max-w-4xl mx-auto px-6 py-20">
<div class="flex flex-col items-center text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">Calendly</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
The complete Calendly MCP server. <strong class="text-white">47 tools</strong> covering events, availability, and bookings.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 flex items-center justify-center gap-2">
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">2,500+</strong> scheduling pros
</p>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your scheduling workflow</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/calendly.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="calendar-check" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Events</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="clock" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Availability</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Bookings</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up Calendly + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Pain Point 1 -->
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<p class="font-medium text-zinc-400">Manual calendar juggling</p>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
</div>
<p class="font-semibold text-white">AI books optimal slots for you</p>
</div>
</div>
<!-- Pain Point 2 -->
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<p class="font-medium text-zinc-400">Copy-pasting meeting details</p>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
</div>
<p class="font-semibold text-white">Auto-extract and act on booking data</p>
</div>
</div>
<!-- Pain Point 3 -->
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<p class="font-medium text-zinc-400">Missed follow-ups</p>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
</div>
<p class="font-semibold text-white">Instant post-meeting actions triggered</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</span>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Calendly API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="calendar-check" class="w-7 h-7 text-brand-500"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Event Management</h3>
<p class="text-zinc-400">Create, update, cancel events. Full control over your calendar.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="clock" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Availability</h3>
<p class="text-zinc-400">Check slots, set buffers, manage scheduling rules automatically.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Invitee Data</h3>
<p class="text-zinc-400">Access booking details, custom questions, and attendee info.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="webhook" class="w-7 h-7 text-orange-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Webhooks</h3>
<p class="text-zinc-400">React to bookings in real-time. Trigger automations instantly.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ More endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Event Types</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Routing Forms</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Organizations</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">User Management</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Scheduling Links</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">One-off Meetings</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const successMsg = document.getElementById('success-message');
form.classList.add('hidden');
successMsg.classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/calendly-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ Calendly MCP Server running</span>
<span class="text-green-400">✓ 47 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
For the hosted version, no. Just connect your Calendly account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
Yes. We use OAuth 2.0 and never store your Calendly API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Calendly settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Calendly?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join thousands of scheduling pros already automating with Calendly Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center">
<i data-lucide="calendar" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Calendly Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Calendly Connect. Not affiliated with Calendly.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
clickup.html Normal file
View File

@ -0,0 +1,408 @@
<!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>ClickUp Connect — AI-Power Your Projects in 2 Clicks</title>
<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&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: {
brand: {
500: '#7B68EE',
600: '#7B68EEdd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #7B68EE 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #7B68EE25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #7B68EE20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #7B68EE">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">ClickUp Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #7B68EE; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #7B68EE"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">ClickUp</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete ClickUp MCP server. Tasks, docs, and goals — AI-managed. <strong class="text-white">134 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #7B68EE; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/clickup.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #7B68EE; color: #fff">
134 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your ClickUp data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #7B68EE, #7B68EE99)">
<span class="font-bold text-xs" style="color: #fff">CU</span>
</div>
<div>
<div class="font-semibold text-sm">ClickUp Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 134 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask ClickUp Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #7B68EE">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up ClickUp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Task overload paralysis</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7B68EE30">
<i data-lucide="check" class="w-4 h-4" style="color: #7B68EE"></i>
</div>
<p class="text-white font-medium">AI prioritizes your day</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Status update meetings</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7B68EE30">
<i data-lucide="check" class="w-4 h-4" style="color: #7B68EE"></i>
</div>
<p class="text-white font-medium">AI generates progress reports</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Scattered project info</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7B68EE30">
<i data-lucide="check" class="w-4 h-4" style="color: #7B68EE"></i>
</div>
<p class="text-white font-medium">AI finds anything instantly</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full ClickUp API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7B68EE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #7B68EE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Task Management</h3>
<p class="text-zinc-400 text-sm">Create, update, assign tasks. Full project control.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7B68EE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #7B68EE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Space & Folder Ops</h3>
<p class="text-zinc-400 text-sm">Organize workspaces, manage hierarchies automatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7B68EE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #7B68EE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Time Tracking</h3>
<p class="text-zinc-400 text-sm">Log time, generate reports, track productivity.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7B68EE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #7B68EE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Custom Fields</h3>
<p class="text-zinc-400 text-sm">Access and update any custom data on tasks.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #7B68EE; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your ClickUp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your ClickUp API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your ClickUp settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your ClickUp?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with ClickUp Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #7B68EE; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 ClickUp Connect. Not affiliated with ClickUp.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"Show me our sprint progress and who's overloaded this week"},{"type":"ai","text":"Here's your sprint overview:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:6px;\"\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eBacklog\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#6B728020;border:1px solid #6B728040;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#6B7280;\"\u003e12\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eActive\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#3B82F620;border:1px solid #3B82F640;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#3B82F6;\"\u003e9\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eReview\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#F59E0B20;border:1px solid #F59E0B40;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F59E0B;\"\u003e4\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eComplete\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#10B98120;border:1px solid #10B98140;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#10B981;\"\u003e18\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ Alex: 14 tasks (over capacity) · Sprint: 62% done\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Redistribute Alex's lower-priority tasks to team members with capacity"},{"type":"ai","text":"Moved 5 tasks from Alex: 2 to Jordan, 2 to Sam, 1 to Maya. All assignees notified. Alex is now at 9 tasks (within capacity).","action":"✓ 5 tasks redistributed · Team rebalanced · Notifications sent"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #7B68EE20; border: 1px solid #7B68EE40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#7B68EE;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #7B68EE, #7B68EE99)"><span class="font-bold text-[10px]" style="color: #fff">CU</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,651 +0,0 @@
<!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>ClickUp Connect — AI-Power Your Projects in 2 Clicks</title>
<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&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: {
brand: {
50: '#f5f3ff',
100: '#ede9fe',
200: '#ddd6fe',
300: '#c4b5fd',
400: '#a78bfa',
500: '#7B68EE',
600: '#7c3aed',
700: '#6d28d9',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #7B68EE 0%, #a855f7 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(123, 104, 238, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(123, 104, 238, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(-4px);
border-color: rgba(123, 104, 238, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
.animate-spin-slow {
animation: spin 20s linear infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(123, 104, 238, 0.4), 0 0 40px 0 rgba(123, 104, 238, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(123, 104, 238, 0.6), 0 0 60px 10px rgba(123, 104, 238, 0.3); }
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.05);
}
.video-glow {
box-shadow: 0 0 80px rgba(123, 104, 238, 0.2), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.nav-blur {
backdrop-filter: blur(20px) saturate(180%);
}
.gradient-border {
position: relative;
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(123, 104, 238, 0.5), transparent, rgba(168, 85, 247, 0.3));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.animated-gradient {
background: linear-gradient(135deg, #7B68EE, #a855f7, #ec4899, #7B68EE);
background-size: 300% 300%;
animation: gradient-shift 5s ease infinite;
}
.glow-ring {
position: absolute;
inset: -2px;
border-radius: inherit;
background: conic-gradient(from 0deg, transparent, #7B68EE, transparent, #a855f7, transparent);
animation: spin 4s linear infinite;
opacity: 0;
transition: opacity 0.3s;
}
.card-glow:hover .glow-ring {
opacity: 0.5;
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
<!-- Decorative spinning gradient ring -->
<div class="absolute top-1/3 right-10 w-32 h-32 rounded-full animate-spin-slow opacity-10" style="background: conic-gradient(from 0deg, #7B68EE, #a855f7, #ec4899, #7B68EE);"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/70 nav-blur">
<div class="max-w-6xl 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-brand-500 to-purple-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl tracking-tight">ClickUp Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-lg font-medium transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-4xl mx-auto px-6 py-20">
<div class="text-center">
<div class="relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">ClickUp</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed">
The complete ClickUp MCP server. Tasks, docs, and goals — AI-managed. <strong class="text-white">134 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg text-center transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
Join the Waitlist
</a>
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg text-center transition-all flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center gap-4 justify-center">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
</div>
<div>
<p class="text-zinc-400 text-sm">
Trusted by <strong class="text-white">450+</strong> teams
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your project management workflow</p>
</div>
<div class="gradient-border">
<div class="bg-zinc-900 rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/clickup.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="check-square" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Tasks</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="folder-tree" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Projects</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="timer" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Time</span>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up ClickUp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<p class="text-zinc-400 text-lg max-w-2xl mx-auto">Stop wrestling with APIs. Start automating.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
<div class="glow-ring rounded-2xl"></div>
<div class="relative z-10">
<div class="flex items-center gap-4 mb-6">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
</div>
</div>
<p class="text-zinc-500 mb-2 line-through">Task overload paralysis</p>
<p class="text-white font-semibold text-lg">AI prioritizes your day</p>
</div>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
<div class="glow-ring rounded-2xl"></div>
<div class="relative z-10">
<div class="flex items-center gap-4 mb-6">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
</div>
</div>
<p class="text-zinc-500 mb-2 line-through">Status update meetings</p>
<p class="text-white font-semibold text-lg">AI generates progress reports</p>
</div>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
<div class="glow-ring rounded-2xl"></div>
<div class="relative z-10">
<div class="flex items-center gap-4 mb-6">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
</div>
</div>
<p class="text-zinc-500 mb-2 line-through">Scattered project info</p>
<p class="text-white font-semibold text-lg">AI finds anything instantly</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<span class="inline-block px-4 py-1.5 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-4">Features</span>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-zinc-400 text-lg">Full ClickUp API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
<div class="glow-ring rounded-2xl"></div>
<div class="relative z-10">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="check-square" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="font-bold text-xl mb-3">Task Management</h3>
<p class="text-zinc-400 leading-relaxed">Create, update, assign tasks. Full project control.</p>
</div>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
<div class="glow-ring rounded-2xl"></div>
<div class="relative z-10">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="folder-tree" class="w-7 h-7 text-pink-400"></i>
</div>
<h3 class="font-bold text-xl mb-3">Space & Folder Ops</h3>
<p class="text-zinc-400 leading-relaxed">Organize workspaces, manage hierarchies automatically.</p>
</div>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
<div class="glow-ring rounded-2xl"></div>
<div class="relative z-10">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="timer" class="w-7 h-7 text-green-400"></i>
</div>
<h3 class="font-bold text-xl mb-3">Time Tracking</h3>
<p class="text-zinc-400 leading-relaxed">Log time, generate reports, track productivity.</p>
</div>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
<div class="glow-ring rounded-2xl"></div>
<div class="relative z-10">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="settings-2" class="w-7 h-7 text-blue-400"></i>
</div>
<h3 class="font-bold text-xl mb-3">Custom Fields</h3>
<p class="text-zinc-400 leading-relaxed">Access and update any custom data on tasks.</p>
</div>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 120 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Goals</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Docs</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Comments</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Checklists</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Views</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Webhooks</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 gradient-border">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<button
type="submit"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 gradient-border">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/clickup-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ ClickUp MCP Server running</span>
<span class="text-green-400">✓ 134 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your ClickUp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your ClickUp API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your ClickUp settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your ClickUp?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join hundreds of teams already automating with ClickUp Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
Join the Waitlist
</a>
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-500 to-purple-600 flex items-center justify-center">
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">ClickUp Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 ClickUp Connect. Not affiliated with ClickUp.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-purple-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-lg"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
closecrm.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Close CRM Connect — AI-Power Your Sales in 2 Clicks</title>
<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&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: {
brand: {
500: '#3D5AFE',
600: '#3D5AFEdd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #3D5AFE 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #3D5AFE25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #3D5AFE20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #3D5AFE">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Close CRM Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #3D5AFE; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #3D5AFE"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Close CRM</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Close MCP server. Leads, calls, and pipeline. <strong class="text-white">84 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #3D5AFE; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/closecrm.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #3D5AFE; color: #fff">
84 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Close CRM data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #3D5AFE, #3D5AFE99)">
<span class="font-bold text-xs" style="color: #fff">CL</span>
</div>
<div>
<div class="font-semibold text-sm">Close CRM Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 84 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Close CRM Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #3D5AFE">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Close CRM + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Leads falling through cracks</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #3D5AFE30">
<i data-lucide="check" class="w-4 h-4" style="color: #3D5AFE"></i>
</div>
<p class="text-white font-medium">AI tracks every opportunity</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual activity logging</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #3D5AFE30">
<i data-lucide="check" class="w-4 h-4" style="color: #3D5AFE"></i>
</div>
<p class="text-white font-medium">Auto-captured communications</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Inconsistent follow-up</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #3D5AFE30">
<i data-lucide="check" class="w-4 h-4" style="color: #3D5AFE"></i>
</div>
<p class="text-white font-medium">AI-powered sequences</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Close CRM API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3D5AFE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #3D5AFE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Lead Management</h3>
<p class="text-zinc-400 text-sm">Create, qualify, nurture leads automatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3D5AFE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #3D5AFE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Communication</h3>
<p class="text-zinc-400 text-sm">Log calls, emails, SMS — all in one place.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3D5AFE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #3D5AFE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Pipeline</h3>
<p class="text-zinc-400 text-sm">Track opportunities, forecast, manage deals.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3D5AFE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #3D5AFE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Sequences</h3>
<p class="text-zinc-400 text-sm">Automate outreach, follow-ups, and cadences.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #3D5AFE; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Close CRM account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Close CRM API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Close CRM settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Close CRM?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Close CRM Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #3D5AFE; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Close CRM Connect. Not affiliated with Close CRM.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"Show me my pipeline. What deals are closing this month?"},{"type":"ai","text":"Here's your sales pipeline:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eDeal\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eStage\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eValue\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eDataSync Inc\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eNegotiation\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$42,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eFlowLogic\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eProposal\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$28,500\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eNexGen Solutions\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eDemo\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$35,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eMeridian Corp\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eQualified\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$52,000\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e$157,500 pipeline · $70,500 weighted · 2 likely this month\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Draft a contract for DataSync and schedule a follow-up call with NexGen"},{"type":"ai","text":"Generated contract for DataSync ($42,000, annual terms) with e-sign link. Booked NexGen call for Thursday 3pm — agenda includes ROI analysis and case studies.","action":"✓ Contract drafted · Call booked Thu 3pm · Materials prepped"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #3D5AFE20; border: 1px solid #3D5AFE40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#3D5AFE;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #3D5AFE, #3D5AFE99)"><span class="font-bold text-[10px]" style="color: #fff">CL</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,781 +0,0 @@
<!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>Close Connect — AI-Power Your Sales in 2 Clicks</title>
<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&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: {
brand: {
50: '#eef2ff',
100: '#e0e7ff',
200: '#c7d2fe',
300: '#a5b4fc',
400: '#3D5AFE',
500: '#3048e5',
600: '#2438bf',
700: '#1c2c99',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #3D5AFE 0%, #1c2c99 50%, #1e1b4b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-hero {
background: linear-gradient(135deg, #3D5AFE 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(61, 90, 254, 0.25), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(61, 90, 254, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transform: translateY(-4px);
border-color: rgba(61, 90, 254, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
.pulse-ring::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid rgba(61, 90, 254, 0.5);
animation: pulse-ring 2s ease-out infinite;
}
.video-glow {
box-shadow: 0 0 80px rgba(61, 90, 254, 0.2), 0 0 120px rgba(61, 90, 254, 0.1);
}
.btn-primary {
background: linear-gradient(135deg, #3D5AFE 0%, #3048e5 100%);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: scale(1.05);
box-shadow: 0 0 30px rgba(61, 90, 254, 0.5);
}
.feature-icon {
background: linear-gradient(135deg, rgba(61, 90, 254, 0.2) 0%, rgba(61, 90, 254, 0.05) 100%);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(61, 90, 254, 0.4), 0 0 40px 0 rgba(61, 90, 254, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(61, 90, 254, 0.6), 0 0 60px 10px rgba(61, 90, 254, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.1);
}
.number-highlight {
background: linear-gradient(135deg, #3D5AFE 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pipeline-stage {
position: relative;
}
.pipeline-stage::after {
content: '';
position: absolute;
right: -24px;
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-left-color: rgba(61, 90, 254, 0.3);
}
.pipeline-stage:last-child::after {
display: none;
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-1/4 left-10 w-72 h-72 bg-brand-400/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute bottom-1/4 left-1/3 w-64 h-64 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-brand-400 to-brand-600 flex items-center justify-center shadow-lg shadow-brand-400/20">
<i data-lucide="phone-call" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Close Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
<a href="#pricing" class="btn-primary px-5 py-2.5 rounded-xl font-semibold text-white">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="max-w-4xl mx-auto px-6 py-20 text-center">
<div class="flex flex-col items-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
Built for Sales Teams
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text-hero">Close</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
The complete Close CRM MCP server. <strong class="text-white">84 tools</strong> for leads, calls, and pipeline.
Close more deals with AI by your side.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="btn-primary w-full sm:w-auto px-8 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
Join the Waitlist
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Pipeline Visual -->
<div class="flex items-center justify-center gap-4 sm:gap-8 overflow-x-auto pb-2 max-w-full">
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800/50 border border-zinc-700/50 whitespace-nowrap">
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
<span class="text-sm">New Lead</span>
</div>
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800/50 border border-zinc-700/50 whitespace-nowrap">
<div class="w-3 h-3 rounded-full bg-brand-400"></div>
<span class="text-sm">Contacted</span>
</div>
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800/50 border border-zinc-700/50 whitespace-nowrap">
<div class="w-3 h-3 rounded-full bg-purple-400"></div>
<span class="text-sm">Qualified</span>
</div>
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-green-500/20 border border-green-500/30 whitespace-nowrap">
<div class="w-3 h-3 rounded-full bg-green-400"></div>
<span class="text-sm text-green-400">Closed Won</span>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your sales workflow</p>
</div>
<div class="rounded-2xl p-[1px] bg-gradient-to-br from-brand-400/50 to-purple-500/20">
<div class="bg-zinc-900 rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/closecrm.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="users" class="w-4 h-4 text-brand-400"></i>
<span class="text-sm text-zinc-300">Leads</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="phone-call" class="w-4 h-4 text-brand-400"></i>
<span class="text-sm text-zinc-300">Calls</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="git-branch" class="w-4 h-4 text-brand-400"></i>
<span class="text-sm text-zinc-300">Pipeline</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Connecting CRM + AI<br>
<span class="text-zinc-500">shouldn't slow you down</span>
</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">
Sales reps spend too much time on data entry. Let AI handle the busywork while you focus on selling.
</p>
</div>
<div class="grid md:grid-cols-2 gap-8 items-stretch">
<!-- Problems -->
<div class="space-y-4">
<h3 class="text-lg font-semibold text-red-400 mb-6 flex items-center gap-2">
<i data-lucide="x-circle" class="w-5 h-5"></i>
The Old Way
</h3>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Leads falling through cracks</p>
<p class="text-zinc-500">Too many leads, not enough follow-up. Hot prospects go cold.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Manual activity logging</p>
<p class="text-zinc-500">Hours spent updating the CRM instead of talking to prospects.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Inconsistent follow-up</p>
<p class="text-zinc-500">Some leads get 10 touches, others get forgotten entirely.</p>
</div>
</div>
</div>
</div>
<!-- Solutions -->
<div class="space-y-4">
<h3 class="text-lg font-semibold text-brand-400 mb-6 flex items-center gap-2">
<i data-lucide="check-circle" class="w-5 h-5"></i>
With Close Connect
</h3>
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">AI tracks every opportunity</p>
<p class="text-zinc-400">No lead left behind. AI surfaces who needs attention right now.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Auto-captured communications</p>
<p class="text-zinc-400">Calls, emails, SMS — all logged automatically. Just sell.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">AI-powered sequences</p>
<p class="text-zinc-400">Perfect follow-up cadence for every lead, automatically.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/10 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need to close</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Close CRM API access through one simple connection. 84 tools at your fingertips.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="users" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Lead Management</h3>
<p class="text-zinc-400 leading-relaxed">Create, qualify, nurture leads automatically. Never miss an opportunity.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="message-circle" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Communication</h3>
<p class="text-zinc-400 leading-relaxed">Log calls, emails, SMS — all in one place. Full conversation history.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="git-branch" class="w-7 h-7 text-pink-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Pipeline</h3>
<p class="text-zinc-400 leading-relaxed">Track opportunities, forecast revenue, manage deals through stages.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="repeat" class="w-7 h-7 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Sequences</h3>
<p class="text-zinc-400 leading-relaxed">Automate outreach, follow-ups, and cadences. Never drop the ball.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 80 more tools including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Smart Views</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Call Recording</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Email Tracking</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Custom Fields</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Reporting</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Team Performance</span>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-400/10 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="terminal" class="w-4 h-4 text-brand-400"></i>
How It Works
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Just talk to Claude
</h2>
<p class="text-zinc-400 mb-8 leading-relaxed">
No clicking through menus. Just describe what you need and Claude works your pipeline
through your Close account in real-time.
</p>
<div class="space-y-4">
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<span class="text-zinc-300">"Add a new lead from Acme Corp"</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<span class="text-zinc-300">"Log my call with John, discussed pricing"</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<span class="text-zinc-300">"Move Acme to Qualified stage"</span>
</div>
</div>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Claude + Close CRM</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">You:</span> Who should I call next?
<span class="text-brand-400">Claude:</span> Let me check your pipeline...
<span class="text-zinc-500">→ Using:</span> close_search_leads
<span class="text-zinc-500">→ Filter:</span> No contact in 3+ days
<span class="text-zinc-500">→ Sort:</span> By deal value
<span class="text-green-400">✓ Found 3 hot leads</span>
<span class="text-brand-400">Claude:</span> Top priority:
<span class="text-white">1. Acme Corp</span> - $45K deal
Last contact: 4 days ago
<span class="text-yellow-400">⚠ Decision deadline Friday</span>
<span class="text-white">2. TechStart Inc</span> - $28K deal
Requested callback today
Want me to prep talking points?</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-400/5 rounded-full blur-3xl"></div>
<form id="waitlist-form" class="space-y-6 relative z-10">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
>
</div>
<button
type="submit"
id="submit-btn"
class="btn-primary w-full py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-20 h-20 bg-brand-400/20 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-lucide="check" class="w-10 h-10 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
<div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-8 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle of managing infrastructure.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300"><code><span class="text-zinc-500">$</span> git clone github.com/close-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ Close MCP Server running</span>
<span class="text-brand-400">✓ 84 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">Frequently asked questions</h2>
<p class="text-zinc-400">Everything you need to know about Close Connect</p>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Will my sales team need training?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Not really — that's the beauty of AI. Your reps just talk to Claude like they would a colleague: "Add a note to the Acme deal"
or "Who hasn't been contacted this week?" No special syntax, no training sessions.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my sales data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Absolutely. We use OAuth 2.0 and never store your Close credentials. Data flows directly between Claude and Close —
your deal information, customer data, and sales metrics never touch our servers.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can AI make mistakes with my CRM?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Claude confirms before any destructive actions. Moving a deal, adding notes, logging calls — all instant.
But deleting leads or bulk changes require your explicit approval. Think of it as a very smart assistant that double-checks the important stuff.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">How does this help me close more deals?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Time saved on data entry = more time selling. AI finds your hottest leads, reminds you of follow-ups, and surfaces deal insights.
Early users report 40%+ more prospect conversations per day.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 bg-gradient-to-t from-brand-400/5 to-transparent"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Close?
</h2>
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
Join sales teams already closing more deals with Close Connect. Be first in line for early access.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="btn-primary w-full sm:w-auto px-10 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
Join the Waitlist
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-10 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
Watch Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-400 to-brand-600 flex items-center justify-center">
<i data-lucide="phone-call" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Close Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition-colors">Privacy</a>
<a href="#" class="hover:text-white transition-colors">Terms</a>
<a href="#" class="hover:text-white transition-colors">GitHub</a>
<a href="#" class="hover:text-white transition-colors">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Close Connect. Not affiliated with Close.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-400 to-brand-600 rounded-full font-semibold text-white transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
// Form submission
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
// Sticky CTA visibility
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
clover.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Clover Connect — AI-Power Your POS in 2 Clicks</title>
<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&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: {
brand: {
500: '#43B02A',
600: '#43B02Add',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #43B02A 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #43B02A25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #43B02A20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #43B02A">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Clover Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #43B02A; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #43B02A"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Clover</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Clover MCP server. Orders, inventory, and payments. <strong class="text-white">78 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #43B02A; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/clover.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #43B02A; color: #fff">
78 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Clover data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #43B02A, #43B02A99)">
<span class="font-bold text-xs" style="color: #fff">CV</span>
</div>
<div>
<div class="font-semibold text-sm">Clover Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 78 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Clover Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #43B02A">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Clover + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">End-of-day reconciliation</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #43B02A30">
<i data-lucide="check" class="w-4 h-4" style="color: #43B02A"></i>
</div>
<p class="text-white font-medium">AI balances automatically</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Stockout surprises</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #43B02A30">
<i data-lucide="check" class="w-4 h-4" style="color: #43B02A"></i>
</div>
<p class="text-white font-medium">Proactive inventory alerts</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">No customer insights</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #43B02A30">
<i data-lucide="check" class="w-4 h-4" style="color: #43B02A"></i>
</div>
<p class="text-white font-medium">AI identifies your VIPs</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Clover API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #43B02A20">
<i data-lucide="layers" class="w-5 h-5" style="color: #43B02A"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Order Management</h3>
<p class="text-zinc-400 text-sm">Access transactions, refunds, and order history.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #43B02A20">
<i data-lucide="layers" class="w-5 h-5" style="color: #43B02A"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Inventory Control</h3>
<p class="text-zinc-400 text-sm">Track stock, set alerts, manage items.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #43B02A20">
<i data-lucide="layers" class="w-5 h-5" style="color: #43B02A"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Customer Data</h3>
<p class="text-zinc-400 text-sm">Build profiles, track purchases, manage loyalty.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #43B02A20">
<i data-lucide="layers" class="w-5 h-5" style="color: #43B02A"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
<p class="text-zinc-400 text-sm">Sales trends, peak hours, product performance.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #43B02A; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Clover account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Clover API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Clover settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Clover?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Clover Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #43B02A; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Clover Connect. Not affiliated with Clover.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"How did lunch service go today? Any items running low?"},{"type":"ai","text":"Here's your lunch service report:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eLunch Rev.\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$2,840\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+11%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eTransactions\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e94\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+7%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAvg Ticket\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$30.21\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+3.8%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ Low stock: Chicken Parm (4 left), Caesar Wrap (6 left)\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Mark Chicken Parm as 86'd when it hits 2 and reorder wraps for tomorrow"},{"type":"ai","text":"Set auto-86 trigger on Chicken Parm at 2 remaining. Submitted reorder for Caesar Wrap ingredients — delivery confirmed for 7am tomorrow.","action":"✓ Auto-86 set · Reorder placed · Delivery: tomorrow 7am"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #43B02A20; border: 1px solid #43B02A40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#43B02A;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #43B02A, #43B02A99)"><span class="font-bold text-[10px]" style="color: #fff">CV</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,649 +0,0 @@
<!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>Clover Connect — AI-Power Your POS in 2 Clicks</title>
<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&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: {
brand: {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#43B02A',
600: '#3a9d25',
700: '#2d7a1c',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #43B02A 0%, #22c55e 50%, #10b981 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(67, 176, 42, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(67, 176, 42, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(-4px);
border-color: rgba(67, 176, 42, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite 2s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite 1s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px 0 rgba(67, 176, 42, 0.4); }
50% { box-shadow: 0 0 40px 10px rgba(67, 176, 42, 0.6); }
}
.video-glow {
box-shadow: 0 0 80px rgba(67, 176, 42, 0.2), 0 25px 80px -20px rgba(0, 0, 0, 0.8);
}
.btn-glow {
box-shadow: 0 0 30px rgba(67, 176, 42, 0.4);
transition: all 0.3s ease;
}
.btn-glow:hover {
box-shadow: 0 0 50px rgba(67, 176, 42, 0.6);
transform: scale(1.05);
}
.gradient-border {
background: linear-gradient(135deg, rgba(67, 176, 42, 0.2), rgba(34, 197, 94, 0.1));
border: 1px solid rgba(67, 176, 42, 0.2);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(67, 176, 42, 0.4), 0 0 40px 0 rgba(67, 176, 42, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(67, 176, 42, 0.6), 0 0 60px 10px rgba(67, 176, 42, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.1);
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Ambient Background Elements -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 -right-32 w-80 h-80 bg-emerald-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-brand-500 to-emerald-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="shopping-cart" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Clover Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="max-w-3xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
<span>Open Source + Hosted</span>
<span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 rounded-full text-xs font-medium ml-1">NEW</span>
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">Clover</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
The complete Clover MCP server. <strong class="text-white">78 tools</strong> for orders, inventory, and payments.
No OAuth headaches. Just connect and automate your POS.
</p>
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-center">
Join the Waitlist
</a>
<a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
<i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center gap-4 justify-center">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold shadow-lg">
+50
</div>
</div>
<div class="text-left">
<div class="flex items-center gap-1 text-amber-400 text-sm">
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
</div>
<p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">200+</strong> retail businesses</p>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your POS operations</p>
</div>
<div class="gradient-border rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/clover.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="receipt" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Orders</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="package" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Inventory</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="credit-card" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Payments</span>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points / Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up Clover + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
<i data-lucide="x" class="w-7 h-7 text-red-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2 text-red-400">End-of-day reconciliation</h3>
<p class="text-zinc-500 mb-6">Hours spent balancing registers, matching transactions, fixing discrepancies.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<p class="text-white font-medium">AI balances automatically</p>
</div>
</div>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
<i data-lucide="alert-triangle" class="w-7 h-7 text-red-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2 text-red-400">Stockout surprises</h3>
<p class="text-zinc-500 mb-6">Bestsellers run out. Customers leave. Revenue lost. Every. Single. Time.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<p class="text-white font-medium">Proactive inventory alerts</p>
</div>
</div>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
<i data-lucide="users" class="w-7 h-7 text-red-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2 text-red-400">No customer insights</h3>
<p class="text-zinc-500 mb-6">Your best customers are anonymous. No way to reward loyalty or spot trends.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<p class="text-white font-medium">AI identifies your VIPs</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Clover API access through one simple connection. 78 tools at your AI's fingertips.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
<i data-lucide="receipt" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Order Management</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Access transactions, process refunds, view complete order history with AI.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
<i data-lucide="package" class="w-7 h-7 text-blue-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Inventory Control</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Track stock levels, set reorder alerts, manage items automatically.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
<i data-lucide="user-circle" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Customer Data</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Build customer profiles, track purchases, manage loyalty programs.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center mb-5">
<i data-lucide="bar-chart-3" class="w-7 h-7 text-amber-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Sales trends, peak hours analysis, product performance insights.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 60 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Payments</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Employees</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Discounts</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Tax Rates</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Modifiers</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Shifts</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Cash Drawers</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Webhooks</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@business.com"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const successMsg = document.getElementById('success-message');
form.classList.add('hidden');
successMsg.classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle of OAuth and token management.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/clover-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ Clover MCP Server running</span>
<span class="text-brand-400">✓ 78 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
<p class="text-zinc-400">Everything you need to know about Clover Connect</p>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Clover account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Clover API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Clover settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Which Clover devices are supported?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Clover Connect works with all Clover devices — Station, Mini, Flex, and Go. The API is device-agnostic,
so your AI automations work across your entire setup.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Clover?
</h2>
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
Join 200+ retail businesses already automating with Clover Connect. Be first in line when we launch.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg">
Join the Waitlist
</a>
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
<i data-lucide="calendar" class="w-5 h-5"></i>
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-500 to-emerald-500 flex items-center justify-center">
<i data-lucide="shopping-cart" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Clover Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition flex items-center gap-2">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub
</a>
<a href="#" class="hover:text-white transition flex items-center gap-2">
<i data-lucide="twitter" class="w-4 h-4"></i>
Twitter
</a>
</div>
</div>
<div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
<p class="text-zinc-500 text-sm">© 2026 Clover Connect. Not affiliated with Clover Network, Inc.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all shadow-xl"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
constantcontact.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Constant Contact Connect — AI-Power Your Email Lists in 2 Clicks</title>
<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&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: {
brand: {
500: '#1856A8',
600: '#1856A8dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #1856A8 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #1856A825, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #1856A820; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1856A8">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Constant Contact Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #1856A8; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #1856A8"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Constant Contact</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Constant Contact MCP server. Lists, campaigns, and events. <strong class="text-white">58 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #1856A8; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/constantcontact.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #1856A8; color: #fff">
58 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Constant Contact data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #1856A8, #1856A899)">
<span class="font-bold text-xs" style="color: #fff">CC</span>
</div>
<div>
<div class="font-semibold text-sm">Constant Contact Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 58 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Constant Contact Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1856A8">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Constant Contact + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">List growth plateau</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1856A830">
<i data-lucide="check" class="w-4 h-4" style="color: #1856A8"></i>
</div>
<p class="text-white font-medium">AI optimizes signup flows</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Low open rates</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1856A830">
<i data-lucide="check" class="w-4 h-4" style="color: #1856A8"></i>
</div>
<p class="text-white font-medium">AI writes better subject lines</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Event no-shows</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1856A830">
<i data-lucide="check" class="w-4 h-4" style="color: #1856A8"></i>
</div>
<p class="text-white font-medium">Smart reminder sequences</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Constant Contact API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1856A820">
<i data-lucide="layers" class="w-5 h-5" style="color: #1856A8"></i>
</div>
<h3 class="font-semibold text-lg mb-2">List Management</h3>
<p class="text-zinc-400 text-sm">Create, segment, clean lists automatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1856A820">
<i data-lucide="layers" class="w-5 h-5" style="color: #1856A8"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Email Campaigns</h3>
<p class="text-zinc-400 text-sm">Design, send, track email marketing at scale.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1856A820">
<i data-lucide="layers" class="w-5 h-5" style="color: #1856A8"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Event Marketing</h3>
<p class="text-zinc-400 text-sm">Promote events, manage RSVPs, send reminders.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1856A820">
<i data-lucide="layers" class="w-5 h-5" style="color: #1856A8"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
<p class="text-zinc-400 text-sm">Track opens, clicks, bounces, and conversions.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #1856A8; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Constant Contact account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Constant Contact API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Constant Contact settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Constant Contact?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Constant Contact Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #1856A8; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Constant Contact Connect. Not affiliated with Constant Contact.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"How are our email lists growing? Which signup source converts best?"},{"type":"ai","text":"Here's your list health:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eTotal Subs\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e14,280\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+340 this mo\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eBest Source\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003eWebinar\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e42% conv.\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eChurn Rate\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e1.8%\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#F87171;margin-top:1px;\"\u003e-0.3%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e📈 Webinar signups convert 3x better than popup forms\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Create a segment of webinar attendees and send them our premium content offer"},{"type":"ai","text":"Created segment \"Webinar Attendees (Last 90 Days)\" with 892 contacts. Drafted premium content email with personalized subject lines. Ready to send.","action":"✓ Segment created (892) · Email drafted · Ready for review"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #1856A820; border: 1px solid #1856A840;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#1856A8;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #1856A8, #1856A899)"><span class="font-bold text-[10px]" style="color: #fff">CC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,662 +0,0 @@
<!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>Constant Contact Connect — AI-Power Your Email Lists in 2 Clicks</title>
<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&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: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#1856A8',
600: '#1d4ed8',
700: '#1e40af',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #1856A8 0%, #3b82f6 50%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(24, 86, 168, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 40px rgba(24, 86, 168, 0.2);
transform: translateY(-4px);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(24, 86, 168, 0.3); }
50% { box-shadow: 0 0 40px rgba(24, 86, 168, 0.5); }
}
.video-glow {
box-shadow: 0 0 80px rgba(24, 86, 168, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
}
.video-gradient-border {
background: linear-gradient(135deg, rgba(24, 86, 168, 0.5), rgba(139, 92, 246, 0.2));
padding: 1px;
border-radius: 1rem;
}
.video-gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(24, 86, 168, 0.4), 0 0 40px 0 rgba(24, 86, 168, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(24, 86, 168, 0.6), 0 0 60px 10px rgba(24, 86, 168, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.gradient-border {
position: relative;
background: linear-gradient(135deg, rgba(24, 86, 168, 0.1), rgba(139, 92, 246, 0.1));
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, #1856A8, #8b5cf6);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
@keyframes email-fly {
0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(-100px) translateX(50px) rotate(15deg); opacity: 0; }
}
.email-particle {
animation: email-fly 2s ease-out infinite;
}
.metric-ring {
background: conic-gradient(#1856A8 0deg, #1856A8 270deg, transparent 270deg);
border-radius: 50%;
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-blue-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="mail" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Constant Contact Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20 text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Constant Contact</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
The most comprehensive Constant Contact MCP server. <strong class="text-white">58 tools</strong> covering
lists, campaigns, events & reporting. No setup. Just connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col items-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">250+</strong> marketers
</p>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch AI create campaigns, segment lists, and optimize your email marketing</p>
</div>
<div class="video-gradient-border">
<div class="video-gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/constantcontact.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="list" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Lists</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="mail" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Campaigns</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Analytics</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">
Setting up Constant Contact + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="space-y-4">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<div>
<p class="font-medium">List growth has plateaued</p>
<p class="text-zinc-500">Same signup forms, same results. Stuck at the same number.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<div>
<p class="font-medium">Low open rates killing engagement</p>
<p class="text-zinc-500">Subject lines that don't resonate. Emails that get ignored.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<div>
<p class="font-medium">Event no-shows wasting resources</p>
<p class="text-zinc-500">People register but don't show up. Reminder fatigue is real.</p>
</div>
</div>
</div>
</div>
<div class="bg-zinc-900 rounded-2xl border border-zinc-800 p-8 gradient-border">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold">With Constant Contact Connect</h3>
</div>
<div class="space-y-4 text-zinc-300">
<div class="flex items-center gap-3">
<i data-lucide="trending-up" class="w-5 h-5 text-brand-400"></i>
<p>AI optimizes signup flows for conversion</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="sparkles" class="w-5 h-5 text-brand-400"></i>
<p>AI writes subject lines that get opened</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="bell" class="w-5 h-5 text-brand-400"></i>
<p>Smart reminder sequences reduce no-shows</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="zap" class="w-5 h-5 text-brand-400"></i>
<p>Works with Claude, GPT, any MCP client</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="bar-chart-3" class="w-5 h-5 text-brand-400"></i>
<p>Real-time analytics and optimization</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Constant Contact API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
<i data-lucide="list" class="w-6 h-6 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">List Management</h3>
<p class="text-zinc-400">Create, segment, clean lists automatically. Full control over your audience.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
<i data-lucide="mail" class="w-6 h-6 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Email Campaigns</h3>
<p class="text-zinc-400">Design, send, track email marketing at scale with AI assistance.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-pink-500/10 flex items-center justify-center mb-4">
<i data-lucide="calendar" class="w-6 h-6 text-pink-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Event Marketing</h3>
<p class="text-zinc-400">Promote events, manage RSVPs, send smart reminders automatically.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-4">
<i data-lucide="bar-chart-3" class="w-6 h-6 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Reporting</h3>
<p class="text-zinc-400">Track opens, clicks, bounces, and conversions with AI insights.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ 40 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Contact Tags</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Custom Fields</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Segments</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Landing Pages</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Social Posts</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Signup Forms</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Automations</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">A/B Testing</span>
</div>
</div>
</div>
</section>
<!-- Email Marketing Stats -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Why email marketing still wins</h2>
<p class="text-zinc-400">AI makes the best channel even better</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-8 bg-zinc-900/50 rounded-2xl border border-zinc-800">
<div class="text-5xl font-bold gradient-text mb-2">$36</div>
<p class="text-zinc-400">ROI per $1 spent on email</p>
</div>
<div class="text-center p-8 bg-zinc-900/50 rounded-2xl border border-zinc-800">
<div class="text-5xl font-bold gradient-text mb-2">4.2B</div>
<p class="text-zinc-400">Daily email users worldwide</p>
</div>
<div class="text-center p-8 bg-zinc-900/50 rounded-2xl border border-zinc-800">
<div class="text-5xl font-bold gradient-text mb-2">77%</div>
<p class="text-zinc-400">Prefer email for brand comms</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 gradient-border">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="Your phone number"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6">
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-zinc-900 rounded-3xl border border-zinc-800 p-8 md:p-12">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mcp/constantcontact
<span class="text-zinc-500">$</span> cd constantcontact && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ Constant Contact MCP Server running</span>
<span class="text-brand-400">✓ 58 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
For the hosted version, no. Just connect your Constant Contact account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
Yes. We use OAuth 2.0 and never store your Constant Contact API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Constant Contact settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Can AI actually improve my email metrics?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
Absolutely. AI can analyze your past campaigns, identify patterns in what works, write better subject lines,
segment your audience more intelligently, and optimize send times — all automatically.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your email marketing?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 250+ marketers already on the waitlist for Constant Contact Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-500 flex items-center justify-center">
<i data-lucide="mail" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Constant Contact Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Constant Contact Connect. Not affiliated with Constant Contact.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
fieldedge.html Normal file
View File

@ -0,0 +1,408 @@
<!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>FieldEdge Connect — AI-Power Your Field Ops in 2 Clicks</title>
<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&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: {
brand: {
500: '#0066B2',
600: '#0066B2dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #0066B2 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #0066B225, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #0066B220; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0066B2">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">FieldEdge Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #0066B2; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #0066B2"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">FieldEdge</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete FieldEdge MCP server. Work orders, dispatch, and service. <strong class="text-white">68 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #0066B2; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/fieldedge.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #0066B2; color: #fff">
68 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your FieldEdge data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #0066B2, #0066B299)">
<span class="font-bold text-xs" style="color: #fff">FE</span>
</div>
<div>
<div class="font-semibold text-sm">FieldEdge Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 68 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask FieldEdge Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0066B2">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up FieldEdge + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Missed service renewals</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0066B230">
<i data-lucide="check" class="w-4 h-4" style="color: #0066B2"></i>
</div>
<p class="text-white font-medium">AI tracks and reminds</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Inefficient dispatch</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0066B230">
<i data-lucide="check" class="w-4 h-4" style="color: #0066B2"></i>
</div>
<p class="text-white font-medium">AI-optimized routing</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Paper work orders</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0066B230">
<i data-lucide="check" class="w-4 h-4" style="color: #0066B2"></i>
</div>
<p class="text-white font-medium">Fully digital job tracking</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full FieldEdge API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0066B220">
<i data-lucide="layers" class="w-5 h-5" style="color: #0066B2"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Work Order Management</h3>
<p class="text-zinc-400 text-sm">Create, assign, track service calls.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0066B220">
<i data-lucide="layers" class="w-5 h-5" style="color: #0066B2"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Dispatch Board</h3>
<p class="text-zinc-400 text-sm">Optimize tech schedules, manage capacity.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0066B220">
<i data-lucide="layers" class="w-5 h-5" style="color: #0066B2"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Service Agreements</h3>
<p class="text-zinc-400 text-sm">Track memberships, renewals, and maintenance.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0066B220">
<i data-lucide="layers" class="w-5 h-5" style="color: #0066B2"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Invoicing</h3>
<p class="text-zinc-400 text-sm">Generate invoices, process payments on-site.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #0066B2; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your FieldEdge account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your FieldEdge API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your FieldEdge settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your FieldEdge?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with FieldEdge Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #0066B2; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 FieldEdge Connect. Not affiliated with FieldEdge.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"Show me today's dispatch board. Any service agreements up for renewal?"},{"type":"ai","text":"Here's your operations dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eWO-881\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eEmergency - AC unit down (Commercial)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eEmergency\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eUnassigned\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eWO-879\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eQuarterly maintenance - Suite 400\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eScheduled\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e10:30am\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eWO-877\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eWater heater install\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eIn Progress\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eETA 2pm\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e8 work orders today · 1 emergency · 5 agreements expiring this month\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Assign the emergency to our closest available tech and send renewal offers to the 5 expiring agreements"},{"type":"ai","text":"Dispatched Tom B. (4 miles away, next available at 11am) to the emergency call. Sent renewal offers to all 5 agreements with a 10% early-renewal discount.","action":"✓ Emergency dispatched · 5 renewal offers sent · 10% discount applied"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #0066B220; border: 1px solid #0066B240;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#0066B2;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #0066B2, #0066B299)"><span class="font-bold text-[10px]" style="color: #fff">FE</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,643 +0,0 @@
<!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>FieldEdge Connect — AI-Power Your Field Ops in 2 Clicks</title>
<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&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: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#0066B2',
600: '#0052a0',
700: '#003d7a',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #0066B2 0%, #00a0dc 50%, #00d4ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 102, 178, 0.25), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 60px rgba(0, 102, 178, 0.2);
transform: translateY(-4px);
border-color: rgba(0, 102, 178, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(0, 102, 178, 0.3); }
50% { box-shadow: 0 0 40px rgba(0, 102, 178, 0.5); }
}
.video-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.animated-gradient {
background: linear-gradient(-45deg, #0066B2, #00a0dc, #0066B2, #003d7a);
background-size: 400% 400%;
animation: gradient-shift 8s ease infinite;
}
.glow-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.3;
pointer-events: none;
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse-btn {
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 102, 178, 0.4), 0 0 40px 0 rgba(0, 102, 178, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(0, 102, 178, 0.6), 0 0 60px 10px rgba(0, 102, 178, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse-btn 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
.stat-card {
background: linear-gradient(135deg, rgba(0, 102, 178, 0.1) 0%, transparent 100%);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Orbs -->
<div class="glow-orb w-96 h-96 bg-blue-500 top-20 -left-48 fixed animate-float-slow"></div>
<div class="glow-orb w-72 h-72 bg-cyan-500 top-1/2 -right-36 fixed animate-float-delayed"></div>
<div class="glow-orb w-64 h-64 bg-blue-600 bottom-20 left-1/4 fixed animate-float"></div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/20">
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">FieldEdge Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/20 hover:shadow-brand-500/40">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="max-w-4xl mx-auto px-6 py-20">
<div class="flex flex-col items-center text-center">
<div class="relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">FieldEdge</span> to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed max-w-3xl mx-auto">
The complete FieldEdge MCP server. <strong class="text-white">68 tools</strong> for work orders, dispatch, and service.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-xl shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Stats Row -->
<div class="grid grid-cols-3 gap-4 max-w-md mx-auto">
<div class="stat-card rounded-xl p-4 border border-zinc-800/50">
<div class="text-3xl font-bold text-brand-400">68</div>
<div class="text-sm text-zinc-500">API Tools</div>
</div>
<div class="stat-card rounded-xl p-4 border border-zinc-800/50">
<div class="text-3xl font-bold text-cyan-400">2</div>
<div class="text-sm text-zinc-500">Clicks to Connect</div>
</div>
<div class="stat-card rounded-xl p-4 border border-zinc-800/50">
<div class="text-3xl font-bold text-green-400">24/7</div>
<div class="text-sm text-zinc-500">AI Automation</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your field service management</p>
</div>
<div class="bg-gradient-to-r from-brand-500/50 to-cyan-500/20 p-[1px] rounded-2xl">
<div class="bg-zinc-900 rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/fieldedge.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="clipboard-list" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Work Orders</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="layout-grid" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Dispatch</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="file-badge" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Agreements</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div>
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">The Problem</span>
<h2 class="text-3xl md:text-5xl font-bold mb-8 leading-tight">
Setting up FieldEdge + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Missed service renewals</p>
<p class="text-zinc-500 mt-1">Memberships expire and you don't even notice until they call to cancel.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Inefficient dispatch</p>
<p class="text-zinc-500 mt-1">Techs driving across town when there's a job next door.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Paper work orders</p>
<p class="text-zinc-500 mt-1">Lost tickets, illegible notes, no accountability.</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-xl relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl"></div>
<div class="relative">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/30">
<i data-lucide="check" class="w-6 h-6 text-white"></i>
</div>
<h3 class="text-2xl font-bold">With FieldEdge Connect</h3>
</div>
<div class="space-y-4 text-lg">
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>AI tracks and reminds on renewals</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>AI-optimized routing & dispatch</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>Fully digital job tracking</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>Works with Claude, GPT, any MCP client</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>Full API access — 68 tools ready</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">Features</span>
<h2 class="text-3xl md:text-5xl font-bold mb-6">Everything you need</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full FieldEdge API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5 border border-brand-500/20">
<i data-lucide="clipboard-list" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Work Order Management</h3>
<p class="text-zinc-400 leading-relaxed">Create, assign, and track service calls with full visibility.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-cyan-500/5 flex items-center justify-center mb-5 border border-cyan-500/20">
<i data-lucide="layout-grid" class="w-7 h-7 text-cyan-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Dispatch Board</h3>
<p class="text-zinc-400 leading-relaxed">Optimize tech schedules, manage capacity, reduce drive time.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5 border border-green-500/20">
<i data-lucide="file-badge" class="w-7 h-7 text-green-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Service Agreements</h3>
<p class="text-zinc-400 leading-relaxed">Track memberships, renewals, and maintenance schedules.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5 border border-purple-500/20">
<i data-lucide="credit-card" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Invoicing</h3>
<p class="text-zinc-400 leading-relaxed">Generate invoices, process payments on-site, sync to accounting.</p>
</div>
</div>
<div class="mt-16 text-center">
<p class="text-zinc-400 mb-6">+ 50 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Customer History</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Equipment Tracking</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Technician GPS</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Price Book</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Reporting</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Inventory</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Quotes</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Webhooks</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-2xl mx-auto px-6 relative">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-semibold mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-6">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-2xl">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="+1 (555) 000-0000"
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email <span class="text-zinc-500">(optional)</span></label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-lucide="check" class="w-10 h-10 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<div id="error-message" class="hidden mt-4 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-center">
Something went wrong. Please try again.
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const submitBtn = document.getElementById('submit-btn');
const successMsg = document.getElementById('success-message');
submitBtn.disabled = true;
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
await new Promise(r => setTimeout(r, 1000));
form.classList.add('hidden');
successMsg.classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-xl">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 text-lg mb-8 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold text-lg group">
View on GitHub
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-inner">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/fieldedge-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ FieldEdge MCP Server running</span>
<span class="text-green-400">✓ 68 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">FAQ</span>
<h2 class="text-3xl md:text-4xl font-bold">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your FieldEdge account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your FieldEdge API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your FieldEdge settings.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your FieldEdge?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join service pros already automating with FieldEdge Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center">
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">FieldEdge Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 FieldEdge Connect. Not affiliated with FieldEdge.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
freshbooks.html Normal file
View File

@ -0,0 +1,408 @@
<!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>FreshBooks Connect — AI-Power Your Invoicing in 2 Clicks</title>
<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&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: {
brand: {
500: '#0075DD',
600: '#0075DDdd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #0075DD 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #0075DD25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #0075DD20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0075DD">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">FreshBooks Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #0075DD; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #0075DD"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">FreshBooks</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete FreshBooks MCP server. Invoices, expenses, and clients. <strong class="text-white">64 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #0075DD; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/freshbooks.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #0075DD; color: #fff">
64 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your FreshBooks data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #0075DD, #0075DD99)">
<span class="font-bold text-xs" style="color: #fff">FB</span>
</div>
<div>
<div class="font-semibold text-sm">FreshBooks Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 64 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask FreshBooks Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0075DD">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up FreshBooks + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Chasing late payments</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0075DD30">
<i data-lucide="check" class="w-4 h-4" style="color: #0075DD"></i>
</div>
<p class="text-white font-medium">AI sends perfect follow-ups</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual expense entry</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0075DD30">
<i data-lucide="check" class="w-4 h-4" style="color: #0075DD"></i>
</div>
<p class="text-white font-medium">AI categorizes automatically</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Tax season panic</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0075DD30">
<i data-lucide="check" class="w-4 h-4" style="color: #0075DD"></i>
</div>
<p class="text-white font-medium">Reports ready year-round</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full FreshBooks API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0075DD20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0075DD"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Invoice Management</h3>
<p class="text-zinc-400 text-sm">Create, send, track invoices automatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0075DD20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0075DD"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Expense Tracking</h3>
<p class="text-zinc-400 text-sm">Log expenses, attach receipts, categorize spending.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0075DD20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0075DD"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Client Portal</h3>
<p class="text-zinc-400 text-sm">Manage client info, payment methods, and history.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0075DD20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0075DD"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Reports</h3>
<p class="text-zinc-400 text-sm">Generate P&L, tax summaries, and cash flow reports.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #0075DD; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your FreshBooks account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your FreshBooks API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your FreshBooks settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your FreshBooks?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with FreshBooks Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #0075DD; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 FreshBooks Connect. Not affiliated with FreshBooks.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"How's cash flow looking? Any overdue invoices I should worry about?"},{"type":"ai","text":"Here's your financial snapshot:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eRevenue (MTD)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#34D399;\"\u003e$42,800\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eOutstanding\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#F3F4F6;\"\u003e$18,350\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eOverdue (\u003e30d)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#F87171;\"\u003e$7,200\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eExpenses (MTD)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#F3F4F6;\"\u003e$24,100\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#FBBF24;\"\u003e⚠ 3 invoices overdue \u003e30 days totaling $7,200\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Send follow-ups on the 3 overdue invoices. Firm but professional tone."},{"type":"ai","text":"Sent personalized follow-ups to all 3: Acme Corp ($3,200), TechFlow ($2,800), and Bright Solutions ($1,200). Each includes a direct payment link and 5-day grace period.","action":"✓ 3 follow-ups sent · Payment links included · 5-day deadline set"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #0075DD20; border: 1px solid #0075DD40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#0075DD;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #0075DD, #0075DD99)"><span class="font-bold text-[10px]" style="color: #fff">FB</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,692 +0,0 @@
<!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>FreshBooks Connect — AI-Power Your Invoicing in 2 Clicks</title>
<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&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: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#0075DD',
600: '#2563eb',
700: '#1d4ed8',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #0075DD 0%, #3b82f6 50%, #6366f1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 117, 221, 0.25), transparent);
}
.card-glow:hover {
box-shadow: 0 0 60px rgba(0, 117, 221, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(-4px);
}
.video-glow {
box-shadow: 0 0 80px rgba(0, 117, 221, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite 2s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite 1s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 117, 221, 0.4), 0 0 40px 0 rgba(0, 117, 221, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(0, 117, 221, 0.6), 0 0 60px 10px rgba(0, 117, 221, 0.3); }
}
@keyframes money-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-10px) rotate(5deg); }
75% { transform: translateY(-5px) rotate(-5deg); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.feature-icon {
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.gradient-border {
background: linear-gradient(135deg, rgba(0, 117, 221, 0.5), rgba(99, 102, 241, 0.2));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
.text-shadow {
text-shadow: 0 0 40px rgba(0, 117, 221, 0.5);
}
.bg-grid {
background-image:
linear-gradient(rgba(0, 117, 221, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 117, 221, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
}
.money-icon {
animation: money-float 4s ease-in-out infinite;
}
.invoice-preview {
background: linear-gradient(135deg, rgba(0, 117, 221, 0.1) 0%, rgba(0, 117, 221, 0.02) 100%);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Floating Background Elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-indigo-400/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="receipt" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">FreshBooks Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20 bg-grid">
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text text-shadow">FreshBooks</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10">
The most comprehensive FreshBooks MCP server. <strong class="text-white">64 tools</strong> for invoices, expenses, and clients.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col items-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">400+</strong> small businesses
</p>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your invoicing workflow</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/freshbooks.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="file-text" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Invoices</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="receipt" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Expenses</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Reports</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">
Invoicing + AI shouldn't<br>
<span class="text-zinc-500">mean hiring a dev</span>
</h2>
<div class="space-y-5">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-medium text-white">Chasing late payments</p>
<p class="text-zinc-500 text-sm mt-1">Manual follow-ups. Awkward emails. Cash flow chaos.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-medium text-white">Manual expense entry</p>
<p class="text-zinc-500 text-sm mt-1">Receipts pile up. Categories forgotten. Tax time nightmare.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-medium text-white">Tax season panic</p>
<p class="text-zinc-500 text-sm mt-1">Scrambling for reports. Missing deductions. Accountant stress.</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-8 shadow-2xl">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
</div>
<h3 class="text-2xl font-semibold">With FreshBooks Connect</h3>
</div>
<div class="space-y-4">
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>AI sends perfect follow-ups</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>Auto-categorize expenses</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>Reports ready year-round</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>Works with Claude, GPT, any MCP client</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>Automatic token refresh forever</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full FreshBooks API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:bg-brand-500/20 transition-all">
<i data-lucide="file-text" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Invoice Management</h3>
<p class="text-zinc-400">Create, send, track invoices automatically. Recurring billing built-in.</p>
</div>
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:bg-purple-500/20 transition-all">
<i data-lucide="wallet" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Expense Tracking</h3>
<p class="text-zinc-400">Log expenses, attach receipts, categorize spending. Tax-ready.</p>
</div>
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-5 group-hover:bg-cyan-500/20 transition-all">
<i data-lucide="users-round" class="w-7 h-7 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Client Portal</h3>
<p class="text-zinc-400">Manage client info, payment methods, and history. Complete CRM.</p>
</div>
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center mb-5 group-hover:bg-amber-500/20 transition-all">
<i data-lucide="pie-chart" class="w-7 h-7 text-amber-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Reports</h3>
<p class="text-zinc-400">Generate P&L, tax summaries, and cash flow reports on demand.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ 60 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Estimates</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Payments</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Time Tracking</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Projects</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Taxes</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Retainers</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Credits</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Webhooks</span>
</div>
</div>
</div>
</section>
<!-- Use Cases -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">What you can automate</h2>
<p class="text-xl text-zinc-400">Real invoicing workflows, powered by AI</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-500/10 to-transparent border border-brand-500/20 hover:border-brand-500/40 transition">
<div class="text-4xl mb-4">📧</div>
<h3 class="text-lg font-semibold mb-2">Payment Reminders</h3>
<p class="text-zinc-400 text-sm">"Send friendly reminders to all clients with invoices overdue by 7+ days."</p>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 hover:border-purple-500/40 transition">
<div class="text-4xl mb-4">🧾</div>
<h3 class="text-lg font-semibold mb-2">Expense Bot</h3>
<p class="text-zinc-400 text-sm">"Log this Uber receipt as a business travel expense for Project Alpha."</p>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 hover:border-cyan-500/40 transition">
<div class="text-4xl mb-4">📊</div>
<h3 class="text-lg font-semibold mb-2">Financial Reports</h3>
<p class="text-zinc-400 text-sm">"Generate a P&L report for Q4 and highlight my biggest expense categories."</p>
</div>
</div>
</div>
</section>
<!-- Pricing Comparison -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Time is money</h2>
<p class="text-xl text-zinc-400">See how much you'll save with AI-powered invoicing</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="p-6 rounded-2xl bg-red-500/5 border border-red-500/20">
<h3 class="text-lg font-semibold mb-4 text-red-400">❌ Manual Process</h3>
<ul class="space-y-3 text-zinc-400 text-sm">
<li class="flex items-center gap-2"><span class="text-red-400"></span> 2 hours/week chasing payments</li>
<li class="flex items-center gap-2"><span class="text-red-400"></span> 30 min/day on expense entry</li>
<li class="flex items-center gap-2"><span class="text-red-400"></span> 8+ hours quarterly on reports</li>
<li class="flex items-center gap-2"><span class="text-red-400"></span> Missed deductions & errors</li>
</ul>
<div class="mt-6 pt-4 border-t border-red-500/20">
<div class="text-2xl font-bold text-red-400">~15 hrs/month</div>
<div class="text-zinc-500 text-sm">wasted on admin</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-brand-500/5 border border-brand-500/20">
<h3 class="text-lg font-semibold mb-4 text-brand-400">✅ With FreshBooks Connect</h3>
<ul class="space-y-3 text-zinc-400 text-sm">
<li class="flex items-center gap-2"><span class="text-brand-400"></span> Auto payment reminders</li>
<li class="flex items-center gap-2"><span class="text-brand-400"></span> AI categorizes expenses</li>
<li class="flex items-center gap-2"><span class="text-brand-400"></span> Instant report generation</li>
<li class="flex items-center gap-2"><span class="text-brand-400"></span> Smart tax optimization</li>
</ul>
<div class="mt-6 pt-4 border-t border-brand-500/20">
<div class="text-2xl font-bold text-brand-400">~1 hr/month</div>
<div class="text-zinc-500 text-sm">just oversight</div>
</div>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="Your phone number"
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@business.com"
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6">
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-2xl">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4 transition group-hover:translate-x-1"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/freshbooks-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ FreshBooks MCP Server running</span>
<span class="text-brand-400">✓ 64 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Is my financial data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
Absolutely. We use OAuth 2.0 and never store your FreshBooks API keys. All financial data is encrypted at rest and in transit.
You can revoke access anytime from your FreshBooks settings.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Can AI send invoices on my behalf?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
Yes! With the right permissions, AI can create, customize, and send invoices. You can set up approval workflows
or let AI handle routine invoices automatically while you review larger ones.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Will this work with my accountant?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
Definitely. AI can generate accountant-ready reports, export data in standard formats, and ensure your
books are clean year-round. Your accountant will love you.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your invoicing?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 400+ small businesses already automating with FreshBooks Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center">
<i data-lucide="receipt" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">FreshBooks Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition flex items-center gap-1">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub
</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 FreshBooks Connect. Not affiliated with FreshBooks.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-blue-600 rounded-full font-semibold transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
freshdesk.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Freshdesk Connect — AI-Power Your Helpdesk in 2 Clicks</title>
<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&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: {
brand: {
500: '#25C16F',
600: '#25C16Fdd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #25C16F 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #25C16F25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #25C16F20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #25C16F">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Freshdesk Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #25C16F; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #25C16F"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Freshdesk</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Freshdesk MCP server. Tickets, agents, and automations. <strong class="text-white">92 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #25C16F; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/freshdesk.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #25C16F; color: #fff">
92 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Freshdesk data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #25C16F, #25C16F99)">
<span class="font-bold text-xs" style="color: #fff">FD</span>
</div>
<div>
<div class="font-semibold text-sm">Freshdesk Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 92 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Freshdesk Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #25C16F">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Freshdesk + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Repetitive ticket responses</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #25C16F30">
<i data-lucide="check" class="w-4 h-4" style="color: #25C16F"></i>
</div>
<p class="text-white font-medium">AI drafts perfect replies</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">SLA breaches</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #25C16F30">
<i data-lucide="check" class="w-4 h-4" style="color: #25C16F"></i>
</div>
<p class="text-white font-medium">Proactive escalation alerts</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Knowledge silos</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #25C16F30">
<i data-lucide="check" class="w-4 h-4" style="color: #25C16F"></i>
</div>
<p class="text-white font-medium">AI surfaces relevant articles</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Freshdesk API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #25C16F20">
<i data-lucide="layers" class="w-5 h-5" style="color: #25C16F"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Ticket Management</h3>
<p class="text-zinc-400 text-sm">Create, update, resolve tickets with AI assistance.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #25C16F20">
<i data-lucide="layers" class="w-5 h-5" style="color: #25C16F"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Agent Workspace</h3>
<p class="text-zinc-400 text-sm">Manage assignments, workload, and performance.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #25C16F20">
<i data-lucide="layers" class="w-5 h-5" style="color: #25C16F"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Knowledge Base</h3>
<p class="text-zinc-400 text-sm">Search articles, suggest solutions, update docs.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #25C16F20">
<i data-lucide="layers" class="w-5 h-5" style="color: #25C16F"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Automations</h3>
<p class="text-zinc-400 text-sm">Trigger scenarios, dispatch rules, SLA management.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #25C16F; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Freshdesk account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Freshdesk API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Freshdesk settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Freshdesk?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Freshdesk Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #25C16F; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Freshdesk Connect. Not affiliated with Freshdesk.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"What's the support queue looking like? Any recurring issues this week?"},{"type":"ai","text":"Here's your support dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#8842\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003ePassword reset loop (x12)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eCritical\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e12 reports\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#8838\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eSlow dashboard loading\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eHigh\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e7 reports\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#8835\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eInvoice PDF formatting\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eMedium\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e3 reports\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#8831\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eMobile app crash on iOS 18\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eHigh\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e5 reports\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e42 open · 12 trending issues · CSAT: 87%\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Merge the duplicate password reset tickets and send a known-issue update to affected users"},{"type":"ai","text":"Merged 12 tickets into parent #8842. Sent status update to all 12 customers with workaround steps. Flagged to engineering with priority escalation.","action":"✓ 12 tickets merged · Customers notified · Engineering escalated"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #25C16F20; border: 1px solid #25C16F40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#25C16F;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #25C16F, #25C16F99)"><span class="font-bold text-[10px]" style="color: #fff">FD</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,627 +0,0 @@
<!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>Freshdesk Connect — AI-Power Your Helpdesk in 2 Clicks</title>
<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&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: {
brand: {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#25C16F',
600: '#16a34a',
700: '#15803d',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #25C16F 0%, #06b6d4 50%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 193, 111, 0.15), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 40px rgba(37, 193, 111, 0.15);
transform: translateY(-4px);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(37, 193, 111, 0.3); }
50% { box-shadow: 0 0 40px rgba(37, 193, 111, 0.5); }
}
.video-glow {
box-shadow: 0 0 80px rgba(37, 193, 111, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
}
.video-gradient-border {
background: linear-gradient(135deg, rgba(37, 193, 111, 0.5), rgba(139, 92, 246, 0.2));
padding: 1px;
border-radius: 1rem;
}
.video-gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(37, 193, 111, 0.4), 0 0 40px 0 rgba(37, 193, 111, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(37, 193, 111, 0.6), 0 0 60px 10px rgba(37, 193, 111, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.gradient-border {
position: relative;
background: linear-gradient(135deg, rgba(37, 193, 111, 0.1), rgba(139, 92, 246, 0.1));
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, #25C16F, #8b5cf6);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-cyan-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Freshdesk Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20 text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Freshdesk</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
The most comprehensive Freshdesk MCP server. <strong class="text-white">92 tools</strong> covering
tickets, agents, knowledge base & automations. No setup. Just connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col items-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">300+</strong> support teams
</p>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch AI resolve tickets, update knowledge base, and automate support</p>
</div>
<div class="video-gradient-border">
<div class="video-gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/freshdesk.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="ticket" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Tickets</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Agents</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Knowledge Base</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">
Setting up Freshdesk + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="space-y-4">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<div>
<p class="font-medium">Repetitive ticket responses</p>
<p class="text-zinc-500">Copy-pasting the same answers 50 times a day.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<div>
<p class="font-medium">SLA breaches piling up</p>
<p class="text-zinc-500">No proactive alerts. Tickets slip through the cracks.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<div>
<p class="font-medium">Knowledge silos everywhere</p>
<p class="text-zinc-500">Agents can't find the right articles fast enough.</p>
</div>
</div>
</div>
</div>
<div class="bg-zinc-900 rounded-2xl border border-zinc-800 p-8 gradient-border">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold">With Freshdesk Connect</h3>
</div>
<div class="space-y-4 text-zinc-300">
<div class="flex items-center gap-3">
<i data-lucide="sparkles" class="w-5 h-5 text-brand-400"></i>
<p>AI drafts perfect replies instantly</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="bell" class="w-5 h-5 text-brand-400"></i>
<p>Proactive escalation alerts before SLA breach</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="book-open" class="w-5 h-5 text-brand-400"></i>
<p>AI surfaces relevant articles automatically</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="zap" class="w-5 h-5 text-brand-400"></i>
<p>Works with Claude, GPT, any MCP client</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="users" class="w-5 h-5 text-brand-400"></i>
<p>Multi-agent workspace support built-in</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Freshdesk API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
<i data-lucide="ticket" class="w-6 h-6 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Ticket Management</h3>
<p class="text-zinc-400">Create, update, resolve tickets with AI assistance. Full CRUD on your queue.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
<i data-lucide="users" class="w-6 h-6 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Agent Workspace</h3>
<p class="text-zinc-400">Manage assignments, workload, and performance metrics automatically.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-4">
<i data-lucide="book-open" class="w-6 h-6 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Knowledge Base</h3>
<p class="text-zinc-400">Search articles, suggest solutions, update docs programmatically.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-orange-500/10 flex items-center justify-center mb-4">
<i data-lucide="workflow" class="w-6 h-6 text-orange-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Automations</h3>
<p class="text-zinc-400">Trigger scenarios, dispatch rules, SLA management — all AI-controlled.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ 80 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Canned Responses</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Contact Management</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Groups</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Companies</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Time Entries</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Satisfaction Ratings</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Forums</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Products</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 gradient-border">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="Your phone number"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6">
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-zinc-900 rounded-3xl border border-zinc-800 p-8 md:p-12">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mcp/freshdesk
<span class="text-zinc-500">$</span> cd freshdesk && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ Freshdesk MCP Server running</span>
<span class="text-brand-400">✓ 92 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
For the hosted version, no. Just connect your Freshdesk account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
Yes. We use OAuth 2.0 and never store your Freshdesk API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Freshdesk settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your support?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 300+ support teams already automating with Freshdesk Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center">
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Freshdesk Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Freshdesk Connect. Not affiliated with Freshdesk.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
gusto.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Gusto Connect — AI-Power Your Payroll in 2 Clicks</title>
<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&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: {
brand: {
500: '#F45D48',
600: '#F45D48dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #F45D48 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #F45D4825, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #F45D4820; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #F45D48">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Gusto Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #F45D48; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #F45D48"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Gusto</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Gusto MCP server. Payroll, benefits, and HR — AI-automated. <strong class="text-white">72 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #F45D48; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/gusto.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #F45D48; color: #fff">
72 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Gusto data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #F45D48, #F45D4899)">
<span class="font-bold text-xs" style="color: #fff">GU</span>
</div>
<div>
<div class="font-semibold text-sm">Gusto Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 72 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Gusto Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #F45D48">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Gusto + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Payroll deadline stress</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F45D4830">
<i data-lucide="check" class="w-4 h-4" style="color: #F45D48"></i>
</div>
<p class="text-white font-medium">AI reminds and preps everything</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual onboarding tasks</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F45D4830">
<i data-lucide="check" class="w-4 h-4" style="color: #F45D48"></i>
</div>
<p class="text-white font-medium">Automated new hire workflows</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Scattered employee requests</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F45D4830">
<i data-lucide="check" class="w-4 h-4" style="color: #F45D48"></i>
</div>
<p class="text-white font-medium">AI handles common HR queries</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Gusto API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F45D4820">
<i data-lucide="layers" class="w-5 h-5" style="color: #F45D48"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Payroll Management</h3>
<p class="text-zinc-400 text-sm">Run payroll, check statuses, manage pay schedules.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F45D4820">
<i data-lucide="layers" class="w-5 h-5" style="color: #F45D48"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Employee Data</h3>
<p class="text-zinc-400 text-sm">Access profiles, compensation, and employment details.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F45D4820">
<i data-lucide="layers" class="w-5 h-5" style="color: #F45D48"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Benefits Admin</h3>
<p class="text-zinc-400 text-sm">Manage enrollments, deductions, and plan information.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F45D4820">
<i data-lucide="layers" class="w-5 h-5" style="color: #F45D48"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Compliance</h3>
<p class="text-zinc-400 text-sm">Track tax filings, W-2s, and regulatory requirements.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #F45D48; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Gusto account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Gusto API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Gusto settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Gusto?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Gusto Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #F45D48; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Gusto Connect. Not affiliated with Gusto.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"Payroll is due Friday. What's the status and are there any issues?"},{"type":"ai","text":"Here's your payroll summary:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eGross Payroll\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$184,230\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+3.2%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eEmployees\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e47\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e0\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003ePending Items\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e3\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003eaction\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ 3 items need attention: 2 missing timesheets, 1 address change\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Send reminders to the 2 missing timesheets and approve the address change"},{"type":"ai","text":"Reminders sent to Jake M. and Lisa T. for timesheet submission. Address change for Marcus W. approved and updated in tax records.","action":"✓ 2 reminders sent · 1 address change approved · Payroll on track"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #F45D4820; border: 1px solid #F45D4840;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#F45D48;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #F45D48, #F45D4899)"><span class="font-bold text-[10px]" style="color: #fff">GU</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,603 +0,0 @@
<!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>Gusto Connect — AI-Power Your Payroll in 2 Clicks</title>
<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&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: {
brand: {
50: '#fef2f2',
100: '#fee2e2',
200: '#fecaca',
300: '#fca5a5',
400: '#F45D48',
500: '#F45D48',
600: '#dc2626',
700: '#b91c1c',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #F45D48 0%, #ff8a65 50%, #ffab91 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(244, 93, 72, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(244, 93, 72, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(-4px);
border-color: rgba(244, 93, 72, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(244, 93, 72, 0.4); }
50% { box-shadow: 0 0 40px rgba(244, 93, 72, 0.6); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(244, 93, 72, 0.4), 0 0 40px 0 rgba(244, 93, 72, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(244, 93, 72, 0.6), 0 0 60px 10px rgba(244, 93, 72, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.05);
}
.video-glow {
box-shadow: 0 0 80px rgba(244, 93, 72, 0.2), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.nav-blur {
backdrop-filter: blur(20px) saturate(180%);
}
.gradient-border {
position: relative;
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(244, 93, 72, 0.5), transparent, rgba(244, 93, 72, 0.3));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-orange-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-red-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/70 nav-blur">
<div class="max-w-6xl 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-brand-500 to-orange-400 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="wallet" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl tracking-tight">Gusto Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-lg font-medium transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-4xl mx-auto px-6 py-20">
<div class="text-center">
<div class="relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">Gusto</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed">
The complete Gusto MCP server. Payroll, benefits, and HR — AI-automated. <strong class="text-white">72 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg text-center transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
Join the Waitlist
</a>
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg text-center transition-all flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center gap-4 justify-center">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
</div>
<div>
<p class="text-zinc-400 text-sm">
Trusted by <strong class="text-white">200+</strong> HR teams
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your payroll workflow</p>
</div>
<div class="gradient-border">
<div class="bg-zinc-900 rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/gusto.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="banknote" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Payroll</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Employees</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="heart-pulse" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Benefits</span>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up Gusto + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<p class="text-zinc-400 text-lg max-w-2xl mx-auto">Stop wrestling with APIs. Start automating.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="flex items-center gap-4 mb-6">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
</div>
</div>
<p class="text-zinc-500 mb-2 line-through">Payroll deadline stress</p>
<p class="text-white font-semibold text-lg">AI reminds and preps everything</p>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="flex items-center gap-4 mb-6">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
</div>
</div>
<p class="text-zinc-500 mb-2 line-through">Manual onboarding tasks</p>
<p class="text-white font-semibold text-lg">Automated new hire workflows</p>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="flex items-center gap-4 mb-6">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
</div>
</div>
<p class="text-zinc-500 mb-2 line-through">Scattered employee requests</p>
<p class="text-white font-semibold text-lg">AI handles common HR queries</p>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<span class="inline-block px-4 py-1.5 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-4">Features</span>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-zinc-400 text-lg">Full Gusto API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-orange-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="banknote" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="font-bold text-xl mb-3">Payroll Management</h3>
<p class="text-zinc-400 leading-relaxed">Run payroll, check statuses, manage pay schedules.</p>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="font-bold text-xl mb-3">Employee Data</h3>
<p class="text-zinc-400 leading-relaxed">Access profiles, compensation, and employment details.</p>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="heart-pulse" class="w-7 h-7 text-green-400"></i>
</div>
<h3 class="font-bold text-xl mb-3">Benefits Admin</h3>
<p class="text-zinc-400 leading-relaxed">Manage enrollments, deductions, and plan information.</p>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="shield-check" class="w-7 h-7 text-blue-400"></i>
</div>
<h3 class="font-bold text-xl mb-3">Compliance</h3>
<p class="text-zinc-400 leading-relaxed">Track tax filings, W-2s, and regulatory requirements.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 60 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Time Tracking</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">PTO Management</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Tax Forms</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Direct Deposit</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Contractors</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Reports</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 gradient-border">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<button
type="submit"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 gradient-border">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/gusto-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ Gusto MCP Server running</span>
<span class="text-green-400">✓ 72 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Gusto account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Gusto API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Gusto settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Gusto?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join hundreds of HR teams already automating with Gusto Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
Join the Waitlist
</a>
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-500 to-orange-400 flex items-center justify-center">
<i data-lucide="wallet" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Gusto Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Gusto Connect. Not affiliated with Gusto.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-orange-500 rounded-full font-semibold transition-all transform hover:scale-110 shadow-lg"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
helpscout.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Help Scout Connect — AI-Power Your Support in 2 Clicks</title>
<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&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: {
brand: {
500: '#1292EE',
600: '#1292EEdd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #1292EE 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #1292EE25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #1292EE20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1292EE">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Help Scout Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #1292EE; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #1292EE"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Help Scout</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Help Scout MCP server. Conversations, docs, and beacons. <strong class="text-white">54 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #1292EE; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/helpscout.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #1292EE; color: #fff">
54 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Help Scout data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #1292EE, #1292EE99)">
<span class="font-bold text-xs" style="color: #fff">HS</span>
</div>
<div>
<div class="font-semibold text-sm">Help Scout Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 54 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Help Scout Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1292EE">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Help Scout + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Repetitive support queries</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1292EE30">
<i data-lucide="check" class="w-4 h-4" style="color: #1292EE"></i>
</div>
<p class="text-white font-medium">AI drafts from your docs</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">No customer context</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1292EE30">
<i data-lucide="check" class="w-4 h-4" style="color: #1292EE"></i>
</div>
<p class="text-white font-medium">Full history at a glance</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual ticket routing</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1292EE30">
<i data-lucide="check" class="w-4 h-4" style="color: #1292EE"></i>
</div>
<p class="text-white font-medium">AI assigns intelligently</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Help Scout API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1292EE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #1292EE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Conversation Management</h3>
<p class="text-zinc-400 text-sm">Handle emails, chats, and messages unified.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1292EE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #1292EE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Docs</h3>
<p class="text-zinc-400 text-sm">Search and surface knowledge base articles.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1292EE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #1292EE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Customer Profiles</h3>
<p class="text-zinc-400 text-sm">Access history, properties, and context.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1292EE20">
<i data-lucide="layers" class="w-5 h-5" style="color: #1292EE"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Workflows</h3>
<p class="text-zinc-400 text-sm">Automate tagging, assignment, and responses.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #1292EE; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Help Scout account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Help Scout API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Help Scout settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Help Scout?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Help Scout Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #1292EE; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Help Scout Connect. Not affiliated with Help Scout.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"What's the conversation queue looking like? Any unhappy customers?"},{"type":"ai","text":"Here's your support overview:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#2041\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eMigration data loss concern\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eUpset\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e3 replies\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#2038\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eCan't export reports\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eWaiting\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e4h ago\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#2035\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eFeature question: webhooks\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eEasy\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e1h ago\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#2033\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eBilling cycle change request\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eSimple\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e30m ago\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e18 active · 1 unhappy customer · Avg response: 52min\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Draft a recovery response for the migration issue and auto-reply to the easy ones"},{"type":"ai","text":"Drafted empathetic response for #2041 with data recovery steps and a direct meeting link with engineering. Auto-replied to #2035 (docs link) and #2033 (billing portal link).","action":"✓ Recovery response drafted · 2 auto-replies sent · Meeting link included"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #1292EE20; border: 1px solid #1292EE40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#1292EE;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #1292EE, #1292EE99)"><span class="font-bold text-[10px]" style="color: #fff">HS</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,637 +0,0 @@
<!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>Help Scout Connect — AI-Power Your Support in 2 Clicks</title>
<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&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: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#1292EE',
600: '#0f7cd6',
700: '#0c66be',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #1292EE 0%, #60a5fa 50%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(18, 146, 238, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(18, 146, 238, 0.2);
transform: translateY(-4px);
border-color: rgba(18, 146, 238, 0.4);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-pulse-glow {
animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 20px rgba(18, 146, 238, 0.3); }
50% { box-shadow: 0 0 40px rgba(18, 146, 238, 0.5); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(18, 146, 238, 0.4), 0 0 40px 0 rgba(18, 146, 238, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(18, 146, 238, 0.6), 0 0 60px 10px rgba(18, 146, 238, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.video-glow {
box-shadow: 0 0 80px rgba(18, 146, 238, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
}
.gradient-border {
background: linear-gradient(135deg, rgba(18, 146, 238, 0.5), rgba(167, 139, 250, 0.2));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
.typing-effect {
overflow: hidden;
white-space: nowrap;
animation: typing 2s steps(30, end);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center">
<i data-lucide="life-buoy" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Help Scout Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition transform hover:scale-105">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
<!-- Floating background elements -->
<div class="absolute top-40 left-10 w-72 h-72 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="text-center relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">Help Scout</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
The complete Help Scout MCP server. <strong class="text-white">54 tools</strong> for conversations, docs, and workflows.
No setup. No OAuth headaches. Just connect and support.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center gap-4 justify-center">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold">+50</div>
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">200+</strong> support teams
</p>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your support workflow</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/helpscout.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="message-circle" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Conversations</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Docs</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="git-merge" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Workflows</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up Help Scout + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Pain Point 1 -->
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Repetitive support queries</h3>
<p class="text-zinc-500 mb-6">Same questions, every day. Copy-paste answers get stale fast.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<p class="text-white font-medium">AI drafts from your docs</p>
</div>
</div>
</div>
</div>
<!-- Pain Point 2 -->
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<h3 class="text-lg font-semibold text-zinc-300 mb-3">No customer context</h3>
<p class="text-zinc-500 mb-6">Who is this person? What happened before? Time wasted searching.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<p class="text-white font-medium">Full history at a glance</p>
</div>
</div>
</div>
</div>
<!-- Pain Point 3 -->
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Manual ticket routing</h3>
<p class="text-zinc-500 mb-6">Tickets land in the wrong queue. Customers wait. CSAT drops.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<p class="text-white font-medium">AI assigns intelligently</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Help Scout API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-blue-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="message-circle" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Conversation Management</h3>
<p class="text-zinc-400">Handle emails, chats, and messages — all unified in one place.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="book-open" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Docs</h3>
<p class="text-zinc-400">Search and surface knowledge base articles automatically.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-yellow-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="user-circle" class="w-7 h-7 text-orange-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Customer Profiles</h3>
<p class="text-zinc-400">Access history, properties, and context for every customer.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="git-merge" class="w-7 h-7 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Workflows</h3>
<p class="text-zinc-400">Automate tagging, assignment, and responses effortlessly.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ 50 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Mailboxes</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tags</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Saved Replies</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Teams</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Users</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Reports</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Beacons</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/10 to-purple-500/10 rounded-3xl blur-xl"></div>
<div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="Your phone number"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message (hidden by default) -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const submitBtn = document.getElementById('submit-btn');
const successMsg = document.getElementById('success-message');
submitBtn.disabled = true;
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
setTimeout(() => {
form.classList.add('hidden');
successMsg.classList.remove('hidden');
}, 1000);
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/helpscout-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ Help Scout MCP Server running</span>
<span class="text-green-400">✓ 54 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Help Scout account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Help Scout API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Help Scout settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Help Scout?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 200+ support teams already automating with Help Scout Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center">
<i data-lucide="life-buoy" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Help Scout Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Help Scout Connect. Not affiliated with Help Scout.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-purple-500 rounded-full font-semibold transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
housecallpro.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Housecall Pro Connect — AI-Power Your Home Services in 2 Clicks</title>
<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&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: {
brand: {
500: '#FF5722',
600: '#FF5722dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #FF5722 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FF572225, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #FF572220; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF5722">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Housecall Pro Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FF5722; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #FF5722"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Housecall Pro</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Housecall Pro MCP server. Jobs, dispatch, and payments. <strong class="text-white">72 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FF5722; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/housecallpro.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FF5722; color: #fff">
72 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Housecall Pro data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #FF5722, #FF572299)">
<span class="font-bold text-xs" style="color: #fff">HC</span>
</div>
<div>
<div class="font-semibold text-sm">Housecall Pro Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 72 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Housecall Pro Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF5722">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Housecall Pro + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Dispatch chaos</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF572230">
<i data-lucide="check" class="w-4 h-4" style="color: #FF5722"></i>
</div>
<p class="text-white font-medium">AI optimizes routes</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Slow estimate turnaround</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF572230">
<i data-lucide="check" class="w-4 h-4" style="color: #FF5722"></i>
</div>
<p class="text-white font-medium">Instant AI-generated quotes</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">No online reviews</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF572230">
<i data-lucide="check" class="w-4 h-4" style="color: #FF5722"></i>
</div>
<p class="text-white font-medium">Automated review requests</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Housecall Pro API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF572220">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF5722"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Job Management</h3>
<p class="text-zinc-400 text-sm">Schedule, dispatch, track jobs end-to-end.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF572220">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF5722"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Estimates & Invoicing</h3>
<p class="text-zinc-400 text-sm">Generate quotes, convert, and collect payment.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF572220">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF5722"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Customer Portal</h3>
<p class="text-zinc-400 text-sm">Manage profiles, property info, and history.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF572220">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF5722"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Marketing</h3>
<p class="text-zinc-400 text-sm">Send postcards, emails, and review requests.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FF5722; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Housecall Pro account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Housecall Pro API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Housecall Pro settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Housecall Pro?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Housecall Pro Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FF5722; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Housecall Pro Connect. Not affiliated with Housecall Pro.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"How many estimates are pending? What's our conversion rate this month?"},{"type":"ai","text":"Here's your estimate dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eE-442\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eWilson - HVAC replacement ($6,200)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003e12 days\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eStale\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eE-451\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eRoberts - Plumbing fix ($890)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003e3 days\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eWarm\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eE-455\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eChen - Full service ($2,400)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003e1 day\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eHot\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e$9,490 pending · 58% conversion rate (↑ from 52%)\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Follow up with Wilson, and convert Chen's estimate to a job for next week"},{"type":"ai","text":"Sent Wilson a follow-up with financing options for the $6,200 HVAC job. Converted Chen's estimate to a scheduled job — Tuesday 9am. Confirmation text sent to the customer.","action":"✓ Follow-up sent · Job created (Tue 9am) · Customer confirmed"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #FF572220; border: 1px solid #FF572240;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#FF5722;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #FF5722, #FF572299)"><span class="font-bold text-[10px]" style="color: #fff">HC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,640 +0,0 @@
<!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>Housecall Pro Connect — AI-Power Your Home Services in 2 Clicks</title>
<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&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: {
brand: {
50: '#fff7ed',
100: '#ffedd5',
200: '#fed7aa',
300: '#fdba74',
400: '#fb923c',
500: '#FF5722',
600: '#ea580c',
700: '#c2410c',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #FF5722 0%, #ff9800 50%, #ffeb3b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 87, 34, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 60px rgba(255, 87, 34, 0.2);
transform: translateY(-4px);
border-color: rgba(255, 87, 34, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(255, 87, 34, 0.3); }
50% { box-shadow: 0 0 40px rgba(255, 87, 34, 0.5); }
}
.video-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.animated-gradient {
background: linear-gradient(-45deg, #FF5722, #ff9800, #FF5722, #c2410c);
background-size: 400% 400%;
animation: gradient-shift 8s ease infinite;
}
.glow-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.4;
pointer-events: none;
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 87, 34, 0.4), 0 0 40px 0 rgba(255, 87, 34, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(255, 87, 34, 0.6), 0 0 60px 10px rgba(255, 87, 34, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Orbs -->
<div class="glow-orb w-96 h-96 bg-orange-500 top-20 -left-48 fixed animate-float-slow"></div>
<div class="glow-orb w-72 h-72 bg-amber-500 top-1/2 -right-36 fixed animate-float-delayed"></div>
<div class="glow-orb w-64 h-64 bg-orange-600 bottom-20 left-1/4 fixed animate-float"></div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/20">
<i data-lucide="home" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Housecall Pro Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/20 hover:shadow-brand-500/40">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="max-w-4xl mx-auto px-6 py-20">
<div class="flex flex-col items-center text-center">
<div class="relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">Housecall Pro</span> to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed max-w-3xl mx-auto">
The complete Housecall Pro MCP server. <strong class="text-white">72 tools</strong> for jobs, dispatch, and payments.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-xl shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">300+</strong> home service pros
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your field service operations</p>
</div>
<div class="bg-gradient-to-r from-brand-500/50 to-amber-500/20 p-[1px] rounded-2xl">
<div class="bg-zinc-900 rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/housecallpro.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="calendar-check" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Jobs</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="truck" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Dispatch</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="credit-card" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Payments</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div>
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">The Problem</span>
<h2 class="text-3xl md:text-5xl font-bold mb-8 leading-tight">
Setting up Housecall Pro + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Dispatch chaos every morning</p>
<p class="text-zinc-500 mt-1">Phone calls, texts, schedule changes — it never stops.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Slow estimate turnaround</p>
<p class="text-zinc-500 mt-1">By the time you quote, they've called your competitor.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">No online reviews</p>
<p class="text-zinc-500 mt-1">Happy customers forget. You need to ask at the right time.</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-xl relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl"></div>
<div class="relative">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/30">
<i data-lucide="check" class="w-6 h-6 text-white"></i>
</div>
<h3 class="text-2xl font-bold">With Housecall Pro Connect</h3>
</div>
<div class="space-y-4 text-lg">
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>AI optimizes routes automatically</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>Instant AI-generated quotes</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>Automated review requests</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>Works with Claude, GPT, any MCP client</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>Full API access — 72 tools ready</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">Features</span>
<h2 class="text-3xl md:text-5xl font-bold mb-6">Everything you need</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Housecall Pro API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5 border border-brand-500/20">
<i data-lucide="calendar-check" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Job Management</h3>
<p class="text-zinc-400 leading-relaxed">Schedule, dispatch, track jobs end-to-end. Full control over your operations.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center mb-5 border border-amber-500/20">
<i data-lucide="file-text" class="w-7 h-7 text-amber-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Estimates & Invoicing</h3>
<p class="text-zinc-400 leading-relaxed">Generate quotes, convert to jobs, and collect payment automatically.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5 border border-green-500/20">
<i data-lucide="users" class="w-7 h-7 text-green-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Customer Portal</h3>
<p class="text-zinc-400 leading-relaxed">Manage profiles, property info, service history, and preferences.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5 border border-purple-500/20">
<i data-lucide="megaphone" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Marketing</h3>
<p class="text-zinc-400 leading-relaxed">Send postcards, emails, and review requests. Grow your reputation.</p>
</div>
</div>
<div class="mt-16 text-center">
<p class="text-zinc-400 mb-6">+ 60 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Payments</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Scheduling</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Dispatch</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Price Book</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Reporting</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Notifications</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Reviews</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">GPS Tracking</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-2xl mx-auto px-6 relative">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-semibold mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-6">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-2xl">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="+1 (555) 000-0000"
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email <span class="text-zinc-500">(optional)</span></label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-lucide="check" class="w-10 h-10 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<div id="error-message" class="hidden mt-4 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-center">
Something went wrong. Please try again.
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const submitBtn = document.getElementById('submit-btn');
const successMsg = document.getElementById('success-message');
const errorMsg = document.getElementById('error-message');
submitBtn.disabled = true;
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
// Simulate submission
await new Promise(r => setTimeout(r, 1000));
form.classList.add('hidden');
successMsg.classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-xl">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 text-lg mb-8 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold text-lg group">
View on GitHub
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-inner">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/housecallpro-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ Housecall Pro MCP Server running</span>
<span class="text-green-400">✓ 72 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">FAQ</span>
<h2 class="text-3xl md:text-4xl font-bold">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Housecall Pro account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Housecall Pro API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Housecall Pro settings.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Housecall Pro?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 300+ home service pros already automating with Housecall Pro Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center">
<i data-lucide="home" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Housecall Pro Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Housecall Pro Connect. Not affiliated with Housecall Pro.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

View File

@ -1,636 +1,155 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<html lang="en">
<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.">
<title>MCP Engine — AI-Powered Integrations</title>
<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>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<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;
}
body { font-family: 'Inter', system-ui, sans-serif; }
.card-glow:hover { box-shadow: 0 0 30px rgba(139,92,246,0.15); transform: translateY(-2px); }
</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>
<body class="bg-zinc-950 text-zinc-100 antialiased">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-6">
<span class="w-2 h-2 rounded-full bg-violet-500 animate-pulse"></span>
30 Platforms · Open Source
</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 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-4">
<span style="background:linear-gradient(135deg,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">MCP Engine</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>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Connect any SaaS platform to AI in 2 clicks. Full API access through the Model Context Protocol.</p>
</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 class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
<a href="calendly.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#006BFF"><span class="font-bold text-sm text-white">C</span></div>
<div><div class="font-semibold">Calendly</div><div class="text-xs text-zinc-500">47 tools</div></div>
</a>
<a href="zendesk.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#03363D"><span class="font-bold text-sm text-white">Z</span></div>
<div><div class="font-semibold">Zendesk</div><div class="text-xs text-zinc-500">156 tools</div></div>
</a>
<a href="trello.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0079BF"><span class="font-bold text-sm text-white">T</span></div>
<div><div class="font-semibold">Trello</div><div class="text-xs text-zinc-500">89 tools</div></div>
</a>
<a href="gusto.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#F45D48"><span class="font-bold text-sm text-white">G</span></div>
<div><div class="font-semibold">Gusto</div><div class="text-xs text-zinc-500">72 tools</div></div>
</a>
<a href="mailchimp.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FFE01B"><span class="font-bold text-sm text-black">M</span></div>
<div><div class="font-semibold">Mailchimp</div><div class="text-xs text-zinc-500">94 tools</div></div>
</a>
<a href="clickup.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#7B68EE"><span class="font-bold text-sm text-white">C</span></div>
<div><div class="font-semibold">ClickUp</div><div class="text-xs text-zinc-500">134 tools</div></div>
</a>
<a href="acuity.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#315B7D"><span class="font-bold text-sm text-white">A</span></div>
<div><div class="font-semibold">Acuity Scheduling</div><div class="text-xs text-zinc-500">38 tools</div></div>
</a>
<a href="squarespace.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#000000;border:1px solid #333"><span class="font-bold text-sm text-white">S</span></div>
<div><div class="font-semibold">Squarespace</div><div class="text-xs text-zinc-500">67 tools</div></div>
</a>
<a href="brevo.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0B996E"><span class="font-bold text-sm text-white">B</span></div>
<div><div class="font-semibold">Brevo</div><div class="text-xs text-zinc-500">82 tools</div></div>
</a>
<a href="wrike.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#08CF65"><span class="font-bold text-sm text-white">W</span></div>
<div><div class="font-semibold">Wrike</div><div class="text-xs text-zinc-500">98 tools</div></div>
</a>
<a href="bamboohr.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#73C41D"><span class="font-bold text-sm text-white">B</span></div>
<div><div class="font-semibold">BambooHR</div><div class="text-xs text-zinc-500">56 tools</div></div>
</a>
<a href="freshbooks.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0075DD"><span class="font-bold text-sm text-white">F</span></div>
<div><div class="font-semibold">FreshBooks</div><div class="text-xs text-zinc-500">64 tools</div></div>
</a>
<a href="clover.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#43B02A"><span class="font-bold text-sm text-white">C</span></div>
<div><div class="font-semibold">Clover</div><div class="text-xs text-zinc-500">78 tools</div></div>
</a>
<a href="servicetitan.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FF6B00"><span class="font-bold text-sm text-white">S</span></div>
<div><div class="font-semibold">ServiceTitan</div><div class="text-xs text-zinc-500">124 tools</div></div>
</a>
<a href="rippling.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FEC400"><span class="font-bold text-sm text-black">R</span></div>
<div><div class="font-semibold">Rippling</div><div class="text-xs text-zinc-500">89 tools</div></div>
</a>
<a href="freshdesk.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#25C16F"><span class="font-bold text-sm text-white">F</span></div>
<div><div class="font-semibold">Freshdesk</div><div class="text-xs text-zinc-500">92 tools</div></div>
</a>
<a href="keap.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2D9F2D"><span class="font-bold text-sm text-white">K</span></div>
<div><div class="font-semibold">Keap</div><div class="text-xs text-zinc-500">76 tools</div></div>
</a>
<a href="constantcontact.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1856A8"><span class="font-bold text-sm text-white">C</span></div>
<div><div class="font-semibold">Constant Contact</div><div class="text-xs text-zinc-500">58 tools</div></div>
</a>
<a href="lightspeed.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#E4002B"><span class="font-bold text-sm text-white">L</span></div>
<div><div class="font-semibold">Lightspeed</div><div class="text-xs text-zinc-500">86 tools</div></div>
</a>
<a href="bigcommerce.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#34313F"><span class="font-bold text-sm text-white">B</span></div>
<div><div class="font-semibold">BigCommerce</div><div class="text-xs text-zinc-500">112 tools</div></div>
</a>
<a href="toast.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FF4C00"><span class="font-bold text-sm text-white">T</span></div>
<div><div class="font-semibold">Toast</div><div class="text-xs text-zinc-500">94 tools</div></div>
</a>
<a href="jobber.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#7AC143"><span class="font-bold text-sm text-white">J</span></div>
<div><div class="font-semibold">Jobber</div><div class="text-xs text-zinc-500">68 tools</div></div>
</a>
<a href="wave.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#165DFF"><span class="font-bold text-sm text-white">W</span></div>
<div><div class="font-semibold">Wave</div><div class="text-xs text-zinc-500">42 tools</div></div>
</a>
<a href="closecrm.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#3D5AFE"><span class="font-bold text-sm text-white">C</span></div>
<div><div class="font-semibold">Close CRM</div><div class="text-xs text-zinc-500">84 tools</div></div>
</a>
<a href="pipedrive.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#017737"><span class="font-bold text-sm text-white">P</span></div>
<div><div class="font-semibold">Pipedrive</div><div class="text-xs text-zinc-500">76 tools</div></div>
</a>
<a href="helpscout.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1292EE"><span class="font-bold text-sm text-white">H</span></div>
<div><div class="font-semibold">Help Scout</div><div class="text-xs text-zinc-500">54 tools</div></div>
</a>
<a href="basecamp.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1D2D35"><span class="font-bold text-sm text-white">B</span></div>
<div><div class="font-semibold">Basecamp</div><div class="text-xs text-zinc-500">62 tools</div></div>
</a>
<a href="housecallpro.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FF5722"><span class="font-bold text-sm text-white">H</span></div>
<div><div class="font-semibold">Housecall Pro</div><div class="text-xs text-zinc-500">72 tools</div></div>
</a>
<a href="fieldedge.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0066B2"><span class="font-bold text-sm text-white">F</span></div>
<div><div class="font-semibold">FieldEdge</div><div class="text-xs text-zinc-500">68 tools</div></div>
</a>
<a href="touchbistro.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#F26522"><span class="font-bold text-sm text-white">T</span></div>
<div><div class="font-semibold">TouchBistro</div><div class="text-xs text-zinc-500">58 tools</div></div>
</a>
</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>
<footer class="mt-20 text-center text-zinc-600 text-sm">
© 2026 MCP Engine. Open source AI integrations for every SaaS platform.
</footer>
</div>
</body>
</html>

408
jobber.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Jobber Connect — AI-Power Your Service Business in 2 Clicks</title>
<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&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: {
brand: {
500: '#7AC143',
600: '#7AC143dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #7AC143 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #7AC14325, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #7AC14320; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #7AC143">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Jobber Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #7AC143; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #7AC143"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Jobber</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Jobber MCP server. Quotes, jobs, and invoicing. <strong class="text-white">68 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #7AC143; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/jobber.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #7AC143; color: #fff">
68 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Jobber data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #7AC143, #7AC14399)">
<span class="font-bold text-xs" style="color: #fff">JB</span>
</div>
<div>
<div class="font-semibold text-sm">Jobber Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 68 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Jobber Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #7AC143">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Jobber + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Quote follow-up gaps</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7AC14330">
<i data-lucide="check" class="w-4 h-4" style="color: #7AC143"></i>
</div>
<p class="text-white font-medium">AI chases every lead</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Scheduling conflicts</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7AC14330">
<i data-lucide="check" class="w-4 h-4" style="color: #7AC143"></i>
</div>
<p class="text-white font-medium">AI optimizes crew allocation</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Late invoice payments</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7AC14330">
<i data-lucide="check" class="w-4 h-4" style="color: #7AC143"></i>
</div>
<p class="text-white font-medium">Automated payment reminders</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Jobber API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7AC14320">
<i data-lucide="layers" class="w-5 h-5" style="color: #7AC143"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Quote Management</h3>
<p class="text-zinc-400 text-sm">Create, send, track quotes automatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7AC14320">
<i data-lucide="layers" class="w-5 h-5" style="color: #7AC143"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Job Scheduling</h3>
<p class="text-zinc-400 text-sm">Assign work, optimize routes, track progress.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7AC14320">
<i data-lucide="layers" class="w-5 h-5" style="color: #7AC143"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Invoicing</h3>
<p class="text-zinc-400 text-sm">Generate invoices, collect payments, send reminders.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7AC14320">
<i data-lucide="layers" class="w-5 h-5" style="color: #7AC143"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Client Management</h3>
<p class="text-zinc-400 text-sm">Track properties, service history, and preferences.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #7AC143; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Jobber account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Jobber API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Jobber settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Jobber?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Jobber Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #7AC143; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Jobber Connect. Not affiliated with Jobber.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"What quotes are pending? Any that are about to go cold?"},{"type":"ai","text":"Here's your quote pipeline:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eQ-284\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eJohnson - Full reno ($8,400)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003e14 days\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eGoing cold\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eQ-291\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003ePark Residence - Repair ($1,200)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003e7 days\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eFollow up\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eQ-298\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eMaple St - Maintenance ($450)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003e2 days\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eFresh\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eQ-301\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eOakwood - Install ($3,200)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003e1 day\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eFresh\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e$13,250 in pending quotes · 1 going cold · 67% avg close rate\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Call Johnson about the reno quote and send a reminder to Park Residence"},{"type":"ai","text":"Logged callback for Johnson at 2pm with quote details pre-loaded. Sent Park Residence an email reminder with an updated availability calendar for scheduling.","action":"✓ Callback scheduled · Email reminder sent · Calendar link included"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #7AC14320; border: 1px solid #7AC14340;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#7AC143;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #7AC143, #7AC14399)"><span class="font-bold text-[10px]" style="color: #fff">JB</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,762 +0,0 @@
<!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>Jobber Connect — AI-Power Your Service Business in 2 Clicks</title>
<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&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: {
brand: {
50: '#f2fde8',
100: '#e2faca',
200: '#c6f49a',
300: '#a1ea5f',
400: '#7ac143',
500: '#5da52a',
600: '#47831d',
700: '#38641b',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #7AC143 0%, #47831d 50%, #2d5a10 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-hero {
background: linear-gradient(135deg, #7AC143 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(122, 193, 67, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(122, 193, 67, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transform: translateY(-4px);
border-color: rgba(122, 193, 67, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(122, 193, 67, 0.4); }
50% { box-shadow: 0 0 40px rgba(122, 193, 67, 0.6); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.shimmer-border {
background: linear-gradient(90deg, transparent, rgba(122, 193, 67, 0.3), transparent);
background-size: 200% 100%;
animation: shimmer 3s infinite;
}
.video-glow {
box-shadow: 0 0 80px rgba(122, 193, 67, 0.2), 0 0 120px rgba(122, 193, 67, 0.1);
}
.btn-primary {
background: linear-gradient(135deg, #7AC143 0%, #5da52a 100%);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: scale(1.05);
box-shadow: 0 0 30px rgba(122, 193, 67, 0.5);
}
.feature-icon {
background: linear-gradient(135deg, rgba(122, 193, 67, 0.2) 0%, rgba(122, 193, 67, 0.05) 100%);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(122, 193, 67, 0.4), 0 0 40px 0 rgba(122, 193, 67, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(122, 193, 67, 0.6), 0 0 60px 10px rgba(122, 193, 67, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.1);
}
.stat-card {
background: linear-gradient(135deg, rgba(122, 193, 67, 0.1) 0%, transparent 100%);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-1/4 left-10 w-72 h-72 bg-brand-400/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute bottom-1/4 left-1/3 w-64 h-64 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-brand-400 to-brand-600 flex items-center justify-center shadow-lg shadow-brand-400/20">
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Jobber Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
<a href="#pricing" class="btn-primary px-5 py-2.5 rounded-xl font-semibold text-white">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="max-w-4xl mx-auto px-6 py-20 text-center">
<div class="flex flex-col items-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text-hero">Jobber</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
The complete Jobber MCP server. <strong class="text-white">68 tools</strong> for quotes, jobs, and invoicing.
No setup. No API hassles. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="btn-primary w-full sm:w-auto px-8 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
Join the Waitlist
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-6">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=11" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
<img src="https://i.pravatar.cc/100?img=12" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
<img src="https://i.pravatar.cc/100?img=13" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
<img src="https://i.pravatar.cc/100?img=14" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
<img src="https://i.pravatar.cc/100?img=15" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
</div>
<div class="text-center sm:text-left">
<p class="text-zinc-300 font-medium">Trusted by <strong class="text-white">200+</strong> service businesses</p>
<div class="flex items-center justify-center sm:justify-start gap-1 mt-1">
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
<span class="text-zinc-500 text-sm ml-2">5.0 average</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your service business workflow</p>
</div>
<div class="rounded-2xl p-[1px] bg-gradient-to-br from-brand-400/50 to-purple-500/20">
<div class="bg-zinc-900 rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/jobber.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="file-text" class="w-4 h-4 text-brand-400"></i>
<span class="text-sm text-zinc-300">Quotes</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="calendar-check" class="w-4 h-4 text-brand-400"></i>
<span class="text-sm text-zinc-300">Jobs</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="receipt" class="w-4 h-4 text-brand-400"></i>
<span class="text-sm text-zinc-300">Invoices</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Setting up Jobber + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">
Stop wrestling with APIs and authentication. Start automating your service business.
</p>
</div>
<div class="grid md:grid-cols-2 gap-8 items-stretch">
<!-- Problems -->
<div class="space-y-4">
<h3 class="text-lg font-semibold text-red-400 mb-6 flex items-center gap-2">
<i data-lucide="x-circle" class="w-5 h-5"></i>
The Old Way
</h3>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Quote follow-up gaps</p>
<p class="text-zinc-500">Leads go cold because nobody followed up in time. Money left on the table.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Scheduling conflicts</p>
<p class="text-zinc-500">Double-bookings, missed appointments, frustrated customers and crews.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Late invoice payments</p>
<p class="text-zinc-500">Chasing payments manually eats into your profit margins and sanity.</p>
</div>
</div>
</div>
</div>
<!-- Solutions -->
<div class="space-y-4">
<h3 class="text-lg font-semibold text-brand-400 mb-6 flex items-center gap-2">
<i data-lucide="check-circle" class="w-5 h-5"></i>
With Jobber Connect
</h3>
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">AI chases every lead</p>
<p class="text-zinc-400">Automatic follow-ups at the perfect time. Never miss another opportunity.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">AI optimizes crew allocation</p>
<p class="text-zinc-400">Smart scheduling that maximizes efficiency and minimizes drive time.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Automated payment reminders</p>
<p class="text-zinc-400">Polite, persistent follow-ups that get you paid faster without the awkwardness.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/10 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Jobber API access through one simple connection. 68 tools at your fingertips.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="file-text" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Quote Management</h3>
<p class="text-zinc-400 leading-relaxed">Create, send, track quotes automatically. Convert more leads to paying customers.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="calendar-check" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Job Scheduling</h3>
<p class="text-zinc-400 leading-relaxed">Assign work, optimize routes, track progress. Keep your crews productive.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="receipt" class="w-7 h-7 text-pink-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Invoicing</h3>
<p class="text-zinc-400 leading-relaxed">Generate invoices, collect payments, send reminders. Get paid faster.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="users" class="w-7 h-7 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Client Management</h3>
<p class="text-zinc-400 leading-relaxed">Track properties, service history, and preferences. Know your customers.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 60 more tools including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Team Management</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Route Optimization</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Payment Processing</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Expense Tracking</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Reporting</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Time Tracking</span>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-400/10 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="terminal" class="w-4 h-4 text-brand-400"></i>
How It Works
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Just talk to Claude
</h2>
<p class="text-zinc-400 mb-8 leading-relaxed">
No complex interfaces. Just describe what you need in plain English and Claude handles
the rest through your Jobber account.
</p>
<div class="space-y-4">
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<span class="text-zinc-300">Natural language commands</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<span class="text-zinc-300">Real-time data sync</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<span class="text-zinc-300">Secure OAuth connection</span>
</div>
</div>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Claude + Jobber</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">You:</span> Create a quote for lawn care
at 123 Main St, $150
<span class="text-brand-400">Claude:</span> I'll create that quote now...
<span class="text-zinc-500">→ Using:</span> jobber_create_quote
<span class="text-zinc-500">→ Client:</span> 123 Main St
<span class="text-zinc-500">→ Amount:</span> $150.00
<span class="text-green-400">✓ Quote #1847 created</span>
<span class="text-green-400">✓ Email sent to client</span>
<span class="text-brand-400">Claude:</span> Done! Quote sent to the
client. Would you like me to
schedule a follow-up?</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-400/5 rounded-full blur-3xl"></div>
<form id="waitlist-form" class="space-y-6 relative z-10">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
>
</div>
<button
type="submit"
id="submit-btn"
class="btn-primary w-full py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-20 h-20 bg-brand-400/20 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-lucide="check" class="w-10 h-10 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
<div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-8 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle of managing infrastructure.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300"><code><span class="text-zinc-500">$</span> git clone github.com/jobber-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ Jobber MCP Server running</span>
<span class="text-brand-400">✓ 68 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">Frequently asked questions</h2>
<p class="text-zinc-400">Everything you need to know about Jobber Connect</p>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
Think of it as giving Claude hands to work with your business tools.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Jobber account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js — but we provide clear documentation.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Jobber API keys directly. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Jobber settings. Your customer data never touches our servers — it flows directly between Claude and Jobber.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Which AI assistants work with this?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). You can use it with Claude Desktop, Claude.ai, and any MCP-compatible client.
As MCP adoption grows, more AI assistants will support it natively.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">How is this different from Zapier?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Zapier triggers pre-defined automations. Jobber Connect lets you have a conversation with AI that can take any action in Jobber on demand.
Ask Claude to "create a quote for the Johnson's lawn care" and it just does it — no workflow setup required.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 bg-gradient-to-t from-brand-400/5 to-transparent"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Jobber?
</h2>
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
Join 200+ service businesses already automating with Jobber Connect. Be first in line for early access.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="btn-primary w-full sm:w-auto px-10 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
Join the Waitlist
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-10 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
Watch Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-400 to-brand-600 flex items-center justify-center">
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Jobber Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition-colors">Privacy</a>
<a href="#" class="hover:text-white transition-colors">Terms</a>
<a href="#" class="hover:text-white transition-colors">GitHub</a>
<a href="#" class="hover:text-white transition-colors">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Jobber Connect. Not affiliated with Jobber.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-400 to-brand-600 rounded-full font-semibold text-white transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
// Form submission
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
// Sticky CTA visibility
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
keap.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Keap Connect — AI-Power Your CRM in 2 Clicks</title>
<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&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: {
brand: {
500: '#2D9F2D',
600: '#2D9F2Ddd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #2D9F2D 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #2D9F2D25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #2D9F2D20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #2D9F2D">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Keap Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #2D9F2D; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #2D9F2D"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Keap</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Keap MCP server. Contacts, campaigns, and commerce. <strong class="text-white">76 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #2D9F2D; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/keap.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #2D9F2D; color: #fff">
76 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Keap data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #2D9F2D, #2D9F2D99)">
<span class="font-bold text-xs" style="color: #fff">KP</span>
</div>
<div>
<div class="font-semibold text-sm">Keap Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 76 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Keap Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #2D9F2D">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Keap + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Cold lead follow-up</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #2D9F2D30">
<i data-lucide="check" class="w-4 h-4" style="color: #2D9F2D"></i>
</div>
<p class="text-white font-medium">AI nurtures automatically</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual pipeline updates</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #2D9F2D30">
<i data-lucide="check" class="w-4 h-4" style="color: #2D9F2D"></i>
</div>
<p class="text-white font-medium">AI moves deals on signals</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Missed sales opportunities</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #2D9F2D30">
<i data-lucide="check" class="w-4 h-4" style="color: #2D9F2D"></i>
</div>
<p class="text-white font-medium">AI alerts on hot leads</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Keap API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2D9F2D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #2D9F2D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Contact Management</h3>
<p class="text-zinc-400 text-sm">Create, tag, segment contacts automatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2D9F2D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #2D9F2D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Sales Pipeline</h3>
<p class="text-zinc-400 text-sm">Track deals, move stages, forecast revenue.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2D9F2D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #2D9F2D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Campaign Automation</h3>
<p class="text-zinc-400 text-sm">Trigger sequences, send emails, track engagement.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2D9F2D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #2D9F2D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">E-commerce</h3>
<p class="text-zinc-400 text-sm">Manage products, orders, and subscriptions.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #2D9F2D; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Keap account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Keap API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Keap settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Keap?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Keap Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #2D9F2D; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Keap Connect. Not affiliated with Keap.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"Show me the sales pipeline. Where are my hottest leads?"},{"type":"ai","text":"Here's your pipeline snapshot:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eDeal\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eStage\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eValue\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eAcme Corp\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eProposal\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$24,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eTechVentures\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eDemo\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$18,500\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eGreenLeaf Co\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eQualified\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$31,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eSpark Digital\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eNegotiation\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$12,800\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e$86,300 pipeline · $36,800 likely to close this month\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Send a follow-up sequence to TechVentures and a contract to Spark Digital"},{"type":"ai","text":"Started 3-email nurture sequence for TechVentures (Demo follow-up). Generated and sent contract to Spark Digital for $12,800. E-signature link included.","action":"✓ Nurture sequence started · Contract sent · E-sign ready"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #2D9F2D20; border: 1px solid #2D9F2D40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#2D9F2D;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #2D9F2D, #2D9F2D99)"><span class="font-bold text-[10px]" style="color: #fff">KP</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,661 +0,0 @@
<!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>Keap Connect — AI-Power Your CRM in 2 Clicks</title>
<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&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: {
brand: {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#2D9F2D',
600: '#16a34a',
700: '#15803d',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #2D9F2D 0%, #10b981 50%, #06b6d4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(45, 159, 45, 0.15), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 40px rgba(45, 159, 45, 0.15);
transform: translateY(-4px);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(45, 159, 45, 0.3); }
50% { box-shadow: 0 0 40px rgba(45, 159, 45, 0.5); }
}
.video-glow {
box-shadow: 0 0 80px rgba(45, 159, 45, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
}
.video-gradient-border {
background: linear-gradient(135deg, rgba(45, 159, 45, 0.5), rgba(6, 182, 212, 0.2));
padding: 1px;
border-radius: 1rem;
}
.video-gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(45, 159, 45, 0.4), 0 0 40px 0 rgba(45, 159, 45, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(45, 159, 45, 0.6), 0 0 60px 10px rgba(45, 159, 45, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.gradient-border {
position: relative;
background: linear-gradient(135deg, rgba(45, 159, 45, 0.1), rgba(6, 182, 212, 0.1));
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, #2D9F2D, #06b6d4);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
.stat-card {
background: linear-gradient(135deg, rgba(45, 159, 45, 0.05), rgba(6, 182, 212, 0.05));
border: 1px solid rgba(45, 159, 45, 0.2);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-emerald-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-cyan-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="target" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Keap Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20 text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Keap</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
The most comprehensive Keap MCP server. <strong class="text-white">76 tools</strong> covering
contacts, campaigns, pipeline & commerce. No setup. Just connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Stats -->
<div class="grid grid-cols-3 gap-4 max-w-xl mx-auto">
<div class="stat-card rounded-xl p-4 text-center">
<div class="text-2xl font-bold text-white">76</div>
<div class="text-sm text-zinc-400">API Tools</div>
</div>
<div class="stat-card rounded-xl p-4 text-center">
<div class="text-2xl font-bold text-white">2 min</div>
<div class="text-sm text-zinc-400">Setup Time</div>
</div>
<div class="stat-card rounded-xl p-4 text-center">
<div class="text-2xl font-bold text-white">24/7</div>
<div class="text-sm text-zinc-400">AI Automation</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch AI nurture leads, update pipelines, and automate your sales</p>
</div>
<div class="video-gradient-border">
<div class="video-gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/keap.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Contacts</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="trending-up" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Pipeline</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="mail" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Campaigns</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">
Setting up Keap + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="space-y-4">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<div>
<p class="font-medium">Cold leads going stale</p>
<p class="text-zinc-500">No time to follow up with everyone in your pipeline.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<div>
<p class="font-medium">Manual pipeline updates</p>
<p class="text-zinc-500">Dragging deals around when you should be closing them.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<div>
<p class="font-medium">Missed sales opportunities</p>
<p class="text-zinc-500">Hot leads slip through because nobody noticed the signal.</p>
</div>
</div>
</div>
</div>
<div class="bg-zinc-900 rounded-2xl border border-zinc-800 p-8 gradient-border">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold">With Keap Connect</h3>
</div>
<div class="space-y-4 text-zinc-300">
<div class="flex items-center gap-3">
<i data-lucide="mail" class="w-5 h-5 text-brand-400"></i>
<p>AI nurtures leads automatically with smart sequences</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="git-branch" class="w-5 h-5 text-brand-400"></i>
<p>AI moves deals through stages on buying signals</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="bell" class="w-5 h-5 text-brand-400"></i>
<p>Instant alerts when leads are ready to buy</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="zap" class="w-5 h-5 text-brand-400"></i>
<p>Works with Claude, GPT, any MCP client</p>
</div>
<div class="flex items-center gap-3">
<i data-lucide="store" class="w-5 h-5 text-brand-400"></i>
<p>E-commerce and subscription management included</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Keap API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
<i data-lucide="users" class="w-6 h-6 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Contact Management</h3>
<p class="text-zinc-400">Create, tag, segment contacts automatically. Full CRM control.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4">
<i data-lucide="trending-up" class="w-6 h-6 text-emerald-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Sales Pipeline</h3>
<p class="text-zinc-400">Track deals, move stages, forecast revenue with AI assistance.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-4">
<i data-lucide="mail" class="w-6 h-6 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Campaign Automation</h3>
<p class="text-zinc-400">Trigger sequences, send emails, track engagement automatically.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="feature-icon w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
<i data-lucide="shopping-cart" class="w-6 h-6 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">E-commerce</h3>
<p class="text-zinc-400">Manage products, orders, and subscriptions programmatically.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ 60 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tags</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Notes</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tasks</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Appointments</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Opportunities</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Invoices</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Payments</span>
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Affiliates</span>
</div>
</div>
</div>
</section>
<!-- Social Proof -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Trusted by small businesses everywhere</h2>
<p class="text-zinc-400">Join hundreds of entrepreneurs automating their sales with AI</p>
</div>
<div class="flex flex-col items-center gap-6">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=21" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=22" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=23" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=24" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=25" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=26" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
</div>
<div class="flex items-center gap-1">
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
<span class="ml-2 text-zinc-400">from 200+ businesses</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 gradient-border">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="Your phone number"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6">
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-zinc-900 rounded-3xl border border-zinc-800 p-8 md:p-12">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mcp/keap
<span class="text-zinc-500">$</span> cd keap && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ Keap MCP Server running</span>
<span class="text-brand-400">✓ 76 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
For the hosted version, no. Just connect your Keap account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
Yes. We use OAuth 2.0 and never store your Keap API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Keap settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Will this work with Keap Pro and Max?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
Yes! Keap Connect works with all Keap plans that have API access — Pro, Max, and Max Classic.
The same 76 tools work across all versions.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your CRM?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 200+ small businesses already automating with Keap Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center">
<i data-lucide="target" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Keap Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Keap Connect. Not affiliated with Keap.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
lightspeed.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Lightspeed Connect — AI-Power Your Retail in 2 Clicks</title>
<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&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: {
brand: {
500: '#E4002B',
600: '#E4002Bdd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #E4002B 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #E4002B25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #E4002B20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #E4002B">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Lightspeed Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #E4002B; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #E4002B"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Lightspeed</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Lightspeed MCP server. Sales, inventory, and analytics. <strong class="text-white">86 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #E4002B; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/lightspeed.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #E4002B; color: #fff">
86 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Lightspeed data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #E4002B, #E4002B99)">
<span class="font-bold text-xs" style="color: #fff">LS</span>
</div>
<div>
<div class="font-semibold text-sm">Lightspeed Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 86 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Lightspeed Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #E4002B">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Lightspeed + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Stockouts on bestsellers</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #E4002B30">
<i data-lucide="check" class="w-4 h-4" style="color: #E4002B"></i>
</div>
<p class="text-white font-medium">AI predicts and reorders</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">No cross-location visibility</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #E4002B30">
<i data-lucide="check" class="w-4 h-4" style="color: #E4002B"></i>
</div>
<p class="text-white font-medium">Unified inventory view</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Generic customer service</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #E4002B30">
<i data-lucide="check" class="w-4 h-4" style="color: #E4002B"></i>
</div>
<p class="text-white font-medium">AI personalizes every interaction</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Lightspeed API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #E4002B20">
<i data-lucide="layers" class="w-5 h-5" style="color: #E4002B"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Sales Management</h3>
<p class="text-zinc-400 text-sm">Access transactions, refunds, and sales data.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #E4002B20">
<i data-lucide="layers" class="w-5 h-5" style="color: #E4002B"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Inventory Control</h3>
<p class="text-zinc-400 text-sm">Track stock, manage vendors, automate reorders.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #E4002B20">
<i data-lucide="layers" class="w-5 h-5" style="color: #E4002B"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Customer Profiles</h3>
<p class="text-zinc-400 text-sm">Build loyalty programs, track purchase history.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #E4002B20">
<i data-lucide="layers" class="w-5 h-5" style="color: #E4002B"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Multi-Location</h3>
<p class="text-zinc-400 text-sm">Manage inventory and sales across all stores.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #E4002B; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Lightspeed account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Lightspeed API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Lightspeed settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Lightspeed?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Lightspeed Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #E4002B; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Lightspeed Connect. Not affiliated with Lightspeed.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"Compare sales across our 3 locations this week. Who's winning?"},{"type":"ai","text":"Here's your multi-location breakdown:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eDowntown\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$18,420\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+14%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eMall\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$24,100\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+6%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAirport\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$11,300\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#F87171;margin-top:1px;\"\u003e-3%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e📍 Downtown growing fastest · Airport needs attention\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Transfer slow-moving Airport inventory to Downtown where it's selling"},{"type":"ai","text":"Generated transfer order: 34 items from Airport to Downtown based on velocity analysis. Estimated revenue uplift: $2,400/week. Transfer manifest ready for printing.","action":"✓ Transfer order created · 34 items · Est. +$2,400/wk revenue"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #E4002B20; border: 1px solid #E4002B40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#E4002B;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #E4002B, #E4002B99)"><span class="font-bold text-[10px]" style="color: #fff">LS</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,647 +0,0 @@
<!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>Lightspeed Connect — AI-Power Your Retail in 2 Clicks</title>
<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: {
brand: {
50: '#fef2f2',
100: '#fee2e2',
200: '#fecaca',
300: '#fca5a5',
400: '#f87171',
500: '#E4002B',
600: '#cc0026',
700: '#b30021',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #E4002B 0%, #ff6b6b 30%, #8b5cf6 70%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(228, 0, 43, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(228, 0, 43, 0.2);
transform: translateY(-4px);
border-color: rgba(228, 0, 43, 0.4);
}
.video-glow {
box-shadow: 0 25px 80px rgba(228, 0, 43, 0.25), 0 10px 40px rgba(0, 0, 0, 0.5);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.pulse-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.shimmer {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
background-size: 200% 100%;
animation: shimmer 3s infinite;
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(228, 0, 43, 0.4);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(228, 0, 43, 0.4), 0 0 40px 0 rgba(228, 0, 43, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(228, 0, 43, 0.6), 0 0 60px 10px rgba(228, 0, 43, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.1);
}
.gradient-border {
background: linear-gradient(135deg, rgba(228, 0, 43, 0.5), rgba(139, 92, 246, 0.5));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: #18181b;
border-radius: calc(1rem - 1px);
}
.text-glow {
text-shadow: 0 0 40px rgba(228, 0, 43, 0.5);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-80 h-80 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-brand-500 to-pink-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="shopping-bag" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl tracking-tight">Lightspeed Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-lg font-semibold transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="max-w-4xl mx-auto text-center">
<div class="relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500"></span>
</span>
Open Source + Hosted Cloud
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text text-glow">Lightspeed</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
The complete Lightspeed MCP server. <strong class="text-white">86 tools</strong> for sales, inventory, and analytics.
No setup headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 flex items-center justify-center gap-2">
Join the Waitlist
<i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2 backdrop-blur-sm">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center justify-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-zinc-800 flex items-center justify-center text-xs font-semibold shadow-lg">+99</div>
</div>
<p class="text-zinc-400 text-sm">
Trusted by <strong class="text-white">500+</strong> retail businesses
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your retail operations</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/lightspeed.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="shopping-bag" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Sales</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="package" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Inventory</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Analytics</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div>
<span class="inline-block px-3 py-1 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">The Problem</span>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
Setting up Lightspeed + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4 group">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Stockouts on bestsellers</p>
<p class="text-zinc-500 mt-1">You find out something sold out when a customer complains.</p>
</div>
</div>
<div class="flex items-start gap-4 group">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">No cross-location visibility</p>
<p class="text-zinc-500 mt-1">Your stores are islands. Inventory data is scattered.</p>
</div>
</div>
<div class="flex items-start gap-4 group">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Generic customer service</p>
<p class="text-zinc-500 mt-1">Staff can't see purchase history. Every customer is a stranger.</p>
</div>
</div>
</div>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8 md:p-10">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-pink-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="check" class="w-6 h-6 text-white"></i>
</div>
<h3 class="text-2xl font-bold">With Lightspeed Connect</h3>
</div>
<div class="space-y-5">
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
<span>AI predicts demand and auto-reorders</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
<span>Unified inventory across all locations</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
<span>AI personalizes every interaction</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
<span>Works with Claude, GPT, any MCP client</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
<span>2-click OAuth — no API key headaches</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<span class="inline-block px-3 py-1 rounded-full bg-purple-500/10 text-purple-400 text-sm font-medium mb-4">Features</span>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Lightspeed API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5">
<i data-lucide="receipt" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Sales Management</h3>
<p class="text-zinc-400">Access transactions, refunds, and real-time sales data across all registers.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
<i data-lucide="package" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Inventory Control</h3>
<p class="text-zinc-400">Track stock levels, manage vendors, and automate reorders intelligently.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-pink-500/5 flex items-center justify-center mb-5">
<i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Customer Profiles</h3>
<p class="text-zinc-400">Build loyalty programs and track complete purchase history.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-orange-500/5 flex items-center justify-center mb-5">
<i data-lucide="building-2" class="w-7 h-7 text-orange-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Multi-Location</h3>
<p class="text-zinc-400">Manage inventory and sales across all stores from one AI.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 70 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Purchase Orders</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Vendors</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Categories</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Discounts</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Gift Cards</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Reports</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Employees</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Registers</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-500">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-500">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 text-lg mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="https://github.com" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold transition-colors group">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/lightspeed-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ Lightspeed MCP Server running</span>
<span class="text-green-400">✓ 86 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
<p class="text-zinc-400">Everything you need to know about Lightspeed Connect</p>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors" open>
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Lightspeed account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Lightspeed API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Lightspeed settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
Ready to AI-power your <span class="gradient-text">Lightspeed?</span>
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 500+ retail businesses already automating with Lightspeed Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-500 to-pink-500 flex items-center justify-center">
<i data-lucide="shopping-bag" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Lightspeed Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition-colors">Privacy</a>
<a href="#" class="hover:text-white transition-colors">Terms</a>
<a href="https://github.com" class="hover:text-white transition-colors">GitHub</a>
<a href="#" class="hover:text-white transition-colors">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Lightspeed Connect. Not affiliated with Lightspeed.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-brand-600 rounded-full font-semibold transition-all"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
mailchimp.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Mailchimp Connect — AI-Power Your Email Marketing in 2 Clicks</title>
<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&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: {
brand: {
500: '#FFE01B',
600: '#FFE01Bdd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #FFE01B 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FFE01B25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #FFE01B20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FFE01B">
<i data-lucide="zap" class="w-5 h-5" style="color: #000"></i>
</div>
<span class="font-bold text-xl">Mailchimp Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FFE01B; color: #000">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #FFE01B"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Mailchimp</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Mailchimp MCP server. Campaigns, audiences, and automations. <strong class="text-white">94 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FFE01B; color: #000">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/mailchimp.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FFE01B; color: #000">
94 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Mailchimp data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #FFE01B, #FFE01B99)">
<span class="font-bold text-xs" style="color: #000">MC</span>
</div>
<div>
<div class="font-semibold text-sm">Mailchimp Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 94 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Mailchimp Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FFE01B">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #000"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Mailchimp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Writer's block on emails</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FFE01B30">
<i data-lucide="check" class="w-4 h-4" style="color: #FFE01B"></i>
</div>
<p class="text-white font-medium">AI drafts high-converting copy</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Guessing send times</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FFE01B30">
<i data-lucide="check" class="w-4 h-4" style="color: #FFE01B"></i>
</div>
<p class="text-white font-medium">AI optimizes for engagement</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual list hygiene</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FFE01B30">
<i data-lucide="check" class="w-4 h-4" style="color: #FFE01B"></i>
</div>
<p class="text-white font-medium">Auto-clean and segment lists</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Mailchimp API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFE01B20">
<i data-lucide="layers" class="w-5 h-5" style="color: #FFE01B"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Campaign Management</h3>
<p class="text-zinc-400 text-sm">Create, send, schedule campaigns. Full email control.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFE01B20">
<i data-lucide="layers" class="w-5 h-5" style="color: #FFE01B"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Audience Data</h3>
<p class="text-zinc-400 text-sm">Manage subscribers, segments, and tags intelligently.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFE01B20">
<i data-lucide="layers" class="w-5 h-5" style="color: #FFE01B"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Automations</h3>
<p class="text-zinc-400 text-sm">Trigger journeys, manage workflows, optimize timing.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFE01B20">
<i data-lucide="layers" class="w-5 h-5" style="color: #FFE01B"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Analytics</h3>
<p class="text-zinc-400 text-sm">Track opens, clicks, revenue. AI-powered insights.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FFE01B; color: #000">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Mailchimp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Mailchimp API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Mailchimp settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Mailchimp?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Mailchimp Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FFE01B; color: #000">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Mailchimp Connect. Not affiliated with Mailchimp.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"How did last week's campaign perform? Compare to our averages."},{"type":"ai","text":"Here's your campaign breakdown:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eOpen Rate\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e34.2%\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+8.1%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eClick Rate\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e4.7%\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+2.3%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eRevenue\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$12,840\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+41%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e🏆 Best performing campaign this quarter\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Create a follow-up campaign for people who opened but didn't click"},{"type":"ai","text":"Created \"Re-engagement - Product Focus\" targeting 1,847 subscribers who opened without clicking. Subject line A/B test ready with send time optimized for Thursday 10am.","action":"✓ Campaign created · 1,847 recipients · A/B test ready"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #FFE01B20; border: 1px solid #FFE01B40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#FFE01B;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #FFE01B, #FFE01B99)"><span class="font-bold text-[10px]" style="color: #000">MC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,620 +0,0 @@
<!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>Mailchimp Connect — AI-Power Your Email Marketing in 2 Clicks</title>
<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&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: {
brand: {
50: '#fefce8',
100: '#fef9c3',
200: '#fef08a',
300: '#fde047',
400: '#FFE01B',
500: '#FFE01B',
600: '#ca8a04',
700: '#a16207',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #FFE01B 0%, #fbbf24 50%, #f59e0b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 224, 27, 0.15), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(255, 224, 27, 0.12), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(-4px);
border-color: rgba(255, 224, 27, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
.animate-bounce-subtle {
animation: bounce-subtle 2s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes bounce-subtle {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 224, 27, 0.4), 0 0 40px 0 rgba(255, 224, 27, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(255, 224, 27, 0.6), 0 0 60px 10px rgba(255, 224, 27, 0.3); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.05);
}
.video-glow {
box-shadow: 0 0 80px rgba(255, 224, 27, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.nav-blur {
backdrop-filter: blur(20px) saturate(180%);
}
.gradient-border {
position: relative;
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(255, 224, 27, 0.5), transparent, rgba(255, 224, 27, 0.3));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.shimmer-text {
background: linear-gradient(90deg, #FFE01B 0%, #fff 50%, #FFE01B 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 3s linear infinite;
}
.monkey-bounce {
animation: bounce-subtle 2s ease-in-out infinite;
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-yellow-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-amber-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/70 nav-blur">
<div class="max-w-6xl 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-brand-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="mail" class="w-5 h-5 text-black"></i>
</div>
<span class="font-bold text-xl tracking-tight">Mailchimp Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-yellow-400 text-black rounded-lg font-medium transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-4xl mx-auto px-6 py-20">
<div class="text-center">
<div class="relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">Mailchimp</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed">
The complete Mailchimp MCP server. Campaigns, audiences, and automations. <strong class="text-white">94 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-yellow-400 text-black rounded-xl font-semibold text-lg text-center transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
Join the Waitlist
</a>
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg text-center transition-all flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center gap-4 justify-center">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
<img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
</div>
<div>
<p class="text-zinc-400 text-sm">
Trusted by <strong class="text-white">350+</strong> marketers
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your email marketing workflow</p>
</div>
<div class="gradient-border">
<div class="bg-zinc-900 rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/mailchimp.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="send" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Campaigns</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="users-round" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Audiences</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Analytics</span>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up Mailchimp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<p class="text-zinc-400 text-lg max-w-2xl mx-auto">Stop wrestling with APIs. Start automating.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="flex items-center gap-4 mb-6">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-500"></i>
</div>
</div>
<p class="text-zinc-500 mb-2 line-through">Writer's block on emails</p>
<p class="text-white font-semibold text-lg">AI drafts high-converting copy</p>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="flex items-center gap-4 mb-6">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-500"></i>
</div>
</div>
<p class="text-zinc-500 mb-2 line-through">Guessing send times</p>
<p class="text-white font-semibold text-lg">AI optimizes for engagement</p>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="flex items-center gap-4 mb-6">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-500"></i>
</div>
</div>
<p class="text-zinc-500 mb-2 line-through">Manual list hygiene</p>
<p class="text-white font-semibold text-lg">Auto-clean and segment lists</p>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<span class="inline-block px-4 py-1.5 rounded-full bg-brand-500/10 text-brand-500 text-sm font-medium mb-4">Features</span>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-zinc-400 text-lg">Full Mailchimp API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-yellow-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="send" class="w-7 h-7 text-brand-500"></i>
</div>
<h3 class="font-bold text-xl mb-3">Campaign Management</h3>
<p class="text-zinc-400 leading-relaxed">Create, send, schedule campaigns. Full email control.</p>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="users-round" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="font-bold text-xl mb-3">Audience Data</h3>
<p class="text-zinc-400 leading-relaxed">Manage subscribers, segments, and tags intelligently.</p>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="workflow" class="w-7 h-7 text-green-400"></i>
</div>
<h3 class="font-bold text-xl mb-3">Automations</h3>
<p class="text-zinc-400 leading-relaxed">Trigger journeys, manage workflows, optimize timing.</p>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 feature-icon">
<i data-lucide="bar-chart-3" class="w-7 h-7 text-blue-400"></i>
</div>
<h3 class="font-bold text-xl mb-3">Analytics</h3>
<p class="text-zinc-400 leading-relaxed">Track opens, clicks, revenue. AI-powered insights.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 80 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">A/B Testing</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Templates</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Landing Pages</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">E-commerce</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Reports</span>
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Content</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-500 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 gradient-border">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-500">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-500">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<button
type="submit"
class="w-full py-4 bg-brand-500 hover:bg-yellow-400 text-black rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 gradient-border">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-500 hover:text-yellow-400 font-medium transition-colors">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mailchimp-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ Mailchimp MCP Server running</span>
<span class="text-green-400">✓ 94 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Mailchimp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Mailchimp API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Mailchimp settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Mailchimp?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join hundreds of marketers already automating with Mailchimp Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-yellow-400 text-black rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
Join the Waitlist
</a>
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-500 flex items-center justify-center">
<i data-lucide="mail" class="w-5 h-5 text-black"></i>
</div>
<span class="font-bold text-xl">Mailchimp Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Mailchimp Connect. Not affiliated with Mailchimp.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 text-black rounded-full font-semibold transition-all transform hover:scale-110 shadow-lg"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
pipedrive.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Pipedrive Connect — AI-Power Your Pipeline in 2 Clicks</title>
<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&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: {
brand: {
500: '#017737',
600: '#017737dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #017737 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #01773725, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #01773720; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #017737">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Pipedrive Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #017737; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #017737"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Pipedrive</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Pipedrive MCP server. Deals, contacts, and activities. <strong class="text-white">76 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #017737; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/pipedrive.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #017737; color: #fff">
76 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Pipedrive data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #017737, #01773799)">
<span class="font-bold text-xs" style="color: #fff">PD</span>
</div>
<div>
<div class="font-semibold text-sm">Pipedrive Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 76 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Pipedrive Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #017737">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Pipedrive + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Stale deals in pipeline</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #01773730">
<i data-lucide="check" class="w-4 h-4" style="color: #017737"></i>
</div>
<p class="text-white font-medium">AI nudges on inactivity</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Missed follow-up tasks</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #01773730">
<i data-lucide="check" class="w-4 h-4" style="color: #017737"></i>
</div>
<p class="text-white font-medium">Automated activity reminders</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Inaccurate forecasts</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #01773730">
<i data-lucide="check" class="w-4 h-4" style="color: #017737"></i>
</div>
<p class="text-white font-medium">AI-powered predictions</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Pipedrive API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #01773720">
<i data-lucide="layers" class="w-5 h-5" style="color: #017737"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Deal Management</h3>
<p class="text-zinc-400 text-sm">Create, move, track deals through your pipeline.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #01773720">
<i data-lucide="layers" class="w-5 h-5" style="color: #017737"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Contact Sync</h3>
<p class="text-zinc-400 text-sm">Manage people, organizations, and relationships.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #01773720">
<i data-lucide="layers" class="w-5 h-5" style="color: #017737"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Activity Tracking</h3>
<p class="text-zinc-400 text-sm">Log calls, meetings, tasks — stay organized.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #01773720">
<i data-lucide="layers" class="w-5 h-5" style="color: #017737"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Insights</h3>
<p class="text-zinc-400 text-sm">Win rates, velocity, forecast accuracy.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #017737; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Pipedrive account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Pipedrive API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Pipedrive settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Pipedrive?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Pipedrive Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #017737; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Pipedrive Connect. Not affiliated with Pipedrive.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"What does our pipeline look like? Any deals stuck in a stage too long?"},{"type":"ai","text":"Here's your deal pipeline:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eDeal\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eStage\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eValue\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eHorizon Tech\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eProposal\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$38,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eBluePeak\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eNegotiation\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$22,400\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eVertex Group\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eDemo\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$56,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eCatalyst AI\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eWon\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$18,200\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e$134,600 total · Horizon stuck 18 days in Proposal\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Nudge Horizon with a value-add case study and mark Catalyst as closed-won"},{"type":"ai","text":"Sent Horizon the enterprise case study with ROI breakdown. Catalyst marked won — revenue recorded at $18,200. Win notification sent to team Slack.","action":"✓ Case study sent · Deal won ($18,200) · Team notified"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #01773720; border: 1px solid #01773740;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#017737;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #017737, #01773799)"><span class="font-bold text-[10px]" style="color: #fff">PD</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,637 +0,0 @@
<!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>Pipedrive Connect — AI-Power Your Pipeline in 2 Clicks</title>
<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&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: {
brand: {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#017737',
600: '#015f2d',
700: '#014724',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #017737 0%, #4ade80 50%, #22d3ee 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(1, 119, 55, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(1, 119, 55, 0.2);
transform: translateY(-4px);
border-color: rgba(1, 119, 55, 0.4);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-pulse-glow {
animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 20px rgba(1, 119, 55, 0.3); }
50% { box-shadow: 0 0 40px rgba(1, 119, 55, 0.5); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.shimmer {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
background-size: 200% 100%;
animation: shimmer 3s infinite;
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(1, 119, 55, 0.4), 0 0 40px 0 rgba(1, 119, 55, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(1, 119, 55, 0.6), 0 0 60px 10px rgba(1, 119, 55, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.video-glow {
box-shadow: 0 0 80px rgba(1, 119, 55, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
}
.gradient-border {
background: linear-gradient(135deg, rgba(1, 119, 55, 0.5), rgba(74, 222, 128, 0.2));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center">
<i data-lucide="git-branch" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Pipedrive Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition transform hover:scale-105">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
<!-- Floating background elements -->
<div class="absolute top-40 left-10 w-72 h-72 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute bottom-20 right-10 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="text-center relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">Pipedrive</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
The complete Pipedrive MCP server. <strong class="text-white">76 tools</strong> for deals, contacts, and activities.
No setup. No OAuth headaches. Just connect and sell.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center gap-4 justify-center">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold">+99</div>
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">300+</strong> sales teams
</p>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your sales pipeline</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/pipedrive.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="target" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Deals</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Contacts</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="activity" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Activities</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up Pipedrive + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Pain Point 1 -->
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Stale deals in pipeline</h3>
<p class="text-zinc-500 mb-6">Deals sit untouched. You forget to follow up. Revenue slips away.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<p class="text-white font-medium">AI nudges on inactivity</p>
</div>
</div>
</div>
</div>
<!-- Pain Point 2 -->
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Missed follow-up tasks</h3>
<p class="text-zinc-500 mb-6">Tasks pile up. You're always playing catch-up with your CRM.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<p class="text-white font-medium">Automated activity reminders</p>
</div>
</div>
</div>
</div>
<!-- Pain Point 3 -->
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
</div>
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Inaccurate forecasts</h3>
<p class="text-zinc-500 mb-6">Pipeline value means nothing when you can't trust the numbers.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<p class="text-white font-medium">AI-powered predictions</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Pipedrive API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="target" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Deal Management</h3>
<p class="text-zinc-400">Create, move, track deals through your pipeline automatically.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Contact Sync</h3>
<p class="text-zinc-400">Manage people, organizations, and relationships effortlessly.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-yellow-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="activity" class="w-7 h-7 text-orange-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Activity Tracking</h3>
<p class="text-zinc-400">Log calls, meetings, tasks — stay organized automatically.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-5 feature-icon">
<i data-lucide="bar-chart-3" class="w-7 h-7 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Insights</h3>
<p class="text-zinc-400">Win rates, velocity, forecast accuracy — all AI-analyzed.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ 70 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Products</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Notes</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Files</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Goals</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Filters</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Stages</span>
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Email Sync</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/10 to-emerald-500/10 rounded-3xl blur-xl"></div>
<div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="Your phone number"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message (hidden by default) -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const submitBtn = document.getElementById('submit-btn');
const successMsg = document.getElementById('success-message');
submitBtn.disabled = true;
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
setTimeout(() => {
form.classList.add('hidden');
successMsg.classList.remove('hidden');
}, 1000);
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/pipedrive-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ Pipedrive MCP Server running</span>
<span class="text-green-400">✓ 76 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Pipedrive account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Pipedrive API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Pipedrive settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Pipedrive?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 300+ sales teams already automating with Pipedrive Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center">
<i data-lucide="git-branch" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Pipedrive Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Pipedrive Connect. Not affiliated with Pipedrive.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-emerald-500 rounded-full font-semibold transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
rippling.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Rippling Connect — AI-Power Your Workforce in 2 Clicks</title>
<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&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: {
brand: {
500: '#FEC400',
600: '#FEC400dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #FEC400 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FEC40025, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #FEC40020; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FEC400">
<i data-lucide="zap" class="w-5 h-5" style="color: #000"></i>
</div>
<span class="font-bold text-xl">Rippling Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FEC400; color: #000">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #FEC400"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Rippling</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Rippling MCP server. HR, IT, and Finance unified. <strong class="text-white">89 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FEC400; color: #000">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/rippling.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FEC400; color: #000">
89 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Rippling data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #FEC400, #FEC40099)">
<span class="font-bold text-xs" style="color: #000">RP</span>
</div>
<div>
<div class="font-semibold text-sm">Rippling Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 89 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Rippling Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FEC400">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #000"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Rippling + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Onboarding takes days</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FEC40030">
<i data-lucide="check" class="w-4 h-4" style="color: #FEC400"></i>
</div>
<p class="text-white font-medium">AI sets up in minutes</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Offboarding security gaps</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FEC40030">
<i data-lucide="check" class="w-4 h-4" style="color: #FEC400"></i>
</div>
<p class="text-white font-medium">Instant access revocation</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual app provisioning</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FEC40030">
<i data-lucide="check" class="w-4 h-4" style="color: #FEC400"></i>
</div>
<p class="text-white font-medium">Role-based auto-setup</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Rippling API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FEC40020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FEC400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Employee Management</h3>
<p class="text-zinc-400 text-sm">Onboard, offboard, manage the full lifecycle.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FEC40020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FEC400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Device Management</h3>
<p class="text-zinc-400 text-sm">Provision laptops, manage software, track assets.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FEC40020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FEC400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Payroll & Benefits</h3>
<p class="text-zinc-400 text-sm">Run payroll, manage benefits, handle compliance.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FEC40020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FEC400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">App Provisioning</h3>
<p class="text-zinc-400 text-sm">Auto-provision SaaS access based on role.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FEC400; color: #000">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Rippling account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Rippling API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Rippling settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Rippling?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Rippling Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FEC400; color: #000">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Rippling Connect. Not affiliated with Rippling.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"We're offboarding Tom from engineering. What needs to happen?"},{"type":"ai","text":"Here's Tom's access footprint:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eSaaS Apps\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003e14 apps: Slack, GitHub, AWS, Jira...\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eActive\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eRevoke\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eDevices\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eMacBook Pro M3 + Monitor\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eReturn\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eShip label\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003ePayroll\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eFinal paycheck + PTO payout: $4,820\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eCalc'd\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eReady\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e14 app licenses · 2 devices · Last day: Friday\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Revoke all access at 5pm Friday and process the final paycheck"},{"type":"ai","text":"Scheduled access revocation for all 14 apps at 5:00 PM Friday. Return shipping label generated for devices. Final paycheck of $4,820 queued for next pay cycle.","action":"✓ 14 apps scheduled for revocation · Shipping label sent · Payroll queued"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #FEC40020; border: 1px solid #FEC40040;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#FEC400;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #FEC400, #FEC40099)"><span class="font-bold text-[10px]" style="color: #000">RP</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,763 +0,0 @@
<!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>Rippling Connect — AI-Power Your Workforce in 2 Clicks</title>
<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&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: {
brand: {
50: '#fefce8',
100: '#fef9c3',
200: '#fef08a',
300: '#fde047',
400: '#FEC400',
500: '#FEC400',
600: '#d4a500',
700: '#a16207',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #FEC400 0%, #fbbf24 50%, #f59e0b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(254, 196, 0, 0.15), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(254, 196, 0, 0.12), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(-4px);
border-color: rgba(254, 196, 0, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite 2s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite 1s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.video-glow {
box-shadow: 0 0 80px rgba(254, 196, 0, 0.15), 0 25px 80px -20px rgba(0, 0, 0, 0.8);
}
.btn-glow {
box-shadow: 0 0 30px rgba(254, 196, 0, 0.3);
transition: all 0.3s ease;
}
.btn-glow:hover {
box-shadow: 0 0 50px rgba(254, 196, 0, 0.5);
transform: scale(1.05);
}
.gradient-border {
background: linear-gradient(135deg, rgba(254, 196, 0, 0.15), rgba(251, 191, 36, 0.08));
border: 1px solid rgba(254, 196, 0, 0.2);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(254, 196, 0, 0.4), 0 0 40px 0 rgba(254, 196, 0, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(254, 196, 0, 0.5), 0 0 60px 10px rgba(254, 196, 0, 0.25); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.1);
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.pillar-card {
background: linear-gradient(180deg, rgba(254, 196, 0, 0.08) 0%, transparent 100%);
}
.pillar-card:hover {
background: linear-gradient(180deg, rgba(254, 196, 0, 0.12) 0%, transparent 100%);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Ambient Background Elements -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 -right-32 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-brand-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="layers" class="w-5 h-5 text-zinc-900"></i>
</div>
<span class="font-bold text-xl">Rippling Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 text-zinc-900">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="max-w-3xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
<span>Open Source + Hosted</span>
<span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 rounded-full text-xs font-medium ml-1">NEW</span>
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">Rippling</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
The complete Rippling MCP server. <strong class="text-white">89 tools</strong> for HR, IT, and Finance — unified.
No OAuth headaches. Just connect and automate your workforce management.
</p>
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-center text-zinc-900">
Join the Waitlist
</a>
<a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
<i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center gap-4 justify-center">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold shadow-lg text-zinc-900">
+65
</div>
</div>
<div class="text-left">
<div class="flex items-center gap-1 text-brand-400 text-sm">
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
</div>
<p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">280+</strong> growing companies</p>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your workforce management</p>
</div>
<div class="gradient-border rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/rippling.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">HR</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="laptop" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">IT</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="wallet" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Finance</span>
</div>
</div>
</div>
</div>
</section>
<!-- Three Pillars -->
<section class="py-16 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-12">
<p class="text-brand-400 font-medium mb-2">One Platform. Three Pillars.</p>
<h2 class="text-3xl md:text-4xl font-bold">HR + IT + Finance, Unified</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
<div class="w-16 h-16 rounded-2xl bg-purple-500/20 flex items-center justify-center mx-auto mb-4">
<i data-lucide="users" class="w-8 h-8 text-purple-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">HR</h3>
<p class="text-zinc-400 text-sm">Onboarding, offboarding, PTO, performance — all automated with AI.</p>
</div>
<div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
<div class="w-16 h-16 rounded-2xl bg-blue-500/20 flex items-center justify-center mx-auto mb-4">
<i data-lucide="laptop" class="w-8 h-8 text-blue-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">IT</h3>
<p class="text-zinc-400 text-sm">Device provisioning, app access, security policies — zero-touch setup.</p>
</div>
<div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
<div class="w-16 h-16 rounded-2xl bg-green-500/20 flex items-center justify-center mx-auto mb-4">
<i data-lucide="wallet" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Finance</h3>
<p class="text-zinc-400 text-sm">Payroll, benefits, expenses, compliance — handled automatically.</p>
</div>
</div>
</div>
</section>
<!-- Pain Points / Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up Rippling + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
<i data-lucide="clock" class="w-7 h-7 text-red-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2 text-red-400">Onboarding takes days</h3>
<p class="text-zinc-500 mb-6">New hire starts Monday. Laptop arrives Thursday. Apps access by next week.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<p class="text-white font-medium">AI sets up in minutes</p>
</div>
</div>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
<i data-lucide="shield-alert" class="w-7 h-7 text-red-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2 text-red-400">Offboarding security gaps</h3>
<p class="text-zinc-500 mb-6">Employee leaves. Still has Slack access. GitHub? Who knows.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<p class="text-white font-medium">Instant access revocation</p>
</div>
</div>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
<i data-lucide="settings" class="w-7 h-7 text-red-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2 text-red-400">Manual app provisioning</h3>
<p class="text-zinc-500 mb-6">IT tickets for every new app. Each role needs different access. It's endless.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<p class="text-white font-medium">Role-based auto-setup</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Rippling API access through one simple connection. 89 tools at your AI's fingertips.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
<i data-lucide="user-plus" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Employee Management</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Onboard, offboard, manage the full employee lifecycle with AI.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
<i data-lucide="monitor" class="w-7 h-7 text-blue-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Device Management</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Provision laptops, manage software, track assets automatically.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
<i data-lucide="banknote" class="w-7 h-7 text-green-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Payroll & Benefits</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Run payroll, manage benefits, handle compliance seamlessly.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-amber-500/20 flex items-center justify-center mb-5">
<i data-lucide="key" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">App Provisioning</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Auto-provision SaaS access based on role and department.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 70 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Time & Attendance</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Org Chart</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Compensation</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Custom Fields</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Documents</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Groups</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Workflows</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Webhooks</span>
</div>
</div>
</div>
</section>
<!-- Automation Examples -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">AI-Powered Workflows</h2>
<p class="text-zinc-400 text-lg">Real automations you can build in minutes</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="user-check" class="w-6 h-6 text-brand-400"></i>
</div>
<div>
<h3 class="font-semibold text-lg mb-2">Zero-Touch Onboarding</h3>
<p class="text-zinc-400 text-sm mb-3">"When new hire added → order laptop, provision apps, send welcome email, schedule orientation"</p>
<div class="flex gap-2">
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">HR</span>
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">IT</span>
</div>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-xl bg-red-500/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="user-minus" class="w-6 h-6 text-red-400"></i>
</div>
<div>
<h3 class="font-semibold text-lg mb-2">Secure Offboarding</h3>
<p class="text-zinc-400 text-sm mb-3">"When employee terminated → revoke all apps, wipe device, transfer files, update payroll"</p>
<div class="flex gap-2">
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Security</span>
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Compliance</span>
</div>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="arrow-up-circle" class="w-6 h-6 text-purple-400"></i>
</div>
<div>
<h3 class="font-semibold text-lg mb-2">Role Change Automation</h3>
<p class="text-zinc-400 text-sm mb-3">"When promoted to manager → add to Slack channels, grant HR access, update comp band"</p>
<div class="flex gap-2">
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">HR</span>
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Finance</span>
</div>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="calendar-check" class="w-6 h-6 text-green-400"></i>
</div>
<div>
<h3 class="font-semibold text-lg mb-2">PTO Intelligence</h3>
<p class="text-zinc-400 text-sm mb-3">"When PTO requested → check team coverage, auto-approve if ok, notify manager if conflict"</p>
<div class="flex gap-2">
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Scheduling</span>
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">AI</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25 text-zinc-900"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const successMsg = document.getElementById('success-message');
form.classList.add('hidden');
successMsg.classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle of OAuth and token management.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/rippling-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ Rippling MCP Server running</span>
<span class="text-brand-400">✓ 89 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
<p class="text-zinc-400">Everything you need to know about Rippling Connect</p>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Rippling account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my employee data secure?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Absolutely. We use OAuth 2.0 and never store your Rippling API keys. All tokens are encrypted at rest and in transit.
We're SOC 2 compliant and you can revoke access anytime from your Rippling admin console.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Which Rippling modules are supported?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Rippling Connect supports all core modules — HR Cloud, IT Cloud, and Finance Cloud.
The available API endpoints depend on which modules you have enabled in your Rippling subscription.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Rippling?
</h2>
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
Join 280+ growing companies already automating with Rippling Connect. Be first in line when we launch.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-zinc-900">
Join the Waitlist
</a>
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
<i data-lucide="calendar" class="w-5 h-5"></i>
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-500 flex items-center justify-center">
<i data-lucide="layers" class="w-5 h-5 text-zinc-900"></i>
</div>
<span class="font-bold text-xl">Rippling Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition flex items-center gap-2">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub
</a>
<a href="#" class="hover:text-white transition flex items-center gap-2">
<i data-lucide="twitter" class="w-4 h-4"></i>
Twitter
</a>
</div>
</div>
<div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
<p class="text-zinc-500 text-sm">© 2026 Rippling Connect. Not affiliated with Rippling.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all shadow-xl text-zinc-900"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
servicetitan.html Normal file
View File

@ -0,0 +1,408 @@
<!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>ServiceTitan Connect — AI-Power Your Field Service in 2 Clicks</title>
<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&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: {
brand: {
500: '#FF6B00',
600: '#FF6B00dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #FF6B00 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FF6B0025, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #FF6B0020; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF6B00">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">ServiceTitan Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FF6B00; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #FF6B00"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">ServiceTitan</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete ServiceTitan MCP server. Jobs, dispatch, and invoicing. <strong class="text-white">124 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FF6B00; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/servicetitan.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FF6B00; color: #fff">
124 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your ServiceTitan data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #FF6B00, #FF6B0099)">
<span class="font-bold text-xs" style="color: #fff">ST</span>
</div>
<div>
<div class="font-semibold text-sm">ServiceTitan Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 124 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask ServiceTitan Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF6B00">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up ServiceTitan + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Dispatch phone chaos</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF6B0030">
<i data-lucide="check" class="w-4 h-4" style="color: #FF6B00"></i>
</div>
<p class="text-white font-medium">AI optimizes routes instantly</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Missed upsell opportunities</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF6B0030">
<i data-lucide="check" class="w-4 h-4" style="color: #FF6B00"></i>
</div>
<p class="text-white font-medium">AI suggests relevant services</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Paper-based job tracking</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF6B0030">
<i data-lucide="check" class="w-4 h-4" style="color: #FF6B00"></i>
</div>
<p class="text-white font-medium">Real-time digital updates</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full ServiceTitan API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF6B0020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6B00"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Job Management</h3>
<p class="text-zinc-400 text-sm">Create, schedule, track jobs end-to-end.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF6B0020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6B00"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Dispatch</h3>
<p class="text-zinc-400 text-sm">Optimize routes, assign techs, manage capacity.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF6B0020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6B00"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Estimates & Invoices</h3>
<p class="text-zinc-400 text-sm">Generate quotes, convert to invoices, collect payments.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF6B0020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6B00"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Customer Management</h3>
<p class="text-zinc-400 text-sm">Track equipment, history, and service agreements.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FF6B00; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your ServiceTitan account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your ServiceTitan API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your ServiceTitan settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your ServiceTitan?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with ServiceTitan Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FF6B00; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 ServiceTitan Connect. Not affiliated with ServiceTitan.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"How's the dispatch board looking for tomorrow? Any gaps or overloads?"},{"type":"ai","text":"Here's tomorrow's dispatch overview:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eMike T.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003e6 jobs · HVAC installs\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eOver\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e10h scheduled\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eSarah K.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003e4 jobs · Maintenance\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eGood\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e7h scheduled\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eDave R.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003e2 jobs · Plumbing\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eLight\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e4h scheduled\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e12 jobs total · 1 tech overloaded · $14,200 est. revenue\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Move Mike's afternoon install to Dave and optimize all routes"},{"type":"ai","text":"Reassigned the 2pm install to Dave (now 3 jobs, 6.5h). Routes optimized for all techs — saving 47 minutes total drive time. Customers notified of updated ETAs.","action":"✓ Job reassigned · Routes optimized · 47 min saved · Customers notified"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #FF6B0020; border: 1px solid #FF6B0040;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#FF6B00;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #FF6B00, #FF6B0099)"><span class="font-bold text-[10px]" style="color: #fff">ST</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,708 +0,0 @@
<!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>ServiceTitan Connect — AI-Power Your Field Service in 2 Clicks</title>
<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&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: {
brand: {
50: '#fff7ed',
100: '#ffedd5',
200: '#fed7aa',
300: '#fdba74',
400: '#fb923c',
500: '#FF6B00',
600: '#ea580c',
700: '#c2410c',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #FF6B00 0%, #f97316 50%, #fbbf24 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 107, 0, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(255, 107, 0, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(-4px);
border-color: rgba(255, 107, 0, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite 2s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite 1s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.video-glow {
box-shadow: 0 0 80px rgba(255, 107, 0, 0.2), 0 25px 80px -20px rgba(0, 0, 0, 0.8);
}
.btn-glow {
box-shadow: 0 0 30px rgba(255, 107, 0, 0.4);
transition: all 0.3s ease;
}
.btn-glow:hover {
box-shadow: 0 0 50px rgba(255, 107, 0, 0.6);
transform: scale(1.05);
}
.gradient-border {
background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(249, 115, 22, 0.1));
border: 1px solid rgba(255, 107, 0, 0.2);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 107, 0, 0.4), 0 0 40px 0 rgba(255, 107, 0, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(255, 107, 0, 0.6), 0 0 60px 10px rgba(255, 107, 0, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.1);
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.stat-card {
background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), transparent);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Ambient Background Elements -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 -right-32 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">ServiceTitan Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="max-w-3xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
<span>Open Source + Hosted</span>
<span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 rounded-full text-xs font-medium ml-1">NEW</span>
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">ServiceTitan</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
The complete ServiceTitan MCP server. <strong class="text-white">124 tools</strong> for jobs, dispatch, and invoicing.
No OAuth headaches. Just connect and automate your field operations.
</p>
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-center">
Join the Waitlist
</a>
<a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
<i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center gap-4 justify-center">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold shadow-lg">
+80
</div>
</div>
<div class="text-left">
<div class="flex items-center gap-1 text-amber-400 text-sm">
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
</div>
<p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">350+</strong> field service companies</p>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your field service operations</p>
</div>
<div class="gradient-border rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/servicetitan.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="briefcase" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Jobs</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="truck" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Dispatch</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="file-text" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Invoicing</span>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Banner -->
<section class="py-12 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">124</div>
<div class="text-zinc-400 text-sm">API Tools</div>
</div>
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">2 min</div>
<div class="text-zinc-400 text-sm">Setup Time</div>
</div>
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">350+</div>
<div class="text-zinc-400 text-sm">Companies</div>
</div>
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">99.9%</div>
<div class="text-zinc-400 text-sm">Uptime</div>
</div>
</div>
</div>
</section>
<!-- Pain Points / Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up ServiceTitan + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
<i data-lucide="phone-call" class="w-7 h-7 text-red-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2 text-red-400">Dispatch phone chaos</h3>
<p class="text-zinc-500 mb-6">Constant calls, manual scheduling, techs waiting. Inefficiency everywhere.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<p class="text-white font-medium">AI optimizes routes instantly</p>
</div>
</div>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
<i data-lucide="dollar-sign" class="w-7 h-7 text-red-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2 text-red-400">Missed upsell opportunities</h3>
<p class="text-zinc-500 mb-6">Techs on-site don't know customer history. Revenue left on the table.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<p class="text-white font-medium">AI suggests relevant services</p>
</div>
</div>
</div>
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
<i data-lucide="clipboard" class="w-7 h-7 text-red-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2 text-red-400">Paper-based job tracking</h3>
<p class="text-zinc-500 mb-6">Lost work orders, illegible notes, no real-time visibility.</p>
<div class="pt-6 border-t border-zinc-800">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<p class="text-white font-medium">Real-time digital updates</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full ServiceTitan API access through one simple connection. 124 tools at your AI's fingertips.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-amber-500/20 flex items-center justify-center mb-5">
<i data-lucide="briefcase" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Job Management</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Create, schedule, and track jobs end-to-end with AI assistance.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
<i data-lucide="truck" class="w-7 h-7 text-blue-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Dispatch</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Optimize routes, assign techs, manage capacity automatically.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
<i data-lucide="file-text" class="w-7 h-7 text-green-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Estimates & Invoices</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Generate quotes, convert to invoices, collect payments fast.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Customer Management</h3>
<p class="text-zinc-400 text-sm leading-relaxed">Track equipment, history, and service agreements in one place.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 100 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Technicians</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Inventory</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Memberships</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Marketing</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Reporting</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Pricebook</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Tags</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Webhooks</span>
</div>
</div>
</div>
</section>
<!-- Use Cases -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Built for Field Service</h2>
<p class="text-zinc-400 text-lg">Whether you're HVAC, plumbing, or electrical — we've got you covered</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="p-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-cyan-500/5 border border-blue-500/20">
<div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center mb-4">
<i data-lucide="thermometer-snowflake" class="w-6 h-6 text-blue-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">HVAC</h3>
<p class="text-zinc-400 text-sm">Seasonal demand, maintenance agreements, equipment tracking — all automated.</p>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-teal-500/5 border border-cyan-500/20">
<div class="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4">
<i data-lucide="droplets" class="w-6 h-6 text-cyan-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Plumbing</h3>
<p class="text-zinc-400 text-sm">Emergency dispatch, flat-rate pricing, drain camera integrations.</p>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-amber-500/10 to-yellow-500/5 border border-amber-500/20">
<div class="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center mb-4">
<i data-lucide="zap" class="w-6 h-6 text-amber-400"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Electrical</h3>
<p class="text-zinc-400 text-sm">Permit tracking, safety compliance, panel upgrade workflows.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const successMsg = document.getElementById('success-message');
form.classList.add('hidden');
successMsg.classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle of OAuth and token management.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/st-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ ServiceTitan MCP Server running</span>
<span class="text-brand-400">✓ 124 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
<p class="text-zinc-400">Everything you need to know about ServiceTitan Connect</p>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your ServiceTitan account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your ServiceTitan API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your ServiceTitan settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Does this work with Pro and Titan plans?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes! ServiceTitan Connect works with all ServiceTitan plans that have API access enabled.
The available endpoints may vary based on your plan's features.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
</div>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your ServiceTitan?
</h2>
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
Join 350+ field service companies already automating with ServiceTitan Connect. Be first in line when we launch.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg">
Join the Waitlist
</a>
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
<i data-lucide="calendar" class="w-5 h-5"></i>
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-500 to-amber-500 flex items-center justify-center">
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">ServiceTitan Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition flex items-center gap-2">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub
</a>
<a href="#" class="hover:text-white transition flex items-center gap-2">
<i data-lucide="twitter" class="w-4 h-4"></i>
Twitter
</a>
</div>
</div>
<div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
<p class="text-zinc-500 text-sm">© 2026 ServiceTitan Connect. Not affiliated with ServiceTitan, Inc.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all shadow-xl"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
squarespace.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Squarespace Connect — AI-Power Your Website in 2 Clicks</title>
<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&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: {
brand: {
500: '#000000',
600: '#000000dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #000000 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #00000025, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #00000020; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #000000">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Squarespace Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #000000; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #000000"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Squarespace</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Squarespace MCP server. Pages, products, and analytics. <strong class="text-white">67 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #000000; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/squarespace.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #000000; color: #fff">
67 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Squarespace data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #000000, #00000099)">
<span class="font-bold text-xs" style="color: #fff">SQ</span>
</div>
<div>
<div class="font-semibold text-sm">Squarespace Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 67 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Squarespace Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #000000">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Squarespace + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual content updates</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
<i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
</div>
<p class="text-white font-medium">AI keeps your site fresh</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Inventory headaches</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
<i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
</div>
<p class="text-white font-medium">Auto-sync stock levels</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Missed form leads</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
<i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
</div>
<p class="text-white font-medium">Instant AI follow-up on submissions</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Squarespace API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
<i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Content Management</h3>
<p class="text-zinc-400 text-sm">Update pages, blogs, and galleries programmatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
<i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Commerce</h3>
<p class="text-zinc-400 text-sm">Manage products, inventory, orders, and fulfillment.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
<i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Form Submissions</h3>
<p class="text-zinc-400 text-sm">Access and process contact form data automatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
<i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Analytics</h3>
<p class="text-zinc-400 text-sm">Pull traffic, sales, and engagement metrics.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #000000; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Squarespace account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Squarespace API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Squarespace settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Squarespace?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Squarespace Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #000000; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Squarespace Connect. Not affiliated with Squarespace.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"How's the store performing? What are our top products this week?"},{"type":"ai","text":"Here's your store dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eRevenue\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$8,420\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+12%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eOrders\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e127\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+8%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAvg Order\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$66.30\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+3.5%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e🔥 Top seller: \"Minimalist Desk Lamp\" — 43 units this week\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"The desk lamp is almost out of stock. Mark it limited edition and update the homepage banner"},{"type":"ai","text":"Updated \"Minimalist Desk Lamp\" with \"Limited Edition - Only 12 Left\" badge. Homepage banner now features it with urgency messaging. SEO meta updated too.","action":"✓ Product badge added · Homepage updated · SEO refreshed"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #00000020; border: 1px solid #00000040;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#000000;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #000000, #00000099)"><span class="font-bold text-[10px]" style="color: #fff">SQ</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,652 +0,0 @@
<!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>Squarespace Connect — AI-Power Your Website in 2 Clicks</title>
<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&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: {
brand: {
50: '#fafafa',
100: '#f5f5f5',
200: '#e5e5e5',
300: '#d4d4d4',
400: '#a3a3a3',
500: '#171717',
600: '#0a0a0a',
700: '#000000',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #ffffff 0%, #a3a3a3 50%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 255, 255, 0.08), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.2);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.15); }
50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.25); }
}
.video-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.shimmer-border {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
background-size: 200% 100%;
animation: shimmer 3s linear infinite;
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.2), 0 0 40px 0 rgba(255, 255, 255, 0.1); }
50% { box-shadow: 0 0 30px 5px rgba(255, 255, 255, 0.3), 0 0 60px 10px rgba(255, 255, 255, 0.15); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.4;
}
.sq-gradient {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
}
.gradient-border {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Orbs Background -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="orb w-96 h-96 bg-zinc-400/20 top-1/4 -left-48 animate-float"></div>
<div class="orb w-64 h-64 bg-zinc-300/10 top-1/2 -right-32 animate-float-delayed"></div>
<div class="orb w-72 h-72 bg-zinc-500/10 bottom-1/4 left-1/3 animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-white flex items-center justify-center shadow-lg shadow-white/10">
<i data-lucide="layout" class="w-5 h-5 text-black"></i>
</div>
<span class="font-bold text-xl">Squarespace Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-white text-black hover:bg-zinc-200 rounded-xl font-medium transition shadow-lg shadow-white/10">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-white animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
Connect <span class="gradient-text">Squarespace</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10 leading-relaxed">
The complete Squarespace MCP server. <strong class="text-white">67 tools</strong> for pages, products, and analytics.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-white/20">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
<i data-lucide="play-circle" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col items-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">400+</strong> website owners & creators
</p>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI manages your Squarespace site</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/squarespace.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="file-text" class="w-4 h-4 text-white"></i>
<span class="text-sm text-zinc-300">Pages</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="shopping-bag" class="w-4 h-4 text-white"></i>
<span class="text-sm text-zinc-300">Products</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="bar-chart-3" class="w-4 h-4 text-white"></i>
<span class="text-sm text-zinc-300">Analytics</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold mb-8 leading-tight">
Setting up Squarespace + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Manual content updates</p>
<p class="text-zinc-500">Updating pages, products, and blogs takes forever.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Inventory headaches</p>
<p class="text-zinc-500">Stock levels out of sync, overselling nightmares.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Missed form leads</p>
<p class="text-zinc-500">Contact submissions sit unread for days.</p>
</div>
</div>
</div>
</div>
<div class="sq-gradient rounded-3xl border border-zinc-700/50 p-8 shadow-2xl">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-lg">
<i data-lucide="check" class="w-6 h-6 text-black"></i>
</div>
<h3 class="text-2xl font-bold">With Squarespace Connect</h3>
</div>
<div class="space-y-5 text-lg">
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-white"></i>
</div>
AI keeps your site fresh automatically
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-white"></i>
</div>
Auto-sync stock levels across channels
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-white"></i>
</div>
Instant AI follow-up on form submissions
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-white"></i>
</div>
Works with Claude, GPT, any MCP client
</div>
<div class="flex items-center gap-3 text-zinc-300">
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-white"></i>
</div>
Connect in 2 clicks via OAuth
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Squarespace API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
<i data-lucide="file-text" class="w-7 h-7 text-white"></i>
</div>
<h3 class="text-xl font-bold mb-3">Content Management</h3>
<p class="text-zinc-400 leading-relaxed">Update pages, blogs, and galleries programmatically. Keep content fresh with AI.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
<i data-lucide="shopping-bag" class="w-7 h-7 text-white"></i>
</div>
<h3 class="text-xl font-bold mb-3">Commerce</h3>
<p class="text-zinc-400 leading-relaxed">Manage products, inventory, orders, and fulfillment. Complete e-commerce control.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
<i data-lucide="inbox" class="w-7 h-7 text-white"></i>
</div>
<h3 class="text-xl font-bold mb-3">Form Submissions</h3>
<p class="text-zinc-400 leading-relaxed">Access and process contact form data automatically. Never miss a lead again.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
<div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
<i data-lucide="bar-chart-3" class="w-7 h-7 text-white"></i>
</div>
<h3 class="text-xl font-bold mb-3">Analytics</h3>
<p class="text-zinc-400 leading-relaxed">Pull traffic, sales, and engagement metrics. AI-powered insights on demand.</p>
</div>
</div>
<div class="mt-16 text-center">
<p class="text-zinc-400 mb-6">Full API coverage including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Pages</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Products</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Orders</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Inventory</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Blogs</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Forms</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Members</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Profiles</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 text-white text-sm font-medium mb-6 border border-white/20">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="sq-gradient rounded-3xl border border-zinc-700/50 p-8 shadow-2xl">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-white">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/10 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-white">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="+1 (555) 000-0000"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/10 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/10 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-white/10"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<!-- Success Message (hidden by default) -->
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-white"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const submitBtn = document.getElementById('submit-btn');
const successMsg = document.getElementById('success-message');
submitBtn.disabled = true;
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
setTimeout(() => {
form.classList.add('hidden');
successMsg.classList.remove('hidden');
}, 1000);
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="sq-gradient rounded-3xl border border-zinc-700/50 p-8 md:p-12 shadow-2xl">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6 border border-zinc-700">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6 text-lg leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-white hover:text-zinc-300 font-medium text-lg group">
View on GitHub
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800 shadow-xl">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 leading-relaxed"><code><span class="text-zinc-500">$</span> git clone github.com/squarespace-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-white">✓ Squarespace MCP Server running</span>
<span class="text-white">✓ 67 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Squarespace account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Squarespace API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Squarespace settings.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Squarespace?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 400+ website owners already automating with Squarespace Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition shadow-xl shadow-white/20">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 rounded-xl font-semibold text-lg transition border border-zinc-700">
Watch Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-white flex items-center justify-center">
<i data-lucide="layout" class="w-5 h-5 text-black"></i>
</div>
<span class="font-bold text-xl">Squarespace Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition flex items-center gap-2">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub
</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Squarespace Connect. Not affiliated with Squarespace.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-white text-black rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
toast.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Toast Connect — AI-Power Your Restaurant in 2 Clicks</title>
<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&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: {
brand: {
500: '#FF4C00',
600: '#FF4C00dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #FF4C00 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FF4C0025, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #FF4C0020; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF4C00">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Toast Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FF4C00; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #FF4C00"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Toast</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Toast MCP server. Orders, menu, and operations. <strong class="text-white">94 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FF4C00; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/toast.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FF4C00; color: #fff">
94 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Toast data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #FF4C00, #FF4C0099)">
<span class="font-bold text-xs" style="color: #fff">TT</span>
</div>
<div>
<div class="font-semibold text-sm">Toast Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 94 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Toast Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF4C00">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Toast + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">86'd item confusion</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF4C0030">
<i data-lucide="check" class="w-4 h-4" style="color: #FF4C00"></i>
</div>
<p class="text-white font-medium">AI updates menu instantly</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Labor cost overruns</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF4C0030">
<i data-lucide="check" class="w-4 h-4" style="color: #FF4C00"></i>
</div>
<p class="text-white font-medium">AI optimizes scheduling</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">No sales insights</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF4C0030">
<i data-lucide="check" class="w-4 h-4" style="color: #FF4C00"></i>
</div>
<p class="text-white font-medium">AI identifies profit drivers</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Toast API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF4C0020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF4C00"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Order Management</h3>
<p class="text-zinc-400 text-sm">Access tickets, modifiers, and order flow.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF4C0020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF4C00"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Menu Control</h3>
<p class="text-zinc-400 text-sm">Update items, prices, availability in real-time.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF4C0020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF4C00"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Labor Management</h3>
<p class="text-zinc-400 text-sm">Track shifts, manage schedules, monitor labor cost.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF4C0020">
<i data-lucide="layers" class="w-5 h-5" style="color: #FF4C00"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
<p class="text-zinc-400 text-sm">Sales mix, peak hours, server performance.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FF4C00; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Toast account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Toast API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Toast settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Toast?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Toast Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FF4C00; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Toast Connect. Not affiliated with Toast.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"How's service going tonight? Table status and any kitchen bottlenecks?"},{"type":"ai","text":"Here's your floor status:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eSeated\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e18/24\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e75% full\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAvg Turn\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e48 min\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#F87171;margin-top:1px;\"\u003e-4 min\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eKitchen Q\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e12 items\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e~18 min\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ Table 7: waiting 22min for entrees · 4 tables on dessert\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Flag Table 7 as priority in kitchen and prep the 4 dessert tables for turnover"},{"type":"ai","text":"Table 7 bumped to priority — kitchen ETA now 8 min. Dessert tables 3, 9, 14, 21 flagged for check drop. Waitlist notified: 4 parties ready to seat.","action":"✓ Kitchen priority set · 4 tables prepped for turn · Waitlist alerted"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #FF4C0020; border: 1px solid #FF4C0040;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#FF4C00;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #FF4C00, #FF4C0099)"><span class="font-bold text-[10px]" style="color: #fff">TT</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,648 +0,0 @@
<!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>Toast Connect — AI-Power Your Restaurant in 2 Clicks</title>
<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: {
brand: {
50: '#fff7ed',
100: '#ffedd5',
200: '#fed7aa',
300: '#fdba74',
400: '#fb923c',
500: '#FF4C00',
600: '#e64500',
700: '#c73d00',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #FF4C00 0%, #ff8c42 30%, #f97316 60%, #fbbf24 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 76, 0, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(255, 76, 0, 0.2);
transform: translateY(-4px);
border-color: rgba(255, 76, 0, 0.4);
}
.video-glow {
box-shadow: 0 25px 80px rgba(255, 76, 0, 0.25), 0 10px 40px rgba(0, 0, 0, 0.5);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.pulse-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(255, 76, 0, 0.4);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 76, 0, 0.4), 0 0 40px 0 rgba(255, 76, 0, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(255, 76, 0, 0.6), 0 0 60px 10px rgba(255, 76, 0, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.1);
}
.gradient-border {
background: linear-gradient(135deg, rgba(255, 76, 0, 0.5), rgba(251, 191, 36, 0.5));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: #18181b;
border-radius: calc(1rem - 1px);
}
.text-glow {
text-shadow: 0 0 40px rgba(255, 76, 0, 0.5);
}
@keyframes sizzle {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.sizzle:hover {
animation: sizzle 0.3s ease-in-out;
}
.fire-gradient {
background: linear-gradient(180deg, rgba(255, 76, 0, 0.1) 0%, transparent 100%);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-80 h-80 bg-red-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl tracking-tight">Toast Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-lg font-semibold transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="max-w-4xl mx-auto text-center">
<div class="relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500"></span>
</span>
Open Source + Hosted Cloud
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text text-glow">Toast</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
The complete Toast MCP server. <strong class="text-white">94 tools</strong> for orders, menus, and operations.
No tech headaches. Just connect and serve.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 flex items-center justify-center gap-2 sizzle">
Join the Waitlist
<i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2 backdrop-blur-sm">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex items-center justify-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=41" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=42" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=43" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
<img src="https://i.pravatar.cc/100?img=44" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
</div>
<p class="text-zinc-400 text-sm">
Trusted by <strong class="text-white">500+</strong> restaurants
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your restaurant operations</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/toast.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="clipboard-list" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Orders</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Menus</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Reports</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div>
<span class="inline-block px-3 py-1 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">The Problem</span>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
Running a restaurant + AI<br>
<span class="text-zinc-500">shouldn't be this hard</span>
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4 group">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">86'd item confusion</p>
<p class="text-zinc-500 mt-1">Servers keep selling items you ran out of 20 minutes ago.</p>
</div>
</div>
<div class="flex items-start gap-4 group">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Labor cost overruns</p>
<p class="text-zinc-500 mt-1">Overstaffed on slow nights, understaffed during rush.</p>
</div>
</div>
<div class="flex items-start gap-4 group">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">No actionable sales insights</p>
<p class="text-zinc-500 mt-1">Data exists but nobody has time to analyze it.</p>
</div>
</div>
</div>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8 md:p-10">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="check" class="w-6 h-6 text-white"></i>
</div>
<h3 class="text-2xl font-bold">With Toast Connect</h3>
</div>
<div class="space-y-5">
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
<span>AI updates menu instantly when items run out</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
<span>Smart scheduling based on predicted demand</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
<span>AI identifies your profit drivers daily</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
<span>Works with Claude, GPT, any MCP client</span>
</div>
<div class="flex items-center gap-3 text-lg">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
<span>2-click OAuth — no API key headaches</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 fire-gradient pointer-events-none"></div>
<div class="max-w-6xl mx-auto px-6 relative">
<div class="text-center mb-16">
<span class="inline-block px-3 py-1 rounded-full bg-amber-500/10 text-amber-400 text-sm font-medium mb-4">Features</span>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Toast API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5">
<i data-lucide="clipboard-list" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Order Management</h3>
<p class="text-zinc-400">Access tickets, modifiers, and real-time order flow from every station.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center mb-5">
<i data-lucide="book-open" class="w-7 h-7 text-amber-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Menu Control</h3>
<p class="text-zinc-400">Update items, prices, and availability in real-time across all locations.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5">
<i data-lucide="users" class="w-7 h-7 text-green-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Labor Management</h3>
<p class="text-zinc-400">Track shifts, manage schedules, and monitor labor costs intelligently.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
<i data-lucide="bar-chart-3" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-bold mb-2">Reporting</h3>
<p class="text-zinc-400">Sales mix, peak hours, server performance — all AI-analyzed.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 80 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Guests</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Payments</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Discounts</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Tables</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Inventory</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Modifiers</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Revenue Centers</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Tips</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="flame" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-500">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-500">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@restaurant.com"
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25 sizzle"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 text-lg mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="https://github.com" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold transition-colors group">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/toast-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ Toast MCP Server running</span>
<span class="text-green-400">✓ 94 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
<p class="text-zinc-400">Everything you need to know about Toast Connect</p>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors" open>
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your Toast account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your Toast API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Toast settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Does it work with multiple restaurant locations?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Absolutely. Toast Connect is designed for multi-location restaurant groups. Manage all your locations from a single AI interface,
with location-specific commands and reporting.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
Ready to AI-power your <span class="gradient-text">restaurant?</span>
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 500+ restaurants already automating with Toast Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 sizzle">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-500 to-amber-500 flex items-center justify-center">
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Toast Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition-colors">Privacy</a>
<a href="#" class="hover:text-white transition-colors">Terms</a>
<a href="https://github.com" class="hover:text-white transition-colors">GitHub</a>
<a href="#" class="hover:text-white transition-colors">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Toast Connect. Not affiliated with Toast, Inc.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-amber-500 rounded-full font-semibold transition-all"
>
<i data-lucide="flame" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
touchbistro.html Normal file
View File

@ -0,0 +1,408 @@
<!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>TouchBistro Connect — AI-Power Your Restaurant POS in 2 Clicks</title>
<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&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: {
brand: {
500: '#F26522',
600: '#F26522dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #F26522 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #F2652225, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #F2652220; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #F26522">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">TouchBistro Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #F26522; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #F26522"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">TouchBistro</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete TouchBistro MCP server. Orders, reservations, and reports. <strong class="text-white">58 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #F26522; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/touchbistro.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #F26522; color: #fff">
58 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your TouchBistro data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #F26522, #F2652299)">
<span class="font-bold text-xs" style="color: #fff">TB</span>
</div>
<div>
<div class="font-semibold text-sm">TouchBistro Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 58 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask TouchBistro Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #F26522">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up TouchBistro + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Reservation no-shows</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F2652230">
<i data-lucide="check" class="w-4 h-4" style="color: #F26522"></i>
</div>
<p class="text-white font-medium">AI confirms and reminds</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Menu update delays</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F2652230">
<i data-lucide="check" class="w-4 h-4" style="color: #F26522"></i>
</div>
<p class="text-white font-medium">Instant 86 management</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">End-of-day reporting</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F2652230">
<i data-lucide="check" class="w-4 h-4" style="color: #F26522"></i>
</div>
<p class="text-white font-medium">Real-time dashboards</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full TouchBistro API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F2652220">
<i data-lucide="layers" class="w-5 h-5" style="color: #F26522"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Order Management</h3>
<p class="text-zinc-400 text-sm">Access tickets, mods, and transaction data.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F2652220">
<i data-lucide="layers" class="w-5 h-5" style="color: #F26522"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Reservations</h3>
<p class="text-zinc-400 text-sm">Manage bookings, waitlists, and table turns.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F2652220">
<i data-lucide="layers" class="w-5 h-5" style="color: #F26522"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Menu Management</h3>
<p class="text-zinc-400 text-sm">Update items, prices, and availability.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F2652220">
<i data-lucide="layers" class="w-5 h-5" style="color: #F26522"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
<p class="text-zinc-400 text-sm">Sales, labor, and inventory analytics.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #F26522; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your TouchBistro account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your TouchBistro API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your TouchBistro settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your TouchBistro?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with TouchBistro Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #F26522; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 TouchBistro Connect. Not affiliated with TouchBistro.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"How was the dinner rush? Give me the numbers and any issues."},{"type":"ai","text":"Here's your dinner service report:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eDinner Rev.\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$6,840\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+18%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eCovers\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e142\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+12%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAvg Check\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$48.17\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+5.3%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e🔥 Record Friday dinner · Ribeye special sold out in 90 min\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Double the ribeye order for next Friday and comp Table 12's dessert — they waited too long"},{"type":"ai","text":"Updated next Friday's ribeye prep to 60 portions (from 30). Applied comp to Table 12's dessert ($24) with manager note. Apology card flagged for server.","action":"✓ Prep updated · Comp applied ($24) · Apology noted"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #F2652220; border: 1px solid #F2652240;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#F26522;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #F26522, #F2652299)"><span class="font-bold text-[10px]" style="color: #fff">TB</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,672 +0,0 @@
<!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>TouchBistro Connect — AI-Power Your Restaurant POS in 2 Clicks</title>
<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&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: {
brand: {
50: '#fff7ed',
100: '#ffedd5',
200: '#fed7aa',
300: '#fdba74',
400: '#fb923c',
500: '#F26522',
600: '#ea580c',
700: '#c2410c',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #F26522 0%, #ff8c00 50%, #ffc107 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(242, 101, 34, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 60px rgba(242, 101, 34, 0.2);
transform: translateY(-4px);
border-color: rgba(242, 101, 34, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(242, 101, 34, 0.3); }
50% { box-shadow: 0 0 40px rgba(242, 101, 34, 0.5); }
}
.video-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.animated-gradient {
background: linear-gradient(-45deg, #F26522, #ff8c00, #F26522, #c2410c);
background-size: 400% 400%;
animation: gradient-shift 8s ease infinite;
}
.glow-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.35;
pointer-events: none;
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse-btn {
0%, 100% { box-shadow: 0 0 20px 0 rgba(242, 101, 34, 0.4), 0 0 40px 0 rgba(242, 101, 34, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(242, 101, 34, 0.6), 0 0 60px 10px rgba(242, 101, 34, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse-btn 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.feature-icon {
transition: all 0.3s ease;
}
.card-glow:hover .feature-icon {
transform: scale(1.1);
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.shimmer {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
.restaurant-pattern {
background-image: radial-gradient(circle at 1px 1px, rgba(242, 101, 34, 0.1) 1px, transparent 0);
background-size: 40px 40px;
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Orbs -->
<div class="glow-orb w-96 h-96 bg-orange-500 top-20 -left-48 fixed animate-float-slow"></div>
<div class="glow-orb w-72 h-72 bg-yellow-500 top-1/2 -right-36 fixed animate-float-delayed"></div>
<div class="glow-orb w-64 h-64 bg-orange-600 bottom-20 left-1/4 fixed animate-float"></div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-yellow-500 flex items-center justify-center shadow-lg shadow-brand-500/20">
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">TouchBistro Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/20 hover:shadow-brand-500/40">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="absolute inset-0 restaurant-pattern opacity-30"></div>
<div class="max-w-4xl mx-auto px-6 py-20 relative">
<div class="flex flex-col items-center text-center">
<div class="relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">TouchBistro</span> to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed max-w-3xl mx-auto">
The complete TouchBistro MCP server. <strong class="text-white">58 tools</strong> for orders, reservations, and reports.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-xl shadow-brand-500/25 relative overflow-hidden">
<span class="relative z-10">Join the Waitlist</span>
<div class="absolute inset-0 shimmer"></div>
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Restaurant Stats -->
<div class="flex flex-wrap justify-center gap-6">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center border border-brand-500/20">
<i data-lucide="receipt" class="w-6 h-6 text-brand-400"></i>
</div>
<div class="text-left">
<div class="text-2xl font-bold">58</div>
<div class="text-sm text-zinc-500">API Tools</div>
</div>
</div>
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-yellow-500/10 flex items-center justify-center border border-yellow-500/20">
<i data-lucide="clock" class="w-6 h-6 text-yellow-400"></i>
</div>
<div class="text-left">
<div class="text-2xl font-bold">2 min</div>
<div class="text-sm text-zinc-500">Setup Time</div>
</div>
</div>
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center border border-green-500/20">
<i data-lucide="trending-up" class="w-6 h-6 text-green-400"></i>
</div>
<div class="text-left">
<div class="text-2xl font-bold">24/7</div>
<div class="text-sm text-zinc-500">AI Uptime</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your restaurant operations</p>
</div>
<div class="bg-gradient-to-r from-brand-500/50 to-yellow-500/20 p-[1px] rounded-2xl">
<div class="bg-zinc-900 rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/touchbistro.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="shopping-cart" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Orders</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="calendar-days" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Reservations</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Reports</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-16 items-center">
<div>
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">The Problem</span>
<h2 class="text-3xl md:text-5xl font-bold mb-8 leading-tight">
Setting up TouchBistro + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Reservation no-shows</p>
<p class="text-zinc-500 mt-1">Empty tables at prime time because guests forgot or ghosted.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">Menu update delays</p>
<p class="text-zinc-500 mt-1">86'd items still showing. Guests order, kitchen can't deliver.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-lg">End-of-day reporting chaos</p>
<p class="text-zinc-500 mt-1">Hours spent reconciling sales, tips, and inventory.</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-xl relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl"></div>
<div class="relative">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-yellow-500 flex items-center justify-center shadow-lg shadow-brand-500/30">
<i data-lucide="check" class="w-6 h-6 text-white"></i>
</div>
<h3 class="text-2xl font-bold">With TouchBistro Connect</h3>
</div>
<div class="space-y-4 text-lg">
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>AI confirms and reminds guests</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>Instant 86 management</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>Real-time dashboards</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>Works with Claude, GPT, any MCP client</p>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
<p>Full API access — 58 tools ready</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">Features</span>
<h2 class="text-3xl md:text-5xl font-bold mb-6">Everything you need</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full TouchBistro API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5 border border-brand-500/20">
<i data-lucide="shopping-cart" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Order Management</h3>
<p class="text-zinc-400 leading-relaxed">Access tickets, mods, and transaction data in real-time.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-yellow-500/20 to-yellow-500/5 flex items-center justify-center mb-5 border border-yellow-500/20">
<i data-lucide="calendar-days" class="w-7 h-7 text-yellow-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Reservations</h3>
<p class="text-zinc-400 leading-relaxed">Manage bookings, waitlists, and table turns automatically.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5 border border-green-500/20">
<i data-lucide="book-open" class="w-7 h-7 text-green-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Menu Management</h3>
<p class="text-zinc-400 leading-relaxed">Update items, prices, and availability instantly.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5 border border-purple-500/20">
<i data-lucide="bar-chart-3" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-bold mb-3">Reporting</h3>
<p class="text-zinc-400 leading-relaxed">Sales, labor, and inventory analytics on demand.</p>
</div>
</div>
<div class="mt-16 text-center">
<p class="text-zinc-400 mb-6">+ 40 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Table Management</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Staff Scheduling</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Inventory Tracking</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Payments</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Tips & Gratuity</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Kitchen Display</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Customer Profiles</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Loyalty Programs</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-2xl mx-auto px-6 relative">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-semibold mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-6">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-2xl">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="+1 (555) 000-0000"
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email <span class="text-zinc-500">(optional)</span></label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25 relative overflow-hidden"
>
<span class="relative z-10">Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5 relative z-10"></i>
<div class="absolute inset-0 shimmer"></div>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-lucide="check" class="w-10 h-10 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<div id="error-message" class="hidden mt-4 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-center">
Something went wrong. Please try again.
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const submitBtn = document.getElementById('submit-btn');
const successMsg = document.getElementById('success-message');
submitBtn.disabled = true;
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
await new Promise(r => setTimeout(r, 1000));
form.classList.add('hidden');
successMsg.classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-xl">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 text-lg mb-8 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold text-lg group">
View on GitHub
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-inner">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/touchbistro-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ TouchBistro MCP Server running</span>
<span class="text-green-400">✓ 58 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">FAQ</span>
<h2 class="text-3xl md:text-4xl font-bold">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
For the hosted version, no. Just connect your TouchBistro account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Yes. We use OAuth 2.0 and never store your TouchBistro API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your TouchBistro settings.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can my kitchen staff use this?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Absolutely! AI can help with menu updates, 86 management, and answering questions about orders.
Train it once on your menu and processes, and it works 24/7.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 hero-glow"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your TouchBistro?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join restaurants already automating with TouchBistro Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25 relative overflow-hidden">
<span class="relative z-10">Join the Waitlist</span>
<div class="absolute inset-0 shimmer"></div>
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-yellow-500 flex items-center justify-center">
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">TouchBistro Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 TouchBistro Connect. Not affiliated with TouchBistro.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
trello.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Trello Connect — AI-Power Your Boards in 2 Clicks</title>
<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&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: {
brand: {
500: '#0079BF',
600: '#0079BFdd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #0079BF 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #0079BF25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #0079BF20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0079BF">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Trello Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #0079BF; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #0079BF"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Trello</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Trello MCP server. Boards, cards, and lists — fully automated. <strong class="text-white">89 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #0079BF; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/trello.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #0079BF; color: #fff">
89 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Trello data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #0079BF, #0079BF99)">
<span class="font-bold text-xs" style="color: #fff">TR</span>
</div>
<div>
<div class="font-semibold text-sm">Trello Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 89 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Trello Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0079BF">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Trello + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Manual card shuffling</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0079BF30">
<i data-lucide="check" class="w-4 h-4" style="color: #0079BF"></i>
</div>
<p class="text-white font-medium">AI moves cards based on status</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Forgetting due dates</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0079BF30">
<i data-lucide="check" class="w-4 h-4" style="color: #0079BF"></i>
</div>
<p class="text-white font-medium">Proactive deadline reminders</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Scattered project updates</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0079BF30">
<i data-lucide="check" class="w-4 h-4" style="color: #0079BF"></i>
</div>
<p class="text-white font-medium">AI summarizes board activity</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Trello API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0079BF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0079BF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Card Management</h3>
<p class="text-zinc-400 text-sm">Create, move, update cards. Full control over your workflow.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0079BF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0079BF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Board Operations</h3>
<p class="text-zinc-400 text-sm">Manage lists, labels, and board settings programmatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0079BF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0079BF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Checklists & Due Dates</h3>
<p class="text-zinc-400 text-sm">Track progress, set deadlines, manage subtasks.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0079BF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #0079BF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Member Actions</h3>
<p class="text-zinc-400 text-sm">Assign cards, manage permissions, coordinate teams.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #0079BF; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Trello account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Trello API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Trello settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Trello?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Trello Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #0079BF; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Trello Connect. Not affiliated with Trello.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"What's the status of our Q1 launch board? Any blockers?"},{"type":"ai","text":"Here's your sprint board:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:6px;\"\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eTo Do\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#6B728020;border:1px solid #6B728040;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#6B7280;\"\u003e5\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eIn Progress\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#F59E0B20;border:1px solid #F59E0B40;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F59E0B;\"\u003e8\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eReview\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#8B5CF620;border:1px solid #8B5CF640;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#8B5CF6;\"\u003e3\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eDone\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#10B98120;border:1px solid #10B98140;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#10B981;\"\u003e14\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ 2 cards overdue · 1 blocked on design approval\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Move the 3 review cards to done and assign next sprint's top priority to Sarah"},{"type":"ai","text":"All 3 review cards moved to Done. Assigned \"API Integration v2\" to Sarah with a Monday deadline. Board completion is now at 57%.","action":"✓ 3 cards moved · 1 assigned · Sprint updated"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #0079BF20; border: 1px solid #0079BF40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#0079BF;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #0079BF, #0079BF99)"><span class="font-bold text-[10px]" style="color: #fff">TR</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,624 +0,0 @@
<!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>Trello Connect — AI-Power Your Boards in 2 Clicks</title>
<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&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: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#0079BF',
600: '#0067a3',
700: '#005587',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #0079BF 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 121, 191, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 40px rgba(0, 121, 191, 0.15);
transform: translateY(-4px);
}
.video-glow {
box-shadow: 0 0 80px rgba(0, 121, 191, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
animation-delay: -1.5s;
}
.animate-pulse-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes pulse-glow {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 121, 191, 0.4), 0 0 40px 0 rgba(0, 121, 191, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(0, 121, 191, 0.6), 0 0 60px 10px rgba(0, 121, 191, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.gradient-border {
background: linear-gradient(135deg, #0079BF, #8b5cf6, #ec4899);
padding: 2px;
border-radius: 1rem;
}
.gradient-border-inner {
background: #09090b;
border-radius: calc(1rem - 2px);
}
.feature-icon {
background: linear-gradient(135deg, rgba(0, 121, 191, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
}
.bg-grid {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}
/* Floating Trello cards */
.floating-card {
background: linear-gradient(135deg, rgba(0, 121, 191, 0.1), rgba(139, 92, 246, 0.05));
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
<!-- Floating decorative elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-10 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float-slow"></div>
<!-- Decorative floating cards (Trello-themed) -->
<div class="absolute top-1/3 right-1/4 floating-card w-32 h-20 rounded-lg animate-float opacity-30"></div>
<div class="absolute bottom-1/3 left-1/5 floating-card w-28 h-16 rounded-lg animate-float-delayed opacity-20"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Trello Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105 transform">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="max-w-4xl mx-auto px-6 py-20">
<div class="flex flex-col items-center text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">Trello</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
The complete Trello MCP server. <strong class="text-white">89 tools</strong> covering boards, cards, and lists.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 flex items-center justify-center gap-2">
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">10,000+</strong> project managers
</p>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your project workflow</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/trello.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="sticky-note" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Cards</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="layout-dashboard" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Boards</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="check-square" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">Checklists</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up Trello + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Pain Point 1 -->
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<p class="font-medium text-zinc-400">Manual card shuffling</p>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
</div>
<p class="font-semibold text-white">AI moves cards based on status</p>
</div>
</div>
<!-- Pain Point 2 -->
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<p class="font-medium text-zinc-400">Forgetting due dates</p>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
</div>
<p class="font-semibold text-white">Proactive deadline reminders</p>
</div>
</div>
<!-- Pain Point 3 -->
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<p class="font-medium text-zinc-400">Scattered project updates</p>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
</div>
<p class="font-semibold text-white">AI summarizes board activity</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</span>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Trello API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="sticky-note" class="w-7 h-7 text-brand-500"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Card Management</h3>
<p class="text-zinc-400">Create, move, update cards. Full control over your workflow.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="layout-dashboard" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Board Operations</h3>
<p class="text-zinc-400">Manage lists, labels, and board settings programmatically.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="check-square" class="w-7 h-7 text-pink-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Checklists & Dates</h3>
<p class="text-zinc-400">Track progress, set deadlines, manage subtasks.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="users" class="w-7 h-7 text-orange-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Member Actions</h3>
<p class="text-zinc-400">Assign cards, manage permissions, coordinate teams.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ 80 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Labels</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Attachments</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Comments</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Power-Ups</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Webhooks</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Custom Fields</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const successMsg = document.getElementById('success-message');
form.classList.add('hidden');
successMsg.classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/trello-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ Trello MCP Server running</span>
<span class="text-green-400">✓ 89 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
For the hosted version, no. Just connect your Trello account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
Yes. We use OAuth 2.0 and never store your Trello API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Trello settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Trello?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join thousands of project managers already automating with Trello Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center">
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Trello Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Trello Connect. Not affiliated with Trello.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
wave.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Wave Connect — AI-Power Your Accounting in 2 Clicks</title>
<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&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: {
brand: {
500: '#165DFF',
600: '#165DFFdd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #165DFF 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #165DFF25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #165DFF20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #165DFF">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Wave Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #165DFF; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #165DFF"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Wave</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Wave MCP server. Invoices, receipts, and reports. <strong class="text-white">42 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #165DFF; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/wave.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #165DFF; color: #fff">
42 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Wave data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #165DFF, #165DFF99)">
<span class="font-bold text-xs" style="color: #fff">WV</span>
</div>
<div>
<div class="font-semibold text-sm">Wave Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 42 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Wave Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #165DFF">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Wave + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Shoebox of receipts</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #165DFF30">
<i data-lucide="check" class="w-4 h-4" style="color: #165DFF"></i>
</div>
<p class="text-white font-medium">AI categorizes everything</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Inconsistent invoicing</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #165DFF30">
<i data-lucide="check" class="w-4 h-4" style="color: #165DFF"></i>
</div>
<p class="text-white font-medium">Automated billing cycles</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Accounting anxiety</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #165DFF30">
<i data-lucide="check" class="w-4 h-4" style="color: #165DFF"></i>
</div>
<p class="text-white font-medium">AI keeps books clean</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Wave API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #165DFF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #165DFF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Invoice Management</h3>
<p class="text-zinc-400 text-sm">Create, send, track invoices automatically.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #165DFF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #165DFF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Receipt Scanning</h3>
<p class="text-zinc-400 text-sm">Capture expenses, categorize, attach to records.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #165DFF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #165DFF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Banking</h3>
<p class="text-zinc-400 text-sm">Connect accounts, categorize transactions, reconcile.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #165DFF20">
<i data-lucide="layers" class="w-5 h-5" style="color: #165DFF"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Reports</h3>
<p class="text-zinc-400 text-sm">P&L, balance sheet, cash flow — on demand.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #165DFF; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Wave account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Wave API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Wave settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Wave?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Wave Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #165DFF; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Wave Connect. Not affiliated with Wave.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"Pull up my P&L for this quarter. How are we tracking against budget?"},{"type":"ai","text":"Here's your Q2 P&L summary:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eRevenue\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#34D399;\"\u003e$128,400\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eCOGS\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#F3F4F6;\"\u003e$38,520\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eGross Profit\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#34D399;\"\u003e$89,880\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eNet Income\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#34D399;\"\u003e$34,200\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#FBBF24;\"\u003e📈 12% above budget · Net margin: 26.6%\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Export this as PDF for our investor meeting and flag any unusual expenses"},{"type":"ai","text":"Generated Q2 P&L report (PDF). Flagged 2 anomalies: Software subscriptions up 34% ($2,100 over budget) and travel up 28%. Both itemized in the appendix.","action":"✓ PDF exported · 2 anomalies flagged · Investor-ready format"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #165DFF20; border: 1px solid #165DFF40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#165DFF;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #165DFF, #165DFF99)"><span class="font-bold text-[10px]" style="color: #fff">WV</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,769 +0,0 @@
<!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>Wave Connect — AI-Power Your Accounting in 2 Clicks</title>
<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&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: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#165DFF',
500: '#1447cc',
600: '#1036a3',
700: '#0c2a7a',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #165DFF 0%, #0c2a7a 50%, #1e1b4b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-hero {
background: linear-gradient(135deg, #165DFF 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(22, 93, 255, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 50px rgba(22, 93, 255, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transform: translateY(-4px);
border-color: rgba(22, 93, 255, 0.3);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(22, 93, 255, 0.4); }
50% { box-shadow: 0 0 40px rgba(22, 93, 255, 0.6); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.shimmer-border {
background: linear-gradient(90deg, transparent, rgba(22, 93, 255, 0.3), transparent);
background-size: 200% 100%;
animation: shimmer 3s infinite;
}
.video-glow {
box-shadow: 0 0 80px rgba(22, 93, 255, 0.2), 0 0 120px rgba(22, 93, 255, 0.1);
}
.btn-primary {
background: linear-gradient(135deg, #165DFF 0%, #1447cc 100%);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: scale(1.05);
box-shadow: 0 0 30px rgba(22, 93, 255, 0.5);
}
.feature-icon {
background: linear-gradient(135deg, rgba(22, 93, 255, 0.2) 0%, rgba(22, 93, 255, 0.05) 100%);
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(22, 93, 255, 0.4), 0 0 40px 0 rgba(22, 93, 255, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(22, 93, 255, 0.6), 0 0 60px 10px rgba(22, 93, 255, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
transform: scale(1.1);
}
.stat-card {
background: linear-gradient(135deg, rgba(22, 93, 255, 0.1) 0%, transparent 100%);
}
@keyframes count-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.number-highlight {
background: linear-gradient(135deg, #165DFF 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
<!-- Floating Background Elements -->
<div class="fixed inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-1/4 left-10 w-72 h-72 bg-brand-400/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute bottom-1/4 left-1/3 w-64 h-64 bg-cyan-500/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl 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-brand-400 to-brand-600 flex items-center justify-center shadow-lg shadow-brand-400/20">
<i data-lucide="bar-chart-3" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Wave Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
<a href="#pricing" class="btn-primary px-5 py-2.5 rounded-xl font-semibold text-white">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="max-w-4xl mx-auto px-6 py-20 text-center">
<div class="flex flex-col items-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
Free for Small Businesses
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text-hero">Wave</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
The complete Wave MCP server. <strong class="text-white">42 tools</strong> for invoices, receipts, and reports.
Simplify your accounting with AI.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="btn-primary w-full sm:w-auto px-8 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
Join the Waitlist
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Stats Row -->
<div class="grid grid-cols-3 gap-8 max-w-md mx-auto">
<div class="text-center">
<p class="text-3xl font-bold number-highlight">42</p>
<p class="text-sm text-zinc-500">API Tools</p>
</div>
<div class="text-center">
<p class="text-3xl font-bold number-highlight">2 min</p>
<p class="text-sm text-zinc-500">Setup Time</p>
</div>
<div class="text-center">
<p class="text-3xl font-bold number-highlight">100%</p>
<p class="text-sm text-zinc-500">API Coverage</p>
</div>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your accounting workflow</p>
</div>
<div class="rounded-2xl p-[1px] bg-gradient-to-br from-brand-400/50 to-purple-500/20">
<div class="bg-zinc-900 rounded-2xl p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/wave.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="file-text" class="w-4 h-4 text-brand-400"></i>
<span class="text-sm text-zinc-300">Invoices</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="receipt" class="w-4 h-4 text-brand-400"></i>
<span class="text-sm text-zinc-300">Expenses</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="pie-chart" class="w-4 h-4 text-brand-400"></i>
<span class="text-sm text-zinc-300">Reports</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Accounting + AI<br>
<span class="text-zinc-500">shouldn't be complicated</span>
</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">
Stop dreading your bookkeeping. Let AI handle the tedious work while you focus on your business.
</p>
</div>
<div class="grid md:grid-cols-2 gap-8 items-stretch">
<!-- Problems -->
<div class="space-y-4">
<h3 class="text-lg font-semibold text-red-400 mb-6 flex items-center gap-2">
<i data-lucide="x-circle" class="w-5 h-5"></i>
The Old Way
</h3>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Shoebox of receipts</p>
<p class="text-zinc-500">Piles of paper receipts waiting to be entered. Tax season panic mode.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Inconsistent invoicing</p>
<p class="text-zinc-500">Some months you invoice on time. Others... not so much.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Accounting anxiety</p>
<p class="text-zinc-500">Always worried if your books are right. Afraid of what you'll find.</p>
</div>
</div>
</div>
</div>
<!-- Solutions -->
<div class="space-y-4">
<h3 class="text-lg font-semibold text-brand-400 mb-6 flex items-center gap-2">
<i data-lucide="check-circle" class="w-5 h-5"></i>
With Wave Connect
</h3>
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">AI categorizes everything</p>
<p class="text-zinc-400">Snap a photo, AI does the rest. Perfectly categorized, every time.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">Automated billing cycles</p>
<p class="text-zinc-400">Set it and forget it. Invoices go out on time, every time.</p>
</div>
</div>
</div>
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
</div>
<div>
<p class="font-semibold text-white mb-1">AI keeps books clean</p>
<p class="text-zinc-400">Always know where you stand. Real-time financial clarity.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/10 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Wave API access through one simple connection. 42 tools at your fingertips.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="file-text" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Invoice Management</h3>
<p class="text-zinc-400 leading-relaxed">Create, send, track invoices automatically. Get paid faster.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="scan" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Receipt Scanning</h3>
<p class="text-zinc-400 leading-relaxed">Capture expenses, categorize, attach to records instantly.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="landmark" class="w-7 h-7 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Banking</h3>
<p class="text-zinc-400 leading-relaxed">Connect accounts, categorize transactions, reconcile effortlessly.</p>
</div>
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
<i data-lucide="pie-chart" class="w-7 h-7 text-pink-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Reports</h3>
<p class="text-zinc-400 leading-relaxed">P&L, balance sheet, cash flow — on demand, anytime.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-6">+ 38 more tools including:</p>
<div class="flex flex-wrap justify-center gap-3">
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Customer Management</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Vendor Payments</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Tax Prep</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Multi-Currency</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Estimates</span>
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Recurring Billing</span>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-400/10 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="terminal" class="w-4 h-4 text-brand-400"></i>
How It Works
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Just talk to Claude
</h2>
<p class="text-zinc-400 mb-8 leading-relaxed">
No accounting jargon required. Just describe what you need in plain English and Claude handles
the bookkeeping through your Wave account.
</p>
<div class="space-y-4">
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<span class="text-zinc-300">"Create an invoice for Acme Corp, $500"</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<span class="text-zinc-300">"Categorize last week's expenses"</span>
</div>
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
</div>
<span class="text-zinc-300">"Show me my P&L for Q4"</span>
</div>
</div>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Claude + Wave</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">You:</span> How much did I spend on
software this month?
<span class="text-brand-400">Claude:</span> Let me check your expenses...
<span class="text-zinc-500">→ Using:</span> wave_get_expenses
<span class="text-zinc-500">→ Category:</span> Software
<span class="text-zinc-500">→ Period:</span> This month
<span class="text-green-400">✓ Found 8 transactions</span>
<span class="text-brand-400">Claude:</span> You spent <span class="text-white">$847.32</span> on
software this month:
• Figma: $45
• AWS: $312.32
• Notion: $96
• GitHub: $44
...</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-400/5 rounded-full blur-3xl"></div>
<form id="waitlist-form" class="space-y-6 relative z-10">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
>
</div>
<button
type="submit"
id="submit-btn"
class="btn-primary w-full py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-20 h-20 bg-brand-400/20 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-lucide="check" class="w-10 h-10 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
<div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-8 leading-relaxed">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle of managing infrastructure.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300"><code><span class="text-zinc-500">$</span> git clone github.com/wave-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ Wave MCP Server running</span>
<span class="text-brand-400">✓ 42 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">Frequently asked questions</h2>
<p class="text-zinc-400">Everything you need to know about Wave Connect</p>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is Wave really free?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Wave's accounting software is free. Wave Connect (this integration) will have a free tier for basic usage,
with paid tiers for higher volume. We believe every small business should have access to AI-powered accounting.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Is my financial data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Absolutely. We use OAuth 2.0 and never store your Wave credentials. Data flows directly between Claude and Wave —
we don't store your financial information. All connections are encrypted with bank-level security.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Can AI make mistakes with my accounting?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Claude always confirms before taking important actions. For sensitive operations like deleting transactions or sending invoices,
you'll see a preview and confirm. Think of it as a very smart assistant that always double-checks with you.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-semibold text-lg">Do I need accounting experience?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400 leading-relaxed">
Not at all! That's the beauty of AI. Just describe what you need in plain English: "Send an invoice to John for last week's work"
or "How much did I spend on marketing?" Claude handles the accounting complexity.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="absolute inset-0 bg-gradient-to-t from-brand-400/5 to-transparent"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Wave?
</h2>
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
Join small businesses already automating their accounting with Wave Connect. Be first in line for early access.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="btn-primary w-full sm:w-auto px-10 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
Join the Waitlist
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-10 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
Watch Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<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-brand-400 to-brand-600 flex items-center justify-center">
<i data-lucide="bar-chart-3" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Wave Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition-colors">Privacy</a>
<a href="#" class="hover:text-white transition-colors">Terms</a>
<a href="#" class="hover:text-white transition-colors">GitHub</a>
<a href="#" class="hover:text-white transition-colors">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Wave Connect. Not affiliated with Wave Financial.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-400 to-brand-600 rounded-full font-semibold text-white transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
// Form submission
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
// Sticky CTA visibility
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
wrike.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Wrike Connect — AI-Power Your Workflows in 2 Clicks</title>
<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&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: {
brand: {
500: '#08CF65',
600: '#08CF65dd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #08CF65 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #08CF6525, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #08CF6520; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #08CF65">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Wrike Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #08CF65; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #08CF65"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Wrike</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Wrike MCP server. Projects, tasks, and collaboration. <strong class="text-white">98 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #08CF65; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/wrike.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #08CF65; color: #fff">
98 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Wrike data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #08CF65, #08CF6599)">
<span class="font-bold text-xs" style="color: #fff">WR</span>
</div>
<div>
<div class="font-semibold text-sm">Wrike Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 98 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Wrike Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #08CF65">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Wrike + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Project status chaos</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #08CF6530">
<i data-lucide="check" class="w-4 h-4" style="color: #08CF65"></i>
</div>
<p class="text-white font-medium">AI dashboards everything</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Approval bottlenecks</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #08CF6530">
<i data-lucide="check" class="w-4 h-4" style="color: #08CF65"></i>
</div>
<p class="text-white font-medium">AI routes and reminds reviewers</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Resource conflicts</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #08CF6530">
<i data-lucide="check" class="w-4 h-4" style="color: #08CF65"></i>
</div>
<p class="text-white font-medium">AI optimizes team allocation</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Wrike API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #08CF6520">
<i data-lucide="layers" class="w-5 h-5" style="color: #08CF65"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Task Management</h3>
<p class="text-zinc-400 text-sm">Create, assign, track tasks across projects.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #08CF6520">
<i data-lucide="layers" class="w-5 h-5" style="color: #08CF65"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Project Ops</h3>
<p class="text-zinc-400 text-sm">Manage folders, timelines, and dependencies.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #08CF6520">
<i data-lucide="layers" class="w-5 h-5" style="color: #08CF65"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Time & Budget</h3>
<p class="text-zinc-400 text-sm">Track hours, expenses, and project budgets.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #08CF6520">
<i data-lucide="layers" class="w-5 h-5" style="color: #08CF65"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Approvals</h3>
<p class="text-zinc-400 text-sm">Route reviews, collect feedback, manage sign-offs.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #08CF65; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Wrike account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Wrike API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Wrike settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Wrike?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Wrike Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #08CF65; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Wrike Connect. Not affiliated with Wrike.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"We have a client deliverable Thursday. Where are we on the project?"},{"type":"ai","text":"Here's the project status:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:6px;\"\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eNot Started\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#EF444420;border:1px solid #EF444440;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#EF4444;\"\u003e2\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eIn Progress\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#F59E0B20;border:1px solid #F59E0B40;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F59E0B;\"\u003e5\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eIn Review\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#8B5CF620;border:1px solid #8B5CF640;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#8B5CF6;\"\u003e3\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eApproved\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#10B98120;border:1px solid #10B98140;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#10B981;\"\u003e11\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ 2 tasks not started · Deadline: 48 hours · At risk\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Assign the 2 unstarted tasks to available team members and fast-track the reviews"},{"type":"ai","text":"Assigned \"Asset Export\" to Chris (available) and \"QA Checklist\" to Dana. Sent review nudges to 3 approvers with Thursday deadline flagged.","action":"✓ 2 tasks assigned · 3 review reminders sent · Deadline tracked"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #08CF6520; border: 1px solid #08CF6540;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#08CF65;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #08CF65, #08CF6599)"><span class="font-bold text-[10px]" style="color: #fff">WR</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,620 +0,0 @@
<!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>Wrike Connect — AI-Power Your Workflows in 2 Clicks</title>
<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&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: {
brand: {
50: '#ecfdf5',
100: '#d1fae5',
200: '#a7f3d0',
300: '#6ee7b7',
400: '#34d399',
500: '#08CF65',
600: '#059669',
700: '#047857',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #08CF65 0%, #06b557 50%, #059669 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(8, 207, 101, 0.2), transparent);
}
.card-glow:hover {
box-shadow: 0 0 60px rgba(8, 207, 101, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(-4px);
}
.video-glow {
box-shadow: 0 0 80px rgba(8, 207, 101, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite 2s;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite 1s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(8, 207, 101, 0.4); }
50% { box-shadow: 0 0 40px rgba(8, 207, 101, 0.6); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(8, 207, 101, 0.4), 0 0 40px 0 rgba(8, 207, 101, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(8, 207, 101, 0.6), 0 0 60px 10px rgba(8, 207, 101, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.feature-icon {
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.gradient-border {
background: linear-gradient(135deg, rgba(8, 207, 101, 0.5), rgba(6, 181, 87, 0.2));
padding: 1px;
border-radius: 1rem;
}
.gradient-border-inner {
background: rgb(24 24 27);
border-radius: calc(1rem - 1px);
}
.text-shadow {
text-shadow: 0 0 40px rgba(8, 207, 101, 0.5);
}
.bg-grid {
background-image:
linear-gradient(rgba(8, 207, 101, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(8, 207, 101, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Floating Background Elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-emerald-500/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-green-400/5 rounded-full blur-3xl animate-float-slow"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
<i data-lucide="workflow" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Wrike Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20 bg-grid">
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text text-shadow">Wrike</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10">
The most comprehensive Wrike MCP server. <strong class="text-white">98 tools</strong> covering projects, tasks, and collaboration.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col items-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">300+</strong> project teams worldwide
</p>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your Wrike workflows</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/wrike.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="zap" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">98 API Tools</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="clock" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">2-Click Setup</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4 text-brand-500"></i>
<span class="text-sm text-zinc-300">OAuth 2.0</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">
Managing Wrike + AI<br>
<span class="text-zinc-500">shouldn't be a full-time job</span>
</h2>
<div class="space-y-5">
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-medium text-white">Project status chaos</p>
<p class="text-zinc-500 text-sm mt-1">Constantly switching between tools to track progress across teams.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-medium text-white">Approval bottlenecks</p>
<p class="text-zinc-500 text-sm mt-1">Reviews get stuck. Deadlines slip. Everyone's frustrated.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<div>
<p class="font-medium text-white">Resource conflicts</p>
<p class="text-zinc-500 text-sm mt-1">Team members overbooked. Projects understaffed. No visibility.</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-8 shadow-2xl">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
</div>
<h3 class="text-2xl font-semibold">With Wrike Connect</h3>
</div>
<div class="space-y-4">
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>AI dashboards everything automatically</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>Smart routing & reviewer reminders</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>AI optimizes team allocation</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>Works with Claude, GPT, any MCP client</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
<span>Automatic token refresh forever</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Wrike API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:bg-brand-500/20 transition-all">
<i data-lucide="check-square" class="w-7 h-7 text-brand-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Task Management</h3>
<p class="text-zinc-400">Create, assign, track tasks across projects. Full CRUD with dependencies.</p>
</div>
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:bg-purple-500/20 transition-all">
<i data-lucide="folder-kanban" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Project Ops</h3>
<p class="text-zinc-400">Manage folders, timelines, and dependencies. Full project lifecycle control.</p>
</div>
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-5 group-hover:bg-cyan-500/20 transition-all">
<i data-lucide="clock" class="w-7 h-7 text-cyan-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Time & Budget</h3>
<p class="text-zinc-400">Track hours, expenses, and project budgets. Real-time cost visibility.</p>
</div>
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
<div class="feature-icon w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center mb-5 group-hover:bg-amber-500/20 transition-all">
<i data-lucide="badge-check" class="w-7 h-7 text-amber-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Approvals</h3>
<p class="text-zinc-400">Route reviews, collect feedback, manage sign-offs. Never miss a deadline.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ 90 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Comments</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Attachments</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Custom Fields</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Workflows</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Teams</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Reports</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Timelogs</span>
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Webhooks</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="Your phone number"
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6">
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
e.preventDefault();
this.classList.add('hidden');
document.getElementById('success-message').classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-2xl">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4 transition group-hover:translate-x-1"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/wrike-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-brand-400">✓ Wrike MCP Server running</span>
<span class="text-brand-400">✓ 98 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
For the hosted version, no. Just connect your Wrike account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
Yes. We use OAuth 2.0 and never store your Wrike API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Wrike settings.
</p>
</details>
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium">Can I use this with other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Wrike?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join 300+ project teams already automating with Wrike Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/25">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-600 flex items-center justify-center">
<i data-lucide="workflow" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Wrike Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition flex items-center gap-1">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub
</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Wrike Connect. Not affiliated with Wrike.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-emerald-600 rounded-full font-semibold transition-all transform hover:scale-110"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>

408
zendesk.html Normal file
View File

@ -0,0 +1,408 @@
<!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>Zendesk Connect — AI-Power Your Support in 2 Clicks</title>
<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&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: {
brand: {
500: '#03363D',
600: '#03363Ddd',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #03363D 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #03363D25, transparent); }
.card-glow:hover { box-shadow: 0 0 40px #03363D20; }
/* Chat demo styles */
.chat-demo-container {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
}
.chat-embed {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.06);
}
.status-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #03363D">
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
</div>
<span class="font-bold text-xl">Zendesk Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #03363D; color: #fff">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center hero-glow pt-20">
<div class="max-w-6xl mx-auto px-6 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #03363D"></span>
Open Source + Hosted
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Connect <span class="gradient-text">Zendesk</span><br>to AI in 2 Clicks
</h1>
<p class="text-xl text-zinc-400 mb-8">
The complete Zendesk MCP server. Tickets, users, and automations — all AI-accessible. <strong class="text-white">156 tools</strong> ready to automate.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #03363D; color: #fff">
Join the Waitlist
</a>
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
See Features
</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
<video autoplay loop muted playsinline class="w-full">
<source src="../output/zendesk.mp4" type="video/mp4">
</video>
</div>
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #03363D; color: #fff">
156 API Tools
</div>
</div>
</div>
</div>
</section>
<!-- Chat Demo -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Zendesk data in real-time</p>
<div class="chat-demo-container">
<!-- Chat header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #03363D, #03363D99)">
<span class="font-bold text-xs" style="color: #fff">ZD</span>
</div>
<div>
<div class="font-semibold text-sm">Zendesk Connect AI</div>
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
Online · 156 tools available
</div>
</div>
</div>
<!-- Chat messages -->
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
<!-- Messages animated in via JS -->
</div>
<!-- Chat input -->
<div class="px-4 pb-4">
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
<input type="text" placeholder="Ask Zendesk Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #03363D">
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Setting up Zendesk + AI<br><span class="text-zinc-500">shouldn't take a week</span>
</h2>
<div class="grid md:grid-cols-3 gap-8 mt-12">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Drowning in ticket queues</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #03363D30">
<i data-lucide="check" class="w-4 h-4" style="color: #03363D"></i>
</div>
<p class="text-white font-medium">AI triages and prioritizes automatically</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Slow first response times</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #03363D30">
<i data-lucide="check" class="w-4 h-4" style="color: #03363D"></i>
</div>
<p class="text-white font-medium">Instant AI-drafted replies</p>
</div>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<div class="flex items-start gap-3 mb-4">
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
</div>
<p class="text-zinc-400">Context switching constantly</p>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #03363D30">
<i data-lucide="check" class="w-4 h-4" style="color: #03363D"></i>
</div>
<p class="text-white font-medium">AI surfaces relevant ticket history</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
<p class="text-zinc-400 text-center mb-12">Full Zendesk API access through one simple connection</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #03363D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #03363D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Ticket Management</h3>
<p class="text-zinc-400 text-sm">Create, update, resolve tickets. Full CRUD on your queue.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #03363D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #03363D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">User & Org Data</h3>
<p class="text-zinc-400 text-sm">Access customer history, tags, and organization details.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #03363D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #03363D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Automations</h3>
<p class="text-zinc-400 text-sm">Trigger macros, update fields, route tickets intelligently.</p>
</div>
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #03363D20">
<i data-lucide="layers" class="w-5 h-5" style="color: #03363D"></i>
</div>
<h3 class="font-semibold text-lg mb-2">Analytics</h3>
<p class="text-zinc-400 text-sm">Pull satisfaction scores, response times, agent performance.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-20 border-t border-zinc-800/50">
<div class="max-w-xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #03363D; color: #fff">
Get Early Access
</button>
</form>
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
</div>
</section>
<!-- Open Source -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
<i data-lucide="github" class="w-5 h-5"></i>
View on GitHub
</a>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-20 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
<div class="space-y-6">
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
What is MCP?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Do I need to install anything?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Zendesk account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
</details>
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
Is my data secure?
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
</summary>
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Zendesk API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Zendesk settings.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 border-t border-zinc-800/50">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Zendesk?</h2>
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Zendesk Connect.</p>
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #03363D; color: #fff">
Join the Waitlist →
</a>
</div>
</section>
<footer class="py-8 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
© 2026 Zendesk Connect. Not affiliated with Zendesk.
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);
// Chat demo animation
const chatDemo = document.getElementById('chat-demo');
const chatMessages = [{"type":"user","text":"Show me the current ticket backlog. Anything about to breach SLA?"},{"type":"ai","text":"Here's your real-time queue:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#4281\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eLogin failures - Enterprise\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eUrgent\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e12m left\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#4279\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eBilling discrepancy Q4\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eHigh\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e2h left\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#4277\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eAPI rate limit questions\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eNormal\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e6h left\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#4275\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eFeature request: SSO\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eLow\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e1d left\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e34 open · 3 breaching · Avg response: 1.4h\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Auto-respond to #4281 with our login troubleshooting guide and escalate to Tier 2"},{"type":"ai","text":"Done! Sent the KB article \"Login Troubleshooting (Enterprise)\" to the customer and escalated to Tier 2 with full context attached.","action":"✓ Auto-reply sent · Escalated to Tier 2 · SLA preserved"}];
function createChatMessage(msg) {
const div = document.createElement('div');
div.style.opacity = '0';
div.style.transform = 'translateY(15px)';
if (msg.type === 'user') {
div.className = 'flex justify-end';
div.innerHTML = '<div style="background: #03363D20; border: 1px solid #03363D40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
} else {
div.className = 'flex gap-3';
var widgetHtml = msg.widgetHtml || '';
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#03363D;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #03363D, #03363D99)"><span class="font-bold text-[10px]" style="color: #fff">ZD</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo,
start: 'top 80%',
onEnter: () => {
if (chatAnimated) return;
chatAnimated = true;
chatMessages.forEach((msg, i) => {
setTimeout(() => {
const el = createChatMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i * 1000);
});
},
once: true
});
// Reveal animations for other sections
gsap.utils.toArray('section').forEach(section => {
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
});
});
</script>
</body>
</html>

View File

@ -1,620 +0,0 @@
<!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>Zendesk Connect — AI-Power Your Support in 2 Clicks</title>
<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&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: {
brand: {
50: '#f0fdfa',
100: '#ccfbf1',
200: '#99f6e4',
300: '#5eead4',
400: '#17c3b2',
500: '#03363D',
600: '#024850',
700: '#014451',
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #17c3b2 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-glow {
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(23, 195, 178, 0.2), transparent);
}
.card-glow {
transition: all 0.3s ease;
}
.card-glow:hover {
box-shadow: 0 0 40px rgba(23, 195, 178, 0.15);
transform: translateY(-4px);
}
.video-glow {
box-shadow: 0 0 80px rgba(23, 195, 178, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out infinite;
animation-delay: -3s;
}
.animate-pulse-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes pulse-glow {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px 0 rgba(23, 195, 178, 0.4), 0 0 40px 0 rgba(23, 195, 178, 0.2); }
50% { box-shadow: 0 0 30px 5px rgba(23, 195, 178, 0.6), 0 0 60px 10px rgba(23, 195, 178, 0.3); }
}
.sticky-btn {
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}
.sticky-btn:hover {
animation: none;
}
.gradient-border {
background: linear-gradient(135deg, #17c3b2, #8b5cf6, #ec4899);
padding: 2px;
border-radius: 1rem;
}
.gradient-border-inner {
background: #09090b;
border-radius: calc(1rem - 2px);
}
.feature-icon {
background: linear-gradient(135deg, rgba(23, 195, 178, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
}
.bg-grid {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}
.teal-accent {
color: #17c3b2;
}
.teal-bg {
background-color: #17c3b2;
}
.teal-glow {
box-shadow: 0 0 20px rgba(23, 195, 178, 0.4);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
<!-- Floating decorative elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-10 w-64 h-64 bg-teal-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float"></div>
</div>
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-teal-400 to-teal-600 flex items-center justify-center shadow-lg shadow-teal-500/25">
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Zendesk Connect</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
<a href="#pricing" class="px-4 py-2 teal-bg hover:opacity-90 rounded-lg font-medium transition shadow-lg shadow-teal-500/25 hover:shadow-teal-500/40 hover:scale-105 transform text-white">
Join Waitlist
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
<div class="max-w-4xl mx-auto px-6 py-20">
<div class="flex flex-col items-center text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
Open Source + Hosted
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Connect <span class="gradient-text">Zendesk</span><br>
to AI in 2 Clicks
</h1>
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
The complete Zendesk MCP server. <strong class="text-white">156 tools</strong> covering tickets, users, and automations.
No setup. No OAuth headaches. Just connect and automate.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 teal-bg hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-teal-500/25 hover:shadow-teal-500/40 flex items-center justify-center gap-2 text-white">
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</a>
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
<i data-lucide="play" class="w-5 h-5"></i>
Watch Demo
</a>
</div>
<!-- Social Proof -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<div class="flex -space-x-3">
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
<img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
</div>
<p class="text-zinc-400">
Trusted by <strong class="text-white">5,000+</strong> support teams
</p>
</div>
</div>
</div>
</section>
<!-- Video Demo -->
<section id="demo" class="py-20 border-t border-zinc-800/50">
<div class="max-w-5xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-xl text-zinc-400">Watch how AI transforms your support workflow</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-2">
<div class="rounded-xl overflow-hidden video-glow">
<video autoplay loop muted playsinline class="w-full">
<source src="../../output/zendesk.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
<div class="flex items-center gap-2">
<i data-lucide="ticket" class="w-4 h-4 teal-accent"></i>
<span class="text-sm text-zinc-300">Tickets</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="users" class="w-4 h-4 teal-accent"></i>
<span class="text-sm text-zinc-300">Users</span>
</div>
<div class="w-px h-4 bg-zinc-700"></div>
<div class="flex items-center gap-2">
<i data-lucide="bar-chart-3" class="w-4 h-4 teal-accent"></i>
<span class="text-sm text-zinc-300">Analytics</span>
</div>
</div>
</div>
</div>
</section>
<!-- Problem/Solution -->
<section class="py-24 border-t border-zinc-800/50 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Setting up Zendesk + AI<br>
<span class="text-zinc-500">shouldn't take a week</span>
</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Pain Point 1 -->
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<p class="font-medium text-zinc-400">Drowning in ticket queues</p>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 teal-accent"></i>
</div>
<p class="font-semibold text-white">AI triages and prioritizes automatically</p>
</div>
</div>
<!-- Pain Point 2 -->
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<p class="font-medium text-zinc-400">Slow first response times</p>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 teal-accent"></i>
</div>
<p class="font-semibold text-white">Instant AI-drafted replies</p>
</div>
</div>
<!-- Pain Point 3 -->
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
</div>
<p class="font-medium text-zinc-400">Context switching constantly</p>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 teal-accent"></i>
</div>
<p class="font-semibold text-white">AI surfaces relevant ticket history</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center mb-16">
<span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-teal-500/10 teal-accent text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Full API Coverage
</span>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
<p class="text-xl text-zinc-400">Full Zendesk API access through one simple connection</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="ticket" class="w-7 h-7 teal-accent"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Ticket Management</h3>
<p class="text-zinc-400">Create, update, resolve tickets. Full CRUD on your queue.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">User & Org Data</h3>
<p class="text-zinc-400">Access customer history, tags, and organization details.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="workflow" class="w-7 h-7 text-pink-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Automations</h3>
<p class="text-zinc-400">Trigger macros, update fields, route tickets intelligently.</p>
</div>
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
<i data-lucide="bar-chart-3" class="w-7 h-7 text-orange-400"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Analytics</h3>
<p class="text-zinc-400">Pull satisfaction scores, response times, agent performance.</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-zinc-400 mb-4">+ 150 more endpoints including:</p>
<div class="flex flex-wrap justify-center gap-2">
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Views</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Macros</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Groups</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">SLAs</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Triggers</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Brands</span>
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Help Center</span>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section id="pricing" class="py-24 border-t border-zinc-800/50">
<div class="max-w-2xl mx-auto px-6">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-teal-500/20 teal-accent text-sm font-medium mb-6">
<i data-lucide="sparkles" class="w-4 h-4"></i>
Coming Soon
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner p-8">
<form id="waitlist-form" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="teal-accent">*</span></label>
<input
type="text"
id="name"
name="name"
required
placeholder="Your full name"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition"
>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="teal-accent">*</span></label>
<input
type="tel"
id="phone"
name="phone"
required
placeholder="(555) 123-4567"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition"
>
</div>
<div>
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="you@company.com"
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition"
>
</div>
<button
type="submit"
id="submit-btn"
class="w-full py-4 bg-gradient-to-r from-teal-500 to-purple-500 hover:from-teal-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-teal-500/25 text-white"
>
<span>Join the Waitlist</span>
<i data-lucide="arrow-right" class="w-5 h-5"></i>
</button>
</form>
<div id="success-message" class="hidden text-center py-8">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
</div>
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
</div>
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
<i data-lucide="lock" class="w-4 h-4"></i>
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</div>
</section>
<script>
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
e.preventDefault();
const form = this;
const successMsg = document.getElementById('success-message');
form.classList.add('hidden');
successMsg.classList.remove('hidden');
});
</script>
<!-- Open Source -->
<section class="py-24 border-t border-zinc-800/50">
<div class="max-w-6xl mx-auto px-6">
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
<div class="absolute top-0 right-0 w-96 h-96 bg-teal-500/5 rounded-full blur-3xl"></div>
<div class="grid md:grid-cols-2 gap-12 items-center relative">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
<i data-lucide="github" class="w-4 h-4"></i>
Open Source
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Self-host if you want.<br>
<span class="text-zinc-500">We won't stop you.</span>
</h2>
<p class="text-zinc-400 mb-6">
The entire MCP server is open source. Run it yourself, modify it, contribute back.
The hosted version just saves you the hassle.
</p>
<a href="#" class="inline-flex items-center gap-2 teal-accent hover:text-teal-300 font-medium transition">
View on GitHub
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
<div class="flex items-center gap-2 text-zinc-500 mb-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="ml-2">Terminal</span>
</div>
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/zendesk-connect/mcp
<span class="text-zinc-500">$</span> cd mcp && npm install
<span class="text-zinc-500">$</span> npm run build
<span class="text-zinc-500">$</span> node dist/server.js
<span class="text-green-400">✓ Zendesk MCP Server running</span>
<span class="text-green-400">✓ 156 tools loaded</span>
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-24 border-t border-zinc-800/50">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
</div>
<div class="space-y-4">
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Do I need to install anything?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
For the hosted version, no. Just connect your Zendesk account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
If you self-host, you'll need Node.js.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Is my data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
Yes. We use OAuth 2.0 and never store your Zendesk API keys. Tokens are encrypted at rest and in transit.
You can revoke access anytime from your Zendesk settings.
</p>
</details>
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
<summary class="flex items-center justify-between cursor-pointer list-none">
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
</summary>
<p class="mt-4 text-zinc-400">
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
As MCP adoption grows, more clients will support it natively.
</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-teal-500/5 to-transparent"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
Ready to AI-power your Zendesk?
</h2>
<p class="text-xl text-zinc-400 mb-10">
Join thousands of support teams already automating with Zendesk Connect.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-teal-500 to-purple-500 hover:from-teal-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-teal-500/25 text-white">
Join the Waitlist
</a>
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
Book a Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-zinc-800/50 py-12">
<div class="max-w-6xl mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-teal-400 to-teal-600 flex items-center justify-center">
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
</div>
<span class="font-bold text-xl">Zendesk Connect</span>
</div>
<div class="flex items-center gap-8 text-zinc-400">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">GitHub</a>
<a href="#" class="hover:text-white transition">Twitter</a>
</div>
<p class="text-zinc-500 text-sm">© 2026 Zendesk Connect. Not affiliated with Zendesk.</p>
</div>
</div>
</footer>
<!-- Sticky Floating CTA -->
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
<a
href="#pricing"
class="sticky-btn flex items-center gap-2 px-6 py-3 teal-bg hover:opacity-90 rounded-full font-semibold transition-all transform hover:scale-110 text-white"
>
<i data-lucide="sparkles" class="w-5 h-5"></i>
<span>Join Waitlist</span>
</a>
</div>
<script>
const stickyCta = document.getElementById('sticky-cta');
const pricingSection = document.getElementById('pricing');
function updateStickyCta() {
const scrollY = window.scrollY;
const pricingTop = pricingSection.offsetTop;
const pricingBottom = pricingTop + pricingSection.offsetHeight;
const viewportBottom = scrollY + window.innerHeight;
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
if (shouldShow) {
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
} else {
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
}
}
window.addEventListener('scroll', updateStickyCta);
updateStickyCta();
</script>
<script>lucide.createIcons();</script>
</body>
</html>