MCPEngage: 66 landing pages with demo animations
This commit is contained in:
Jake Shore
commit
acafd90f40
288
activecampaign/index.html
Normal file
288
activecampaign/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>ActiveCampaign Connect — AI-Power Your Email Automation 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: '#356AE6',
|
||||
600: '#356AE6dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #356AE6 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%, #356AE625, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #356AE620; }
|
||||
</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: #356AE6">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">ActiveCampaign 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: #356AE6; 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: #356AE6"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">ActiveCampaign</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete ActiveCampaign MCP server. Contacts, campaigns, and automations — AI-ready. <strong class="text-white">142 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: #356AE6; 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/activecampaign.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: #356AE6; color: #fff">
|
||||
142 API Tools
|
||||
</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 ActiveCampaign + 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 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: #356AE630">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #356AE6"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI builds sequences from briefs</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 optimal 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: #356AE630">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #356AE6"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI optimizes based on 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">Scattered contact 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: #356AE630">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #356AE6"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Auto-enrichment and segmentation</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 ActiveCampaign 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: #356AE620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #356AE6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Contact Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create, update, 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: #356AE620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #356AE6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Campaign Automation</h3>
|
||||
<p class="text-zinc-400 text-sm">Build sequences, trigger journeys, 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: #356AE620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #356AE6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">List Operations</h3>
|
||||
<p class="text-zinc-400 text-sm">Manage lists, custom fields, and subscriber 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: #356AE620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #356AE6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Analytics & Tracking</h3>
|
||||
<p class="text-zinc-400 text-sm">Track opens, clicks, conversions, and attribution.</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: #356AE6; 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 ActiveCampaign 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 ActiveCampaign API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your ActiveCampaign 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 ActiveCampaign?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with ActiveCampaign Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #356AE6; 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 ActiveCampaign Connect. Not affiliated with ActiveCampaign.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
654
acuity/index.html
Normal file
654
acuity/index.html
Normal file
@ -0,0 +1,654 @@
|
||||
<!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="https://github.com/BusyBee3333/acuity-scheduling-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/acuity-scheduling-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/acuity-scheduling-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/acuity-scheduling-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/acuity-scheduling-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
288
airtable/index.html
Normal file
288
airtable/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Airtable Connect — AI-Power Your Databases 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: '#18BFFF',
|
||||
600: '#18BFFFdd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #18BFFF 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%, #18BFFF25, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #18BFFF20; }
|
||||
</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: #18BFFF">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Airtable 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: #18BFFF; 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: #18BFFF"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Airtable</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Airtable MCP server. Tables, records, and views — all automated. <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: #18BFFF; 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/airtable.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: #18BFFF; color: #fff">
|
||||
98 API Tools
|
||||
</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 Airtable + 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 data 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: #18BFFF30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #18BFFF"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI populates from any source</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-paste between tools</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: #18BFFF30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #18BFFF"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Auto-sync with other systems</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">Stale project trackers</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: #18BFFF30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #18BFFF"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Real-time AI-powered 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 Airtable 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: #18BFFF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #18BFFF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Record Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create, update, delete records across any base.</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: #18BFFF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #18BFFF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Field Operations</h3>
|
||||
<p class="text-zinc-400 text-sm">Manage custom fields, formulas, and linked 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: #18BFFF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #18BFFF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">View Control</h3>
|
||||
<p class="text-zinc-400 text-sm">Filter, sort, and access any table view 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: #18BFFF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #18BFFF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Attachment Handling</h3>
|
||||
<p class="text-zinc-400 text-sm">Upload, download, and manage file attachments.</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: #18BFFF; 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 Airtable 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 Airtable API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Airtable 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 Airtable?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Airtable Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #18BFFF; 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 Airtable Connect. Not affiliated with Airtable.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
288
apollo/index.html
Normal file
288
apollo/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Apollo.io Connect — AI-Power Your Sales Intelligence 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: '#4B25D6',
|
||||
600: '#4B25D6dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #4B25D6 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%, #4B25D625, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #4B25D620; }
|
||||
</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: #4B25D6">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Apollo.io 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: #4B25D6; 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: #4B25D6"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Apollo.io</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Apollo.io MCP server. Prospect search, engagement, and sequencing. <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: #4B25D6; 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/apollo.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: #4B25D6; color: #fff">
|
||||
86 API Tools
|
||||
</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 Apollo.io + 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 prospect research</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: #4B25D630">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #4B25D6"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI finds ideal buyers 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">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: #4B25D630">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #4B25D6"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Smart sequences on autopilot</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 lead prioritization</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: #4B25D630">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #4B25D6"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI scores based on engagement</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 Apollo.io 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: #4B25D620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4B25D6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Contact Search</h3>
|
||||
<p class="text-zinc-400 text-sm">Find prospects by role, company, industry, and signals.</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: #4B25D620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4B25D6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Sequence Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Build multi-channel outreach, 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: #4B25D620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4B25D6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Account Intelligence</h3>
|
||||
<p class="text-zinc-400 text-sm">Access company data, technographics, and insights.</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: #4B25D620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4B25D6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Activity Tracking</h3>
|
||||
<p class="text-zinc-400 text-sm">Log calls, emails, meetings — all in one place.</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: #4B25D6; 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 Apollo.io 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 Apollo.io API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Apollo.io 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 Apollo.io?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Apollo.io Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #4B25D6; 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 Apollo.io Connect. Not affiliated with Apollo.io.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
288
asana/index.html
Normal file
288
asana/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Asana Connect — AI-Power Your Project Management 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: '#F06A6A',
|
||||
600: '#F06A6Add',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #F06A6A 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%, #F06A6A25, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #F06A6A20; }
|
||||
</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: #F06A6A">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Asana 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: #F06A6A; 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: #F06A6A"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Asana</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Asana MCP server. Tasks, projects, and workflows — fully automated. <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: #F06A6A; 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/asana.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: #F06A6A; color: #fff">
|
||||
124 API Tools
|
||||
</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 Asana + 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">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: #F06A6A30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #F06A6A"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI generates project summaries</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">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: #F06A6A30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #F06A6A"></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">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: #F06A6A30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #F06A6A"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Proactive AI 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 Asana 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: #F06A6A20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #F06A6A"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Task Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create, assign, track tasks with 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: #F06A6A20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #F06A6A"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Project Operations</h3>
|
||||
<p class="text-zinc-400 text-sm">Manage timelines, milestones, and portfolio views.</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: #F06A6A20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #F06A6A"></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 field 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: #F06A6A20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #F06A6A"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Team Collaboration</h3>
|
||||
<p class="text-zinc-400 text-sm">Manage comments, attachments, and approvals.</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: #F06A6A; 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 Asana 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 Asana API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Asana 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 Asana?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Asana Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #F06A6A; 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 Asana Connect. Not affiliated with Asana.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
666
bamboohr/index.html
Normal file
666
bamboohr/index.html
Normal file
@ -0,0 +1,666 @@
|
||||
<!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="https://github.com/BusyBee3333/bamboohr-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/bamboohr-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/bamboohr-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/bamboohr-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/bamboohr-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-1">
|
||||
<i data-lucide="github" class="w-4 h-4"></i>
|
||||
GitHub
|
||||
</a>
|
||||
<a href="https://github.com/BusyBee3333/bamboohr-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
631
basecamp/index.html
Normal file
631
basecamp/index.html
Normal file
@ -0,0 +1,631 @@
|
||||
<!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="https://github.com/BusyBee3333/basecamp-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/basecamp-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/basecamp-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/basecamp-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/basecamp-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/basecamp-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
645
bigcommerce/index.html
Normal file
645
bigcommerce/index.html
Normal file
@ -0,0 +1,645 @@
|
||||
<!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 https://github.com/BusyBee3333/bigcommerce-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/bigcommerce-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/bigcommerce-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Terms</a>
|
||||
<a href="https://github.com" class="hover:text-white transition-colors">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/bigcommerce-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
653
brevo/index.html
Normal file
653
brevo/index.html
Normal file
@ -0,0 +1,653 @@
|
||||
<!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="https://github.com/BusyBee3333/brevo-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/brevo-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/brevo-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/brevo-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/brevo-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
610
calendly/index.html
Normal file
610
calendly/index.html
Normal file
@ -0,0 +1,610 @@
|
||||
<!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="https://github.com/BusyBee3333/calendly-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/calendly-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/calendly-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/calendly-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/calendly-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/calendly-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
288
chargebee/index.html
Normal file
288
chargebee/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Chargebee Connect — AI-Power Your Subscriptions 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: '#FF6633',
|
||||
600: '#FF6633dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #FF6633 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%, #FF663325, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #FF663320; }
|
||||
</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: #FF6633">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Chargebee 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: #FF6633; 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: #FF6633"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Chargebee</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Chargebee MCP server. Billing, subscriptions, and revenue ops. <strong class="text-white">114 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: #FF6633; 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/chargebee.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: #FF6633; color: #fff">
|
||||
114 API Tools
|
||||
</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 Chargebee + 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">Churn blindness</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: #FF663330">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #FF6633"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI predicts and prevents cancellations</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 payment retries</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: #FF663330">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #FF6633"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Smart dunning 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">Revenue reporting 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: #FF663330">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #FF6633"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Real-time MRR 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 Chargebee 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: #FF663320">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6633"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Subscription Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create, update, pause, resume subscriptions.</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: #FF663320">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6633"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Customer Portal</h3>
|
||||
<p class="text-zinc-400 text-sm">Manage accounts, payment methods, and billing 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: #FF663320">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6633"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Invoice Operations</h3>
|
||||
<p class="text-zinc-400 text-sm">Generate, send, track invoices and 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: #FF663320">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6633"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Metrics & Analytics</h3>
|
||||
<p class="text-zinc-400 text-sm">MRR, churn, LTV — all accessible via AI.</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: #FF6633; 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 Chargebee 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 Chargebee API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Chargebee 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 Chargebee?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Chargebee Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FF6633; 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 Chargebee Connect. Not affiliated with Chargebee.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
651
clickup/index.html
Normal file
651
clickup/index.html
Normal file
@ -0,0 +1,651 @@
|
||||
<!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="https://github.com/BusyBee3333/clickup-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/clickup-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/clickup-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/clickup-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/clickup-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/clickup-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
288
closebot/index.html
Normal file
288
closebot/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>CloseBot Connect — AI-Power Your AI Sales Closer 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: '#7C3AED',
|
||||
600: '#7C3AEDdd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #7C3AED 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%, #7C3AED25, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #7C3AED20; }
|
||||
</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: #7C3AED">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">CloseBot 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: #7C3AED; 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: #7C3AED"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">CloseBot</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete CloseBot MCP server. AI-powered qualification and booking. <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: #7C3AED; 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/closebot.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: #7C3AED; color: #fff">
|
||||
64 API Tools
|
||||
</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 CloseBot + 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 going cold</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: #7C3AED30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #7C3AED"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI responds within 60 seconds</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 SDR capacity</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: #7C3AED30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #7C3AED"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI handles 10x volume</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 qualification questions</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: #7C3AED30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #7C3AED"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI never forgets to ask</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 CloseBot 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: #7C3AED20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #7C3AED"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Lead Qualification</h3>
|
||||
<p class="text-zinc-400 text-sm">AI asks the right questions and scores leads.</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: #7C3AED20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #7C3AED"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Call Booking</h3>
|
||||
<p class="text-zinc-400 text-sm">Schedule demos, consultations, and follow-ups.</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: #7C3AED20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #7C3AED"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Conversation History</h3>
|
||||
<p class="text-zinc-400 text-sm">Access full transcripts and engagement 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: #7C3AED20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #7C3AED"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">CRM Sync</h3>
|
||||
<p class="text-zinc-400 text-sm">Auto-update your CRM with qualified leads and notes.</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: #7C3AED; 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 CloseBot 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 CloseBot API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your CloseBot 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 CloseBot?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with CloseBot Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #7C3AED; 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 CloseBot Connect. Not affiliated with CloseBot.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
781
closecrm/index.html
Normal file
781
closecrm/index.html
Normal file
@ -0,0 +1,781 @@
|
||||
<!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="https://github.com/BusyBee3333/close-crm-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/close-crm-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/close-crm-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/close-crm-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/close-crm-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/close-crm-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
649
clover/index.html
Normal file
649
clover/index.html
Normal file
@ -0,0 +1,649 @@
|
||||
<!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="https://github.com/BusyBee3333/clover-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/clover-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/clover-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/clover-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/clover-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-2">
|
||||
<i data-lucide="github" class="w-4 h-4"></i>
|
||||
GitHub
|
||||
</a>
|
||||
<a href="https://github.com/BusyBee3333/clover-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
662
constantcontact/index.html
Normal file
662
constantcontact/index.html
Normal file
@ -0,0 +1,662 @@
|
||||
<!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="https://github.com/BusyBee3333/constant-contact-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/constant-contact-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/constant-contact-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/constant-contact-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/constant-contact-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/constant-contact-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
288
datadog/index.html
Normal file
288
datadog/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Datadog Connect — AI-Power Your Monitoring 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: '#632CA6',
|
||||
600: '#632CA6dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #632CA6 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%, #632CA625, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #632CA620; }
|
||||
</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: #632CA6">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Datadog 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: #632CA6; 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: #632CA6"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Datadog</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Datadog MCP server. Metrics, logs, traces, and alerts. <strong class="text-white">178 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: #632CA6; 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/datadog.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: #632CA6; color: #fff">
|
||||
178 API Tools
|
||||
</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 Datadog + 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">Alert fatigue</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: #632CA630">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #632CA6"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI correlates and deduplicates</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 incident triage</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: #632CA630">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #632CA6"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI identifies root cause</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 monitoring 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: #632CA630">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #632CA6"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Unified AI-powered insights</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 Datadog 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: #632CA620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #632CA6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Metrics & Monitoring</h3>
|
||||
<p class="text-zinc-400 text-sm">Query infrastructure metrics, APM, and RUM 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: #632CA620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #632CA6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Alert Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create, update, mute, and resolve alerts.</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: #632CA620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #632CA6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Log Analysis</h3>
|
||||
<p class="text-zinc-400 text-sm">Search logs, analyze patterns, and debug issues.</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: #632CA620">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #632CA6"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Dashboard Operations</h3>
|
||||
<p class="text-zinc-400 text-sm">Access and update custom dashboards programmatically.</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: #632CA6; 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 Datadog 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 Datadog API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Datadog 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 Datadog?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Datadog Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #632CA6; 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 Datadog Connect. Not affiliated with Datadog.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
288
docusign/index.html
Normal file
288
docusign/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>DocuSign Connect — AI-Power Your E-Signatures 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: '#FFCE00',
|
||||
600: '#FFCE00dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #FFCE00 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%, #FFCE0025, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #FFCE0020; }
|
||||
</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: #FFCE00">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #000"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">DocuSign 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: #FFCE00; 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: #FFCE00"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">DocuSign</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete DocuSign MCP server. Envelopes, templates, and workflows. <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: #FFCE00; 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/docusign.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: #FFCE00; color: #000">
|
||||
92 API Tools
|
||||
</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 DocuSign + 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">Contract follow-up 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: #FFCE0030">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #FFCE00"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI sends smart 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">Manual document prep</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: #FFCE0030">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #FFCE00"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Auto-fill from your CRM</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 pending signatures</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: #FFCE0030">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #FFCE00"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI prioritizes by value</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 DocuSign 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: #FFCE0020">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FFCE00"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Envelope Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Send, track, void, and resend signature requests.</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: #FFCE0020">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FFCE00"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Template Operations</h3>
|
||||
<p class="text-zinc-400 text-sm">Create and use templates for common documents.</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: #FFCE0020">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FFCE00"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Signer Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Manage recipients, routing, and signing order.</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: #FFCE0020">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FFCE00"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Status Tracking</h3>
|
||||
<p class="text-zinc-400 text-sm">Real-time updates on signatures, views, and completion.</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: #FFCE00; 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 DocuSign 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 DocuSign API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your DocuSign 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 DocuSign?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with DocuSign Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FFCE00; 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 DocuSign Connect. Not affiliated with DocuSign.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
643
fieldedge/index.html
Normal file
643
fieldedge/index.html
Normal file
@ -0,0 +1,643 @@
|
||||
<!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="https://github.com/BusyBee3333/fieldedge-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/fieldedge-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/fieldedge-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/fieldedge-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/fieldedge-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/fieldedge-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
692
freshbooks/index.html
Normal file
692
freshbooks/index.html
Normal file
@ -0,0 +1,692 @@
|
||||
<!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="https://github.com/BusyBee3333/freshbooks-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/freshbooks-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/freshbooks-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/freshbooks-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/freshbooks-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-1">
|
||||
<i data-lucide="github" class="w-4 h-4"></i>
|
||||
GitHub
|
||||
</a>
|
||||
<a href="https://github.com/BusyBee3333/freshbooks-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
627
freshdesk/index.html
Normal file
627
freshdesk/index.html
Normal file
@ -0,0 +1,627 @@
|
||||
<!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="https://github.com/BusyBee3333/freshdesk-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/freshdesk-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/freshdesk-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/freshdesk-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/freshdesk-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/freshdesk-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
288
ghl/index.html
Normal file
288
ghl/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>GoHighLevel Connect — AI-Power Your Marketing Platform 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: '#007BFF',
|
||||
600: '#007BFFdd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #007BFF 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%, #007BFF25, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #007BFF20; }
|
||||
</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: #007BFF">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">GoHighLevel 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: #007BFF; 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: #007BFF"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">GoHighLevel</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete GoHighLevel MCP server. Funnels, pipelines, and automation. <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: #007BFF; 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/ghl.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: #007BFF; color: #fff">
|
||||
156 API Tools
|
||||
</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 GoHighLevel + 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">Platform overwhelm</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: #007BFF30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #007BFF"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI navigates 12+ tools 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">Manual follow-up sequences</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: #007BFF30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #007BFF"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI-optimized multi-channel campaigns</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">Client onboarding 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: #007BFF30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #007BFF"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Instant automation 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 GoHighLevel 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: #007BFF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #007BFF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Contact & Pipeline</h3>
|
||||
<p class="text-zinc-400 text-sm">Manage leads, opportunities, and deal stages.</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: #007BFF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #007BFF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Funnel & Website</h3>
|
||||
<p class="text-zinc-400 text-sm">Update pages, forms, and conversion tracking.</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: #007BFF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #007BFF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Automation Workflows</h3>
|
||||
<p class="text-zinc-400 text-sm">Trigger campaigns, SMS, emails, and tasks.</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: #007BFF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #007BFF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Calendar & Booking</h3>
|
||||
<p class="text-zinc-400 text-sm">Manage appointments, availability, and scheduling.</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: #007BFF; 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 GoHighLevel 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 GoHighLevel API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your GoHighLevel 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 GoHighLevel?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with GoHighLevel Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #007BFF; 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 GoHighLevel Connect. Not affiliated with GoHighLevel.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
288
google-ads/index.html
Normal file
288
google-ads/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Google Ads Connect — AI-Power Your PPC 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: '#4285F4',
|
||||
600: '#4285F4dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #4285F4 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%, #4285F425, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #4285F420; }
|
||||
</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: #4285F4">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Google Ads 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: #4285F4; 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: #4285F4"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Google Ads</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Google Ads MCP server. Campaigns, keywords, and optimization. <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: #4285F4; 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/google-ads.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: #4285F4; color: #fff">
|
||||
134 API Tools
|
||||
</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 Google Ads + 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">Budget waste on bad keywords</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: #4285F430">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI auto-pauses low performers</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 bid adjustments</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: #4285F430">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI optimizes bids hourly</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-campaign 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: #4285F430">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI identifies top opportunities</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 Google Ads 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: #4285F420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Campaign Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create, pause, and optimize search and display campaigns.</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: #4285F420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Keyword Operations</h3>
|
||||
<p class="text-zinc-400 text-sm">Add keywords, set bids, manage match types.</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: #4285F420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Ad Copy & Assets</h3>
|
||||
<p class="text-zinc-400 text-sm">Update headlines, descriptions, and responsive ads.</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: #4285F420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Performance Reporting</h3>
|
||||
<p class="text-zinc-400 text-sm">CPC, CTR, conversions, and ROAS — AI-accessible.</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: #4285F4; 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 Google Ads 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 Google Ads API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Google Ads 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 Google Ads?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Google Ads Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #4285F4; 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 Google Ads Connect. Not affiliated with Google Ads.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
288
google-console/index.html
Normal file
288
google-console/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Google Search Console Connect — AI-Power Your SEO 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: '#4285F4',
|
||||
600: '#4285F4dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #4285F4 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%, #4285F425, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #4285F420; }
|
||||
</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: #4285F4">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Google Search Console 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: #4285F4; 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: #4285F4"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Google Search Console</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Google Search Console MCP server. Keywords, indexing, and performance. <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: #4285F4; 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/google-console.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: #4285F4; color: #fff">
|
||||
58 API Tools
|
||||
</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 Google Search Console + 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">SEO data in 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: #4285F430">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI connects rankings to revenue</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 keyword 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: #4285F430">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI alerts on trending queries</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">Indexing issues ignored</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: #4285F430">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Proactive error notifications</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 Google Search Console 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: #4285F420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Search Performance</h3>
|
||||
<p class="text-zinc-400 text-sm">Track clicks, impressions, CTR, and position by query.</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: #4285F420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Index Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Submit URLs, check indexing status, manage sitemaps.</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: #4285F420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Coverage Reports</h3>
|
||||
<p class="text-zinc-400 text-sm">Identify errors, warnings, and excluded pages.</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: #4285F420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Core Web Vitals</h3>
|
||||
<p class="text-zinc-400 text-sm">Monitor page experience, performance, and usability.</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: #4285F4; 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 Google Search Console 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 Google Search Console API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Google Search Console 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 Google Search Console?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Google Search Console Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #4285F4; 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 Google Search Console Connect. Not affiliated with Google Search Console.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
288
greenhouse/index.html
Normal file
288
greenhouse/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Greenhouse Connect — AI-Power Your Recruiting 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: '#3B8427',
|
||||
600: '#3B8427dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #3B8427 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%, #3B842725, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #3B842720; }
|
||||
</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: #3B8427">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Greenhouse 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: #3B8427; 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: #3B8427"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Greenhouse</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Greenhouse MCP server. Candidates, jobs, and hiring workflows. <strong class="text-white">108 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: #3B8427; 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/greenhouse.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: #3B8427; color: #fff">
|
||||
108 API Tools
|
||||
</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 Greenhouse + 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">Top candidates ghosting</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: #3B842730">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #3B8427"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI accelerates interview 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">Manual resume screening</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: #3B842730">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #3B8427"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI pre-qualifies and scores</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">Pipeline visibility 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: #3B842730">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #3B8427"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Real-time hiring 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 Greenhouse 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: #3B842720">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #3B8427"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Candidate Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Search, add, update candidates across all pipelines.</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: #3B842720">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #3B8427"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Job Operations</h3>
|
||||
<p class="text-zinc-400 text-sm">Post jobs, manage openings, and track requisitions.</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: #3B842720">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #3B8427"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Interview Scheduling</h3>
|
||||
<p class="text-zinc-400 text-sm">Coordinate interviews, send invites, track 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: #3B842720">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #3B8427"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Scorecard & Feedback</h3>
|
||||
<p class="text-zinc-400 text-sm">Collect evaluations, track decisions, and hiring 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: #3B8427; 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 Greenhouse 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 Greenhouse API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Greenhouse 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 Greenhouse?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Greenhouse Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #3B8427; 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 Greenhouse Connect. Not affiliated with Greenhouse.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
603
gusto/index.html
Normal file
603
gusto/index.html
Normal file
@ -0,0 +1,603 @@
|
||||
<!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="https://github.com/BusyBee3333/gusto-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/gusto-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/gusto-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/gusto-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/gusto-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/gusto-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
637
helpscout/index.html
Normal file
637
helpscout/index.html
Normal file
@ -0,0 +1,637 @@
|
||||
<!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="https://github.com/BusyBee3333/help-scout-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/help-scout-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/help-scout-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/help-scout-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/help-scout-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/help-scout-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
640
housecallpro/index.html
Normal file
640
housecallpro/index.html
Normal file
@ -0,0 +1,640 @@
|
||||
<!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="https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
288
hubspot/index.html
Normal file
288
hubspot/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>HubSpot Connect — AI-Power Your CRM & 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: '#FF7A59',
|
||||
600: '#FF7A59dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #FF7A59 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%, #FF7A5925, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #FF7A5920; }
|
||||
</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: #FF7A59">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">HubSpot 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: #FF7A59; 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: #FF7A59"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">HubSpot</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete HubSpot MCP server. Contacts, deals, campaigns, and analytics. <strong class="text-white">186 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: #FF7A59; 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/hubspot.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: #FF7A59; color: #fff">
|
||||
186 API Tools
|
||||
</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 HubSpot + 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 lead qualification</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: #FF7A5930">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #FF7A59"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI scores and prioritizes leads</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 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: #FF7A5930">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #FF7A59"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Proactive alerts on stale opportunities</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">Campaign performance guesswork</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: #FF7A5930">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #FF7A59"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Real-time AI insights and optimization</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 HubSpot 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: #FF7A5920">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FF7A59"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Contact & Deal Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create, update, and track leads through your entire 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: #FF7A5920">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FF7A59"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Marketing Automation</h3>
|
||||
<p class="text-zinc-400 text-sm">Manage email campaigns, workflows, and lead nurturing sequences.</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: #FF7A5920">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FF7A59"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Sales Pipeline</h3>
|
||||
<p class="text-zinc-400 text-sm">Track opportunities, forecast revenue, and manage deal stages.</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: #FF7A5920">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #FF7A59"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Analytics & Reporting</h3>
|
||||
<p class="text-zinc-400 text-sm">Pull engagement metrics, conversion rates, and revenue attribution.</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: #FF7A59; 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 HubSpot 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 HubSpot API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your HubSpot 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 HubSpot?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with HubSpot Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FF7A59; 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 HubSpot Connect. Not affiliated with HubSpot.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
135
index.html
Normal file
135
index.html
Normal file
@ -0,0 +1,135 @@
|
||||
<!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>MCPEngage — AI-Power Your Business Software</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: { extend: { fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] } } }
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ec4899 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||
<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">
|
||||
<span class="font-bold text-2xl"><span class="gradient-text">MCPEngage</span></span>
|
||||
<span class="text-zinc-400 text-sm">AI-Powered Business Software Integrations</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="pt-32 pb-16">
|
||||
<div class="max-w-6xl mx-auto px-6 text-center">
|
||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Any Software</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
<p class="text-xl text-zinc-400 mb-12 max-w-2xl mx-auto">
|
||||
66 MCP servers. Thousands of tools. Every major business platform — ready for AI automation.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pb-20">
|
||||
<div class="max-w-6xl mx-auto px-6">
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="grid"></div>
|
||||
</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 MCPEngage. Powered by MCPEngine.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const servers = [
|
||||
{name:'ActiveCampaign',id:'activecampaign',color:'#356AE6',cat:'Marketing'},
|
||||
{name:'Acuity Scheduling',id:'acuity',color:'#315B7D',cat:'Scheduling'},
|
||||
{name:'Airtable',id:'airtable',color:'#18BFFF',cat:'Productivity'},
|
||||
{name:'Apollo.io',id:'apollo',color:'#4B25D6',cat:'Sales'},
|
||||
{name:'Asana',id:'asana',color:'#F06A6A',cat:'Project Mgmt'},
|
||||
{name:'BambooHR',id:'bamboohr',color:'#73C41D',cat:'HR'},
|
||||
{name:'Basecamp',id:'basecamp',color:'#1D2D35',cat:'Project Mgmt'},
|
||||
{name:'BigCommerce',id:'bigcommerce',color:'#34313F',cat:'E-Commerce'},
|
||||
{name:'Brevo',id:'brevo',color:'#0B996E',cat:'Marketing'},
|
||||
{name:'Calendly',id:'calendly',color:'#006BFF',cat:'Scheduling'},
|
||||
{name:'Chargebee',id:'chargebee',color:'#FF6633',cat:'Billing'},
|
||||
{name:'ClickUp',id:'clickup',color:'#7B68EE',cat:'Project Mgmt'},
|
||||
{name:'Close CRM',id:'closecrm',color:'#3D5AFE',cat:'CRM'},
|
||||
{name:'CloseBot',id:'closebot',color:'#7C3AED',cat:'AI Sales'},
|
||||
{name:'Clover',id:'clover',color:'#43B02A',cat:'POS'},
|
||||
{name:'Constant Contact',id:'constantcontact',color:'#1856A8',cat:'Marketing'},
|
||||
{name:'Datadog',id:'datadog',color:'#632CA6',cat:'DevOps'},
|
||||
{name:'DocuSign',id:'docusign',color:'#FFCE00',cat:'Documents'},
|
||||
{name:'FieldEdge',id:'fieldedge',color:'#0066B2',cat:'Field Service'},
|
||||
{name:'FreshBooks',id:'freshbooks',color:'#0075DD',cat:'Accounting'},
|
||||
{name:'Freshdesk',id:'freshdesk',color:'#25C16F',cat:'Support'},
|
||||
{name:'GoHighLevel',id:'ghl',color:'#007BFF',cat:'Marketing'},
|
||||
{name:'Google Ads',id:'google-ads',color:'#4285F4',cat:'Advertising'},
|
||||
{name:'Google Console',id:'google-console',color:'#4285F4',cat:'SEO'},
|
||||
{name:'Greenhouse',id:'greenhouse',color:'#3B8427',cat:'Recruiting'},
|
||||
{name:'Gusto',id:'gusto',color:'#F45D48',cat:'Payroll'},
|
||||
{name:'Help Scout',id:'helpscout',color:'#1292EE',cat:'Support'},
|
||||
{name:'Housecall Pro',id:'housecallpro',color:'#FF5722',cat:'Field Service'},
|
||||
{name:'HubSpot',id:'hubspot',color:'#FF7A59',cat:'CRM'},
|
||||
{name:'Intercom',id:'intercom',color:'#286EFA',cat:'Messaging'},
|
||||
{name:'Jira',id:'jira',color:'#0052CC',cat:'Project Mgmt'},
|
||||
{name:'Jobber',id:'jobber',color:'#7AC143',cat:'Field Service'},
|
||||
{name:'Keap',id:'keap',color:'#2D9F2D',cat:'CRM'},
|
||||
{name:'Klaviyo',id:'klaviyo',color:'#000000',cat:'Marketing'},
|
||||
{name:'Lever',id:'lever',color:'#3CB2A4',cat:'Recruiting'},
|
||||
{name:'Lightspeed',id:'lightspeed',color:'#E4002B',cat:'Retail'},
|
||||
{name:'Linear',id:'linear',color:'#5E6AD2',cat:'Project Mgmt'},
|
||||
{name:'Loom',id:'loom',color:'#625DF5',cat:'Video'},
|
||||
{name:'Mailchimp',id:'mailchimp',color:'#FFE01B',cat:'Marketing'},
|
||||
{name:'Meta Ads',id:'meta-ads',color:'#1877F2',cat:'Advertising'},
|
||||
{name:'Monday.com',id:'monday',color:'#6161FF',cat:'Project Mgmt'},
|
||||
{name:'Notion',id:'notion',color:'#000000',cat:'Productivity'},
|
||||
{name:'PandaDoc',id:'pandadoc',color:'#65BE4B',cat:'Documents'},
|
||||
{name:'Pipedrive',id:'pipedrive',color:'#017737',cat:'CRM'},
|
||||
{name:'QuickBooks',id:'quickbooks',color:'#2CA01C',cat:'Accounting'},
|
||||
{name:'Rippling',id:'rippling',color:'#FEC400',cat:'HR'},
|
||||
{name:'Salesforce',id:'salesforce',color:'#00A1E0',cat:'CRM'},
|
||||
{name:'Salesloft',id:'salesloft',color:'#1E88E5',cat:'Sales'},
|
||||
{name:'SendGrid',id:'sendgrid',color:'#1A82E2',cat:'Email API'},
|
||||
{name:'ServiceTitan',id:'servicetitan',color:'#FF6B00',cat:'Field Service'},
|
||||
{name:'Shopify',id:'shopify',color:'#96BF48',cat:'E-Commerce'},
|
||||
{name:'Square',id:'square',color:'#006AFF',cat:'Payments'},
|
||||
{name:'Squarespace',id:'squarespace',color:'#000000',cat:'Website'},
|
||||
{name:'Stripe',id:'stripe',color:'#635BFF',cat:'Payments'},
|
||||
{name:'Supabase',id:'supabase',color:'#3ECF8E',cat:'Database'},
|
||||
{name:'Toast',id:'toast',color:'#FF4C00',cat:'Restaurant'},
|
||||
{name:'TouchBistro',id:'touchbistro',color:'#F26522',cat:'Restaurant'},
|
||||
{name:'Trello',id:'trello',color:'#0079BF',cat:'Project Mgmt'},
|
||||
{name:'Twilio',id:'twilio',color:'#F22F46',cat:'Communications'},
|
||||
{name:'Typeform',id:'typeform',color:'#262627',cat:'Forms'},
|
||||
{name:'Wave',id:'wave',color:'#165DFF',cat:'Accounting'},
|
||||
{name:'Webflow',id:'webflow',color:'#4353FF',cat:'Website'},
|
||||
{name:'Wrike',id:'wrike',color:'#08CF65',cat:'Project Mgmt'},
|
||||
{name:'Xero',id:'xero',color:'#13B5EA',cat:'Accounting'},
|
||||
{name:'Zendesk',id:'zendesk',color:'#03363D',cat:'Support'},
|
||||
{name:'Zoho CRM',id:'zoho-crm',color:'#DC2626',cat:'CRM'},
|
||||
];
|
||||
const grid = document.getElementById('grid');
|
||||
servers.forEach(s => {
|
||||
grid.innerHTML += `<a href="/${s.id}/" class="card-hover transition-all duration-200 p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 hover:border-zinc-600 block">
|
||||
<div class="w-8 h-8 rounded-lg mb-3 flex items-center justify-center" style="background:${s.color}20">
|
||||
<div class="w-3 h-3 rounded-full" style="background:${s.color}"></div>
|
||||
</div>
|
||||
<div class="font-semibold text-sm">${s.name}</div>
|
||||
<div class="text-xs text-zinc-500 mt-1">${s.cat}</div>
|
||||
</a>`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
288
intercom/index.html
Normal file
288
intercom/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Intercom Connect — AI-Power Your Customer Messaging 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: '#286EFA',
|
||||
600: '#286EFAdd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #286EFA 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%, #286EFA25, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #286EFA20; }
|
||||
</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: #286EFA">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Intercom 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: #286EFA; 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: #286EFA"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Intercom</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Intercom MCP server. Conversations, customers, 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: #286EFA; 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/intercom.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: #286EFA; color: #fff">
|
||||
94 API Tools
|
||||
</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 Intercom + 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">Slow 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: #286EFA30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #286EFA"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI drafts instant, contextual 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">Repetitive support questions</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: #286EFA30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #286EFA"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Auto-suggest help articles</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">VIP customers waiting</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: #286EFA30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #286EFA"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Smart routing to priority queues</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 Intercom 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: #286EFA20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #286EFA"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Conversation Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Handle live chat, email, and in-app messages from one interface.</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: #286EFA20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #286EFA"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Customer Data</h3>
|
||||
<p class="text-zinc-400 text-sm">Access profiles, events, tags, and full conversation 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: #286EFA20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #286EFA"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Automation & Bots</h3>
|
||||
<p class="text-zinc-400 text-sm">Trigger workflows, route conversations, and deploy AI responses.</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: #286EFA20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #286EFA"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Help Center</h3>
|
||||
<p class="text-zinc-400 text-sm">Search articles, suggest solutions, and update documentation.</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: #286EFA; 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 Intercom 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 Intercom API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Intercom 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 Intercom?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Intercom Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #286EFA; 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 Intercom Connect. Not affiliated with Intercom.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
288
jira/index.html
Normal file
288
jira/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Jira Connect — AI-Power Your Issue Tracking 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: '#0052CC',
|
||||
600: '#0052CCdd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #0052CC 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%, #0052CC25, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #0052CC20; }
|
||||
</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: #0052CC">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Jira 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: #0052CC; 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: #0052CC"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Jira</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Jira MCP server. Issues, sprints, boards, and workflows. <strong class="text-white">128 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: #0052CC; 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/jira.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: #0052CC; color: #fff">
|
||||
128 API Tools
|
||||
</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 Jira + 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">Sprint planning takes hours</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: #0052CC30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #0052CC"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI recommends story points and assignments</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">Blockers go unnoticed</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: #0052CC30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #0052CC"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Instant alerts on dependencies</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 status 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: #0052CC30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #0052CC"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Automated issue transitions</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 Jira 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: #0052CC20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #0052CC"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Issue Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create, assign, transition issues across projects and boards.</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: #0052CC20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #0052CC"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Sprint Planning</h3>
|
||||
<p class="text-zinc-400 text-sm">Manage backlogs, plan sprints, track velocity and burndown.</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: #0052CC20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #0052CC"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Workflows & Automation</h3>
|
||||
<p class="text-zinc-400 text-sm">Trigger state changes, update fields, route assignments.</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: #0052CC20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #0052CC"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
|
||||
<p class="text-zinc-400 text-sm">Pull sprint reports, time tracking, and custom JQL queries.</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: #0052CC; 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 Jira 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 Jira API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Jira 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 Jira?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Jira Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #0052CC; 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 Jira Connect. Not affiliated with Jira.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
762
jobber/index.html
Normal file
762
jobber/index.html
Normal file
@ -0,0 +1,762 @@
|
||||
<!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="https://github.com/BusyBee3333/jobber-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/jobber-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/jobber-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/jobber-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/jobber-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/jobber-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
661
keap/index.html
Normal file
661
keap/index.html
Normal file
@ -0,0 +1,661 @@
|
||||
<!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="https://github.com/BusyBee3333/keap-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/keap-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/keap-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/keap-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/keap-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/keap-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
288
klaviyo/index.html
Normal file
288
klaviyo/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Klaviyo Connect — AI-Power Your Ecommerce 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: '#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; }
|
||||
</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">Klaviyo 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">Klaviyo</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Klaviyo MCP server. Email, SMS, flows, and customer data. <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: #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/klaviyo.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">
|
||||
112 API Tools
|
||||
</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 Klaviyo + 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">Abandoned carts go cold</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-optimized recovery sequences</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 blast 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: #00000030">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Hyper-personalized campaigns</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: #00000030">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI predicts optimal timing</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 Klaviyo 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">Campaign Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create and send email and SMS campaigns 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: #00000020">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Flow Automation</h3>
|
||||
<p class="text-zinc-400 text-sm">Build abandoned cart, welcome, and post-purchase sequences.</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">Segmentation</h3>
|
||||
<p class="text-zinc-400 text-sm">Target customers by behavior, purchase history, and 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: #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">Track revenue attribution, flow performance, and customer LTV.</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 Klaviyo 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 Klaviyo API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Klaviyo 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 Klaviyo?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Klaviyo 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 Klaviyo Connect. Not affiliated with Klaviyo.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
288
lever/index.html
Normal file
288
lever/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Lever Connect — AI-Power Your Recruiting 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: '#3CB2A4',
|
||||
600: '#3CB2A4dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #3CB2A4 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%, #3CB2A425, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #3CB2A420; }
|
||||
</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: #3CB2A4">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Lever 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: #3CB2A4; 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: #3CB2A4"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Lever</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Lever MCP server. Candidates, postings, interviews, and pipelines. <strong class="text-white">74 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: #3CB2A4; 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/lever.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: #3CB2A4; color: #fff">
|
||||
74 API Tools
|
||||
</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 Lever + 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">Top candidates ghosting</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: #3CB2A430">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #3CB2A4"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI sends timely 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">Scheduling interview 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: #3CB2A430">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #3CB2A4"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Auto-coordinate calendars</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 hiring decisions</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: #3CB2A430">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #3CB2A4"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Instant feedback summaries</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 Lever 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: #3CB2A420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #3CB2A4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Candidate Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Track applicants, manage stages, and schedule interviews.</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: #3CB2A420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #3CB2A4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Job Postings</h3>
|
||||
<p class="text-zinc-400 text-sm">Create and publish roles across multiple job boards.</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: #3CB2A420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #3CB2A4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Interview Scheduling</h3>
|
||||
<p class="text-zinc-400 text-sm">Coordinate availability, send invites, collect feedback.</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: #3CB2A420">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #3CB2A4"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Pipeline Analytics</h3>
|
||||
<p class="text-zinc-400 text-sm">Track time-to-hire, source performance, and conversion rates.</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: #3CB2A4; 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 Lever 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 Lever API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Lever 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 Lever?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Lever Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #3CB2A4; 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 Lever Connect. Not affiliated with Lever.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
647
lightspeed/index.html
Normal file
647
lightspeed/index.html
Normal file
@ -0,0 +1,647 @@
|
||||
<!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 https://github.com/BusyBee3333/lightspeed-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/lightspeed-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/lightspeed-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Terms</a>
|
||||
<a href="https://github.com" class="hover:text-white transition-colors">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/lightspeed-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
288
linear/index.html
Normal file
288
linear/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Linear Connect — AI-Power Your Product Development 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: '#5E6AD2',
|
||||
600: '#5E6AD2dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #5E6AD2 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%, #5E6AD225, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #5E6AD220; }
|
||||
</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: #5E6AD2">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Linear 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: #5E6AD2; 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: #5E6AD2"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Linear</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Linear MCP server. Issues, projects, cycles, and roadmaps. <strong class="text-white">102 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: #5E6AD2; 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/linear.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: #5E6AD2; color: #fff">
|
||||
102 API Tools
|
||||
</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 Linear + 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">Issue priority 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: #5E6AD230">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #5E6AD2"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI recommends what to work on next</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">Roadmap guesswork</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: #5E6AD230">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #5E6AD2"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Data-driven timeline predictions</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 status 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: #5E6AD230">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #5E6AD2"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Auto-sync from commits and PRs</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 Linear 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: #5E6AD220">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #5E6AD2"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Issue Tracking</h3>
|
||||
<p class="text-zinc-400 text-sm">Create, prioritize, and assign issues with smart workflows.</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: #5E6AD220">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #5E6AD2"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Project Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Organize work into projects, milestones, and cycles.</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: #5E6AD220">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #5E6AD2"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Roadmapping</h3>
|
||||
<p class="text-zinc-400 text-sm">Plan features, track progress, and communicate timelines.</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: #5E6AD220">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #5E6AD2"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Integrations</h3>
|
||||
<p class="text-zinc-400 text-sm">Sync with GitHub, Slack, Figma, and your dev stack.</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: #5E6AD2; 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 Linear 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 Linear API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Linear 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 Linear?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Linear Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #5E6AD2; 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 Linear Connect. Not affiliated with Linear.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
288
loom/index.html
Normal file
288
loom/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Loom Connect — AI-Power Your Video Messaging 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: '#625DF5',
|
||||
600: '#625DF5dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #625DF5 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%, #625DF525, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #625DF520; }
|
||||
</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: #625DF5">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Loom 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: #625DF5; 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: #625DF5"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Loom</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Loom MCP server. Videos, analytics, and sharing. <strong class="text-white">48 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: #625DF5; 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/loom.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: #625DF5; color: #fff">
|
||||
48 API Tools
|
||||
</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 Loom + 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">No idea who watches</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: #625DF530">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #625DF5"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Real-time viewer analytics</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">Videos buried in folders</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: #625DF530">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #625DF5"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI-powered search and discovery</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">Follow-ups forgotten</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: #625DF530">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #625DF5"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Auto-alert on high engagement</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 Loom 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: #625DF520">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #625DF5"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Video Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Upload, organize, and manage your video library.</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: #625DF520">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #625DF5"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Sharing & Permissions</h3>
|
||||
<p class="text-zinc-400 text-sm">Control access, generate links, and track viewers.</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: #625DF520">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #625DF5"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Analytics</h3>
|
||||
<p class="text-zinc-400 text-sm">See who watched, completion rates, and engagement metrics.</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: #625DF520">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #625DF5"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Transcripts & Captions</h3>
|
||||
<p class="text-zinc-400 text-sm">Auto-generate transcripts and make videos searchable.</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: #625DF5; 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 Loom 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 Loom API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Loom 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 Loom?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Loom Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #625DF5; 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 Loom Connect. Not affiliated with Loom.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
620
mailchimp/index.html
Normal file
620
mailchimp/index.html
Normal file
@ -0,0 +1,620 @@
|
||||
<!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="https://github.com/BusyBee3333/mailchimp-mcp-2026-complete" target="_blank" rel="noopener" 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 https://github.com/BusyBee3333/mailchimp-mcp-2026-complete.git
|
||||
<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="https://github.com/BusyBee3333/mailchimp-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
||||
<a href="https://github.com/BusyBee3333/mailchimp-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
||||
<a href="https://github.com/BusyBee3333/mailchimp-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
||||
<a href="https://github.com/BusyBee3333/mailchimp-mcp-2026-complete" target="_blank" rel="noopener" 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>
|
||||
288
meta-ads/index.html
Normal file
288
meta-ads/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Meta Ads Connect — AI-Power Your Facebook & Instagram Ads 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: '#1877F2',
|
||||
600: '#1877F2dd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #1877F2 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%, #1877F225, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #1877F220; }
|
||||
</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: #1877F2">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Meta Ads 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: #1877F2; 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: #1877F2"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Meta Ads</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Meta Ads MCP server. Campaigns, ad sets, creatives, and analytics. <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: #1877F2; 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/meta-ads.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: #1877F2; color: #fff">
|
||||
98 API Tools
|
||||
</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 Meta Ads + 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">Budget waste on bad ads</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: #1877F230">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #1877F2"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI pauses underperformers 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">Manual A/B test analysis</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: #1877F230">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #1877F2"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Auto-declare winners and scale</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">Audience fatigue</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: #1877F230">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #1877F2"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Smart creative rotation</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 Meta Ads 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: #1877F220">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Campaign Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create, launch, and optimize ad campaigns 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: #1877F220">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Audience Targeting</h3>
|
||||
<p class="text-zinc-400 text-sm">Build custom and lookalike audiences, manage exclusions.</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: #1877F220">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Creative Testing</h3>
|
||||
<p class="text-zinc-400 text-sm">A/B test ads, manage assets, and rotate creatives.</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: #1877F220">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Performance Analytics</h3>
|
||||
<p class="text-zinc-400 text-sm">Track ROAS, CPA, conversions, and attribution data.</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: #1877F2; 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 Meta Ads 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 Meta Ads API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Meta Ads 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 Meta Ads?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Meta Ads Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #1877F2; 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 Meta Ads Connect. Not affiliated with Meta Ads.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
288
monday/index.html
Normal file
288
monday/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Monday.com Connect — AI-Power Your Work Management 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: '#6161FF',
|
||||
600: '#6161FFdd',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #6161FF 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%, #6161FF25, transparent); }
|
||||
.card-glow:hover { box-shadow: 0 0 40px #6161FF20; }
|
||||
</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: #6161FF">
|
||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl">Monday.com 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: #6161FF; 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: #6161FF"></span>
|
||||
Open Source + Hosted
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||
Connect <span class="gradient-text">Monday.com</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Monday.com MCP server. Boards, items, updates, and automations. <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: #6161FF; 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/monday.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: #6161FF; color: #fff">
|
||||
134 API Tools
|
||||
</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 Monday.com + 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">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: #6161FF30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #6161FF"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI auto-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">Manual task assignments</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: #6161FF30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #6161FF"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Smart workload balancing</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">Deadline 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: #6161FF30">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #6161FF"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">Proactive at-risk 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 Monday.com 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: #6161FF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #6161FF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Board Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create and manage boards, groups, and columns dynamically.</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: #6161FF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #6161FF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Item Tracking</h3>
|
||||
<p class="text-zinc-400 text-sm">Add, update, and assign tasks with custom fields and statuses.</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: #6161FF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #6161FF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Automations</h3>
|
||||
<p class="text-zinc-400 text-sm">Trigger workflows, notifications, and status changes.</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: #6161FF20">
|
||||
<i data-lucide="layers" class="w-5 h-5" style="color: #6161FF"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
|
||||
<p class="text-zinc-400 text-sm">Generate dashboards, charts, and custom views on the fly.</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: #6161FF; 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 Monday.com 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 Monday.com API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Monday.com 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 Monday.com?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Monday.com Connect.</p>
|
||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #6161FF; 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 Monday.com Connect. Not affiliated with Monday.com.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
288
notion/index.html
Normal file
288
notion/index.html
Normal file
@ -0,0 +1,288 @@
|
||||
<!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>Notion Connect — AI-Power Your Workspace 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; }
|
||||
</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">Notion 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">Notion</span><br>to AI in 2 Clicks
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-zinc-400 mb-8">
|
||||
The complete Notion MCP server. Pages, databases, and blocks. <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: #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/notion.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">
|
||||
86 API Tools
|
||||
</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 Notion + 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">Lost docs and 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: #00000030">
|
||||
<i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
|
||||
</div>
|
||||
<p class="text-white font-medium">AI finds anything 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">Manual meeting notes</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-create and populate pages</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">Stale documentation</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">Scheduled content 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 Notion 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">Page Management</h3>
|
||||
<p class="text-zinc-400 text-sm">Create, update, and organize pages and subpages.</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">Database Operations</h3>
|
||||
<p class="text-zinc-400 text-sm">Query, filter, and manage database entries 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">Block Editing</h3>
|
||||
<p class="text-zinc-400 text-sm">Add text, headings, lists, and rich content blocks.</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">Search & Discovery</h3>
|
||||
<p class="text-zinc-400 text-sm">Find content across your entire workspace 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: #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 Notion 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 Notion API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Notion 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 Notion?</h2>
|
||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Notion 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 Notion Connect. Not affiliated with Notion.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
output/activecampaign.mp4
Normal file
BIN
output/activecampaign.mp4
Normal file
Binary file not shown.
BIN
output/acuity.mp4
Normal file
BIN
output/acuity.mp4
Normal file
Binary file not shown.
BIN
output/airtable.mp4
Normal file
BIN
output/airtable.mp4
Normal file
Binary file not shown.
BIN
output/apollo.mp4
Normal file
BIN
output/apollo.mp4
Normal file
Binary file not shown.
BIN
output/asana.mp4
Normal file
BIN
output/asana.mp4
Normal file
Binary file not shown.
BIN
output/bamboohr.mp4
Normal file
BIN
output/bamboohr.mp4
Normal file
Binary file not shown.
BIN
output/basecamp.mp4
Normal file
BIN
output/basecamp.mp4
Normal file
Binary file not shown.
BIN
output/bigcommerce.mp4
Normal file
BIN
output/bigcommerce.mp4
Normal file
Binary file not shown.
BIN
output/brevo.mp4
Normal file
BIN
output/brevo.mp4
Normal file
Binary file not shown.
BIN
output/calendly.mp4
Normal file
BIN
output/calendly.mp4
Normal file
Binary file not shown.
BIN
output/chargebee.mp4
Normal file
BIN
output/chargebee.mp4
Normal file
Binary file not shown.
BIN
output/clickup.mp4
Normal file
BIN
output/clickup.mp4
Normal file
Binary file not shown.
BIN
output/closebot.mp4
Normal file
BIN
output/closebot.mp4
Normal file
Binary file not shown.
BIN
output/closecrm.mp4
Normal file
BIN
output/closecrm.mp4
Normal file
Binary file not shown.
BIN
output/clover.mp4
Normal file
BIN
output/clover.mp4
Normal file
Binary file not shown.
BIN
output/constantcontact.mp4
Normal file
BIN
output/constantcontact.mp4
Normal file
Binary file not shown.
BIN
output/datadog.mp4
Normal file
BIN
output/datadog.mp4
Normal file
Binary file not shown.
BIN
output/docusign.mp4
Normal file
BIN
output/docusign.mp4
Normal file
Binary file not shown.
BIN
output/fieldedge.mp4
Normal file
BIN
output/fieldedge.mp4
Normal file
Binary file not shown.
BIN
output/freshbooks.mp4
Normal file
BIN
output/freshbooks.mp4
Normal file
Binary file not shown.
BIN
output/freshdesk.mp4
Normal file
BIN
output/freshdesk.mp4
Normal file
Binary file not shown.
BIN
output/ghl.mp4
Normal file
BIN
output/ghl.mp4
Normal file
Binary file not shown.
BIN
output/google-ads.mp4
Normal file
BIN
output/google-ads.mp4
Normal file
Binary file not shown.
BIN
output/google-console.mp4
Normal file
BIN
output/google-console.mp4
Normal file
Binary file not shown.
BIN
output/greenhouse.mp4
Normal file
BIN
output/greenhouse.mp4
Normal file
Binary file not shown.
BIN
output/gusto.mp4
Normal file
BIN
output/gusto.mp4
Normal file
Binary file not shown.
BIN
output/helpscout.mp4
Normal file
BIN
output/helpscout.mp4
Normal file
Binary file not shown.
BIN
output/housecallpro.mp4
Normal file
BIN
output/housecallpro.mp4
Normal file
Binary file not shown.
BIN
output/hubspot.mp4
Normal file
BIN
output/hubspot.mp4
Normal file
Binary file not shown.
BIN
output/intercom.mp4
Normal file
BIN
output/intercom.mp4
Normal file
Binary file not shown.
BIN
output/jira.mp4
Normal file
BIN
output/jira.mp4
Normal file
Binary file not shown.
BIN
output/jobber.mp4
Normal file
BIN
output/jobber.mp4
Normal file
Binary file not shown.
BIN
output/keap.mp4
Normal file
BIN
output/keap.mp4
Normal file
Binary file not shown.
BIN
output/klaviyo.mp4
Normal file
BIN
output/klaviyo.mp4
Normal file
Binary file not shown.
BIN
output/lever.mp4
Normal file
BIN
output/lever.mp4
Normal file
Binary file not shown.
BIN
output/lightspeed.mp4
Normal file
BIN
output/lightspeed.mp4
Normal file
Binary file not shown.
BIN
output/linear.mp4
Normal file
BIN
output/linear.mp4
Normal file
Binary file not shown.
BIN
output/loom.mp4
Normal file
BIN
output/loom.mp4
Normal file
Binary file not shown.
BIN
output/mailchimp.mp4
Normal file
BIN
output/mailchimp.mp4
Normal file
Binary file not shown.
BIN
output/mcp-demo.mp4
Normal file
BIN
output/mcp-demo.mp4
Normal file
Binary file not shown.
BIN
output/meta-ads.mp4
Normal file
BIN
output/meta-ads.mp4
Normal file
Binary file not shown.
BIN
output/monday.mp4
Normal file
BIN
output/monday.mp4
Normal file
Binary file not shown.
BIN
output/notion.mp4
Normal file
BIN
output/notion.mp4
Normal file
Binary file not shown.
BIN
output/pandadoc.mp4
Normal file
BIN
output/pandadoc.mp4
Normal file
Binary file not shown.
BIN
output/pipedrive.mp4
Normal file
BIN
output/pipedrive.mp4
Normal file
Binary file not shown.
BIN
output/quickbooks.mp4
Normal file
BIN
output/quickbooks.mp4
Normal file
Binary file not shown.
BIN
output/rippling.mp4
Normal file
BIN
output/rippling.mp4
Normal file
Binary file not shown.
BIN
output/salesforce.mp4
Normal file
BIN
output/salesforce.mp4
Normal file
Binary file not shown.
BIN
output/salesloft.mp4
Normal file
BIN
output/salesloft.mp4
Normal file
Binary file not shown.
BIN
output/sendgrid.mp4
Normal file
BIN
output/sendgrid.mp4
Normal file
Binary file not shown.
BIN
output/servicetitan.mp4
Normal file
BIN
output/servicetitan.mp4
Normal file
Binary file not shown.
BIN
output/shopify.mp4
Normal file
BIN
output/shopify.mp4
Normal file
Binary file not shown.
BIN
output/square.mp4
Normal file
BIN
output/square.mp4
Normal file
Binary file not shown.
BIN
output/squarespace.mp4
Normal file
BIN
output/squarespace.mp4
Normal file
Binary file not shown.
BIN
output/stripe-scroll-v2.mp4
Normal file
BIN
output/stripe-scroll-v2.mp4
Normal file
Binary file not shown.
BIN
output/stripe-scroll.mp4
Normal file
BIN
output/stripe-scroll.mp4
Normal file
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user