Add animated chat demos with embedded data widgets
This commit is contained in:
parent
85be3bb1ef
commit
c87ab15d8a
408
acuity.html
Normal file
408
acuity.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Acuity Scheduling Connect — AI-Power Your Bookings in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#315B7D',
|
||||||
|
600: '#315B7Ddd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #315B7D 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #315B7D25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #315B7D20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #315B7D">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Acuity Scheduling Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #315B7D; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #315B7D"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Acuity Scheduling</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Acuity MCP server. Appointments, availability, and clients. <strong class="text-white">38 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #315B7D; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/acuity.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #315B7D; color: #fff">
|
||||||
|
38 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Acuity Scheduling data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #315B7D, #315B7D99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">AC</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Acuity Scheduling Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 38 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Acuity Scheduling Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #315B7D">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Acuity Scheduling + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Phone tag with clients</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #315B7D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #315B7D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI handles all booking comms</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">No-show revenue loss</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #315B7D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #315B7D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Smart reminders reduce no-shows</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual intake processing</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #315B7D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #315B7D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI extracts and acts on form data</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Acuity Scheduling API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #315B7D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #315B7D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Appointment Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Book, reschedule, cancel appointments automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #315B7D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #315B7D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Availability Control</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Set hours, block time, manage calendars.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #315B7D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #315B7D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Client Data</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access intake forms, history, and preferences.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #315B7D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #315B7D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Payment Integration</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track payments, packages, and gift certificates.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #315B7D; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Acuity Scheduling account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Acuity Scheduling API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Acuity Scheduling settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Acuity Scheduling?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Acuity Scheduling Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #315B7D; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Acuity Scheduling Connect. Not affiliated with Acuity Scheduling.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"How's booking volume looking for this month? Any patterns?"},{"type":"ai","text":"Here's your booking dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eWeek 1\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:100%;border-radius:3px;background:#10B981;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003e34 appts\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eWeek 2\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:100%;border-radius:3px;background:#10B981;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003e41 appts\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eWeek 3\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:100%;border-radius:3px;background:#F59E0B;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003e28 appts\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eWeek 4\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:100%;border-radius:3px;background:#EF4444;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003e18 appts\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:6px;font-size:10px;color:#FBBF24;\"\u003e📉 Booking drop-off in Weeks 3-4 · 4 no-shows this month\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Send reminder emails for all upcoming appointments and offer discounts to fill slow days"},{"type":"ai","text":"Sent 24-hour reminders to all 46 upcoming appointments. Created a 15% off promotion for Week 4 slots and emailed to 230 past clients.","action":"✓ 46 reminders queued · Promo campaign sent to 230 clients"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #315B7D20; border: 1px solid #315B7D40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#315B7D;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #315B7D, #315B7D99)"><span class="font-bold text-[10px]" style="color: #fff">AC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,654 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Acuity Connect — AI-Power Your Bookings in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#f0f7ff',
|
|
||||||
100: '#e0efff',
|
|
||||||
200: '#b9ddff',
|
|
||||||
300: '#7cc4ff',
|
|
||||||
400: '#36a7ff',
|
|
||||||
500: '#315B7D',
|
|
||||||
600: '#2a4e6b',
|
|
||||||
700: '#234159',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #315B7D 0%, #6366f1 50%, #a855f7 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(49, 91, 125, 0.25), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(49, 91, 125, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(49, 91, 125, 0.5);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(49, 91, 125, 0.4); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(49, 91, 125, 0.6); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes gradient-shift {
|
|
||||||
0% { background-position: 0% 50%; }
|
|
||||||
50% { background-position: 100% 50%; }
|
|
||||||
100% { background-position: 0% 50%; }
|
|
||||||
}
|
|
||||||
.animated-gradient {
|
|
||||||
background-size: 200% 200%;
|
|
||||||
animation: gradient-shift 8s ease infinite;
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(49, 91, 125, 0.4), 0 0 40px 0 rgba(49, 91, 125, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(49, 91, 125, 0.6), 0 0 60px 10px rgba(49, 91, 125, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.icon-float {
|
|
||||||
animation: float 4s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.orb {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(80px);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(49, 91, 125, 0.5), rgba(99, 102, 241, 0.2));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Orbs Background -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="orb w-96 h-96 bg-brand-500/30 top-1/4 -left-48 animate-float"></div>
|
|
||||||
<div class="orb w-64 h-64 bg-purple-500/20 top-1/2 -right-32 animate-float-delayed"></div>
|
|
||||||
<div class="orb w-72 h-72 bg-indigo-500/20 bottom-1/4 left-1/3 animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-indigo-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="calendar-check" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Acuity Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-indigo-600 hover:from-brand-600 hover:to-indigo-700 rounded-xl font-medium transition shadow-lg shadow-brand-500/25">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
|
|
||||||
Connect <span class="gradient-text">Acuity</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10 leading-relaxed">
|
|
||||||
The complete Acuity Scheduling MCP server. <strong class="text-white">38 tools</strong> for appointments, availability, and clients.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-indigo-600 hover:from-brand-600 hover:to-indigo-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/30">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
|
|
||||||
<i data-lucide="play-circle" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col items-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">300+</strong> service professionals
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI manages your Acuity calendar</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/acuity.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="calendar-days" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Appointments</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="clock" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Availability</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Clients</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-8 leading-tight">
|
|
||||||
Setting up Acuity + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Phone tag with clients</p>
|
|
||||||
<p class="text-zinc-500">Back-and-forth scheduling eats up hours every week.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">No-show revenue loss</p>
|
|
||||||
<p class="text-zinc-500">Missed appointments mean money walking out the door.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Manual intake processing</p>
|
|
||||||
<p class="text-zinc-500">Copy-pasting form data into your systems wastes time.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-700/50 p-8 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-3 mb-8">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-green-600 flex items-center justify-center shadow-lg shadow-emerald-500/25">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold">With Acuity Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-5 text-lg">
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
|
|
||||||
</div>
|
|
||||||
AI handles all booking communications
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
|
|
||||||
</div>
|
|
||||||
Smart reminders reduce no-shows by 60%
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
|
|
||||||
</div>
|
|
||||||
Auto-extract and act on form data
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
|
|
||||||
</div>
|
|
||||||
Works with Claude, GPT, any MCP client
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
|
|
||||||
</div>
|
|
||||||
Connect in 2 clicks via OAuth
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Acuity API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-indigo-500/20 flex items-center justify-center mb-5 border border-brand-500/20">
|
|
||||||
<i data-lucide="calendar-days" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Appointment Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Book, reschedule, cancel appointments automatically. Full control over your schedule.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 border border-purple-500/20">
|
|
||||||
<i data-lucide="clock" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Availability Control</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Set hours, block time, manage calendars. Let AI optimize your availability.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-green-500/20 flex items-center justify-center mb-5 border border-emerald-500/20">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-emerald-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Client Data</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Access intake forms, history, and preferences. AI remembers every detail.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center mb-5 border border-amber-500/20">
|
|
||||||
<i data-lucide="credit-card" class="w-7 h-7 text-amber-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Payment Integration</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Track payments, packages, and gift certificates. Complete financial visibility.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-16 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">Full API coverage including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Appointment Types</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Calendars</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Forms</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Products</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Coupons</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Certificates</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Labels</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Webhooks</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6 border border-brand-500/30">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-700/50 p-8 shadow-2xl">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="+1 (555) 000-0000"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-indigo-600 hover:from-brand-600 hover:to-indigo-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message (hidden by default) -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-emerald-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-emerald-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const submitBtn = document.getElementById('submit-btn');
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
|
|
||||||
|
|
||||||
// Simulate API call
|
|
||||||
setTimeout(() => {
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-800/50 rounded-3xl border border-zinc-700/50 p-8 md:p-12 shadow-2xl">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6 border border-zinc-700">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6 text-lg leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium text-lg group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800 shadow-xl">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 leading-relaxed"><code><span class="text-zinc-500">$</span> git clone github.com/acuity-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-emerald-400">✓ Acuity MCP Server running</span>
|
|
||||||
<span class="text-emerald-400">✓ 38 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Acuity account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Acuity API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Acuity settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Acuity?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 300+ service professionals already automating with Acuity Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-indigo-600 hover:from-brand-600 hover:to-indigo-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/30">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 rounded-xl font-semibold text-lg transition border border-zinc-700">
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-indigo-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="calendar-check" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Acuity Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Acuity Connect. Not affiliated with Acuity Scheduling.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-indigo-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Show/hide sticky CTA based on scroll position
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
bamboohr.html
Normal file
408
bamboohr.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>BambooHR Connect — AI-Power Your HR in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#73C41D',
|
||||||
|
600: '#73C41Ddd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #73C41D 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #73C41D25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #73C41D20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #73C41D">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">BambooHR Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #73C41D; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #73C41D"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">BambooHR</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete BambooHR MCP server. Employees, time-off, and performance. <strong class="text-white">56 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #73C41D; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/bamboohr.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #73C41D; color: #fff">
|
||||||
|
56 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your BambooHR data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #73C41D, #73C41D99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">BH</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">BambooHR Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 56 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask BambooHR Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #73C41D">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up BambooHR + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">PTO request chaos</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #73C41D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #73C41D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI handles approvals instantly</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Onboarding checklists</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #73C41D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #73C41D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Automated new hire workflows</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Scattered employee data</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #73C41D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #73C41D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI answers HR questions fast</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full BambooHR API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #73C41D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #73C41D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Employee Directory</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access profiles, org charts, and contact info.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #73C41D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #73C41D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Time-Off Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Request, approve, track PTO automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #73C41D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #73C41D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Onboarding</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage new hire tasks, documents, and training.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #73C41D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #73C41D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Performance</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track goals, reviews, and feedback cycles.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #73C41D; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your BambooHR account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your BambooHR API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your BambooHR settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your BambooHR?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with BambooHR Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #73C41D; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 BambooHR Connect. Not affiliated with BambooHR.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"We have 3 new hires starting Monday. What's their onboarding status?"},{"type":"ai","text":"Here's the onboarding tracker:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eSarah K.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eEngineering - 8/12 tasks done\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003e67%\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eLaptop pending\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eMarcus L.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eSales - 11/12 tasks done\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003e92%\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eReady\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003ePriya R.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eDesign - 5/12 tasks done\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003e42%\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e7 items left\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003eMon start date · 2 of 3 on track\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Rush Priya's remaining items and order Sarah's laptop"},{"type":"ai","text":"Sent IT ticket for Sarah's MacBook Pro (expedited). Notified Priya's 4 task owners with urgent flags. Benefits enrollment link sent to all 3.","action":"✓ Laptop ordered · 4 urgent reminders · Benefits links sent"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #73C41D20; border: 1px solid #73C41D40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#73C41D;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #73C41D, #73C41D99)"><span class="font-bold text-[10px]" style="color: #fff">BH</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,666 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>BambooHR Connect — AI-Power Your HR in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#f7fee7',
|
|
||||||
100: '#ecfccb',
|
|
||||||
200: '#d9f99d',
|
|
||||||
300: '#bef264',
|
|
||||||
400: '#a3e635',
|
|
||||||
500: '#73C41D',
|
|
||||||
600: '#65a30d',
|
|
||||||
700: '#4d7c0f',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #73C41D 0%, #84cc16 50%, #65a30d 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(115, 196, 29, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 60px rgba(115, 196, 29, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(115, 196, 29, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite 2s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite 1s;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(115, 196, 29, 0.4); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(115, 196, 29, 0.6); }
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(115, 196, 29, 0.4), 0 0 40px 0 rgba(115, 196, 29, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(115, 196, 29, 0.6), 0 0 60px 10px rgba(115, 196, 29, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.feature-card:hover .feature-icon {
|
|
||||||
transform: scale(1.1) rotate(5deg);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(115, 196, 29, 0.5), rgba(101, 163, 13, 0.2));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
.text-shadow {
|
|
||||||
text-shadow: 0 0 40px rgba(115, 196, 29, 0.5);
|
|
||||||
}
|
|
||||||
.bg-grid {
|
|
||||||
background-image:
|
|
||||||
linear-gradient(rgba(115, 196, 29, 0.03) 1px, transparent 1px),
|
|
||||||
linear-gradient(90deg, rgba(115, 196, 29, 0.03) 1px, transparent 1px);
|
|
||||||
background-size: 50px 50px;
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: linear-gradient(135deg, rgba(115, 196, 29, 0.1) 0%, rgba(115, 196, 29, 0.02) 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-lime-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-green-400/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-lime-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="users" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">BambooHR Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20 bg-grid">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
|
||||||
Connect <span class="gradient-text text-shadow">BambooHR</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10">
|
|
||||||
The most comprehensive BambooHR MCP server. <strong class="text-white">56 tools</strong> for employees, time-off, and performance.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Stats Row -->
|
|
||||||
<div class="grid grid-cols-3 gap-4 max-w-2xl mx-auto mb-12">
|
|
||||||
<div class="stat-card rounded-xl border border-brand-500/20 p-4">
|
|
||||||
<div class="text-3xl font-bold text-brand-400">56</div>
|
|
||||||
<div class="text-zinc-400 text-sm">API Tools</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card rounded-xl border border-brand-500/20 p-4">
|
|
||||||
<div class="text-3xl font-bold text-brand-400">2s</div>
|
|
||||||
<div class="text-zinc-400 text-sm">Setup Time</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card rounded-xl border border-brand-500/20 p-4">
|
|
||||||
<div class="text-3xl font-bold text-brand-400">∞</div>
|
|
||||||
<div class="text-zinc-400 text-sm">Token Refresh</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col items-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">200+</strong> HR teams worldwide
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your HR operations</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/bamboohr.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Employee Data</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="calendar-off" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Time-Off</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="trophy" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Performance</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
|
||||||
HR + AI shouldn't<br>
|
|
||||||
<span class="text-zinc-500">require a dev team</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-5">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium text-white">PTO request chaos</p>
|
|
||||||
<p class="text-zinc-500 text-sm mt-1">Endless email threads. Lost requests. Frustrated employees.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium text-white">Onboarding checklists</p>
|
|
||||||
<p class="text-zinc-500 text-sm mt-1">Paper forms. Missed tasks. New hires left hanging.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium text-white">Scattered employee data</p>
|
|
||||||
<p class="text-zinc-500 text-sm mt-1">Hunting through spreadsheets for basic info.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-8 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-semibold">With BambooHR Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>AI handles approvals instantly</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>Automated new hire workflows</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>AI answers HR questions fast</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>Works with Claude, GPT, any MCP client</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>Full employee directory access</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full BambooHR API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:bg-brand-500/20 transition-all">
|
|
||||||
<i data-lucide="contact" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Employee Directory</h3>
|
|
||||||
<p class="text-zinc-400">Access profiles, org charts, and contact info. Full employee database.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:bg-purple-500/20 transition-all">
|
|
||||||
<i data-lucide="calendar-clock" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Time-Off Management</h3>
|
|
||||||
<p class="text-zinc-400">Request, approve, track PTO automatically. Balances & accruals.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-5 group-hover:bg-cyan-500/20 transition-all">
|
|
||||||
<i data-lucide="user-plus" class="w-7 h-7 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Onboarding</h3>
|
|
||||||
<p class="text-zinc-400">Manage new hire tasks, documents, and training. Seamless start.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center mb-5 group-hover:bg-amber-500/20 transition-all">
|
|
||||||
<i data-lucide="line-chart" class="w-7 h-7 text-amber-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Performance</h3>
|
|
||||||
<p class="text-zinc-400">Track goals, reviews, and feedback cycles. Continuous improvement.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ 50 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Benefits</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Compensation</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Documents</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Reports</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Training</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Applicants</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Timesheets</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Webhooks</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Use Cases -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">What you can automate</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Real HR workflows, powered by AI</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid md:grid-cols-3 gap-6">
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-500/10 to-transparent border border-brand-500/20">
|
|
||||||
<div class="text-4xl mb-4">🏖️</div>
|
|
||||||
<h3 class="text-lg font-semibold mb-2">PTO Assistant</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">"Check my PTO balance and submit a request for next Friday."</p>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20">
|
|
||||||
<div class="text-4xl mb-4">📋</div>
|
|
||||||
<h3 class="text-lg font-semibold mb-2">Onboarding Bot</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">"Create onboarding tasks for our new engineer starting Monday."</p>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20">
|
|
||||||
<div class="text-4xl mb-4">📊</div>
|
|
||||||
<h3 class="text-lg font-semibold mb-2">HR Reports</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">"Generate a headcount report by department for Q1."</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="Your phone number"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-2xl">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4 transition group-hover:translate-x-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/bamboohr-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ BambooHR MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 56 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Is employee data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Absolutely. We use OAuth 2.0 and never store your BambooHR API keys. All data is encrypted at rest and in transit.
|
|
||||||
You control exactly what the AI can access through BambooHR's permissions.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Can AI approve PTO requests?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Yes! With the right permissions, AI can read requests, check balances, and approve or flag requests based on rules you define.
|
|
||||||
You stay in control of the approval logic.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Does it work with our HRIS setup?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
If you use BambooHR, yes. We support the full BambooHR API including custom fields, reports, and webhooks.
|
|
||||||
Works with any BambooHR plan that includes API access.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your HR?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 200+ HR teams already automating with BambooHR Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-lime-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="users" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">BambooHR Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-1">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 BambooHR Connect. Not affiliated with BambooHR.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-lime-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
basecamp.html
Normal file
408
basecamp.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Basecamp Connect — AI-Power Your Projects in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#1D2D35',
|
||||||
|
600: '#1D2D35dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #1D2D35 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #1D2D3525, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #1D2D3520; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1D2D35">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Basecamp Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #1D2D35; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #1D2D35"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Basecamp</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Basecamp MCP server. Projects, todos, and messages. <strong class="text-white">62 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #1D2D35; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/basecamp.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #1D2D35; color: #fff">
|
||||||
|
62 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Basecamp data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #1D2D35, #1D2D3599)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">BC</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Basecamp Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 62 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Basecamp Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1D2D35">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Basecamp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Project status meetings</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1D2D3530">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #1D2D35"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI summarizes progress</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Lost in message threads</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1D2D3530">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #1D2D35"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI finds what you need</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Forgotten deadlines</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1D2D3530">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #1D2D35"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Proactive milestone alerts</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Basecamp API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1D2D3520">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1D2D35"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Project Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create projects, manage access, organize work.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1D2D3520">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1D2D35"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">To-dos</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create lists, assign tasks, track completion.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1D2D3520">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1D2D35"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Message Boards</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Post updates, discussions, and announcements.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1D2D3520">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1D2D35"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Schedule</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage milestones, events, and deadlines.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #1D2D35; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Basecamp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Basecamp API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Basecamp settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Basecamp?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Basecamp Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #1D2D35; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Basecamp Connect. Not affiliated with Basecamp.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"Give me a status update on all active projects. Any deadlines coming up?"},{"type":"ai","text":"Here's your project overview:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:6px;\"\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eWebsite v2\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#10B98120;border:1px solid #10B98140;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#10B981;\"\u003e8\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eQ3 Campaign\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#F59E0B20;border:1px solid #F59E0B40;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F59E0B;\"\u003e14\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eAPI Docs\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#10B98120;border:1px solid #10B98140;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#10B981;\"\u003e5\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eMobile App\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#EF444420;border:1px solid #EF444440;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#EF4444;\"\u003e22\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ Mobile App: 22 open to-dos · Deadline in 5 days\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Post a status update to the Mobile App project and flag overdue items"},{"type":"ai","text":"Posted status update to Mobile App message board with progress summary. Flagged 6 overdue to-dos and notified assignees. Added a milestone check-in for Wednesday.","action":"✓ Status posted · 6 overdue items flagged · Check-in scheduled Wed"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #1D2D3520; border: 1px solid #1D2D3540;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#1D2D35;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #1D2D35, #1D2D3599)"><span class="font-bold text-[10px]" style="color: #fff">BC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,631 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Basecamp Connect — AI-Power Your Projects in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#f8fafc',
|
|
||||||
100: '#f1f5f9',
|
|
||||||
200: '#e2e8f0',
|
|
||||||
300: '#cbd5e1',
|
|
||||||
400: '#94a3b8',
|
|
||||||
500: '#1D2D35',
|
|
||||||
600: '#18252c',
|
|
||||||
700: '#131d23',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #64748b 0%, #22d3ee 50%, #a78bfa 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 211, 238, 0.15), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(34, 211, 238, 0.15);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(34, 211, 238, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-pulse-glow {
|
|
||||||
animation: pulseGlow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulseGlow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(34, 211, 238, 0.5); }
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(34, 211, 238, 0.4), 0 0 40px 0 rgba(34, 211, 238, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(34, 211, 238, 0.6), 0 0 60px 10px rgba(34, 211, 238, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(34, 211, 238, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(34, 211, 238, 0.5), rgba(167, 139, 250, 0.2));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.accent-gradient {
|
|
||||||
background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg accent-gradient flex items-center justify-center">
|
|
||||||
<i data-lucide="mountain" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Basecamp Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 accent-gradient rounded-lg font-medium transition transform hover:scale-105">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
|
|
||||||
<!-- Floating background elements -->
|
|
||||||
<div class="absolute top-40 left-10 w-72 h-72 bg-cyan-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-violet-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20">
|
|
||||||
<div class="text-center relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-cyan-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">Basecamp</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
|
|
||||||
The complete Basecamp MCP server. <strong class="text-white">62 tools</strong> for projects, todos, and messages.
|
|
||||||
No setup. No OAuth headaches. Just connect and ship.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
|
||||||
<a href="#pricing" class="px-8 py-4 accent-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-cyan-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center gap-4 justify-center">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 accent-gradient flex items-center justify-center text-xs font-bold">+75</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">250+</strong> project teams
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your project workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/basecamp.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="folder-kanban" class="w-4 h-4 text-cyan-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Projects</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="check-square" class="w-4 h-4 text-cyan-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">To-dos</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="message-square" class="w-4 h-4 text-cyan-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Messages</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up Basecamp + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<!-- Pain Point 1 -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
|
||||||
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Project status meetings</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Endless check-ins. Everyone's time wasted. Progress buried in threads.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI summarizes progress</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 2 -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
|
||||||
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Lost in message threads</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Important decisions buried. Context scattered. Nobody can find anything.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI finds what you need</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 3 -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
|
||||||
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Forgotten deadlines</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Milestones slip. No one noticed until it's too late. Scramble mode.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">Proactive milestone alerts</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-cyan-500/10 text-cyan-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Basecamp API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="folder-kanban" class="w-7 h-7 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Project Management</h3>
|
|
||||||
<p class="text-zinc-400">Create projects, manage access, organize work — all automated.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="check-square" class="w-7 h-7 text-violet-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">To-dos</h3>
|
|
||||||
<p class="text-zinc-400">Create lists, assign tasks, track completion automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-amber-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="message-square" class="w-7 h-7 text-orange-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Message Boards</h3>
|
|
||||||
<p class="text-zinc-400">Post updates, discussions, and announcements with AI help.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="calendar-days" class="w-7 h-7 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Schedule</h3>
|
|
||||||
<p class="text-zinc-400">Manage milestones, events, and deadlines proactively.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ 55 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Campfires</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Documents</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">People</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Uploads</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Comments</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Questions</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Check-ins</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-cyan-500/20 text-cyan-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 to-violet-500/10 rounded-3xl blur-xl"></div>
|
|
||||||
<div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-cyan-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-cyan-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="Your phone number"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 accent-gradient hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-cyan-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message (hidden by default) -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const submitBtn = document.getElementById('submit-btn');
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-cyan-500/5 rounded-full blur-3xl"></div>
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 font-medium transition">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/basecamp-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Basecamp MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 62 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Basecamp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Basecamp API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Basecamp settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Basecamp?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 250+ project teams already automating with Basecamp Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 accent-gradient hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-cyan-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg accent-gradient flex items-center justify-center">
|
|
||||||
<i data-lucide="mountain" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Basecamp Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Basecamp Connect. Not affiliated with Basecamp.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 accent-gradient rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
bigcommerce.html
Normal file
408
bigcommerce.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>BigCommerce Connect — AI-Power Your Store in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#34313F',
|
||||||
|
600: '#34313Fdd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #34313F 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #34313F25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #34313F20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #34313F">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">BigCommerce Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #34313F; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #34313F"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">BigCommerce</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete BigCommerce MCP server. Products, orders, and customers. <strong class="text-white">112 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #34313F; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/bigcommerce.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #34313F; color: #fff">
|
||||||
|
112 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your BigCommerce data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #34313F, #34313F99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">BC</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">BigCommerce Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 112 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask BigCommerce Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #34313F">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up BigCommerce + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual product updates</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #34313F30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #34313F"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI syncs catalog changes</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Cart abandonment</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #34313F30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #34313F"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI recovers lost sales</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Generic promotions</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #34313F30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #34313F"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI personalizes offers</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full BigCommerce API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #34313F20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #34313F"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Product Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, update, manage catalog at scale.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #34313F20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #34313F"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Order Processing</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track orders, manage fulfillment, handle returns.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #34313F20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #34313F"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Customer Data</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access profiles, order history, and preferences.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #34313F20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #34313F"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Promotions</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create coupons, discounts, and special offers.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #34313F; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your BigCommerce account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your BigCommerce API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your BigCommerce settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your BigCommerce?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with BigCommerce Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #34313F; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 BigCommerce Connect. Not affiliated with BigCommerce.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"Show me abandoned cart stats. How much revenue are we leaving on the table?"},{"type":"ai","text":"Here's your cart recovery dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAbandoned\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$34,200\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e68 carts\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eRecovered\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$8,100\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e23.7%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eStill Open\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$26,100\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003erecoverable\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e💰 $26,100 recoverable · 12 carts have items \u003e$500\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Send a 10% discount to the high-value abandoned carts (over $500)"},{"type":"ai","text":"Sent personalized recovery emails to 12 high-value carts with unique 10% discount codes. Expiry set to 48 hours for urgency. Expected recovery: $3,800.","action":"✓ 12 recovery emails sent · 10% codes generated · 48hr expiry"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #34313F20; border: 1px solid #34313F40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#34313F;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #34313F, #34313F99)"><span class="font-bold text-[10px]" style="color: #fff">BC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,645 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>BigCommerce Connect — AI-Power Your Store in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#f5f3ff',
|
|
||||||
100: '#ede9fe',
|
|
||||||
200: '#ddd6fe',
|
|
||||||
300: '#c4b5fd',
|
|
||||||
400: '#a78bfa',
|
|
||||||
500: '#34313F',
|
|
||||||
600: '#2a2833',
|
|
||||||
700: '#201f28',
|
|
||||||
accent: '#6366f1',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 40%, #a855f7 70%, #ec4899 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(99, 102, 241, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(99, 102, 241, 0.4);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 25px 80px rgba(99, 102, 241, 0.25), 0 10px 40px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { opacity: 0.5; }
|
|
||||||
50% { opacity: 1; }
|
|
||||||
}
|
|
||||||
.pulse-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% { background-position: -200% 0; }
|
|
||||||
100% { background-position: 200% 0; }
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(99, 102, 241, 0.4), 0 0 40px 0 rgba(99, 102, 241, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(99, 102, 241, 0.6), 0 0 60px 10px rgba(99, 102, 241, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: #18181b;
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
.text-glow {
|
|
||||||
text-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-80 h-80 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center shadow-lg shadow-indigo-500/25">
|
|
||||||
<i data-lucide="store" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl tracking-tight">BigCommerce Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-lg font-semibold transition-all shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40 hover:scale-105">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20">
|
|
||||||
<div class="max-w-4xl mx-auto text-center">
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="relative flex h-2 w-2">
|
|
||||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-500 opacity-75"></span>
|
|
||||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
|
|
||||||
</span>
|
|
||||||
Open Source + Hosted Cloud
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text text-glow">BigCommerce</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
|
|
||||||
The complete BigCommerce MCP server. <strong class="text-white">112 tools</strong> for products, orders, and customers.
|
|
||||||
No setup headaches. Just connect and scale.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-indigo-500/25 flex items-center justify-center gap-2">
|
|
||||||
Join the Waitlist
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2 backdrop-blur-sm">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center justify-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400 text-sm">
|
|
||||||
Trusted by <strong class="text-white">500+</strong> e-commerce businesses
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your e-commerce operations</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/bigcommerce.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="package-search" class="w-4 h-4 text-indigo-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Products</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="shopping-cart" class="w-4 h-4 text-indigo-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Orders</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-4 h-4 text-indigo-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Analytics</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
||||||
<div>
|
|
||||||
<span class="inline-block px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm font-medium mb-6">The Problem</span>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
|
|
||||||
Setting up BigCommerce + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-start gap-4 group">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Manual product updates</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Updating hundreds of products one by one is mind-numbing.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 group">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Cart abandonment bleeds revenue</p>
|
|
||||||
<p class="text-zinc-500 mt-1">70% of carts are abandoned. Recovery emails are generic.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 group">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Generic promotions don't convert</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Same discount for everyone means leaving money on the table.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8 md:p-10">
|
|
||||||
<div class="flex items-center gap-3 mb-8">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center shadow-lg shadow-indigo-500/25">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold">With BigCommerce Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-5">
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
|
|
||||||
<span>AI syncs catalog changes automatically</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
|
|
||||||
<span>Smart recovery that actually converts</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
|
|
||||||
<span>AI personalizes offers per customer</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
|
|
||||||
<span>Works with Claude, GPT, any MCP client</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
|
|
||||||
<span>2-click OAuth — no API key headaches</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="inline-block px-3 py-1 rounded-full bg-purple-500/10 text-purple-400 text-sm font-medium mb-4">Features</span>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full BigCommerce API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-indigo-500/20 to-indigo-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="package-search" class="w-7 h-7 text-indigo-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Product Management</h3>
|
|
||||||
<p class="text-zinc-400">Create, update, and manage your entire catalog at scale with AI assistance.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="shopping-cart" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Order Processing</h3>
|
|
||||||
<p class="text-zinc-400">Track orders, manage fulfillment, and handle returns automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-pink-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Customer Data</h3>
|
|
||||||
<p class="text-zinc-400">Access profiles, order history, and preferences for personalization.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="percent" class="w-7 h-7 text-amber-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Promotions</h3>
|
|
||||||
<p class="text-zinc-400">Create coupons, discounts, and special offers intelligently.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 95 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Variants</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Categories</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Brands</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Shipping</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Taxes</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Webhooks</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Scripts</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Widgets</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/20 text-indigo-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-indigo-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-indigo-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-indigo-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-indigo-500/5 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 text-lg mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="https://github.com" class="inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 font-semibold transition-colors group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/bigcommerce-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ BigCommerce MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 112 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
<p class="text-zinc-400">Everything you need to know about BigCommerce Connect</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors" open>
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your BigCommerce account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your BigCommerce API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your BigCommerce settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What BigCommerce plans are supported?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
BigCommerce Connect works with all BigCommerce plans that have API access — Standard, Plus, Pro, and Enterprise.
|
|
||||||
Some advanced features may require higher-tier plans.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-indigo-500/5 to-transparent"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your <span class="gradient-text">BigCommerce?</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 500+ e-commerce businesses already automating with BigCommerce Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-indigo-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="store" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">BigCommerce Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Terms</a>
|
|
||||||
<a href="https://github.com" class="hover:text-white transition-colors">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 BigCommerce Connect. Not affiliated with BigCommerce.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full font-semibold transition-all"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
brevo.html
Normal file
408
brevo.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Brevo Connect — AI-Power Your Marketing in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#0B996E',
|
||||||
|
600: '#0B996Edd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #0B996E 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #0B996E25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #0B996E20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0B996E">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Brevo Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #0B996E; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #0B996E"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Brevo</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Brevo MCP server. Email, SMS, and automation — unified. <strong class="text-white">82 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #0B996E; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/brevo.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #0B996E; color: #fff">
|
||||||
|
82 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Brevo data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #0B996E, #0B996E99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">BV</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Brevo Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 82 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Brevo Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0B996E">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Brevo + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Disconnected channels</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0B996E30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0B996E"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Unified email + SMS from AI</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Low engagement rates</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0B996E30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0B996E"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI optimizes content and timing</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual campaign setup</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0B996E30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0B996E"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI builds campaigns from briefs</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Brevo API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0B996E20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0B996E"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Email Campaigns</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, send, and track email marketing at scale.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0B996E20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0B996E"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">SMS Marketing</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Send texts, manage opt-ins, track deliverability.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0B996E20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0B996E"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Contact Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Sync lists, manage attributes, segment audiences.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0B996E20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0B996E"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Transactional</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Trigger order confirmations, receipts, notifications.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #0B996E; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Brevo account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Brevo API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Brevo settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Brevo?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Brevo Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #0B996E; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Brevo Connect. Not affiliated with Brevo.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"Show me our email + SMS performance this month. Which channel converts better?"},{"type":"ai","text":"Here's your multi-channel breakdown:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eEmail Conv.\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e3.2%\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+0.4%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eSMS Conv.\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e7.8%\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+1.2%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eTotal Rev.\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$24,150\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+18%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e📱 SMS outperforms email 2.4x on conversion rate\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Shift 30% of next campaign budget to SMS and create a flash sale sequence"},{"type":"ai","text":"Created \"Flash Friday\" campaign: 3-SMS sequence over 6 hours with email backup for non-openers. Budget reallocated: 70/30 email-to-SMS split.","action":"✓ Campaign built · Budget split 70/30 · Launches Friday 9am"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #0B996E20; border: 1px solid #0B996E40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#0B996E;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #0B996E, #0B996E99)"><span class="font-bold text-[10px]" style="color: #fff">BV</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
653
brevo/index.html
653
brevo/index.html
@ -1,653 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Brevo Connect — AI-Power Your Marketing in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#ecfdf5',
|
|
||||||
100: '#d1fae5',
|
|
||||||
200: '#a7f3d0',
|
|
||||||
300: '#6ee7b7',
|
|
||||||
400: '#34d399',
|
|
||||||
500: '#0B996E',
|
|
||||||
600: '#059669',
|
|
||||||
700: '#047857',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #0B996E 0%, #34d399 50%, #0B996E 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(11, 153, 110, 0.25), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(11, 153, 110, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(11, 153, 110, 0.5);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(11, 153, 110, 0.4); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(11, 153, 110, 0.6); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes gradient-shift {
|
|
||||||
0% { background-position: 0% 50%; }
|
|
||||||
50% { background-position: 100% 50%; }
|
|
||||||
100% { background-position: 0% 50%; }
|
|
||||||
}
|
|
||||||
.animated-gradient {
|
|
||||||
background: linear-gradient(90deg, #0B996E, #34d399, #0B996E);
|
|
||||||
background-size: 200% 200%;
|
|
||||||
animation: gradient-shift 4s ease infinite;
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(11, 153, 110, 0.4), 0 0 40px 0 rgba(11, 153, 110, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(11, 153, 110, 0.6), 0 0 60px 10px rgba(11, 153, 110, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.orb {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(80px);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.brevo-gradient {
|
|
||||||
background: linear-gradient(135deg, rgba(11, 153, 110, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(11, 153, 110, 0.5), rgba(52, 211, 153, 0.2));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Orbs Background -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="orb w-96 h-96 bg-brand-500/30 top-1/4 -left-48 animate-float"></div>
|
|
||||||
<div class="orb w-64 h-64 bg-emerald-400/20 top-1/2 -right-32 animate-float-delayed"></div>
|
|
||||||
<div class="orb w-72 h-72 bg-teal-500/20 bottom-1/4 left-1/3 animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="send" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Brevo Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-medium transition shadow-lg shadow-brand-500/25">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
|
|
||||||
Connect <span class="gradient-text">Brevo</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10 leading-relaxed">
|
|
||||||
The complete Brevo MCP server. <strong class="text-white">82 tools</strong> for email, SMS, and automation.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/30">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
|
|
||||||
<i data-lucide="play-circle" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col items-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">500+</strong> marketing teams
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI manages your Brevo campaigns</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/brevo.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="mail" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Email</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="smartphone" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">SMS</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="zap" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Automation</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-8 leading-tight">
|
|
||||||
Setting up Brevo + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Disconnected channels</p>
|
|
||||||
<p class="text-zinc-500">Email here, SMS there, no unified view of engagement.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Low engagement rates</p>
|
|
||||||
<p class="text-zinc-500">Generic blasts that land in spam or get ignored.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Manual campaign setup</p>
|
|
||||||
<p class="text-zinc-500">Hours spent building what AI could do in minutes.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="brevo-gradient rounded-3xl border border-brand-500/20 p-8 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-3 mb-8">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold">With Brevo Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-5 text-lg">
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
Unified email + SMS from AI
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
AI optimizes content and timing
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
Build campaigns from simple briefs
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
Works with Claude, GPT, any MCP client
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
Connect in 2 clicks via OAuth
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Brevo API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-5 border border-brand-500/20">
|
|
||||||
<i data-lucide="mail" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Email Campaigns</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Create, send, and track email marketing at scale. AI writes, you approve.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 border border-purple-500/20">
|
|
||||||
<i data-lucide="smartphone" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">SMS Marketing</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Send texts, manage opt-ins, track deliverability. Reach customers instantly.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5 border border-blue-500/20">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-blue-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Contact Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Sync lists, manage attributes, segment audiences. AI keeps it organized.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center mb-5 border border-amber-500/20">
|
|
||||||
<i data-lucide="zap" class="w-7 h-7 text-amber-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Transactional</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Trigger order confirmations, receipts, notifications. Automated and reliable.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-16 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">Full API coverage including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Email Templates</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Lists</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Segments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Workflows</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Webhooks</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Analytics</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Senders</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Domains</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6 border border-brand-500/30">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="brevo-gradient rounded-3xl border border-brand-500/20 p-8 shadow-2xl">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="+1 (555) 000-0000"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message (hidden by default) -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const submitBtn = document.getElementById('submit-btn');
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="brevo-gradient rounded-3xl border border-brand-500/20 p-8 md:p-12 shadow-2xl">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6 border border-zinc-700">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6 text-lg leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium text-lg group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800 shadow-xl">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 leading-relaxed"><code><span class="text-zinc-500">$</span> git clone github.com/brevo-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Brevo MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 82 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Brevo account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Brevo API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Brevo settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can AI send emails on my behalf?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes, with your approval. AI can draft campaigns, schedule sends, and trigger transactional emails.
|
|
||||||
You control the permissions and can require confirmation for any action.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Brevo?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 500+ marketing teams already automating with Brevo Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/30">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 rounded-xl font-semibold text-lg transition border border-zinc-700">
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="send" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Brevo Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Brevo Connect. Not affiliated with Brevo (Sendinblue).</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-emerald-500 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
calendly.html
Normal file
408
calendly.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Calendly Connect — AI-Power Your Scheduling in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#006BFF',
|
||||||
|
600: '#006BFFdd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #006BFF 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #006BFF25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #006BFF20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #006BFF">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Calendly Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #006BFF; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #006BFF"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Calendly</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Calendly MCP server. Manage events, availability, and bookings with AI. <strong class="text-white">47 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #006BFF; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/calendly.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #006BFF; color: #fff">
|
||||||
|
47 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Calendly data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #006BFF, #006BFF99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">CL</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Calendly Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 47 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Calendly Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #006BFF">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Calendly + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual calendar juggling</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #006BFF30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #006BFF"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI books optimal slots for you</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Copy-pasting meeting details</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #006BFF30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #006BFF"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Auto-extract and act on booking data</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Missed follow-ups</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #006BFF30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #006BFF"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Instant post-meeting actions triggered</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Calendly API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006BFF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #006BFF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Event Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, update, cancel events. Full control over your calendar.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006BFF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #006BFF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Availability</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Check slots, set buffers, manage scheduling rules automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006BFF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #006BFF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Invitee Data</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access booking details, custom questions, and attendee info.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #006BFF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #006BFF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Webhooks</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">React to bookings in real-time. Trigger automations instantly.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #006BFF; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Calendly account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Calendly API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Calendly settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Calendly?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Calendly Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #006BFF; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Calendly Connect. Not affiliated with Calendly.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"What does my schedule look like this week? Any double-bookings?"},{"type":"ai","text":"Here's your week at a glance:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eMon\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:40%;border-radius:3px;background:#10B981;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003eLight\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eTue\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:70%;border-radius:3px;background:#F59E0B;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003eBusy\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eWed\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:90%;border-radius:3px;background:#EF4444;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003eFull\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eThu\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:30%;border-radius:3px;background:#10B981;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003eLight\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003cspan style=\"font-size:11px;color:#9CA3AF;width:50px;flex-shrink:0;\"\u003eFri\u003c/span\u003e\u003cdiv style=\"flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.05);overflow:hidden;\"\u003e\u003cdiv style=\"height:100%;width:60%;border-radius:3px;background:#F59E0B;\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cspan style=\"font-size:10px;color:#9CA3AF;width:50px;text-align:right;flex-shrink:0;\"\u003eBusy\u003c/span\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:6px;font-size:10px;color:#FBBF24;\"\u003e⚠ 1 conflict: Tue 2-3pm overlap\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Fix the Tuesday conflict and block Friday afternoon for deep work"},{"type":"ai","text":"Done! Rescheduled the 2pm to 3:30pm and blocked Fri 1-5pm. The invitee has been notified automatically.","action":"✓ Conflict resolved · 1 rescheduled · 1 block created"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #006BFF20; border: 1px solid #006BFF40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#006BFF;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #006BFF, #006BFF99)"><span class="font-bold text-[10px]" style="color: #fff">CL</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,610 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Calendly Connect — AI-Power Your Scheduling in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#eff6ff',
|
|
||||||
100: '#dbeafe',
|
|
||||||
200: '#bfdbfe',
|
|
||||||
300: '#93c5fd',
|
|
||||||
400: '#60a5fa',
|
|
||||||
500: '#006BFF',
|
|
||||||
600: '#0055cc',
|
|
||||||
700: '#004299',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #006BFF 0%, #8b5cf6 50%, #ec4899 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 107, 255, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 40px rgba(0, 107, 255, 0.15);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(0, 107, 255, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-pulse-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
||||||
50% { transform: translateY(-20px) rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { opacity: 0.5; transform: scale(1); }
|
|
||||||
50% { opacity: 0.8; transform: scale(1.05); }
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 107, 255, 0.4), 0 0 40px 0 rgba(0, 107, 255, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(0, 107, 255, 0.6), 0 0 60px 10px rgba(0, 107, 255, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, #006BFF, #8b5cf6, #ec4899);
|
|
||||||
padding: 2px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: #09090b;
|
|
||||||
border-radius: calc(1rem - 2px);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
background: linear-gradient(135deg, rgba(0, 107, 255, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
|
|
||||||
}
|
|
||||||
.bg-grid {
|
|
||||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
|
|
||||||
|
|
||||||
<!-- Floating decorative elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-10 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="calendar" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Calendly Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105 transform">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20">
|
|
||||||
<div class="flex flex-col items-center text-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">Calendly</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
|
|
||||||
The complete Calendly MCP server. <strong class="text-white">47 tools</strong> covering events, availability, and bookings.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 flex items-center justify-center gap-2">
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">2,500+</strong> scheduling pros
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your scheduling workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/calendly.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="calendar-check" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Events</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="clock" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Availability</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Bookings</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up Calendly + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<!-- Pain Point 1 -->
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-medium text-zinc-400">Manual calendar juggling</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-semibold text-white">AI books optimal slots for you</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 2 -->
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-medium text-zinc-400">Copy-pasting meeting details</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-semibold text-white">Auto-extract and act on booking data</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 3 -->
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-medium text-zinc-400">Missed follow-ups</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-semibold text-white">Instant post-meeting actions triggered</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Calendly API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="calendar-check" class="w-7 h-7 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Event Management</h3>
|
|
||||||
<p class="text-zinc-400">Create, update, cancel events. Full control over your calendar.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="clock" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Availability</h3>
|
|
||||||
<p class="text-zinc-400">Check slots, set buffers, manage scheduling rules automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Invitee Data</h3>
|
|
||||||
<p class="text-zinc-400">Access booking details, custom questions, and attendee info.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="webhook" class="w-7 h-7 text-orange-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Webhooks</h3>
|
|
||||||
<p class="text-zinc-400">React to bookings in real-time. Trigger automations instantly.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ More endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Event Types</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Routing Forms</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Organizations</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">User Management</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Scheduling Links</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">One-off Meetings</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/calendly-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Calendly MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 47 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
For the hosted version, no. Just connect your Calendly account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Calendly API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Calendly settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Calendly?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join thousands of scheduling pros already automating with Calendly Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="calendar" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Calendly Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Calendly Connect. Not affiliated with Calendly.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
clickup.html
Normal file
408
clickup.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>ClickUp Connect — AI-Power Your Projects in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#7B68EE',
|
||||||
|
600: '#7B68EEdd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #7B68EE 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #7B68EE25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #7B68EE20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #7B68EE">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">ClickUp Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #7B68EE; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #7B68EE"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">ClickUp</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete ClickUp MCP server. Tasks, docs, and goals — AI-managed. <strong class="text-white">134 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #7B68EE; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/clickup.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #7B68EE; color: #fff">
|
||||||
|
134 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your ClickUp data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #7B68EE, #7B68EE99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">CU</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">ClickUp Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 134 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask ClickUp Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #7B68EE">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up ClickUp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Task overload paralysis</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7B68EE30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #7B68EE"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI prioritizes your day</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Status update meetings</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7B68EE30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #7B68EE"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI generates progress reports</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Scattered project info</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7B68EE30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #7B68EE"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI finds anything instantly</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full ClickUp API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7B68EE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #7B68EE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Task Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, update, assign tasks. Full project control.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7B68EE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #7B68EE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Space & Folder Ops</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Organize workspaces, manage hierarchies automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7B68EE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #7B68EE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Time Tracking</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Log time, generate reports, track productivity.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7B68EE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #7B68EE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Custom Fields</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access and update any custom data on tasks.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #7B68EE; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your ClickUp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your ClickUp API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your ClickUp settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your ClickUp?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with ClickUp Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #7B68EE; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 ClickUp Connect. Not affiliated with ClickUp.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"Show me our sprint progress and who's overloaded this week"},{"type":"ai","text":"Here's your sprint overview:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:6px;\"\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eBacklog\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#6B728020;border:1px solid #6B728040;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#6B7280;\"\u003e12\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eActive\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#3B82F620;border:1px solid #3B82F640;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#3B82F6;\"\u003e9\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eReview\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#F59E0B20;border:1px solid #F59E0B40;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F59E0B;\"\u003e4\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eComplete\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#10B98120;border:1px solid #10B98140;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#10B981;\"\u003e18\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ Alex: 14 tasks (over capacity) · Sprint: 62% done\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Redistribute Alex's lower-priority tasks to team members with capacity"},{"type":"ai","text":"Moved 5 tasks from Alex: 2 to Jordan, 2 to Sam, 1 to Maya. All assignees notified. Alex is now at 9 tasks (within capacity).","action":"✓ 5 tasks redistributed · Team rebalanced · Notifications sent"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #7B68EE20; border: 1px solid #7B68EE40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#7B68EE;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #7B68EE, #7B68EE99)"><span class="font-bold text-[10px]" style="color: #fff">CU</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,651 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>ClickUp Connect — AI-Power Your Projects in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#f5f3ff',
|
|
||||||
100: '#ede9fe',
|
|
||||||
200: '#ddd6fe',
|
|
||||||
300: '#c4b5fd',
|
|
||||||
400: '#a78bfa',
|
|
||||||
500: '#7B68EE',
|
|
||||||
600: '#7c3aed',
|
|
||||||
700: '#6d28d9',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #7B68EE 0%, #a855f7 50%, #ec4899 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(123, 104, 238, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(123, 104, 238, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(123, 104, 238, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-spin-slow {
|
|
||||||
animation: spin 20s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(123, 104, 238, 0.4), 0 0 40px 0 rgba(123, 104, 238, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(123, 104, 238, 0.6), 0 0 60px 10px rgba(123, 104, 238, 0.3); }
|
|
||||||
}
|
|
||||||
@keyframes gradient-shift {
|
|
||||||
0% { background-position: 0% 50%; }
|
|
||||||
50% { background-position: 100% 50%; }
|
|
||||||
100% { background-position: 0% 50%; }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(123, 104, 238, 0.2), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1) rotate(5deg);
|
|
||||||
}
|
|
||||||
.nav-blur {
|
|
||||||
backdrop-filter: blur(20px) saturate(180%);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.gradient-border::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
padding: 1px;
|
|
||||||
background: linear-gradient(135deg, rgba(123, 104, 238, 0.5), transparent, rgba(168, 85, 247, 0.3));
|
|
||||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
||||||
-webkit-mask-composite: xor;
|
|
||||||
mask-composite: exclude;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.animated-gradient {
|
|
||||||
background: linear-gradient(135deg, #7B68EE, #a855f7, #ec4899, #7B68EE);
|
|
||||||
background-size: 300% 300%;
|
|
||||||
animation: gradient-shift 5s ease infinite;
|
|
||||||
}
|
|
||||||
.glow-ring {
|
|
||||||
position: absolute;
|
|
||||||
inset: -2px;
|
|
||||||
border-radius: inherit;
|
|
||||||
background: conic-gradient(from 0deg, transparent, #7B68EE, transparent, #a855f7, transparent);
|
|
||||||
animation: spin 4s linear infinite;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
.card-glow:hover .glow-ring {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
<!-- Decorative spinning gradient ring -->
|
|
||||||
<div class="absolute top-1/3 right-10 w-32 h-32 rounded-full animate-spin-slow opacity-10" style="background: conic-gradient(from 0deg, #7B68EE, #a855f7, #ec4899, #7B68EE);"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/70 nav-blur">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl tracking-tight">ClickUp Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-lg font-medium transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20">
|
|
||||||
<div class="text-center">
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">ClickUp</span><br>to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed">
|
|
||||||
The complete ClickUp MCP server. Tasks, docs, and goals — AI-managed. <strong class="text-white">134 tools</strong> ready to automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
|
||||||
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg text-center transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg text-center transition-all flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center gap-4 justify-center">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-zinc-400 text-sm">
|
|
||||||
Trusted by <strong class="text-white">450+</strong> teams
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your project management workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="bg-zinc-900 rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/clickup.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="check-square" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Tasks</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="folder-tree" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Projects</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="timer" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Time</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pain Points -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up ClickUp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 text-lg max-w-2xl mx-auto">Stop wrestling with APIs. Start automating.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
|
||||||
<div class="glow-ring rounded-2xl"></div>
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="flex items-center gap-4 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 mb-2 line-through">Task overload paralysis</p>
|
|
||||||
<p class="text-white font-semibold text-lg">AI prioritizes your day</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
|
||||||
<div class="glow-ring rounded-2xl"></div>
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="flex items-center gap-4 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 mb-2 line-through">Status update meetings</p>
|
|
||||||
<p class="text-white font-semibold text-lg">AI generates progress reports</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
|
||||||
<div class="glow-ring rounded-2xl"></div>
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="flex items-center gap-4 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 mb-2 line-through">Scattered project info</p>
|
|
||||||
<p class="text-white font-semibold text-lg">AI finds anything instantly</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="inline-block px-4 py-1.5 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-4">Features</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-zinc-400 text-lg">Full ClickUp API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
|
||||||
<div class="glow-ring rounded-2xl"></div>
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="check-square" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Task Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Create, update, assign tasks. Full project control.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
|
||||||
<div class="glow-ring rounded-2xl"></div>
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="folder-tree" class="w-7 h-7 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Space & Folder Ops</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Organize workspaces, manage hierarchies automatically.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
|
||||||
<div class="glow-ring rounded-2xl"></div>
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="timer" class="w-7 h-7 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Time Tracking</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Log time, generate reports, track productivity.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
|
||||||
<div class="glow-ring rounded-2xl"></div>
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="settings-2" class="w-7 h-7 text-blue-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Custom Fields</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Access and update any custom data on tasks.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 120 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Goals</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Docs</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Comments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Checklists</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Views</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Webhooks</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 gradient-border">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 gradient-border">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/clickup-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ ClickUp MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 134 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your ClickUp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your ClickUp API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your ClickUp settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your ClickUp?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join hundreds of teams already automating with ClickUp Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">ClickUp Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 ClickUp Connect. Not affiliated with ClickUp.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-purple-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-lg"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
closecrm.html
Normal file
408
closecrm.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Close CRM Connect — AI-Power Your Sales in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#3D5AFE',
|
||||||
|
600: '#3D5AFEdd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #3D5AFE 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #3D5AFE25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #3D5AFE20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #3D5AFE">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Close CRM Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #3D5AFE; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #3D5AFE"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Close CRM</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Close MCP server. Leads, calls, and pipeline. <strong class="text-white">84 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #3D5AFE; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/closecrm.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #3D5AFE; color: #fff">
|
||||||
|
84 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Close CRM data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #3D5AFE, #3D5AFE99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">CL</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Close CRM Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 84 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Close CRM Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #3D5AFE">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Close CRM + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Leads falling through cracks</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #3D5AFE30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #3D5AFE"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI tracks every opportunity</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual activity logging</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #3D5AFE30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #3D5AFE"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Auto-captured communications</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Inconsistent follow-up</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #3D5AFE30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #3D5AFE"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI-powered sequences</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Close CRM API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3D5AFE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #3D5AFE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Lead Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, qualify, nurture leads automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3D5AFE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #3D5AFE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Communication</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Log calls, emails, SMS — all in one place.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3D5AFE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #3D5AFE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Pipeline</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track opportunities, forecast, manage deals.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #3D5AFE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #3D5AFE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Sequences</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Automate outreach, follow-ups, and cadences.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #3D5AFE; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Close CRM account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Close CRM API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Close CRM settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Close CRM?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Close CRM Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #3D5AFE; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Close CRM Connect. Not affiliated with Close CRM.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"Show me my pipeline. What deals are closing this month?"},{"type":"ai","text":"Here's your sales pipeline:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eDeal\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eStage\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eValue\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eDataSync Inc\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eNegotiation\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$42,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eFlowLogic\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eProposal\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$28,500\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eNexGen Solutions\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eDemo\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$35,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eMeridian Corp\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eQualified\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$52,000\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e$157,500 pipeline · $70,500 weighted · 2 likely this month\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Draft a contract for DataSync and schedule a follow-up call with NexGen"},{"type":"ai","text":"Generated contract for DataSync ($42,000, annual terms) with e-sign link. Booked NexGen call for Thursday 3pm — agenda includes ROI analysis and case studies.","action":"✓ Contract drafted · Call booked Thu 3pm · Materials prepped"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #3D5AFE20; border: 1px solid #3D5AFE40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#3D5AFE;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #3D5AFE, #3D5AFE99)"><span class="font-bold text-[10px]" style="color: #fff">CL</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,781 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Close Connect — AI-Power Your Sales in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#eef2ff',
|
|
||||||
100: '#e0e7ff',
|
|
||||||
200: '#c7d2fe',
|
|
||||||
300: '#a5b4fc',
|
|
||||||
400: '#3D5AFE',
|
|
||||||
500: '#3048e5',
|
|
||||||
600: '#2438bf',
|
|
||||||
700: '#1c2c99',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #3D5AFE 0%, #1c2c99 50%, #1e1b4b 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.gradient-text-hero {
|
|
||||||
background: linear-gradient(135deg, #3D5AFE 0%, #8b5cf6 50%, #ec4899 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(61, 90, 254, 0.25), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(61, 90, 254, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(61, 90, 254, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-ring {
|
|
||||||
0% { transform: scale(1); opacity: 1; }
|
|
||||||
100% { transform: scale(1.5); opacity: 0; }
|
|
||||||
}
|
|
||||||
.pulse-ring::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: -4px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid rgba(61, 90, 254, 0.5);
|
|
||||||
animation: pulse-ring 2s ease-out infinite;
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(61, 90, 254, 0.2), 0 0 120px rgba(61, 90, 254, 0.1);
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
background: linear-gradient(135deg, #3D5AFE 0%, #3048e5 100%);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 0 30px rgba(61, 90, 254, 0.5);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
background: linear-gradient(135deg, rgba(61, 90, 254, 0.2) 0%, rgba(61, 90, 254, 0.05) 100%);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(61, 90, 254, 0.4), 0 0 40px 0 rgba(61, 90, 254, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(61, 90, 254, 0.6), 0 0 60px 10px rgba(61, 90, 254, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.number-highlight {
|
|
||||||
background: linear-gradient(135deg, #3D5AFE 0%, #8b5cf6 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.pipeline-stage {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.pipeline-stage::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
right: -24px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
border: 6px solid transparent;
|
|
||||||
border-left-color: rgba(61, 90, 254, 0.3);
|
|
||||||
}
|
|
||||||
.pipeline-stage:last-child::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="absolute top-1/4 left-10 w-72 h-72 bg-brand-400/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute bottom-1/4 left-1/3 w-64 h-64 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center shadow-lg shadow-brand-400/20">
|
|
||||||
<i data-lucide="phone-call" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Close Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
|
|
||||||
<a href="#pricing" class="btn-primary px-5 py-2.5 rounded-xl font-semibold text-white">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20 text-center">
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
|
|
||||||
Built for Sales Teams
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text-hero">Close</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
|
|
||||||
The complete Close CRM MCP server. <strong class="text-white">84 tools</strong> for leads, calls, and pipeline.
|
|
||||||
Close more deals with AI by your side.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="btn-primary w-full sm:w-auto px-8 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
|
|
||||||
Join the Waitlist
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pipeline Visual -->
|
|
||||||
<div class="flex items-center justify-center gap-4 sm:gap-8 overflow-x-auto pb-2 max-w-full">
|
|
||||||
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800/50 border border-zinc-700/50 whitespace-nowrap">
|
|
||||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
|
||||||
<span class="text-sm">New Lead</span>
|
|
||||||
</div>
|
|
||||||
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800/50 border border-zinc-700/50 whitespace-nowrap">
|
|
||||||
<div class="w-3 h-3 rounded-full bg-brand-400"></div>
|
|
||||||
<span class="text-sm">Contacted</span>
|
|
||||||
</div>
|
|
||||||
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800/50 border border-zinc-700/50 whitespace-nowrap">
|
|
||||||
<div class="w-3 h-3 rounded-full bg-purple-400"></div>
|
|
||||||
<span class="text-sm">Qualified</span>
|
|
||||||
</div>
|
|
||||||
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-green-500/20 border border-green-500/30 whitespace-nowrap">
|
|
||||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
|
||||||
<span class="text-sm text-green-400">Closed Won</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your sales workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="rounded-2xl p-[1px] bg-gradient-to-br from-brand-400/50 to-purple-500/20">
|
|
||||||
<div class="bg-zinc-900 rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/closecrm.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="users" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Leads</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="phone-call" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Calls</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="git-branch" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Pipeline</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Connecting CRM + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't slow you down</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">
|
|
||||||
Sales reps spend too much time on data entry. Let AI handle the busywork while you focus on selling.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-8 items-stretch">
|
|
||||||
<!-- Problems -->
|
|
||||||
<div class="space-y-4">
|
|
||||||
<h3 class="text-lg font-semibold text-red-400 mb-6 flex items-center gap-2">
|
|
||||||
<i data-lucide="x-circle" class="w-5 h-5"></i>
|
|
||||||
The Old Way
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Leads falling through cracks</p>
|
|
||||||
<p class="text-zinc-500">Too many leads, not enough follow-up. Hot prospects go cold.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Manual activity logging</p>
|
|
||||||
<p class="text-zinc-500">Hours spent updating the CRM instead of talking to prospects.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Inconsistent follow-up</p>
|
|
||||||
<p class="text-zinc-500">Some leads get 10 touches, others get forgotten entirely.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Solutions -->
|
|
||||||
<div class="space-y-4">
|
|
||||||
<h3 class="text-lg font-semibold text-brand-400 mb-6 flex items-center gap-2">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5"></i>
|
|
||||||
With Close Connect
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">AI tracks every opportunity</p>
|
|
||||||
<p class="text-zinc-400">No lead left behind. AI surfaces who needs attention right now.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Auto-captured communications</p>
|
|
||||||
<p class="text-zinc-400">Calls, emails, SMS — all logged automatically. Just sell.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">AI-powered sequences</p>
|
|
||||||
<p class="text-zinc-400">Perfect follow-up cadence for every lead, automatically.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/10 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need to close</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Close CRM API access through one simple connection. 84 tools at your fingertips.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Lead Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Create, qualify, nurture leads automatically. Never miss an opportunity.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="message-circle" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Communication</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Log calls, emails, SMS — all in one place. Full conversation history.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="git-branch" class="w-7 h-7 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Pipeline</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Track opportunities, forecast revenue, manage deals through stages.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="repeat" class="w-7 h-7 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Sequences</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Automate outreach, follow-ups, and cadences. Never drop the ball.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 80 more tools including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Smart Views</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Call Recording</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Email Tracking</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Custom Fields</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Reporting</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Team Performance</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- How It Works -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-400/10 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="terminal" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
How It Works
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Just talk to Claude
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-8 leading-relaxed">
|
|
||||||
No clicking through menus. Just describe what you need and Claude works your pipeline
|
|
||||||
through your Close account in real-time.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-zinc-300">"Add a new lead from Acme Corp"</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-zinc-300">"Log my call with John, discussed pricing"</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-zinc-300">"Move Acme to Qualified stage"</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Claude + Close CRM</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">You:</span> Who should I call next?
|
|
||||||
|
|
||||||
<span class="text-brand-400">Claude:</span> Let me check your pipeline...
|
|
||||||
|
|
||||||
<span class="text-zinc-500">→ Using:</span> close_search_leads
|
|
||||||
<span class="text-zinc-500">→ Filter:</span> No contact in 3+ days
|
|
||||||
<span class="text-zinc-500">→ Sort:</span> By deal value
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Found 3 hot leads</span>
|
|
||||||
|
|
||||||
<span class="text-brand-400">Claude:</span> Top priority:
|
|
||||||
|
|
||||||
<span class="text-white">1. Acme Corp</span> - $45K deal
|
|
||||||
Last contact: 4 days ago
|
|
||||||
<span class="text-yellow-400">⚠ Decision deadline Friday</span>
|
|
||||||
|
|
||||||
<span class="text-white">2. TechStart Inc</span> - $28K deal
|
|
||||||
Requested callback today
|
|
||||||
|
|
||||||
Want me to prep talking points?</code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-400/5 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<form id="waitlist-form" class="space-y-6 relative z-10">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="btn-primary w-full py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-20 h-20 bg-brand-400/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
||||||
<i data-lucide="check" class="w-10 h-10 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
|
|
||||||
<div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-8 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle of managing infrastructure.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
|
|
||||||
<i data-lucide="github" class="w-5 h-5"></i>
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300"><code><span class="text-zinc-500">$</span> git clone github.com/close-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Close MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 84 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
<p class="text-zinc-400">Everything you need to know about Close Connect</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Will my sales team need training?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Not really — that's the beauty of AI. Your reps just talk to Claude like they would a colleague: "Add a note to the Acme deal"
|
|
||||||
or "Who hasn't been contacted this week?" No special syntax, no training sessions.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my sales data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Absolutely. We use OAuth 2.0 and never store your Close credentials. Data flows directly between Claude and Close —
|
|
||||||
your deal information, customer data, and sales metrics never touch our servers.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can AI make mistakes with my CRM?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Claude confirms before any destructive actions. Moving a deal, adding notes, logging calls — all instant.
|
|
||||||
But deleting leads or bulk changes require your explicit approval. Think of it as a very smart assistant that double-checks the important stuff.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">How does this help me close more deals?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Time saved on data entry = more time selling. AI finds your hottest leads, reminds you of follow-ups, and surfaces deal insights.
|
|
||||||
Early users report 40%+ more prospect conversations per day.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-brand-400/5 to-transparent"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Close?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
|
||||||
Join sales teams already closing more deals with Close Connect. Be first in line for early access.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="btn-primary w-full sm:w-auto px-10 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
|
|
||||||
Join the Waitlist
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-10 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="phone-call" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Close Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Close Connect. Not affiliated with Close.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-400 to-brand-600 rounded-full font-semibold text-white transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Form submission
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sticky CTA visibility
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
clover.html
Normal file
408
clover.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Clover Connect — AI-Power Your POS in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#43B02A',
|
||||||
|
600: '#43B02Add',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #43B02A 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #43B02A25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #43B02A20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #43B02A">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Clover Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #43B02A; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #43B02A"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Clover</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Clover MCP server. Orders, inventory, and payments. <strong class="text-white">78 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #43B02A; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/clover.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #43B02A; color: #fff">
|
||||||
|
78 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Clover data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #43B02A, #43B02A99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">CV</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Clover Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 78 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Clover Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #43B02A">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Clover + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">End-of-day reconciliation</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #43B02A30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #43B02A"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI balances automatically</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Stockout surprises</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #43B02A30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #43B02A"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Proactive inventory alerts</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">No customer insights</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #43B02A30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #43B02A"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI identifies your VIPs</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Clover API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #43B02A20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #43B02A"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Order Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access transactions, refunds, and order history.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #43B02A20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #43B02A"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Inventory Control</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track stock, set alerts, manage items.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #43B02A20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #43B02A"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Customer Data</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Build profiles, track purchases, manage loyalty.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #43B02A20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #43B02A"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Sales trends, peak hours, product performance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #43B02A; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Clover account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Clover API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Clover settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Clover?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Clover Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #43B02A; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Clover Connect. Not affiliated with Clover.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"How did lunch service go today? Any items running low?"},{"type":"ai","text":"Here's your lunch service report:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eLunch Rev.\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$2,840\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+11%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eTransactions\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e94\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+7%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAvg Ticket\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$30.21\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+3.8%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ Low stock: Chicken Parm (4 left), Caesar Wrap (6 left)\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Mark Chicken Parm as 86'd when it hits 2 and reorder wraps for tomorrow"},{"type":"ai","text":"Set auto-86 trigger on Chicken Parm at 2 remaining. Submitted reorder for Caesar Wrap ingredients — delivery confirmed for 7am tomorrow.","action":"✓ Auto-86 set · Reorder placed · Delivery: tomorrow 7am"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #43B02A20; border: 1px solid #43B02A40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#43B02A;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #43B02A, #43B02A99)"><span class="font-bold text-[10px]" style="color: #fff">CV</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,649 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Clover Connect — AI-Power Your POS in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#f0fdf4',
|
|
||||||
100: '#dcfce7',
|
|
||||||
200: '#bbf7d0',
|
|
||||||
300: '#86efac',
|
|
||||||
400: '#4ade80',
|
|
||||||
500: '#43B02A',
|
|
||||||
600: '#3a9d25',
|
|
||||||
700: '#2d7a1c',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #43B02A 0%, #22c55e 50%, #10b981 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(67, 176, 42, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(67, 176, 42, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(67, 176, 42, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite 2s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite 1s;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(67, 176, 42, 0.4); }
|
|
||||||
50% { box-shadow: 0 0 40px 10px rgba(67, 176, 42, 0.6); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(67, 176, 42, 0.2), 0 25px 80px -20px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.btn-glow {
|
|
||||||
box-shadow: 0 0 30px rgba(67, 176, 42, 0.4);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.btn-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(67, 176, 42, 0.6);
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(67, 176, 42, 0.2), rgba(34, 197, 94, 0.1));
|
|
||||||
border: 1px solid rgba(67, 176, 42, 0.2);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(67, 176, 42, 0.4), 0 0 40px 0 rgba(67, 176, 42, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(67, 176, 42, 0.6), 0 0 60px 10px rgba(67, 176, 42, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1) rotate(5deg);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Ambient Background Elements -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 -right-32 w-80 h-80 bg-emerald-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="shopping-cart" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Clover Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20">
|
|
||||||
<div class="max-w-3xl mx-auto text-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
<span>Open Source + Hosted</span>
|
|
||||||
<span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 rounded-full text-xs font-medium ml-1">NEW</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">Clover</span><br>to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
|
|
||||||
The complete Clover MCP server. <strong class="text-white">78 tools</strong> for orders, inventory, and payments.
|
|
||||||
No OAuth headaches. Just connect and automate your POS.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
|
||||||
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-center">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
|
|
||||||
<i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center gap-4 justify-center">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold shadow-lg">
|
|
||||||
+50
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-left">
|
|
||||||
<div class="flex items-center gap-1 text-amber-400 text-sm">
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">200+</strong> retail businesses</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your POS operations</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/clover.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="receipt" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Orders</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="package" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Inventory</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="credit-card" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Payments</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pain Points / Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up Clover + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="x" class="w-7 h-7 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2 text-red-400">End-of-day reconciliation</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Hours spent balancing registers, matching transactions, fixing discrepancies.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI balances automatically</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="alert-triangle" class="w-7 h-7 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Stockout surprises</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Bestsellers run out. Customers leave. Revenue lost. Every. Single. Time.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">Proactive inventory alerts</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2 text-red-400">No customer insights</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Your best customers are anonymous. No way to reward loyalty or spot trends.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI identifies your VIPs</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Clover API access through one simple connection. 78 tools at your AI's fingertips.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="receipt" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Order Management</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Access transactions, process refunds, view complete order history with AI.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="package" class="w-7 h-7 text-blue-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Inventory Control</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Track stock levels, set reorder alerts, manage items automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="user-circle" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Customer Data</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Build customer profiles, track purchases, manage loyalty programs.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-7 h-7 text-amber-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Sales trends, peak hours analysis, product performance insights.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 60 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Payments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Employees</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Discounts</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Tax Rates</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Modifiers</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Shifts</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Cash Drawers</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Webhooks</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@business.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle of OAuth and token management.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/clover-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Clover MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 78 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
<p class="text-zinc-400">Everything you need to know about Clover Connect</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Clover account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Clover API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Clover settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Which Clover devices are supported?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Clover Connect works with all Clover devices — Station, Mini, Flex, and Go. The API is device-agnostic,
|
|
||||||
so your AI automations work across your entire setup.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Final CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Clover?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
|
||||||
Join 200+ retail businesses already automating with Clover Connect. Be first in line when we launch.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
|
|
||||||
<i data-lucide="calendar" class="w-5 h-5"></i>
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="shopping-cart" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Clover Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
|
||||||
<i data-lucide="twitter" class="w-4 h-4"></i>
|
|
||||||
Twitter
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Clover Connect. Not affiliated with Clover Network, Inc.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all shadow-xl"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
constantcontact.html
Normal file
408
constantcontact.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Constant Contact Connect — AI-Power Your Email Lists in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#1856A8',
|
||||||
|
600: '#1856A8dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #1856A8 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #1856A825, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #1856A820; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1856A8">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Constant Contact Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #1856A8; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #1856A8"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Constant Contact</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Constant Contact MCP server. Lists, campaigns, and events. <strong class="text-white">58 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #1856A8; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/constantcontact.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #1856A8; color: #fff">
|
||||||
|
58 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Constant Contact data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #1856A8, #1856A899)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">CC</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Constant Contact Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 58 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Constant Contact Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1856A8">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Constant Contact + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">List growth plateau</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1856A830">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #1856A8"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI optimizes signup flows</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Low open rates</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1856A830">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #1856A8"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI writes better subject lines</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Event no-shows</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1856A830">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #1856A8"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Smart reminder sequences</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Constant Contact API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1856A820">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1856A8"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">List Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, segment, clean lists automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1856A820">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1856A8"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Email Campaigns</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Design, send, track email marketing at scale.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1856A820">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1856A8"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Event Marketing</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Promote events, manage RSVPs, send reminders.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1856A820">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1856A8"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track opens, clicks, bounces, and conversions.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #1856A8; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Constant Contact account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Constant Contact API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Constant Contact settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Constant Contact?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Constant Contact Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #1856A8; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Constant Contact Connect. Not affiliated with Constant Contact.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"How are our email lists growing? Which signup source converts best?"},{"type":"ai","text":"Here's your list health:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eTotal Subs\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e14,280\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+340 this mo\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eBest Source\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003eWebinar\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e42% conv.\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eChurn Rate\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e1.8%\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#F87171;margin-top:1px;\"\u003e-0.3%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e📈 Webinar signups convert 3x better than popup forms\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Create a segment of webinar attendees and send them our premium content offer"},{"type":"ai","text":"Created segment \"Webinar Attendees (Last 90 Days)\" with 892 contacts. Drafted premium content email with personalized subject lines. Ready to send.","action":"✓ Segment created (892) · Email drafted · Ready for review"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #1856A820; border: 1px solid #1856A840;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#1856A8;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #1856A8, #1856A899)"><span class="font-bold text-[10px]" style="color: #fff">CC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,662 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Constant Contact Connect — AI-Power Your Email Lists in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#eff6ff',
|
|
||||||
100: '#dbeafe',
|
|
||||||
200: '#bfdbfe',
|
|
||||||
300: '#93c5fd',
|
|
||||||
400: '#60a5fa',
|
|
||||||
500: '#1856A8',
|
|
||||||
600: '#1d4ed8',
|
|
||||||
700: '#1e40af',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #1856A8 0%, #3b82f6 50%, #8b5cf6 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(24, 86, 168, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 40px rgba(24, 86, 168, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(24, 86, 168, 0.3); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(24, 86, 168, 0.5); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(24, 86, 168, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.video-gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(24, 86, 168, 0.5), rgba(139, 92, 246, 0.2));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.video-gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(24, 86, 168, 0.4), 0 0 40px 0 rgba(24, 86, 168, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(24, 86, 168, 0.6), 0 0 60px 10px rgba(24, 86, 168, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
position: relative;
|
|
||||||
background: linear-gradient(135deg, rgba(24, 86, 168, 0.1), rgba(139, 92, 246, 0.1));
|
|
||||||
}
|
|
||||||
.gradient-border::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
padding: 1px;
|
|
||||||
background: linear-gradient(135deg, #1856A8, #8b5cf6);
|
|
||||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
||||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
||||||
-webkit-mask-composite: xor;
|
|
||||||
mask-composite: exclude;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
@keyframes email-fly {
|
|
||||||
0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
|
|
||||||
100% { transform: translateY(-100px) translateX(50px) rotate(15deg); opacity: 0; }
|
|
||||||
}
|
|
||||||
.email-particle {
|
|
||||||
animation: email-fly 2s ease-out infinite;
|
|
||||||
}
|
|
||||||
.metric-ring {
|
|
||||||
background: conic-gradient(#1856A8 0deg, #1856A8 270deg, transparent 270deg);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-blue-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="mail" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Constant Contact Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20 text-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
|
||||||
Connect <span class="gradient-text">Constant Contact</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
|
|
||||||
The most comprehensive Constant Contact MCP server. <strong class="text-white">58 tools</strong> covering
|
|
||||||
lists, campaigns, events & reporting. No setup. Just connect.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col items-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">250+</strong> marketers
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch AI create campaigns, segment lists, and optimize your email marketing</p>
|
|
||||||
</div>
|
|
||||||
<div class="video-gradient-border">
|
|
||||||
<div class="video-gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/constantcontact.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="list" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Lists</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="mail" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Campaigns</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Analytics</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
|
||||||
Setting up Constant Contact + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium">List growth has plateaued</p>
|
|
||||||
<p class="text-zinc-500">Same signup forms, same results. Stuck at the same number.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium">Low open rates killing engagement</p>
|
|
||||||
<p class="text-zinc-500">Subject lines that don't resonate. Emails that get ignored.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium">Event no-shows wasting resources</p>
|
|
||||||
<p class="text-zinc-500">People register but don't show up. Reminder fatigue is real.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-900 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold">With Constant Contact Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4 text-zinc-300">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="trending-up" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>AI optimizes signup flows for conversion</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>AI writes subject lines that get opened</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="bell" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>Smart reminder sequences reduce no-shows</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="zap" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>Works with Claude, GPT, any MCP client</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>Real-time analytics and optimization</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Constant Contact API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="list" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">List Management</h3>
|
|
||||||
<p class="text-zinc-400">Create, segment, clean lists automatically. Full control over your audience.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="mail" class="w-6 h-6 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Email Campaigns</h3>
|
|
||||||
<p class="text-zinc-400">Design, send, track email marketing at scale with AI assistance.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-pink-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="calendar" class="w-6 h-6 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Event Marketing</h3>
|
|
||||||
<p class="text-zinc-400">Promote events, manage RSVPs, send smart reminders automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-6 h-6 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Reporting</h3>
|
|
||||||
<p class="text-zinc-400">Track opens, clicks, bounces, and conversions with AI insights.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ 40 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Contact Tags</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Custom Fields</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Segments</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Landing Pages</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Social Posts</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Signup Forms</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Automations</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">A/B Testing</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Email Marketing Stats -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl font-bold mb-4">Why email marketing still wins</h2>
|
|
||||||
<p class="text-zinc-400">AI makes the best channel even better</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<div class="text-center p-8 bg-zinc-900/50 rounded-2xl border border-zinc-800">
|
|
||||||
<div class="text-5xl font-bold gradient-text mb-2">$36</div>
|
|
||||||
<p class="text-zinc-400">ROI per $1 spent on email</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-center p-8 bg-zinc-900/50 rounded-2xl border border-zinc-800">
|
|
||||||
<div class="text-5xl font-bold gradient-text mb-2">4.2B</div>
|
|
||||||
<p class="text-zinc-400">Daily email users worldwide</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-center p-8 bg-zinc-900/50 rounded-2xl border border-zinc-800">
|
|
||||||
<div class="text-5xl font-bold gradient-text mb-2">77%</div>
|
|
||||||
<p class="text-zinc-400">Prefer email for brand comms</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="Your phone number"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-zinc-900 rounded-3xl border border-zinc-800 p-8 md:p-12">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mcp/constantcontact
|
|
||||||
<span class="text-zinc-500">$</span> cd constantcontact && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Constant Contact MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 58 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
For the hosted version, no. Just connect your Constant Contact account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Constant Contact API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Constant Contact settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Can AI actually improve my email metrics?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Absolutely. AI can analyze your past campaigns, identify patterns in what works, write better subject lines,
|
|
||||||
segment your audience more intelligently, and optimize send times — all automatically.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your email marketing?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 250+ marketers already on the waitlist for Constant Contact Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="mail" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Constant Contact Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Constant Contact Connect. Not affiliated with Constant Contact.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
fieldedge.html
Normal file
408
fieldedge.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>FieldEdge Connect — AI-Power Your Field Ops in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#0066B2',
|
||||||
|
600: '#0066B2dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #0066B2 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #0066B225, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #0066B220; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0066B2">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">FieldEdge Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #0066B2; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #0066B2"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">FieldEdge</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete FieldEdge MCP server. Work orders, dispatch, and service. <strong class="text-white">68 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #0066B2; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/fieldedge.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #0066B2; color: #fff">
|
||||||
|
68 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your FieldEdge data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #0066B2, #0066B299)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">FE</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">FieldEdge Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 68 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask FieldEdge Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0066B2">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up FieldEdge + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Missed service renewals</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0066B230">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0066B2"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI tracks and reminds</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Inefficient dispatch</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0066B230">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0066B2"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI-optimized routing</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Paper work orders</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0066B230">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0066B2"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Fully digital job tracking</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full FieldEdge API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0066B220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0066B2"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Work Order Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, assign, track service calls.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0066B220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0066B2"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Dispatch Board</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Optimize tech schedules, manage capacity.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0066B220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0066B2"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Service Agreements</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track memberships, renewals, and maintenance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0066B220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0066B2"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Invoicing</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Generate invoices, process payments on-site.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #0066B2; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your FieldEdge account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your FieldEdge API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your FieldEdge settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your FieldEdge?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with FieldEdge Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #0066B2; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 FieldEdge Connect. Not affiliated with FieldEdge.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"Show me today's dispatch board. Any service agreements up for renewal?"},{"type":"ai","text":"Here's your operations dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eWO-881\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eEmergency - AC unit down (Commercial)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eEmergency\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eUnassigned\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eWO-879\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eQuarterly maintenance - Suite 400\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eScheduled\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e10:30am\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eWO-877\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eWater heater install\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eIn Progress\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eETA 2pm\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e8 work orders today · 1 emergency · 5 agreements expiring this month\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Assign the emergency to our closest available tech and send renewal offers to the 5 expiring agreements"},{"type":"ai","text":"Dispatched Tom B. (4 miles away, next available at 11am) to the emergency call. Sent renewal offers to all 5 agreements with a 10% early-renewal discount.","action":"✓ Emergency dispatched · 5 renewal offers sent · 10% discount applied"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #0066B220; border: 1px solid #0066B240;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#0066B2;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #0066B2, #0066B299)"><span class="font-bold text-[10px]" style="color: #fff">FE</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,643 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>FieldEdge Connect — AI-Power Your Field Ops in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#eff6ff',
|
|
||||||
100: '#dbeafe',
|
|
||||||
200: '#bfdbfe',
|
|
||||||
300: '#93c5fd',
|
|
||||||
400: '#60a5fa',
|
|
||||||
500: '#0066B2',
|
|
||||||
600: '#0052a0',
|
|
||||||
700: '#003d7a',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #0066B2 0%, #00a0dc 50%, #00d4ff 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 102, 178, 0.25), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 60px rgba(0, 102, 178, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(0, 102, 178, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(0, 102, 178, 0.3); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(0, 102, 178, 0.5); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes gradient-shift {
|
|
||||||
0%, 100% { background-position: 0% 50%; }
|
|
||||||
50% { background-position: 100% 50%; }
|
|
||||||
}
|
|
||||||
.animated-gradient {
|
|
||||||
background: linear-gradient(-45deg, #0066B2, #00a0dc, #0066B2, #003d7a);
|
|
||||||
background-size: 400% 400%;
|
|
||||||
animation: gradient-shift 8s ease infinite;
|
|
||||||
}
|
|
||||||
.glow-orb {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(60px);
|
|
||||||
opacity: 0.3;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse-btn {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 102, 178, 0.4), 0 0 40px 0 rgba(0, 102, 178, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(0, 102, 178, 0.6), 0 0 60px 10px rgba(0, 102, 178, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse-btn 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: linear-gradient(135deg, rgba(0, 102, 178, 0.1) 0%, transparent 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Orbs -->
|
|
||||||
<div class="glow-orb w-96 h-96 bg-blue-500 top-20 -left-48 fixed animate-float-slow"></div>
|
|
||||||
<div class="glow-orb w-72 h-72 bg-cyan-500 top-1/2 -right-36 fixed animate-float-delayed"></div>
|
|
||||||
<div class="glow-orb w-64 h-64 bg-blue-600 bottom-20 left-1/4 fixed animate-float"></div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/20">
|
|
||||||
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">FieldEdge Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/20 hover:shadow-brand-500/40">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20">
|
|
||||||
<div class="flex flex-col items-center text-center">
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">FieldEdge</span> to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed max-w-3xl mx-auto">
|
|
||||||
The complete FieldEdge MCP server. <strong class="text-white">68 tools</strong> for work orders, dispatch, and service.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Stats Row -->
|
|
||||||
<div class="grid grid-cols-3 gap-4 max-w-md mx-auto">
|
|
||||||
<div class="stat-card rounded-xl p-4 border border-zinc-800/50">
|
|
||||||
<div class="text-3xl font-bold text-brand-400">68</div>
|
|
||||||
<div class="text-sm text-zinc-500">API Tools</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card rounded-xl p-4 border border-zinc-800/50">
|
|
||||||
<div class="text-3xl font-bold text-cyan-400">2</div>
|
|
||||||
<div class="text-sm text-zinc-500">Clicks to Connect</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card rounded-xl p-4 border border-zinc-800/50">
|
|
||||||
<div class="text-3xl font-bold text-green-400">24/7</div>
|
|
||||||
<div class="text-sm text-zinc-500">AI Automation</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your field service management</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-r from-brand-500/50 to-cyan-500/20 p-[1px] rounded-2xl">
|
|
||||||
<div class="bg-zinc-900 rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/fieldedge.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="clipboard-list" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Work Orders</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="layout-grid" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Dispatch</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="file-badge" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Agreements</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
||||||
<div>
|
|
||||||
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">The Problem</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-8 leading-tight">
|
|
||||||
Setting up FieldEdge + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Missed service renewals</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Memberships expire and you don't even notice until they call to cancel.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Inefficient dispatch</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Techs driving across town when there's a job next door.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Paper work orders</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Lost tickets, illegible notes, no accountability.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-xl relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl"></div>
|
|
||||||
<div class="relative">
|
|
||||||
<div class="flex items-center gap-3 mb-8">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/30">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold">With FieldEdge Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4 text-lg">
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>AI tracks and reminds on renewals</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>AI-optimized routing & dispatch</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>Fully digital job tracking</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>Works with Claude, GPT, any MCP client</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>Full API access — 68 tools ready</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">Features</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full FieldEdge API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5 border border-brand-500/20">
|
|
||||||
<i data-lucide="clipboard-list" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Work Order Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Create, assign, and track service calls with full visibility.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-cyan-500/5 flex items-center justify-center mb-5 border border-cyan-500/20">
|
|
||||||
<i data-lucide="layout-grid" class="w-7 h-7 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Dispatch Board</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Optimize tech schedules, manage capacity, reduce drive time.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5 border border-green-500/20">
|
|
||||||
<i data-lucide="file-badge" class="w-7 h-7 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Service Agreements</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Track memberships, renewals, and maintenance schedules.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5 border border-purple-500/20">
|
|
||||||
<i data-lucide="credit-card" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Invoicing</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Generate invoices, process payments on-site, sync to accounting.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-16 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 50 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Customer History</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Equipment Tracking</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Technician GPS</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Price Book</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Reporting</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Inventory</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Quotes</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Webhooks</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-2xl mx-auto px-6 relative">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-semibold mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-2xl">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="+1 (555) 000-0000"
|
|
||||||
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email <span class="text-zinc-500">(optional)</span></label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
||||||
<i data-lucide="check" class="w-10 h-10 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="error-message" class="hidden mt-4 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-center">
|
|
||||||
Something went wrong. Please try again.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const submitBtn = document.getElementById('submit-btn');
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
|
|
||||||
|
|
||||||
await new Promise(r => setTimeout(r, 1000));
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-xl">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 text-lg mb-8 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold text-lg group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-inner">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/fieldedge-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ FieldEdge MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 68 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">FAQ</span>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your FieldEdge account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your FieldEdge API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your FieldEdge settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your FieldEdge?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join service pros already automating with FieldEdge Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">FieldEdge Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 FieldEdge Connect. Not affiliated with FieldEdge.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
freshbooks.html
Normal file
408
freshbooks.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>FreshBooks Connect — AI-Power Your Invoicing in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#0075DD',
|
||||||
|
600: '#0075DDdd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #0075DD 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #0075DD25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #0075DD20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0075DD">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">FreshBooks Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #0075DD; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #0075DD"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">FreshBooks</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete FreshBooks MCP server. Invoices, expenses, and clients. <strong class="text-white">64 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #0075DD; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/freshbooks.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #0075DD; color: #fff">
|
||||||
|
64 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your FreshBooks data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #0075DD, #0075DD99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">FB</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">FreshBooks Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 64 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask FreshBooks Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0075DD">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up FreshBooks + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Chasing late payments</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0075DD30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0075DD"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI sends perfect follow-ups</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual expense entry</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0075DD30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0075DD"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI categorizes automatically</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Tax season panic</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0075DD30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0075DD"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Reports ready year-round</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full FreshBooks API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0075DD20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0075DD"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Invoice Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, send, track invoices automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0075DD20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0075DD"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Expense Tracking</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Log expenses, attach receipts, categorize spending.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0075DD20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0075DD"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Client Portal</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage client info, payment methods, and history.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0075DD20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0075DD"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Reports</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Generate P&L, tax summaries, and cash flow reports.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #0075DD; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your FreshBooks account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your FreshBooks API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your FreshBooks settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your FreshBooks?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with FreshBooks Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #0075DD; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 FreshBooks Connect. Not affiliated with FreshBooks.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"How's cash flow looking? Any overdue invoices I should worry about?"},{"type":"ai","text":"Here's your financial snapshot:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eRevenue (MTD)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#34D399;\"\u003e$42,800\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eOutstanding\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#F3F4F6;\"\u003e$18,350\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eOverdue (\u003e30d)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#F87171;\"\u003e$7,200\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eExpenses (MTD)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#F3F4F6;\"\u003e$24,100\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#FBBF24;\"\u003e⚠ 3 invoices overdue \u003e30 days totaling $7,200\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Send follow-ups on the 3 overdue invoices. Firm but professional tone."},{"type":"ai","text":"Sent personalized follow-ups to all 3: Acme Corp ($3,200), TechFlow ($2,800), and Bright Solutions ($1,200). Each includes a direct payment link and 5-day grace period.","action":"✓ 3 follow-ups sent · Payment links included · 5-day deadline set"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #0075DD20; border: 1px solid #0075DD40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#0075DD;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #0075DD, #0075DD99)"><span class="font-bold text-[10px]" style="color: #fff">FB</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,692 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>FreshBooks Connect — AI-Power Your Invoicing in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#eff6ff',
|
|
||||||
100: '#dbeafe',
|
|
||||||
200: '#bfdbfe',
|
|
||||||
300: '#93c5fd',
|
|
||||||
400: '#60a5fa',
|
|
||||||
500: '#0075DD',
|
|
||||||
600: '#2563eb',
|
|
||||||
700: '#1d4ed8',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #0075DD 0%, #3b82f6 50%, #6366f1 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 117, 221, 0.25), transparent);
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 60px rgba(0, 117, 221, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(0, 117, 221, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite 2s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite 1s;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 117, 221, 0.4), 0 0 40px 0 rgba(0, 117, 221, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(0, 117, 221, 0.6), 0 0 60px 10px rgba(0, 117, 221, 0.3); }
|
|
||||||
}
|
|
||||||
@keyframes money-float {
|
|
||||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
||||||
25% { transform: translateY(-10px) rotate(5deg); }
|
|
||||||
75% { transform: translateY(-5px) rotate(-5deg); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.feature-card:hover .feature-icon {
|
|
||||||
transform: scale(1.1) rotate(5deg);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(0, 117, 221, 0.5), rgba(99, 102, 241, 0.2));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
.text-shadow {
|
|
||||||
text-shadow: 0 0 40px rgba(0, 117, 221, 0.5);
|
|
||||||
}
|
|
||||||
.bg-grid {
|
|
||||||
background-image:
|
|
||||||
linear-gradient(rgba(0, 117, 221, 0.03) 1px, transparent 1px),
|
|
||||||
linear-gradient(90deg, rgba(0, 117, 221, 0.03) 1px, transparent 1px);
|
|
||||||
background-size: 50px 50px;
|
|
||||||
}
|
|
||||||
.money-icon {
|
|
||||||
animation: money-float 4s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.invoice-preview {
|
|
||||||
background: linear-gradient(135deg, rgba(0, 117, 221, 0.1) 0%, rgba(0, 117, 221, 0.02) 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-indigo-400/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="receipt" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">FreshBooks Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20 bg-grid">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
|
||||||
Connect <span class="gradient-text text-shadow">FreshBooks</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10">
|
|
||||||
The most comprehensive FreshBooks MCP server. <strong class="text-white">64 tools</strong> for invoices, expenses, and clients.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col items-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">400+</strong> small businesses
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your invoicing workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/freshbooks.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="file-text" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Invoices</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="receipt" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Expenses</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Reports</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
|
||||||
Invoicing + AI shouldn't<br>
|
|
||||||
<span class="text-zinc-500">mean hiring a dev</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-5">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium text-white">Chasing late payments</p>
|
|
||||||
<p class="text-zinc-500 text-sm mt-1">Manual follow-ups. Awkward emails. Cash flow chaos.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium text-white">Manual expense entry</p>
|
|
||||||
<p class="text-zinc-500 text-sm mt-1">Receipts pile up. Categories forgotten. Tax time nightmare.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium text-white">Tax season panic</p>
|
|
||||||
<p class="text-zinc-500 text-sm mt-1">Scrambling for reports. Missing deductions. Accountant stress.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-8 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-semibold">With FreshBooks Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>AI sends perfect follow-ups</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>Auto-categorize expenses</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>Reports ready year-round</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>Works with Claude, GPT, any MCP client</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>Automatic token refresh forever</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full FreshBooks API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:bg-brand-500/20 transition-all">
|
|
||||||
<i data-lucide="file-text" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Invoice Management</h3>
|
|
||||||
<p class="text-zinc-400">Create, send, track invoices automatically. Recurring billing built-in.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:bg-purple-500/20 transition-all">
|
|
||||||
<i data-lucide="wallet" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Expense Tracking</h3>
|
|
||||||
<p class="text-zinc-400">Log expenses, attach receipts, categorize spending. Tax-ready.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-5 group-hover:bg-cyan-500/20 transition-all">
|
|
||||||
<i data-lucide="users-round" class="w-7 h-7 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Client Portal</h3>
|
|
||||||
<p class="text-zinc-400">Manage client info, payment methods, and history. Complete CRM.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center mb-5 group-hover:bg-amber-500/20 transition-all">
|
|
||||||
<i data-lucide="pie-chart" class="w-7 h-7 text-amber-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Reports</h3>
|
|
||||||
<p class="text-zinc-400">Generate P&L, tax summaries, and cash flow reports on demand.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ 60 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Estimates</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Payments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Time Tracking</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Projects</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Taxes</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Retainers</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Credits</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Webhooks</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Use Cases -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">What you can automate</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Real invoicing workflows, powered by AI</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid md:grid-cols-3 gap-6">
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-500/10 to-transparent border border-brand-500/20 hover:border-brand-500/40 transition">
|
|
||||||
<div class="text-4xl mb-4">📧</div>
|
|
||||||
<h3 class="text-lg font-semibold mb-2">Payment Reminders</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">"Send friendly reminders to all clients with invoices overdue by 7+ days."</p>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 hover:border-purple-500/40 transition">
|
|
||||||
<div class="text-4xl mb-4">🧾</div>
|
|
||||||
<h3 class="text-lg font-semibold mb-2">Expense Bot</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">"Log this Uber receipt as a business travel expense for Project Alpha."</p>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 hover:border-cyan-500/40 transition">
|
|
||||||
<div class="text-4xl mb-4">📊</div>
|
|
||||||
<h3 class="text-lg font-semibold mb-2">Financial Reports</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">"Generate a P&L report for Q4 and highlight my biggest expense categories."</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pricing Comparison -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Time is money</h2>
|
|
||||||
<p class="text-xl text-zinc-400">See how much you'll save with AI-powered invoicing</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid md:grid-cols-2 gap-6">
|
|
||||||
<div class="p-6 rounded-2xl bg-red-500/5 border border-red-500/20">
|
|
||||||
<h3 class="text-lg font-semibold mb-4 text-red-400">❌ Manual Process</h3>
|
|
||||||
<ul class="space-y-3 text-zinc-400 text-sm">
|
|
||||||
<li class="flex items-center gap-2"><span class="text-red-400">•</span> 2 hours/week chasing payments</li>
|
|
||||||
<li class="flex items-center gap-2"><span class="text-red-400">•</span> 30 min/day on expense entry</li>
|
|
||||||
<li class="flex items-center gap-2"><span class="text-red-400">•</span> 8+ hours quarterly on reports</li>
|
|
||||||
<li class="flex items-center gap-2"><span class="text-red-400">•</span> Missed deductions & errors</li>
|
|
||||||
</ul>
|
|
||||||
<div class="mt-6 pt-4 border-t border-red-500/20">
|
|
||||||
<div class="text-2xl font-bold text-red-400">~15 hrs/month</div>
|
|
||||||
<div class="text-zinc-500 text-sm">wasted on admin</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 rounded-2xl bg-brand-500/5 border border-brand-500/20">
|
|
||||||
<h3 class="text-lg font-semibold mb-4 text-brand-400">✅ With FreshBooks Connect</h3>
|
|
||||||
<ul class="space-y-3 text-zinc-400 text-sm">
|
|
||||||
<li class="flex items-center gap-2"><span class="text-brand-400">•</span> Auto payment reminders</li>
|
|
||||||
<li class="flex items-center gap-2"><span class="text-brand-400">•</span> AI categorizes expenses</li>
|
|
||||||
<li class="flex items-center gap-2"><span class="text-brand-400">•</span> Instant report generation</li>
|
|
||||||
<li class="flex items-center gap-2"><span class="text-brand-400">•</span> Smart tax optimization</li>
|
|
||||||
</ul>
|
|
||||||
<div class="mt-6 pt-4 border-t border-brand-500/20">
|
|
||||||
<div class="text-2xl font-bold text-brand-400">~1 hr/month</div>
|
|
||||||
<div class="text-zinc-500 text-sm">just oversight</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="Your phone number"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@business.com"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-2xl">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4 transition group-hover:translate-x-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/freshbooks-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ FreshBooks MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 64 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Is my financial data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Absolutely. We use OAuth 2.0 and never store your FreshBooks API keys. All financial data is encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your FreshBooks settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Can AI send invoices on my behalf?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Yes! With the right permissions, AI can create, customize, and send invoices. You can set up approval workflows
|
|
||||||
or let AI handle routine invoices automatically while you review larger ones.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Will this work with my accountant?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Definitely. AI can generate accountant-ready reports, export data in standard formats, and ensure your
|
|
||||||
books are clean year-round. Your accountant will love you.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your invoicing?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 400+ small businesses already automating with FreshBooks Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="receipt" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">FreshBooks Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-1">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 FreshBooks Connect. Not affiliated with FreshBooks.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-blue-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
freshdesk.html
Normal file
408
freshdesk.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Freshdesk Connect — AI-Power Your Helpdesk in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#25C16F',
|
||||||
|
600: '#25C16Fdd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #25C16F 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #25C16F25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #25C16F20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #25C16F">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Freshdesk Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #25C16F; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #25C16F"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Freshdesk</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Freshdesk MCP server. Tickets, agents, and automations. <strong class="text-white">92 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #25C16F; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/freshdesk.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #25C16F; color: #fff">
|
||||||
|
92 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Freshdesk data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #25C16F, #25C16F99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">FD</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Freshdesk Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 92 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Freshdesk Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #25C16F">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Freshdesk + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Repetitive ticket responses</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #25C16F30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #25C16F"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI drafts perfect replies</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">SLA breaches</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #25C16F30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #25C16F"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Proactive escalation alerts</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Knowledge silos</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #25C16F30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #25C16F"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI surfaces relevant articles</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Freshdesk API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #25C16F20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #25C16F"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Ticket Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, update, resolve tickets with AI assistance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #25C16F20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #25C16F"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Agent Workspace</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage assignments, workload, and performance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #25C16F20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #25C16F"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Knowledge Base</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Search articles, suggest solutions, update docs.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #25C16F20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #25C16F"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Automations</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Trigger scenarios, dispatch rules, SLA management.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #25C16F; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Freshdesk account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Freshdesk API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Freshdesk settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Freshdesk?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Freshdesk Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #25C16F; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Freshdesk Connect. Not affiliated with Freshdesk.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"What's the support queue looking like? Any recurring issues this week?"},{"type":"ai","text":"Here's your support dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#8842\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003ePassword reset loop (x12)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eCritical\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e12 reports\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#8838\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eSlow dashboard loading\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eHigh\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e7 reports\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#8835\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eInvoice PDF formatting\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eMedium\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e3 reports\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#8831\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eMobile app crash on iOS 18\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eHigh\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e5 reports\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e42 open · 12 trending issues · CSAT: 87%\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Merge the duplicate password reset tickets and send a known-issue update to affected users"},{"type":"ai","text":"Merged 12 tickets into parent #8842. Sent status update to all 12 customers with workaround steps. Flagged to engineering with priority escalation.","action":"✓ 12 tickets merged · Customers notified · Engineering escalated"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #25C16F20; border: 1px solid #25C16F40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#25C16F;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #25C16F, #25C16F99)"><span class="font-bold text-[10px]" style="color: #fff">FD</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,627 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Freshdesk Connect — AI-Power Your Helpdesk in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#f0fdf4',
|
|
||||||
100: '#dcfce7',
|
|
||||||
200: '#bbf7d0',
|
|
||||||
300: '#86efac',
|
|
||||||
400: '#4ade80',
|
|
||||||
500: '#25C16F',
|
|
||||||
600: '#16a34a',
|
|
||||||
700: '#15803d',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #25C16F 0%, #06b6d4 50%, #8b5cf6 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 193, 111, 0.15), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 40px rgba(37, 193, 111, 0.15);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(37, 193, 111, 0.3); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(37, 193, 111, 0.5); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(37, 193, 111, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.video-gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(37, 193, 111, 0.5), rgba(139, 92, 246, 0.2));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.video-gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(37, 193, 111, 0.4), 0 0 40px 0 rgba(37, 193, 111, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(37, 193, 111, 0.6), 0 0 60px 10px rgba(37, 193, 111, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
position: relative;
|
|
||||||
background: linear-gradient(135deg, rgba(37, 193, 111, 0.1), rgba(139, 92, 246, 0.1));
|
|
||||||
}
|
|
||||||
.gradient-border::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
padding: 1px;
|
|
||||||
background: linear-gradient(135deg, #25C16F, #8b5cf6);
|
|
||||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
||||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
||||||
-webkit-mask-composite: xor;
|
|
||||||
mask-composite: exclude;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-cyan-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Freshdesk Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20 text-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
|
||||||
Connect <span class="gradient-text">Freshdesk</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
|
|
||||||
The most comprehensive Freshdesk MCP server. <strong class="text-white">92 tools</strong> covering
|
|
||||||
tickets, agents, knowledge base & automations. No setup. Just connect.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col items-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">300+</strong> support teams
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch AI resolve tickets, update knowledge base, and automate support</p>
|
|
||||||
</div>
|
|
||||||
<div class="video-gradient-border">
|
|
||||||
<div class="video-gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/freshdesk.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="ticket" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Tickets</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Agents</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Knowledge Base</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
|
||||||
Setting up Freshdesk + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium">Repetitive ticket responses</p>
|
|
||||||
<p class="text-zinc-500">Copy-pasting the same answers 50 times a day.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium">SLA breaches piling up</p>
|
|
||||||
<p class="text-zinc-500">No proactive alerts. Tickets slip through the cracks.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium">Knowledge silos everywhere</p>
|
|
||||||
<p class="text-zinc-500">Agents can't find the right articles fast enough.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-900 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold">With Freshdesk Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4 text-zinc-300">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>AI drafts perfect replies instantly</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="bell" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>Proactive escalation alerts before SLA breach</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="book-open" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>AI surfaces relevant articles automatically</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="zap" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>Works with Claude, GPT, any MCP client</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="users" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>Multi-agent workspace support built-in</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Freshdesk API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="ticket" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Ticket Management</h3>
|
|
||||||
<p class="text-zinc-400">Create, update, resolve tickets with AI assistance. Full CRUD on your queue.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="users" class="w-6 h-6 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Agent Workspace</h3>
|
|
||||||
<p class="text-zinc-400">Manage assignments, workload, and performance metrics automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="book-open" class="w-6 h-6 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Knowledge Base</h3>
|
|
||||||
<p class="text-zinc-400">Search articles, suggest solutions, update docs programmatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-orange-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="workflow" class="w-6 h-6 text-orange-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Automations</h3>
|
|
||||||
<p class="text-zinc-400">Trigger scenarios, dispatch rules, SLA management — all AI-controlled.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ 80 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Canned Responses</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Contact Management</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Groups</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Companies</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Time Entries</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Satisfaction Ratings</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Forums</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Products</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="Your phone number"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-zinc-900 rounded-3xl border border-zinc-800 p-8 md:p-12">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mcp/freshdesk
|
|
||||||
<span class="text-zinc-500">$</span> cd freshdesk && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Freshdesk MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 92 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
For the hosted version, no. Just connect your Freshdesk account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Freshdesk API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Freshdesk settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your support?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 300+ support teams already automating with Freshdesk Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Freshdesk Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Freshdesk Connect. Not affiliated with Freshdesk.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
gusto.html
Normal file
408
gusto.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Gusto Connect — AI-Power Your Payroll in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#F45D48',
|
||||||
|
600: '#F45D48dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #F45D48 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #F45D4825, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #F45D4820; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #F45D48">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Gusto Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #F45D48; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #F45D48"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Gusto</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Gusto MCP server. Payroll, benefits, and HR — AI-automated. <strong class="text-white">72 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #F45D48; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/gusto.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #F45D48; color: #fff">
|
||||||
|
72 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Gusto data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #F45D48, #F45D4899)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">GU</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Gusto Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 72 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Gusto Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #F45D48">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Gusto + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Payroll deadline stress</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F45D4830">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #F45D48"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI reminds and preps everything</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual onboarding tasks</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F45D4830">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #F45D48"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Automated new hire workflows</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Scattered employee requests</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F45D4830">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #F45D48"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI handles common HR queries</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Gusto API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F45D4820">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #F45D48"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Payroll Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Run payroll, check statuses, manage pay schedules.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F45D4820">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #F45D48"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Employee Data</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access profiles, compensation, and employment details.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F45D4820">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #F45D48"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Benefits Admin</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage enrollments, deductions, and plan information.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F45D4820">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #F45D48"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Compliance</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track tax filings, W-2s, and regulatory requirements.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #F45D48; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Gusto account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Gusto API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Gusto settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Gusto?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Gusto Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #F45D48; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Gusto Connect. Not affiliated with Gusto.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"Payroll is due Friday. What's the status and are there any issues?"},{"type":"ai","text":"Here's your payroll summary:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eGross Payroll\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$184,230\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+3.2%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eEmployees\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e47\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e0\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003ePending Items\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e3\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003eaction\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ 3 items need attention: 2 missing timesheets, 1 address change\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Send reminders to the 2 missing timesheets and approve the address change"},{"type":"ai","text":"Reminders sent to Jake M. and Lisa T. for timesheet submission. Address change for Marcus W. approved and updated in tax records.","action":"✓ 2 reminders sent · 1 address change approved · Payroll on track"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #F45D4820; border: 1px solid #F45D4840;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#F45D48;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #F45D48, #F45D4899)"><span class="font-bold text-[10px]" style="color: #fff">GU</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
603
gusto/index.html
603
gusto/index.html
@ -1,603 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Gusto Connect — AI-Power Your Payroll in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#fef2f2',
|
|
||||||
100: '#fee2e2',
|
|
||||||
200: '#fecaca',
|
|
||||||
300: '#fca5a5',
|
|
||||||
400: '#F45D48',
|
|
||||||
500: '#F45D48',
|
|
||||||
600: '#dc2626',
|
|
||||||
700: '#b91c1c',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #F45D48 0%, #ff8a65 50%, #ffab91 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(244, 93, 72, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(244, 93, 72, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(244, 93, 72, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(244, 93, 72, 0.4); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(244, 93, 72, 0.6); }
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(244, 93, 72, 0.4), 0 0 40px 0 rgba(244, 93, 72, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(244, 93, 72, 0.6), 0 0 60px 10px rgba(244, 93, 72, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(244, 93, 72, 0.2), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1) rotate(5deg);
|
|
||||||
}
|
|
||||||
.nav-blur {
|
|
||||||
backdrop-filter: blur(20px) saturate(180%);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.gradient-border::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
padding: 1px;
|
|
||||||
background: linear-gradient(135deg, rgba(244, 93, 72, 0.5), transparent, rgba(244, 93, 72, 0.3));
|
|
||||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
||||||
-webkit-mask-composite: xor;
|
|
||||||
mask-composite: exclude;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-orange-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-red-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/70 nav-blur">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-orange-400 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="wallet" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl tracking-tight">Gusto Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-lg font-medium transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20">
|
|
||||||
<div class="text-center">
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">Gusto</span><br>to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed">
|
|
||||||
The complete Gusto MCP server. Payroll, benefits, and HR — AI-automated. <strong class="text-white">72 tools</strong> ready to automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
|
||||||
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg text-center transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg text-center transition-all flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center gap-4 justify-center">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-zinc-400 text-sm">
|
|
||||||
Trusted by <strong class="text-white">200+</strong> HR teams
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your payroll workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="bg-zinc-900 rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/gusto.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="banknote" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Payroll</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Employees</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="heart-pulse" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Benefits</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pain Points -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up Gusto + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 text-lg max-w-2xl mx-auto">Stop wrestling with APIs. Start automating.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="flex items-center gap-4 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 mb-2 line-through">Payroll deadline stress</p>
|
|
||||||
<p class="text-white font-semibold text-lg">AI reminds and preps everything</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="flex items-center gap-4 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 mb-2 line-through">Manual onboarding tasks</p>
|
|
||||||
<p class="text-white font-semibold text-lg">Automated new hire workflows</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="flex items-center gap-4 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 mb-2 line-through">Scattered employee requests</p>
|
|
||||||
<p class="text-white font-semibold text-lg">AI handles common HR queries</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="inline-block px-4 py-1.5 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-4">Features</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-zinc-400 text-lg">Full Gusto API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-orange-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="banknote" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Payroll Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Run payroll, check statuses, manage pay schedules.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Employee Data</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Access profiles, compensation, and employment details.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="heart-pulse" class="w-7 h-7 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Benefits Admin</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Manage enrollments, deductions, and plan information.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="shield-check" class="w-7 h-7 text-blue-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Compliance</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Track tax filings, W-2s, and regulatory requirements.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 60 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Time Tracking</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">PTO Management</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Tax Forms</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Direct Deposit</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Contractors</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Reports</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 gradient-border">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 gradient-border">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/gusto-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Gusto MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 72 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Gusto account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Gusto API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Gusto settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Gusto?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join hundreds of HR teams already automating with Gusto Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-orange-400 flex items-center justify-center">
|
|
||||||
<i data-lucide="wallet" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Gusto Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Gusto Connect. Not affiliated with Gusto.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-orange-500 rounded-full font-semibold transition-all transform hover:scale-110 shadow-lg"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
helpscout.html
Normal file
408
helpscout.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Help Scout Connect — AI-Power Your Support in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#1292EE',
|
||||||
|
600: '#1292EEdd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #1292EE 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #1292EE25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #1292EE20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1292EE">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Help Scout Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #1292EE; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #1292EE"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Help Scout</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Help Scout MCP server. Conversations, docs, and beacons. <strong class="text-white">54 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #1292EE; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/helpscout.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #1292EE; color: #fff">
|
||||||
|
54 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Help Scout data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #1292EE, #1292EE99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">HS</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Help Scout Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 54 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Help Scout Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #1292EE">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Help Scout + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Repetitive support queries</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1292EE30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #1292EE"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI drafts from your docs</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">No customer context</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1292EE30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #1292EE"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Full history at a glance</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual ticket routing</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1292EE30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #1292EE"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI assigns intelligently</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Help Scout API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1292EE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1292EE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Conversation Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Handle emails, chats, and messages unified.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1292EE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1292EE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Docs</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Search and surface knowledge base articles.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1292EE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1292EE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Customer Profiles</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access history, properties, and context.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1292EE20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1292EE"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Workflows</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Automate tagging, assignment, and responses.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #1292EE; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Help Scout account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Help Scout API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Help Scout settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Help Scout?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Help Scout Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #1292EE; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Help Scout Connect. Not affiliated with Help Scout.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"What's the conversation queue looking like? Any unhappy customers?"},{"type":"ai","text":"Here's your support overview:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#2041\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eMigration data loss concern\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eUpset\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e3 replies\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#2038\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eCan't export reports\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eWaiting\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e4h ago\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#2035\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eFeature question: webhooks\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eEasy\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e1h ago\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#2033\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eBilling cycle change request\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eSimple\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e30m ago\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e18 active · 1 unhappy customer · Avg response: 52min\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Draft a recovery response for the migration issue and auto-reply to the easy ones"},{"type":"ai","text":"Drafted empathetic response for #2041 with data recovery steps and a direct meeting link with engineering. Auto-replied to #2035 (docs link) and #2033 (billing portal link).","action":"✓ Recovery response drafted · 2 auto-replies sent · Meeting link included"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #1292EE20; border: 1px solid #1292EE40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#1292EE;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #1292EE, #1292EE99)"><span class="font-bold text-[10px]" style="color: #fff">HS</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,637 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Help Scout Connect — AI-Power Your Support in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#eff6ff',
|
|
||||||
100: '#dbeafe',
|
|
||||||
200: '#bfdbfe',
|
|
||||||
300: '#93c5fd',
|
|
||||||
400: '#60a5fa',
|
|
||||||
500: '#1292EE',
|
|
||||||
600: '#0f7cd6',
|
|
||||||
700: '#0c66be',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #1292EE 0%, #60a5fa 50%, #a78bfa 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(18, 146, 238, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(18, 146, 238, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(18, 146, 238, 0.4);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-pulse-glow {
|
|
||||||
animation: pulseGlow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulseGlow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(18, 146, 238, 0.3); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(18, 146, 238, 0.5); }
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(18, 146, 238, 0.4), 0 0 40px 0 rgba(18, 146, 238, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(18, 146, 238, 0.6), 0 0 60px 10px rgba(18, 146, 238, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(18, 146, 238, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(18, 146, 238, 0.5), rgba(167, 139, 250, 0.2));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
@keyframes typing {
|
|
||||||
from { width: 0 }
|
|
||||||
to { width: 100% }
|
|
||||||
}
|
|
||||||
.typing-effect {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
animation: typing 2s steps(30, end);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center">
|
|
||||||
<i data-lucide="life-buoy" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Help Scout Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition transform hover:scale-105">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
|
|
||||||
<!-- Floating background elements -->
|
|
||||||
<div class="absolute top-40 left-10 w-72 h-72 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20">
|
|
||||||
<div class="text-center relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">Help Scout</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
|
|
||||||
The complete Help Scout MCP server. <strong class="text-white">54 tools</strong> for conversations, docs, and workflows.
|
|
||||||
No setup. No OAuth headaches. Just connect and support.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
|
||||||
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center gap-4 justify-center">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold">+50</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">200+</strong> support teams
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your support workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/helpscout.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="message-circle" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Conversations</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Docs</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="git-merge" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Workflows</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up Help Scout + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<!-- Pain Point 1 -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
|
||||||
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Repetitive support queries</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Same questions, every day. Copy-paste answers get stale fast.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI drafts from your docs</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 2 -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
|
||||||
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-semibold text-zinc-300 mb-3">No customer context</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Who is this person? What happened before? Time wasted searching.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">Full history at a glance</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 3 -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
|
||||||
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Manual ticket routing</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Tickets land in the wrong queue. Customers wait. CSAT drops.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI assigns intelligently</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Help Scout API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-blue-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="message-circle" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Conversation Management</h3>
|
|
||||||
<p class="text-zinc-400">Handle emails, chats, and messages — all unified in one place.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="book-open" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Docs</h3>
|
|
||||||
<p class="text-zinc-400">Search and surface knowledge base articles automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-yellow-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="user-circle" class="w-7 h-7 text-orange-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Customer Profiles</h3>
|
|
||||||
<p class="text-zinc-400">Access history, properties, and context for every customer.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="git-merge" class="w-7 h-7 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Workflows</h3>
|
|
||||||
<p class="text-zinc-400">Automate tagging, assignment, and responses effortlessly.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ 50 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Mailboxes</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tags</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Saved Replies</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Teams</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Users</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Reports</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Beacons</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/10 to-purple-500/10 rounded-3xl blur-xl"></div>
|
|
||||||
<div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="Your phone number"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message (hidden by default) -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const submitBtn = document.getElementById('submit-btn');
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/helpscout-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Help Scout MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 54 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Help Scout account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Help Scout API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Help Scout settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Help Scout?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 200+ support teams already automating with Help Scout Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center">
|
|
||||||
<i data-lucide="life-buoy" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Help Scout Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Help Scout Connect. Not affiliated with Help Scout.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-purple-500 rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
housecallpro.html
Normal file
408
housecallpro.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Housecall Pro Connect — AI-Power Your Home Services in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#FF5722',
|
||||||
|
600: '#FF5722dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #FF5722 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FF572225, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #FF572220; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF5722">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Housecall Pro Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FF5722; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #FF5722"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Housecall Pro</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Housecall Pro MCP server. Jobs, dispatch, and payments. <strong class="text-white">72 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FF5722; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/housecallpro.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FF5722; color: #fff">
|
||||||
|
72 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Housecall Pro data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #FF5722, #FF572299)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">HC</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Housecall Pro Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 72 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Housecall Pro Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF5722">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Housecall Pro + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Dispatch chaos</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF572230">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FF5722"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI optimizes routes</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Slow estimate turnaround</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF572230">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FF5722"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Instant AI-generated quotes</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">No online reviews</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF572230">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FF5722"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Automated review requests</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Housecall Pro API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF572220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF5722"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Job Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Schedule, dispatch, track jobs end-to-end.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF572220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF5722"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Estimates & Invoicing</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Generate quotes, convert, and collect payment.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF572220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF5722"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Customer Portal</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage profiles, property info, and history.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF572220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF5722"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Marketing</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Send postcards, emails, and review requests.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FF5722; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Housecall Pro account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Housecall Pro API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Housecall Pro settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Housecall Pro?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Housecall Pro Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FF5722; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Housecall Pro Connect. Not affiliated with Housecall Pro.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"How many estimates are pending? What's our conversion rate this month?"},{"type":"ai","text":"Here's your estimate dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eE-442\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eWilson - HVAC replacement ($6,200)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003e12 days\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eStale\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eE-451\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eRoberts - Plumbing fix ($890)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003e3 days\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eWarm\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eE-455\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eChen - Full service ($2,400)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003e1 day\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eHot\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e$9,490 pending · 58% conversion rate (↑ from 52%)\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Follow up with Wilson, and convert Chen's estimate to a job for next week"},{"type":"ai","text":"Sent Wilson a follow-up with financing options for the $6,200 HVAC job. Converted Chen's estimate to a scheduled job — Tuesday 9am. Confirmation text sent to the customer.","action":"✓ Follow-up sent · Job created (Tue 9am) · Customer confirmed"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #FF572220; border: 1px solid #FF572240;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#FF5722;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #FF5722, #FF572299)"><span class="font-bold text-[10px]" style="color: #fff">HC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,640 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Housecall Pro Connect — AI-Power Your Home Services in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#fff7ed',
|
|
||||||
100: '#ffedd5',
|
|
||||||
200: '#fed7aa',
|
|
||||||
300: '#fdba74',
|
|
||||||
400: '#fb923c',
|
|
||||||
500: '#FF5722',
|
|
||||||
600: '#ea580c',
|
|
||||||
700: '#c2410c',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #FF5722 0%, #ff9800 50%, #ffeb3b 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 87, 34, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 60px rgba(255, 87, 34, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(255, 87, 34, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(255, 87, 34, 0.3); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(255, 87, 34, 0.5); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes gradient-shift {
|
|
||||||
0%, 100% { background-position: 0% 50%; }
|
|
||||||
50% { background-position: 100% 50%; }
|
|
||||||
}
|
|
||||||
.animated-gradient {
|
|
||||||
background: linear-gradient(-45deg, #FF5722, #ff9800, #FF5722, #c2410c);
|
|
||||||
background-size: 400% 400%;
|
|
||||||
animation: gradient-shift 8s ease infinite;
|
|
||||||
}
|
|
||||||
.glow-orb {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(60px);
|
|
||||||
opacity: 0.4;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 87, 34, 0.4), 0 0 40px 0 rgba(255, 87, 34, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(255, 87, 34, 0.6), 0 0 60px 10px rgba(255, 87, 34, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Orbs -->
|
|
||||||
<div class="glow-orb w-96 h-96 bg-orange-500 top-20 -left-48 fixed animate-float-slow"></div>
|
|
||||||
<div class="glow-orb w-72 h-72 bg-amber-500 top-1/2 -right-36 fixed animate-float-delayed"></div>
|
|
||||||
<div class="glow-orb w-64 h-64 bg-orange-600 bottom-20 left-1/4 fixed animate-float"></div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/20">
|
|
||||||
<i data-lucide="home" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Housecall Pro Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/20 hover:shadow-brand-500/40">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20">
|
|
||||||
<div class="flex flex-col items-center text-center">
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">Housecall Pro</span> to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed max-w-3xl mx-auto">
|
|
||||||
The complete Housecall Pro MCP server. <strong class="text-white">72 tools</strong> for jobs, dispatch, and payments.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">300+</strong> home service pros
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your field service operations</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-r from-brand-500/50 to-amber-500/20 p-[1px] rounded-2xl">
|
|
||||||
<div class="bg-zinc-900 rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/housecallpro.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="calendar-check" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Jobs</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="truck" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Dispatch</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="credit-card" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Payments</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
||||||
<div>
|
|
||||||
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">The Problem</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-8 leading-tight">
|
|
||||||
Setting up Housecall Pro + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Dispatch chaos every morning</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Phone calls, texts, schedule changes — it never stops.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Slow estimate turnaround</p>
|
|
||||||
<p class="text-zinc-500 mt-1">By the time you quote, they've called your competitor.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">No online reviews</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Happy customers forget. You need to ask at the right time.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-xl relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl"></div>
|
|
||||||
<div class="relative">
|
|
||||||
<div class="flex items-center gap-3 mb-8">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/30">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold">With Housecall Pro Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4 text-lg">
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>AI optimizes routes automatically</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>Instant AI-generated quotes</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>Automated review requests</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>Works with Claude, GPT, any MCP client</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>Full API access — 72 tools ready</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">Features</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Housecall Pro API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5 border border-brand-500/20">
|
|
||||||
<i data-lucide="calendar-check" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Job Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Schedule, dispatch, track jobs end-to-end. Full control over your operations.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center mb-5 border border-amber-500/20">
|
|
||||||
<i data-lucide="file-text" class="w-7 h-7 text-amber-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Estimates & Invoicing</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Generate quotes, convert to jobs, and collect payment automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5 border border-green-500/20">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Customer Portal</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Manage profiles, property info, service history, and preferences.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5 border border-purple-500/20">
|
|
||||||
<i data-lucide="megaphone" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Marketing</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Send postcards, emails, and review requests. Grow your reputation.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-16 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 60 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Payments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Scheduling</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Dispatch</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Price Book</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Reporting</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Notifications</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Reviews</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">GPS Tracking</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-2xl mx-auto px-6 relative">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-semibold mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-2xl">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="+1 (555) 000-0000"
|
|
||||||
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email <span class="text-zinc-500">(optional)</span></label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
||||||
<i data-lucide="check" class="w-10 h-10 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="error-message" class="hidden mt-4 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-center">
|
|
||||||
Something went wrong. Please try again.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const submitBtn = document.getElementById('submit-btn');
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
const errorMsg = document.getElementById('error-message');
|
|
||||||
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
|
|
||||||
|
|
||||||
// Simulate submission
|
|
||||||
await new Promise(r => setTimeout(r, 1000));
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-xl">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 text-lg mb-8 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold text-lg group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-inner">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/housecallpro-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Housecall Pro MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 72 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">FAQ</span>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Housecall Pro account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Housecall Pro API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Housecall Pro settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Housecall Pro?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 300+ home service pros already automating with Housecall Pro Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="home" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Housecall Pro Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Housecall Pro Connect. Not affiliated with Housecall Pro.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
755
index.html
755
index.html
@ -1,636 +1,155 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="scroll-smooth">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>MCPEngine — AI Infrastructure for Business Software</title>
|
<title>MCP Engine — AI-Powered Integrations</title>
|
||||||
<meta name="description" content="Connect AI assistants to 30+ business platforms in one click. Managed MCP servers for ServiceTitan, Mailchimp, Calendly, Zendesk, and more.">
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
||||||
colors: {
|
|
||||||
engine: {
|
|
||||||
50: '#f0f9ff',
|
|
||||||
100: '#e0f2fe',
|
|
||||||
200: '#bae6fd',
|
|
||||||
300: '#7dd3fc',
|
|
||||||
400: '#38bdf8',
|
|
||||||
500: '#0ea5e9',
|
|
||||||
600: '#0284c7',
|
|
||||||
700: '#0369a1',
|
|
||||||
800: '#075985',
|
|
||||||
900: '#0c4a6e',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
<style>
|
||||||
.gradient-text {
|
body { font-family: 'Inter', system-ui, sans-serif; }
|
||||||
background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #8b5cf6 100%);
|
.card-glow:hover { box-shadow: 0 0 30px rgba(139,92,246,0.15); transform: translateY(-2px); }
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 100% 60% at 50% -20%, rgba(14, 165, 233, 0.15), transparent);
|
|
||||||
}
|
|
||||||
.platform-card {
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
|
||||||
}
|
|
||||||
.platform-card:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 20px 40px -12px rgba(14, 165, 233, 0.25);
|
|
||||||
border-color: rgba(14, 165, 233, 0.4);
|
|
||||||
}
|
|
||||||
.stat-number {
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-slate-950 text-slate-100 font-sans antialiased">
|
<body class="bg-zinc-950 text-zinc-100 antialiased">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
<!-- Nav -->
|
<div class="text-center mb-16">
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-slate-800/50 bg-slate-950/80 backdrop-blur-xl">
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-6">
|
||||||
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
<span class="w-2 h-2 rounded-full bg-violet-500 animate-pulse"></span>
|
||||||
<div class="flex items-center gap-3">
|
30 Platforms · Open Source
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-engine-500 to-purple-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="zap" class="w-6 h-6 text-white"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="text-xl font-bold">MCPEngine</span>
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-4">
|
||||||
</div>
|
<span style="background:linear-gradient(135deg,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">MCP Engine</span>
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#platforms" class="text-slate-400 hover:text-white transition">Platforms</a>
|
|
||||||
<a href="#pricing" class="text-slate-400 hover:text-white transition">Pricing</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="text-slate-400 hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#contact" class="px-5 py-2.5 rounded-lg bg-engine-500 hover:bg-engine-600 text-white font-medium transition">Get Started</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative pt-32 pb-24 px-6 hero-glow">
|
|
||||||
<div class="max-w-6xl mx-auto text-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700/50 text-sm text-slate-300 mb-8">
|
|
||||||
<span class="flex w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
|
|
||||||
30 platforms, 240+ tools, production-ready
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-6xl md:text-7xl lg:text-8xl font-black mb-8 leading-tight">
|
|
||||||
AI Infrastructure<br>
|
|
||||||
<span class="gradient-text">for Business Software</span>
|
|
||||||
</h1>
|
</h1>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Connect any SaaS platform to AI in 2 clicks. Full API access through the Model Context Protocol.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-slate-400 mb-12 max-w-3xl mx-auto leading-relaxed">
|
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
Connect Claude, ChatGPT, and other AI assistants to your business tools in one click. Managed MCP servers for 30+ platforms.
|
<a href="calendly.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
</p>
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#006BFF"><span class="font-bold text-sm text-white">C</span></div>
|
||||||
|
<div><div class="font-semibold">Calendly</div><div class="text-xs text-zinc-500">47 tools</div></div>
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#platforms" class="px-8 py-4 rounded-xl bg-engine-500 hover:bg-engine-600 text-white font-semibold text-lg transition shadow-2xl shadow-engine-500/50">
|
|
||||||
Browse Platforms
|
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="px-8 py-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-semibold text-lg transition border border-slate-700">
|
<a href="zendesk.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
View on GitHub
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#03363D"><span class="font-bold text-sm text-white">Z</span></div>
|
||||||
|
<div><div class="font-semibold">Zendesk</div><div class="text-xs text-zinc-500">156 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="trello.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0079BF"><span class="font-bold text-sm text-white">T</span></div>
|
||||||
|
<div><div class="font-semibold">Trello</div><div class="text-xs text-zinc-500">89 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="gusto.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#F45D48"><span class="font-bold text-sm text-white">G</span></div>
|
||||||
|
<div><div class="font-semibold">Gusto</div><div class="text-xs text-zinc-500">72 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="mailchimp.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FFE01B"><span class="font-bold text-sm text-black">M</span></div>
|
||||||
|
<div><div class="font-semibold">Mailchimp</div><div class="text-xs text-zinc-500">94 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="clickup.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#7B68EE"><span class="font-bold text-sm text-white">C</span></div>
|
||||||
|
<div><div class="font-semibold">ClickUp</div><div class="text-xs text-zinc-500">134 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="acuity.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#315B7D"><span class="font-bold text-sm text-white">A</span></div>
|
||||||
|
<div><div class="font-semibold">Acuity Scheduling</div><div class="text-xs text-zinc-500">38 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="squarespace.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#000000;border:1px solid #333"><span class="font-bold text-sm text-white">S</span></div>
|
||||||
|
<div><div class="font-semibold">Squarespace</div><div class="text-xs text-zinc-500">67 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="brevo.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0B996E"><span class="font-bold text-sm text-white">B</span></div>
|
||||||
|
<div><div class="font-semibold">Brevo</div><div class="text-xs text-zinc-500">82 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="wrike.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#08CF65"><span class="font-bold text-sm text-white">W</span></div>
|
||||||
|
<div><div class="font-semibold">Wrike</div><div class="text-xs text-zinc-500">98 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="bamboohr.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#73C41D"><span class="font-bold text-sm text-white">B</span></div>
|
||||||
|
<div><div class="font-semibold">BambooHR</div><div class="text-xs text-zinc-500">56 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="freshbooks.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0075DD"><span class="font-bold text-sm text-white">F</span></div>
|
||||||
|
<div><div class="font-semibold">FreshBooks</div><div class="text-xs text-zinc-500">64 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="clover.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#43B02A"><span class="font-bold text-sm text-white">C</span></div>
|
||||||
|
<div><div class="font-semibold">Clover</div><div class="text-xs text-zinc-500">78 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="servicetitan.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FF6B00"><span class="font-bold text-sm text-white">S</span></div>
|
||||||
|
<div><div class="font-semibold">ServiceTitan</div><div class="text-xs text-zinc-500">124 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="rippling.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FEC400"><span class="font-bold text-sm text-black">R</span></div>
|
||||||
|
<div><div class="font-semibold">Rippling</div><div class="text-xs text-zinc-500">89 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="freshdesk.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#25C16F"><span class="font-bold text-sm text-white">F</span></div>
|
||||||
|
<div><div class="font-semibold">Freshdesk</div><div class="text-xs text-zinc-500">92 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="keap.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2D9F2D"><span class="font-bold text-sm text-white">K</span></div>
|
||||||
|
<div><div class="font-semibold">Keap</div><div class="text-xs text-zinc-500">76 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="constantcontact.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1856A8"><span class="font-bold text-sm text-white">C</span></div>
|
||||||
|
<div><div class="font-semibold">Constant Contact</div><div class="text-xs text-zinc-500">58 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="lightspeed.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#E4002B"><span class="font-bold text-sm text-white">L</span></div>
|
||||||
|
<div><div class="font-semibold">Lightspeed</div><div class="text-xs text-zinc-500">86 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="bigcommerce.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#34313F"><span class="font-bold text-sm text-white">B</span></div>
|
||||||
|
<div><div class="font-semibold">BigCommerce</div><div class="text-xs text-zinc-500">112 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="toast.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FF4C00"><span class="font-bold text-sm text-white">T</span></div>
|
||||||
|
<div><div class="font-semibold">Toast</div><div class="text-xs text-zinc-500">94 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="jobber.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#7AC143"><span class="font-bold text-sm text-white">J</span></div>
|
||||||
|
<div><div class="font-semibold">Jobber</div><div class="text-xs text-zinc-500">68 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="wave.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#165DFF"><span class="font-bold text-sm text-white">W</span></div>
|
||||||
|
<div><div class="font-semibold">Wave</div><div class="text-xs text-zinc-500">42 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="closecrm.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#3D5AFE"><span class="font-bold text-sm text-white">C</span></div>
|
||||||
|
<div><div class="font-semibold">Close CRM</div><div class="text-xs text-zinc-500">84 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="pipedrive.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#017737"><span class="font-bold text-sm text-white">P</span></div>
|
||||||
|
<div><div class="font-semibold">Pipedrive</div><div class="text-xs text-zinc-500">76 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="helpscout.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1292EE"><span class="font-bold text-sm text-white">H</span></div>
|
||||||
|
<div><div class="font-semibold">Help Scout</div><div class="text-xs text-zinc-500">54 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="basecamp.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1D2D35"><span class="font-bold text-sm text-white">B</span></div>
|
||||||
|
<div><div class="font-semibold">Basecamp</div><div class="text-xs text-zinc-500">62 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="housecallpro.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FF5722"><span class="font-bold text-sm text-white">H</span></div>
|
||||||
|
<div><div class="font-semibold">Housecall Pro</div><div class="text-xs text-zinc-500">72 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="fieldedge.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#0066B2"><span class="font-bold text-sm text-white">F</span></div>
|
||||||
|
<div><div class="font-semibold">FieldEdge</div><div class="text-xs text-zinc-500">68 tools</div></div>
|
||||||
|
</a>
|
||||||
|
<a href="touchbistro.html" class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition-all flex items-center gap-4">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#F26522"><span class="font-bold text-sm text-white">T</span></div>
|
||||||
|
<div><div class="font-semibold">TouchBistro</div><div class="text-xs text-zinc-500">58 tools</div></div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Stats -->
|
<footer class="mt-20 text-center text-zinc-600 text-sm">
|
||||||
<div class="mt-20 grid grid-cols-3 gap-8 max-w-3xl mx-auto">
|
© 2026 MCP Engine. Open source AI integrations for every SaaS platform.
|
||||||
<div>
|
|
||||||
<div class="text-5xl font-black gradient-text stat-number mb-2">30</div>
|
|
||||||
<div class="text-slate-500 font-medium">Platforms</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="text-5xl font-black gradient-text stat-number mb-2">240+</div>
|
|
||||||
<div class="text-slate-500 font-medium">Tools</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="text-5xl font-black gradient-text stat-number mb-2">100%</div>
|
|
||||||
<div class="text-slate-500 font-medium">Open Source</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- What is MCPEngine -->
|
|
||||||
<section class="py-24 px-6 border-t border-slate-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-4xl md:text-5xl font-black mb-6">What is MCPEngine?</h2>
|
|
||||||
<p class="text-xl text-slate-400 max-w-3xl mx-auto">
|
|
||||||
The infrastructure layer that connects AI assistants to business software through the Model Context Protocol.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<div class="p-8 rounded-2xl bg-slate-900/50 border border-slate-800/50">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-engine-500 to-purple-600 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="plug" class="w-7 h-7 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-4">One-Click Connect</h3>
|
|
||||||
<p class="text-slate-400 leading-relaxed">
|
|
||||||
No API wrappers to write. Deploy a server, add credentials, and your AI can instantly use ServiceTitan, Mailchimp, or any of 30+ platforms.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-8 rounded-2xl bg-slate-900/50 border border-slate-800/50">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="shield-check" class="w-7 h-7 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-4">Production-Ready</h3>
|
|
||||||
<p class="text-slate-400 leading-relaxed">
|
|
||||||
Built with TypeScript, comprehensive error handling, and battle-tested with real customer data. Not toy demos.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-8 rounded-2xl bg-slate-900/50 border border-slate-800/50">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500 to-orange-600 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="rocket" class="w-7 h-7 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-4">Managed Hosting</h3>
|
|
||||||
<p class="text-slate-400 leading-relaxed">
|
|
||||||
Self-host from our GitHub repo or use our managed service. Auto-updates, monitoring, and 99.9% uptime SLA.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Platforms Grid -->
|
|
||||||
<section id="platforms" class="py-24 px-6 border-t border-slate-800/50">
|
|
||||||
<div class="max-w-7xl mx-auto">
|
|
||||||
<div class="text-center mb-20">
|
|
||||||
<h2 class="text-4xl md:text-5xl font-black mb-6">30 Platforms. One Engine.</h2>
|
|
||||||
<p class="text-xl text-slate-400 max-w-3xl mx-auto">
|
|
||||||
From field service to e-commerce, we've built MCP servers for the tools your business actually uses.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Categories -->
|
|
||||||
<div class="space-y-16">
|
|
||||||
|
|
||||||
<!-- Field Service -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
|
||||||
<i data-lucide="wrench" class="w-6 h-6 text-orange-500"></i>
|
|
||||||
Field Service
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<a href="servicetitan.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="wrench" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">ServiceTitan</div>
|
|
||||||
</a>
|
|
||||||
<a href="jobber.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="briefcase" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Jobber</div>
|
|
||||||
</a>
|
|
||||||
<a href="housecallpro.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="home" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Housecall Pro</div>
|
|
||||||
</a>
|
|
||||||
<a href="fieldedge.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="tool" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">FieldEdge</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- HR & Payroll -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
|
||||||
<i data-lucide="users" class="w-6 h-6 text-pink-500"></i>
|
|
||||||
HR & Payroll
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<a href="gusto.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="users" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Gusto</div>
|
|
||||||
</a>
|
|
||||||
<a href="bamboohr.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="user-check" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">BambooHR</div>
|
|
||||||
</a>
|
|
||||||
<a href="rippling.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="building-2" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Rippling</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Scheduling -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
|
||||||
<i data-lucide="calendar" class="w-6 h-6 text-blue-500"></i>
|
|
||||||
Scheduling
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<a href="calendly.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="calendar" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Calendly</div>
|
|
||||||
</a>
|
|
||||||
<a href="acuity.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-pink-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="clock" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Acuity</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Restaurant & POS -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
|
||||||
<i data-lucide="utensils" class="w-6 h-6 text-red-500"></i>
|
|
||||||
Restaurant & POS
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<a href="toast.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-red-500 to-orange-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="utensils" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Toast</div>
|
|
||||||
</a>
|
|
||||||
<a href="touchbistro.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="smartphone" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">TouchBistro</div>
|
|
||||||
</a>
|
|
||||||
<a href="clover.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-lime-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="credit-card" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Clover</div>
|
|
||||||
</a>
|
|
||||||
<a href="lightspeed.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-amber-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="zap" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Lightspeed</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Email Marketing -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
|
||||||
<i data-lucide="mail" class="w-6 h-6 text-yellow-500"></i>
|
|
||||||
Email Marketing
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<a href="mailchimp.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="mail" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Mailchimp</div>
|
|
||||||
</a>
|
|
||||||
<a href="brevo.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="send" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Brevo</div>
|
|
||||||
</a>
|
|
||||||
<a href="constantcontact.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="megaphone" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Constant Contact</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- CRM -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
|
||||||
<i data-lucide="target" class="w-6 h-6 text-purple-500"></i>
|
|
||||||
CRM
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<a href="closecrm.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="target" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Close</div>
|
|
||||||
</a>
|
|
||||||
<a href="pipedrive.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="trending-up" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Pipedrive</div>
|
|
||||||
</a>
|
|
||||||
<a href="keap.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="sparkles" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Keap</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Project Management -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
|
||||||
<i data-lucide="layout-grid" class="w-6 h-6 text-blue-500"></i>
|
|
||||||
Project Management
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<a href="trello.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="layout-grid" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Trello</div>
|
|
||||||
</a>
|
|
||||||
<a href="clickup.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="check-circle" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">ClickUp</div>
|
|
||||||
</a>
|
|
||||||
<a href="basecamp.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="mountain" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Basecamp</div>
|
|
||||||
</a>
|
|
||||||
<a href="wrike.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="layers" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Wrike</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Customer Support -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
|
||||||
<i data-lucide="headphones" class="w-6 h-6 text-green-500"></i>
|
|
||||||
Customer Support
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<a href="zendesk.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="headphones" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Zendesk</div>
|
|
||||||
</a>
|
|
||||||
<a href="freshdesk.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="message-circle" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Freshdesk</div>
|
|
||||||
</a>
|
|
||||||
<a href="helpscout.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="life-buoy" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Help Scout</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- E-commerce -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
|
||||||
<i data-lucide="shopping-bag" class="w-6 h-6 text-purple-500"></i>
|
|
||||||
E-commerce
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<a href="squarespace.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="square" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Squarespace</div>
|
|
||||||
</a>
|
|
||||||
<a href="bigcommerce.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="shopping-bag" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">BigCommerce</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Accounting -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
|
||||||
<i data-lucide="receipt" class="w-6 h-6 text-green-500"></i>
|
|
||||||
Accounting
|
|
||||||
</h3>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<a href="freshbooks.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="receipt" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">FreshBooks</div>
|
|
||||||
</a>
|
|
||||||
<a href="wave.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
|
||||||
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="wallet" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="font-bold">Wave</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pricing -->
|
|
||||||
<section id="pricing" class="py-24 px-6 border-t border-slate-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-4xl md:text-5xl font-black mb-6">Simple, Transparent Pricing</h2>
|
|
||||||
<p class="text-xl text-slate-400 max-w-3xl mx-auto">
|
|
||||||
Self-host for free, use our managed service, or become a provider.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<!-- Open Source -->
|
|
||||||
<div class="p-8 rounded-2xl bg-slate-900/30 border border-slate-800/50">
|
|
||||||
<div class="text-lg font-semibold text-slate-400 mb-2">Open Source</div>
|
|
||||||
<div class="text-5xl font-black mb-6">
|
|
||||||
$0
|
|
||||||
<span class="text-xl text-slate-500 font-normal">/forever</span>
|
|
||||||
</div>
|
|
||||||
<ul class="space-y-3 mb-8">
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">All 30 MCP servers</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">Full source code access</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">Self-host anywhere</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">MIT license</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">Community support</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="block w-full py-3 px-6 rounded-lg bg-slate-800 hover:bg-slate-700 text-center font-semibold transition">
|
|
||||||
Get Started
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Per-Platform Managed -->
|
|
||||||
<div class="p-8 rounded-2xl bg-gradient-to-br from-engine-500/10 to-purple-600/10 border-2 border-engine-500/50 relative">
|
|
||||||
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-gradient-to-r from-engine-500 to-purple-600 text-sm font-bold text-white">
|
|
||||||
Most Popular
|
|
||||||
</div>
|
|
||||||
<div class="text-lg font-semibold text-engine-400 mb-2">Select Your Apps</div>
|
|
||||||
<div class="text-5xl font-black mb-6">
|
|
||||||
$49
|
|
||||||
<span class="text-xl text-slate-500 font-normal">/app/mo</span>
|
|
||||||
</div>
|
|
||||||
<ul class="space-y-3 mb-8">
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">Choose any platforms</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">Fully managed hosting</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">Auto-updates</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">99.9% uptime SLA</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">Email support</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<a href="#contact" class="block w-full py-3 px-6 rounded-lg bg-engine-500 hover:bg-engine-600 text-center font-semibold transition text-white">
|
|
||||||
Coming Q2 2026
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Enterprise / Reseller -->
|
|
||||||
<div class="p-8 rounded-2xl bg-slate-900/30 border border-slate-800/50">
|
|
||||||
<div class="text-lg font-semibold text-slate-400 mb-2">Become a Provider</div>
|
|
||||||
<div class="text-5xl font-black mb-6">
|
|
||||||
Partner
|
|
||||||
</div>
|
|
||||||
<ul class="space-y-3 mb-8">
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">White-label deployment</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">Offer managed services</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">Revenue sharing model</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">Dedicated support</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
|
||||||
<span class="text-slate-300">Custom SLA</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<a href="mailto:partners@mcpengine.com" class="block w-full py-3 px-6 rounded-lg bg-slate-800 hover:bg-slate-700 text-center font-semibold transition">
|
|
||||||
Become a Partner
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section id="contact" class="py-24 px-6 border-t border-slate-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto text-center">
|
|
||||||
<h2 class="text-4xl md:text-5xl font-black mb-6">Ready to Power Your AI?</h2>
|
|
||||||
<p class="text-xl text-slate-400 mb-12 max-w-2xl mx-auto">
|
|
||||||
Join early adopters building the future of AI-powered business automation.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="px-8 py-4 rounded-xl bg-engine-500 hover:bg-engine-600 text-white font-semibold text-lg transition shadow-2xl shadow-engine-500/50">
|
|
||||||
Explore on GitHub
|
|
||||||
</a>
|
|
||||||
<a href="mailto:hello@mcpengine.com" class="px-8 py-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-semibold text-lg transition border border-slate-700">
|
|
||||||
Get in Touch
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-slate-800/50 py-12 px-6">
|
|
||||||
<div class="max-w-7xl mx-auto">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-engine-500 to-purple-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="zap" class="w-6 h-6 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-lg font-bold">MCPEngine</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-6 text-slate-400 text-sm">
|
|
||||||
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="mailto:hello@mcpengine.com" class="hover:text-white transition">Contact</a>
|
|
||||||
<span>© 2026 MCPEngine</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
</footer>
|
||||||
|
</div>
|
||||||
<script>
|
|
||||||
// Initialize Lucide icons
|
|
||||||
lucide.createIcons();
|
|
||||||
|
|
||||||
// Smooth scroll
|
|
||||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
||||||
anchor.addEventListener('click', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const target = document.querySelector(this.getAttribute('href'));
|
|
||||||
if (target) {
|
|
||||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
408
jobber.html
Normal file
408
jobber.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Jobber Connect — AI-Power Your Service Business in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#7AC143',
|
||||||
|
600: '#7AC143dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #7AC143 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #7AC14325, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #7AC14320; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #7AC143">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Jobber Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #7AC143; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #7AC143"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Jobber</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Jobber MCP server. Quotes, jobs, and invoicing. <strong class="text-white">68 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #7AC143; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/jobber.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #7AC143; color: #fff">
|
||||||
|
68 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Jobber data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #7AC143, #7AC14399)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">JB</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Jobber Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 68 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Jobber Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #7AC143">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Jobber + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Quote follow-up gaps</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7AC14330">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #7AC143"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI chases every lead</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Scheduling conflicts</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7AC14330">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #7AC143"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI optimizes crew allocation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Late invoice payments</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #7AC14330">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #7AC143"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Automated payment reminders</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Jobber API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7AC14320">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #7AC143"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Quote Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, send, track quotes automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7AC14320">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #7AC143"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Job Scheduling</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Assign work, optimize routes, track progress.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7AC14320">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #7AC143"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Invoicing</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Generate invoices, collect payments, send reminders.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #7AC14320">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #7AC143"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Client Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track properties, service history, and preferences.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #7AC143; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Jobber account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Jobber API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Jobber settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Jobber?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Jobber Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #7AC143; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Jobber Connect. Not affiliated with Jobber.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"What quotes are pending? Any that are about to go cold?"},{"type":"ai","text":"Here's your quote pipeline:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eQ-284\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eJohnson - Full reno ($8,400)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003e14 days\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eGoing cold\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eQ-291\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003ePark Residence - Repair ($1,200)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003e7 days\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eFollow up\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eQ-298\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eMaple St - Maintenance ($450)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003e2 days\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eFresh\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eQ-301\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eOakwood - Install ($3,200)\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003e1 day\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eFresh\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e$13,250 in pending quotes · 1 going cold · 67% avg close rate\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Call Johnson about the reno quote and send a reminder to Park Residence"},{"type":"ai","text":"Logged callback for Johnson at 2pm with quote details pre-loaded. Sent Park Residence an email reminder with an updated availability calendar for scheduling.","action":"✓ Callback scheduled · Email reminder sent · Calendar link included"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #7AC14320; border: 1px solid #7AC14340;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#7AC143;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #7AC143, #7AC14399)"><span class="font-bold text-[10px]" style="color: #fff">JB</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,762 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Jobber Connect — AI-Power Your Service Business in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#f2fde8',
|
|
||||||
100: '#e2faca',
|
|
||||||
200: '#c6f49a',
|
|
||||||
300: '#a1ea5f',
|
|
||||||
400: '#7ac143',
|
|
||||||
500: '#5da52a',
|
|
||||||
600: '#47831d',
|
|
||||||
700: '#38641b',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #7AC143 0%, #47831d 50%, #2d5a10 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.gradient-text-hero {
|
|
||||||
background: linear-gradient(135deg, #7AC143 0%, #8b5cf6 50%, #ec4899 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(122, 193, 67, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(122, 193, 67, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(122, 193, 67, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(122, 193, 67, 0.4); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(122, 193, 67, 0.6); }
|
|
||||||
}
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% { background-position: -200% 0; }
|
|
||||||
100% { background-position: 200% 0; }
|
|
||||||
}
|
|
||||||
.shimmer-border {
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(122, 193, 67, 0.3), transparent);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 3s infinite;
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(122, 193, 67, 0.2), 0 0 120px rgba(122, 193, 67, 0.1);
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
background: linear-gradient(135deg, #7AC143 0%, #5da52a 100%);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 0 30px rgba(122, 193, 67, 0.5);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
background: linear-gradient(135deg, rgba(122, 193, 67, 0.2) 0%, rgba(122, 193, 67, 0.05) 100%);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(122, 193, 67, 0.4), 0 0 40px 0 rgba(122, 193, 67, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(122, 193, 67, 0.6), 0 0 60px 10px rgba(122, 193, 67, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: linear-gradient(135deg, rgba(122, 193, 67, 0.1) 0%, transparent 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="absolute top-1/4 left-10 w-72 h-72 bg-brand-400/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute bottom-1/4 left-1/3 w-64 h-64 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center shadow-lg shadow-brand-400/20">
|
|
||||||
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Jobber Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
|
|
||||||
<a href="#pricing" class="btn-primary px-5 py-2.5 rounded-xl font-semibold text-white">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20 text-center">
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text-hero">Jobber</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
|
|
||||||
The complete Jobber MCP server. <strong class="text-white">68 tools</strong> for quotes, jobs, and invoicing.
|
|
||||||
No setup. No API hassles. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="btn-primary w-full sm:w-auto px-8 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
|
|
||||||
Join the Waitlist
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-6">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=11" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=12" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=13" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=14" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=15" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="text-center sm:text-left">
|
|
||||||
<p class="text-zinc-300 font-medium">Trusted by <strong class="text-white">200+</strong> service businesses</p>
|
|
||||||
<div class="flex items-center justify-center sm:justify-start gap-1 mt-1">
|
|
||||||
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
|
|
||||||
<span class="text-zinc-500 text-sm ml-2">5.0 average</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your service business workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="rounded-2xl p-[1px] bg-gradient-to-br from-brand-400/50 to-purple-500/20">
|
|
||||||
<div class="bg-zinc-900 rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/jobber.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="file-text" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Quotes</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="calendar-check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Jobs</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="receipt" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Invoices</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Setting up Jobber + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">
|
|
||||||
Stop wrestling with APIs and authentication. Start automating your service business.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-8 items-stretch">
|
|
||||||
<!-- Problems -->
|
|
||||||
<div class="space-y-4">
|
|
||||||
<h3 class="text-lg font-semibold text-red-400 mb-6 flex items-center gap-2">
|
|
||||||
<i data-lucide="x-circle" class="w-5 h-5"></i>
|
|
||||||
The Old Way
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Quote follow-up gaps</p>
|
|
||||||
<p class="text-zinc-500">Leads go cold because nobody followed up in time. Money left on the table.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Scheduling conflicts</p>
|
|
||||||
<p class="text-zinc-500">Double-bookings, missed appointments, frustrated customers and crews.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Late invoice payments</p>
|
|
||||||
<p class="text-zinc-500">Chasing payments manually eats into your profit margins and sanity.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Solutions -->
|
|
||||||
<div class="space-y-4">
|
|
||||||
<h3 class="text-lg font-semibold text-brand-400 mb-6 flex items-center gap-2">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5"></i>
|
|
||||||
With Jobber Connect
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">AI chases every lead</p>
|
|
||||||
<p class="text-zinc-400">Automatic follow-ups at the perfect time. Never miss another opportunity.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">AI optimizes crew allocation</p>
|
|
||||||
<p class="text-zinc-400">Smart scheduling that maximizes efficiency and minimizes drive time.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Automated payment reminders</p>
|
|
||||||
<p class="text-zinc-400">Polite, persistent follow-ups that get you paid faster without the awkwardness.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/10 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Jobber API access through one simple connection. 68 tools at your fingertips.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="file-text" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Quote Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Create, send, track quotes automatically. Convert more leads to paying customers.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="calendar-check" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Job Scheduling</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Assign work, optimize routes, track progress. Keep your crews productive.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="receipt" class="w-7 h-7 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Invoicing</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Generate invoices, collect payments, send reminders. Get paid faster.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Client Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Track properties, service history, and preferences. Know your customers.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 60 more tools including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Team Management</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Route Optimization</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Payment Processing</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Expense Tracking</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Reporting</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Time Tracking</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- How It Works -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-400/10 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="terminal" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
How It Works
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Just talk to Claude
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-8 leading-relaxed">
|
|
||||||
No complex interfaces. Just describe what you need in plain English and Claude handles
|
|
||||||
the rest through your Jobber account.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-zinc-300">Natural language commands</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-zinc-300">Real-time data sync</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-zinc-300">Secure OAuth connection</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Claude + Jobber</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">You:</span> Create a quote for lawn care
|
|
||||||
at 123 Main St, $150
|
|
||||||
|
|
||||||
<span class="text-brand-400">Claude:</span> I'll create that quote now...
|
|
||||||
|
|
||||||
<span class="text-zinc-500">→ Using:</span> jobber_create_quote
|
|
||||||
<span class="text-zinc-500">→ Client:</span> 123 Main St
|
|
||||||
<span class="text-zinc-500">→ Amount:</span> $150.00
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Quote #1847 created</span>
|
|
||||||
<span class="text-green-400">✓ Email sent to client</span>
|
|
||||||
|
|
||||||
<span class="text-brand-400">Claude:</span> Done! Quote sent to the
|
|
||||||
client. Would you like me to
|
|
||||||
schedule a follow-up?</code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-400/5 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<form id="waitlist-form" class="space-y-6 relative z-10">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="btn-primary w-full py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-20 h-20 bg-brand-400/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
||||||
<i data-lucide="check" class="w-10 h-10 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
|
|
||||||
<div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-8 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle of managing infrastructure.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
|
|
||||||
<i data-lucide="github" class="w-5 h-5"></i>
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300"><code><span class="text-zinc-500">$</span> git clone github.com/jobber-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Jobber MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 68 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
<p class="text-zinc-400">Everything you need to know about Jobber Connect</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
Think of it as giving Claude hands to work with your business tools.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Jobber account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js — but we provide clear documentation.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Jobber API keys directly. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Jobber settings. Your customer data never touches our servers — it flows directly between Claude and Jobber.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Which AI assistants work with this?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). You can use it with Claude Desktop, Claude.ai, and any MCP-compatible client.
|
|
||||||
As MCP adoption grows, more AI assistants will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">How is this different from Zapier?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Zapier triggers pre-defined automations. Jobber Connect lets you have a conversation with AI that can take any action in Jobber on demand.
|
|
||||||
Ask Claude to "create a quote for the Johnson's lawn care" and it just does it — no workflow setup required.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-brand-400/5 to-transparent"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Jobber?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
|
||||||
Join 200+ service businesses already automating with Jobber Connect. Be first in line for early access.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="btn-primary w-full sm:w-auto px-10 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
|
|
||||||
Join the Waitlist
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-10 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Jobber Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Jobber Connect. Not affiliated with Jobber.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-400 to-brand-600 rounded-full font-semibold text-white transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Form submission
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sticky CTA visibility
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
keap.html
Normal file
408
keap.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Keap Connect — AI-Power Your CRM in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#2D9F2D',
|
||||||
|
600: '#2D9F2Ddd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #2D9F2D 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #2D9F2D25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #2D9F2D20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #2D9F2D">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Keap Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #2D9F2D; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #2D9F2D"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Keap</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Keap MCP server. Contacts, campaigns, and commerce. <strong class="text-white">76 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #2D9F2D; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/keap.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #2D9F2D; color: #fff">
|
||||||
|
76 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Keap data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #2D9F2D, #2D9F2D99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">KP</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Keap Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 76 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Keap Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #2D9F2D">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Keap + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Cold lead follow-up</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #2D9F2D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #2D9F2D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI nurtures automatically</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual pipeline updates</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #2D9F2D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #2D9F2D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI moves deals on signals</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Missed sales opportunities</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #2D9F2D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #2D9F2D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI alerts on hot leads</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Keap API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2D9F2D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #2D9F2D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Contact Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, tag, segment contacts automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2D9F2D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #2D9F2D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Sales Pipeline</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track deals, move stages, forecast revenue.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2D9F2D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #2D9F2D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Campaign Automation</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Trigger sequences, send emails, track engagement.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #2D9F2D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #2D9F2D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">E-commerce</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage products, orders, and subscriptions.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #2D9F2D; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Keap account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Keap API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Keap settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Keap?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Keap Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #2D9F2D; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Keap Connect. Not affiliated with Keap.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"Show me the sales pipeline. Where are my hottest leads?"},{"type":"ai","text":"Here's your pipeline snapshot:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eDeal\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eStage\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eValue\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eAcme Corp\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eProposal\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$24,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eTechVentures\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eDemo\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$18,500\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eGreenLeaf Co\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eQualified\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$31,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eSpark Digital\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eNegotiation\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$12,800\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e$86,300 pipeline · $36,800 likely to close this month\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Send a follow-up sequence to TechVentures and a contract to Spark Digital"},{"type":"ai","text":"Started 3-email nurture sequence for TechVentures (Demo follow-up). Generated and sent contract to Spark Digital for $12,800. E-signature link included.","action":"✓ Nurture sequence started · Contract sent · E-sign ready"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #2D9F2D20; border: 1px solid #2D9F2D40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#2D9F2D;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #2D9F2D, #2D9F2D99)"><span class="font-bold text-[10px]" style="color: #fff">KP</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
661
keap/index.html
661
keap/index.html
@ -1,661 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Keap Connect — AI-Power Your CRM in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#f0fdf4',
|
|
||||||
100: '#dcfce7',
|
|
||||||
200: '#bbf7d0',
|
|
||||||
300: '#86efac',
|
|
||||||
400: '#4ade80',
|
|
||||||
500: '#2D9F2D',
|
|
||||||
600: '#16a34a',
|
|
||||||
700: '#15803d',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #2D9F2D 0%, #10b981 50%, #06b6d4 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(45, 159, 45, 0.15), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 40px rgba(45, 159, 45, 0.15);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(45, 159, 45, 0.3); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(45, 159, 45, 0.5); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(45, 159, 45, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.video-gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(45, 159, 45, 0.5), rgba(6, 182, 212, 0.2));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.video-gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(45, 159, 45, 0.4), 0 0 40px 0 rgba(45, 159, 45, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(45, 159, 45, 0.6), 0 0 60px 10px rgba(45, 159, 45, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
position: relative;
|
|
||||||
background: linear-gradient(135deg, rgba(45, 159, 45, 0.1), rgba(6, 182, 212, 0.1));
|
|
||||||
}
|
|
||||||
.gradient-border::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
padding: 1px;
|
|
||||||
background: linear-gradient(135deg, #2D9F2D, #06b6d4);
|
|
||||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
||||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
||||||
-webkit-mask-composite: xor;
|
|
||||||
mask-composite: exclude;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: linear-gradient(135deg, rgba(45, 159, 45, 0.05), rgba(6, 182, 212, 0.05));
|
|
||||||
border: 1px solid rgba(45, 159, 45, 0.2);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-emerald-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-cyan-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="target" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Keap Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20 text-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
|
||||||
Connect <span class="gradient-text">Keap</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
|
|
||||||
The most comprehensive Keap MCP server. <strong class="text-white">76 tools</strong> covering
|
|
||||||
contacts, campaigns, pipeline & commerce. No setup. Just connect.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Stats -->
|
|
||||||
<div class="grid grid-cols-3 gap-4 max-w-xl mx-auto">
|
|
||||||
<div class="stat-card rounded-xl p-4 text-center">
|
|
||||||
<div class="text-2xl font-bold text-white">76</div>
|
|
||||||
<div class="text-sm text-zinc-400">API Tools</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card rounded-xl p-4 text-center">
|
|
||||||
<div class="text-2xl font-bold text-white">2 min</div>
|
|
||||||
<div class="text-sm text-zinc-400">Setup Time</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card rounded-xl p-4 text-center">
|
|
||||||
<div class="text-2xl font-bold text-white">24/7</div>
|
|
||||||
<div class="text-sm text-zinc-400">AI Automation</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch AI nurture leads, update pipelines, and automate your sales</p>
|
|
||||||
</div>
|
|
||||||
<div class="video-gradient-border">
|
|
||||||
<div class="video-gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/keap.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Contacts</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="trending-up" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Pipeline</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="mail" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Campaigns</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
|
||||||
Setting up Keap + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium">Cold leads going stale</p>
|
|
||||||
<p class="text-zinc-500">No time to follow up with everyone in your pipeline.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium">Manual pipeline updates</p>
|
|
||||||
<p class="text-zinc-500">Dragging deals around when you should be closing them.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium">Missed sales opportunities</p>
|
|
||||||
<p class="text-zinc-500">Hot leads slip through because nobody noticed the signal.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-900 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold">With Keap Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4 text-zinc-300">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="mail" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>AI nurtures leads automatically with smart sequences</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="git-branch" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>AI moves deals through stages on buying signals</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="bell" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>Instant alerts when leads are ready to buy</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="zap" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>Works with Claude, GPT, any MCP client</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<i data-lucide="store" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<p>E-commerce and subscription management included</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Keap API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="users" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Contact Management</h3>
|
|
||||||
<p class="text-zinc-400">Create, tag, segment contacts automatically. Full CRM control.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="trending-up" class="w-6 h-6 text-emerald-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Sales Pipeline</h3>
|
|
||||||
<p class="text-zinc-400">Track deals, move stages, forecast revenue with AI assistance.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="mail" class="w-6 h-6 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Campaign Automation</h3>
|
|
||||||
<p class="text-zinc-400">Trigger sequences, send emails, track engagement automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="feature-icon w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="shopping-cart" class="w-6 h-6 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">E-commerce</h3>
|
|
||||||
<p class="text-zinc-400">Manage products, orders, and subscriptions programmatically.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ 60 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tags</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Notes</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tasks</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Appointments</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Opportunities</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Invoices</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Payments</span>
|
|
||||||
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Affiliates</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl font-bold mb-4">Trusted by small businesses everywhere</h2>
|
|
||||||
<p class="text-zinc-400">Join hundreds of entrepreneurs automating their sales with AI</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center gap-6">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=21" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=22" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=23" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=24" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=25" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=26" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
|
|
||||||
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
|
|
||||||
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
|
|
||||||
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
|
|
||||||
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
|
|
||||||
<span class="ml-2 text-zinc-400">from 200+ businesses</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="Your phone number"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-zinc-900 rounded-3xl border border-zinc-800 p-8 md:p-12">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mcp/keap
|
|
||||||
<span class="text-zinc-500">$</span> cd keap && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Keap MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 76 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
For the hosted version, no. Just connect your Keap account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Keap API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Keap settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Will this work with Keap Pro and Max?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Yes! Keap Connect works with all Keap plans that have API access — Pro, Max, and Max Classic.
|
|
||||||
The same 76 tools work across all versions.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your CRM?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 200+ small businesses already automating with Keap Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="target" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Keap Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Keap Connect. Not affiliated with Keap.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
lightspeed.html
Normal file
408
lightspeed.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Lightspeed Connect — AI-Power Your Retail in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#E4002B',
|
||||||
|
600: '#E4002Bdd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #E4002B 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #E4002B25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #E4002B20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #E4002B">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Lightspeed Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #E4002B; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #E4002B"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Lightspeed</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Lightspeed MCP server. Sales, inventory, and analytics. <strong class="text-white">86 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #E4002B; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/lightspeed.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #E4002B; color: #fff">
|
||||||
|
86 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Lightspeed data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #E4002B, #E4002B99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">LS</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Lightspeed Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 86 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Lightspeed Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #E4002B">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Lightspeed + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Stockouts on bestsellers</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #E4002B30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #E4002B"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI predicts and reorders</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">No cross-location visibility</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #E4002B30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #E4002B"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Unified inventory view</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Generic customer service</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #E4002B30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #E4002B"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI personalizes every interaction</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Lightspeed API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #E4002B20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #E4002B"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Sales Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access transactions, refunds, and sales data.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #E4002B20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #E4002B"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Inventory Control</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track stock, manage vendors, automate reorders.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #E4002B20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #E4002B"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Customer Profiles</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Build loyalty programs, track purchase history.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #E4002B20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #E4002B"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Multi-Location</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage inventory and sales across all stores.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #E4002B; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Lightspeed account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Lightspeed API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Lightspeed settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Lightspeed?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Lightspeed Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #E4002B; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Lightspeed Connect. Not affiliated with Lightspeed.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"Compare sales across our 3 locations this week. Who's winning?"},{"type":"ai","text":"Here's your multi-location breakdown:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eDowntown\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$18,420\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+14%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eMall\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$24,100\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+6%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAirport\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$11,300\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#F87171;margin-top:1px;\"\u003e-3%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e📍 Downtown growing fastest · Airport needs attention\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Transfer slow-moving Airport inventory to Downtown where it's selling"},{"type":"ai","text":"Generated transfer order: 34 items from Airport to Downtown based on velocity analysis. Estimated revenue uplift: $2,400/week. Transfer manifest ready for printing.","action":"✓ Transfer order created · 34 items · Est. +$2,400/wk revenue"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #E4002B20; border: 1px solid #E4002B40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#E4002B;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #E4002B, #E4002B99)"><span class="font-bold text-[10px]" style="color: #fff">LS</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,647 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Lightspeed Connect — AI-Power Your Retail in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#fef2f2',
|
|
||||||
100: '#fee2e2',
|
|
||||||
200: '#fecaca',
|
|
||||||
300: '#fca5a5',
|
|
||||||
400: '#f87171',
|
|
||||||
500: '#E4002B',
|
|
||||||
600: '#cc0026',
|
|
||||||
700: '#b30021',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #E4002B 0%, #ff6b6b 30%, #8b5cf6 70%, #ec4899 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(228, 0, 43, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(228, 0, 43, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(228, 0, 43, 0.4);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 25px 80px rgba(228, 0, 43, 0.25), 0 10px 40px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { opacity: 0.5; }
|
|
||||||
50% { opacity: 1; }
|
|
||||||
}
|
|
||||||
.pulse-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% { background-position: -200% 0; }
|
|
||||||
100% { background-position: 200% 0; }
|
|
||||||
}
|
|
||||||
.shimmer {
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 3s infinite;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
box-shadow: 0 0 30px rgba(228, 0, 43, 0.4);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(228, 0, 43, 0.4), 0 0 40px 0 rgba(228, 0, 43, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(228, 0, 43, 0.6), 0 0 60px 10px rgba(228, 0, 43, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(228, 0, 43, 0.5), rgba(139, 92, 246, 0.5));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: #18181b;
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
.text-glow {
|
|
||||||
text-shadow: 0 0 40px rgba(228, 0, 43, 0.5);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-80 h-80 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-pink-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="shopping-bag" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl tracking-tight">Lightspeed Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-lg font-semibold transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20">
|
|
||||||
<div class="max-w-4xl mx-auto text-center">
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="relative flex h-2 w-2">
|
|
||||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-500 opacity-75"></span>
|
|
||||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500"></span>
|
|
||||||
</span>
|
|
||||||
Open Source + Hosted Cloud
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text text-glow">Lightspeed</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
|
|
||||||
The complete Lightspeed MCP server. <strong class="text-white">86 tools</strong> for sales, inventory, and analytics.
|
|
||||||
No setup headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 flex items-center justify-center gap-2">
|
|
||||||
Join the Waitlist
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2 backdrop-blur-sm">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center justify-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-zinc-800 flex items-center justify-center text-xs font-semibold shadow-lg">+99</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400 text-sm">
|
|
||||||
Trusted by <strong class="text-white">500+</strong> retail businesses
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your retail operations</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/lightspeed.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="shopping-bag" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Sales</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="package" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Inventory</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Analytics</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
||||||
<div>
|
|
||||||
<span class="inline-block px-3 py-1 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">The Problem</span>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
|
|
||||||
Setting up Lightspeed + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-start gap-4 group">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Stockouts on bestsellers</p>
|
|
||||||
<p class="text-zinc-500 mt-1">You find out something sold out when a customer complains.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 group">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">No cross-location visibility</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Your stores are islands. Inventory data is scattered.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 group">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Generic customer service</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Staff can't see purchase history. Every customer is a stranger.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8 md:p-10">
|
|
||||||
<div class="flex items-center gap-3 mb-8">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-pink-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold">With Lightspeed Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-5">
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
|
||||||
<span>AI predicts demand and auto-reorders</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
|
||||||
<span>Unified inventory across all locations</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
|
||||||
<span>AI personalizes every interaction</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
|
||||||
<span>Works with Claude, GPT, any MCP client</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
|
||||||
<span>2-click OAuth — no API key headaches</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="inline-block px-3 py-1 rounded-full bg-purple-500/10 text-purple-400 text-sm font-medium mb-4">Features</span>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Lightspeed API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="receipt" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Sales Management</h3>
|
|
||||||
<p class="text-zinc-400">Access transactions, refunds, and real-time sales data across all registers.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="package" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Inventory Control</h3>
|
|
||||||
<p class="text-zinc-400">Track stock levels, manage vendors, and automate reorders intelligently.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-pink-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Customer Profiles</h3>
|
|
||||||
<p class="text-zinc-400">Build loyalty programs and track complete purchase history.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-orange-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="building-2" class="w-7 h-7 text-orange-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Multi-Location</h3>
|
|
||||||
<p class="text-zinc-400">Manage inventory and sales across all stores from one AI.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 70 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Purchase Orders</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Vendors</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Categories</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Discounts</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Gift Cards</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Reports</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Employees</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Registers</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-500">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-500">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 text-lg mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="https://github.com" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold transition-colors group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/lightspeed-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Lightspeed MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 86 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
<p class="text-zinc-400">Everything you need to know about Lightspeed Connect</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors" open>
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Lightspeed account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Lightspeed API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Lightspeed settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your <span class="gradient-text">Lightspeed?</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 500+ retail businesses already automating with Lightspeed Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-pink-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="shopping-bag" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Lightspeed Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Terms</a>
|
|
||||||
<a href="https://github.com" class="hover:text-white transition-colors">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Lightspeed Connect. Not affiliated with Lightspeed.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-brand-600 rounded-full font-semibold transition-all"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
mailchimp.html
Normal file
408
mailchimp.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Mailchimp Connect — AI-Power Your Email Marketing in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#FFE01B',
|
||||||
|
600: '#FFE01Bdd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #FFE01B 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FFE01B25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #FFE01B20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FFE01B">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #000"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Mailchimp Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FFE01B; color: #000">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #FFE01B"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Mailchimp</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Mailchimp MCP server. Campaigns, audiences, and automations. <strong class="text-white">94 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FFE01B; color: #000">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/mailchimp.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FFE01B; color: #000">
|
||||||
|
94 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Mailchimp data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #FFE01B, #FFE01B99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #000">MC</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Mailchimp Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 94 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Mailchimp Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FFE01B">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #000"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Mailchimp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Writer's block on emails</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FFE01B30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FFE01B"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI drafts high-converting copy</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Guessing send times</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FFE01B30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FFE01B"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI optimizes for engagement</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual list hygiene</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FFE01B30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FFE01B"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Auto-clean and segment lists</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Mailchimp API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFE01B20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FFE01B"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Campaign Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, send, schedule campaigns. Full email control.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFE01B20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FFE01B"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Audience Data</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage subscribers, segments, and tags intelligently.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFE01B20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FFE01B"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Automations</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Trigger journeys, manage workflows, optimize timing.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FFE01B20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FFE01B"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Analytics</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track opens, clicks, revenue. AI-powered insights.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FFE01B; color: #000">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Mailchimp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Mailchimp API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Mailchimp settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Mailchimp?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Mailchimp Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FFE01B; color: #000">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Mailchimp Connect. Not affiliated with Mailchimp.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"How did last week's campaign perform? Compare to our averages."},{"type":"ai","text":"Here's your campaign breakdown:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eOpen Rate\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e34.2%\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+8.1%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eClick Rate\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e4.7%\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+2.3%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eRevenue\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$12,840\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+41%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e🏆 Best performing campaign this quarter\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Create a follow-up campaign for people who opened but didn't click"},{"type":"ai","text":"Created \"Re-engagement - Product Focus\" targeting 1,847 subscribers who opened without clicking. Subject line A/B test ready with send time optimized for Thursday 10am.","action":"✓ Campaign created · 1,847 recipients · A/B test ready"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #FFE01B20; border: 1px solid #FFE01B40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#FFE01B;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #FFE01B, #FFE01B99)"><span class="font-bold text-[10px]" style="color: #000">MC</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,620 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Mailchimp Connect — AI-Power Your Email Marketing in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#fefce8',
|
|
||||||
100: '#fef9c3',
|
|
||||||
200: '#fef08a',
|
|
||||||
300: '#fde047',
|
|
||||||
400: '#FFE01B',
|
|
||||||
500: '#FFE01B',
|
|
||||||
600: '#ca8a04',
|
|
||||||
700: '#a16207',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #FFE01B 0%, #fbbf24 50%, #f59e0b 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 224, 27, 0.15), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(255, 224, 27, 0.12), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(255, 224, 27, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-bounce-subtle {
|
|
||||||
animation: bounce-subtle 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes bounce-subtle {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-5px); }
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 224, 27, 0.4), 0 0 40px 0 rgba(255, 224, 27, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(255, 224, 27, 0.6), 0 0 60px 10px rgba(255, 224, 27, 0.3); }
|
|
||||||
}
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% { background-position: -200% 0; }
|
|
||||||
100% { background-position: 200% 0; }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(255, 224, 27, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1) rotate(5deg);
|
|
||||||
}
|
|
||||||
.nav-blur {
|
|
||||||
backdrop-filter: blur(20px) saturate(180%);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.gradient-border::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
padding: 1px;
|
|
||||||
background: linear-gradient(135deg, rgba(255, 224, 27, 0.5), transparent, rgba(255, 224, 27, 0.3));
|
|
||||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
||||||
-webkit-mask-composite: xor;
|
|
||||||
mask-composite: exclude;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.shimmer-text {
|
|
||||||
background: linear-gradient(90deg, #FFE01B 0%, #fff 50%, #FFE01B 100%);
|
|
||||||
background-size: 200% auto;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
animation: shimmer 3s linear infinite;
|
|
||||||
}
|
|
||||||
.monkey-bounce {
|
|
||||||
animation: bounce-subtle 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-yellow-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-amber-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/70 nav-blur">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="mail" class="w-5 h-5 text-black"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl tracking-tight">Mailchimp Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-yellow-400 text-black rounded-lg font-medium transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20">
|
|
||||||
<div class="text-center">
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">Mailchimp</span><br>to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed">
|
|
||||||
The complete Mailchimp MCP server. Campaigns, audiences, and automations. <strong class="text-white">94 tools</strong> ready to automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
|
||||||
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-yellow-400 text-black rounded-xl font-semibold text-lg text-center transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg text-center transition-all flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center gap-4 justify-center">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-zinc-400 text-sm">
|
|
||||||
Trusted by <strong class="text-white">350+</strong> marketers
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your email marketing workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="bg-zinc-900 rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/mailchimp.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="send" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Campaigns</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="users-round" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Audiences</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Analytics</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pain Points -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up Mailchimp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 text-lg max-w-2xl mx-auto">Stop wrestling with APIs. Start automating.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="flex items-center gap-4 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 mb-2 line-through">Writer's block on emails</p>
|
|
||||||
<p class="text-white font-semibold text-lg">AI drafts high-converting copy</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="flex items-center gap-4 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 mb-2 line-through">Guessing send times</p>
|
|
||||||
<p class="text-white font-semibold text-lg">AI optimizes for engagement</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="flex items-center gap-4 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 mb-2 line-through">Manual list hygiene</p>
|
|
||||||
<p class="text-white font-semibold text-lg">Auto-clean and segment lists</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="inline-block px-4 py-1.5 rounded-full bg-brand-500/10 text-brand-500 text-sm font-medium mb-4">Features</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-zinc-400 text-lg">Full Mailchimp API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-yellow-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="send" class="w-7 h-7 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Campaign Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Create, send, schedule campaigns. Full email control.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="users-round" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Audience Data</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Manage subscribers, segments, and tags intelligently.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="workflow" class="w-7 h-7 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Automations</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Trigger journeys, manage workflows, optimize timing.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-7 h-7 text-blue-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-xl mb-3">Analytics</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Track opens, clicks, revenue. AI-powered insights.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 80 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">A/B Testing</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Templates</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Landing Pages</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">E-commerce</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Reports</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Content</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-500 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 gradient-border">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-500">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-500">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="w-full py-4 bg-brand-500 hover:bg-yellow-400 text-black rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 gradient-border">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-500 hover:text-yellow-400 font-medium transition-colors">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mailchimp-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Mailchimp MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 94 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Mailchimp account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Mailchimp API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Mailchimp settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Mailchimp?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join hundreds of marketers already automating with Mailchimp Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-yellow-400 text-black rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="mail" class="w-5 h-5 text-black"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Mailchimp Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Mailchimp Connect. Not affiliated with Mailchimp.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 text-black rounded-full font-semibold transition-all transform hover:scale-110 shadow-lg"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
pipedrive.html
Normal file
408
pipedrive.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Pipedrive Connect — AI-Power Your Pipeline in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#017737',
|
||||||
|
600: '#017737dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #017737 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #01773725, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #01773720; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #017737">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Pipedrive Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #017737; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #017737"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Pipedrive</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Pipedrive MCP server. Deals, contacts, and activities. <strong class="text-white">76 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #017737; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/pipedrive.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #017737; color: #fff">
|
||||||
|
76 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Pipedrive data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #017737, #01773799)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">PD</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Pipedrive Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 76 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Pipedrive Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #017737">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Pipedrive + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Stale deals in pipeline</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #01773730">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #017737"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI nudges on inactivity</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Missed follow-up tasks</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #01773730">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #017737"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Automated activity reminders</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Inaccurate forecasts</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #01773730">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #017737"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI-powered predictions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Pipedrive API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #01773720">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #017737"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Deal Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, move, track deals through your pipeline.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #01773720">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #017737"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Contact Sync</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage people, organizations, and relationships.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #01773720">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #017737"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Activity Tracking</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Log calls, meetings, tasks — stay organized.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #01773720">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #017737"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Insights</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Win rates, velocity, forecast accuracy.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #017737; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Pipedrive account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Pipedrive API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Pipedrive settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Pipedrive?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Pipedrive Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #017737; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Pipedrive Connect. Not affiliated with Pipedrive.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"What does our pipeline look like? Any deals stuck in a stage too long?"},{"type":"ai","text":"Here's your deal pipeline:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eDeal\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eStage\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eValue\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eHorizon Tech\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eProposal\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$38,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eBluePeak\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eNegotiation\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$22,400\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eVertex Group\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eDemo\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$56,000\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#E5E7EB;font-weight:600;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis;\"\u003eCatalyst AI\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eWon\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;color:#F3F4F6;font-weight:600;\"\u003e$18,200\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e$134,600 total · Horizon stuck 18 days in Proposal\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Nudge Horizon with a value-add case study and mark Catalyst as closed-won"},{"type":"ai","text":"Sent Horizon the enterprise case study with ROI breakdown. Catalyst marked won — revenue recorded at $18,200. Win notification sent to team Slack.","action":"✓ Case study sent · Deal won ($18,200) · Team notified"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #01773720; border: 1px solid #01773740;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#017737;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #017737, #01773799)"><span class="font-bold text-[10px]" style="color: #fff">PD</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,637 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Pipedrive Connect — AI-Power Your Pipeline in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#f0fdf4',
|
|
||||||
100: '#dcfce7',
|
|
||||||
200: '#bbf7d0',
|
|
||||||
300: '#86efac',
|
|
||||||
400: '#4ade80',
|
|
||||||
500: '#017737',
|
|
||||||
600: '#015f2d',
|
|
||||||
700: '#014724',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #017737 0%, #4ade80 50%, #22d3ee 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(1, 119, 55, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(1, 119, 55, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(1, 119, 55, 0.4);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-pulse-glow {
|
|
||||||
animation: pulseGlow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulseGlow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(1, 119, 55, 0.3); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(1, 119, 55, 0.5); }
|
|
||||||
}
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% { background-position: -200% 0; }
|
|
||||||
100% { background-position: 200% 0; }
|
|
||||||
}
|
|
||||||
.shimmer {
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 3s infinite;
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(1, 119, 55, 0.4), 0 0 40px 0 rgba(1, 119, 55, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(1, 119, 55, 0.6), 0 0 60px 10px rgba(1, 119, 55, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(1, 119, 55, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(1, 119, 55, 0.5), rgba(74, 222, 128, 0.2));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center">
|
|
||||||
<i data-lucide="git-branch" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Pipedrive Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition transform hover:scale-105">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
|
|
||||||
<!-- Floating background elements -->
|
|
||||||
<div class="absolute top-40 left-10 w-72 h-72 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20">
|
|
||||||
<div class="text-center relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">Pipedrive</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10">
|
|
||||||
The complete Pipedrive MCP server. <strong class="text-white">76 tools</strong> for deals, contacts, and activities.
|
|
||||||
No setup. No OAuth headaches. Just connect and sell.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
|
||||||
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center gap-4 justify-center">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold">+99</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">300+</strong> sales teams
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your sales pipeline</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/pipedrive.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="target" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Deals</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Contacts</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="activity" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Activities</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up Pipedrive + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<!-- Pain Point 1 -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
|
||||||
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Stale deals in pipeline</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Deals sit untouched. You forget to follow up. Revenue slips away.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI nudges on inactivity</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 2 -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
|
||||||
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Missed follow-up tasks</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Tasks pile up. You're always playing catch-up with your CRM.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">Automated activity reminders</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 3 -->
|
|
||||||
<div class="relative group">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
|
||||||
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
|
||||||
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Inaccurate forecasts</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Pipeline value means nothing when you can't trust the numbers.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI-powered predictions</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Pipedrive API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="target" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Deal Management</h3>
|
|
||||||
<p class="text-zinc-400">Create, move, track deals through your pipeline automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Contact Sync</h3>
|
|
||||||
<p class="text-zinc-400">Manage people, organizations, and relationships effortlessly.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-yellow-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="activity" class="w-7 h-7 text-orange-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Activity Tracking</h3>
|
|
||||||
<p class="text-zinc-400">Log calls, meetings, tasks — stay organized automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-5 feature-icon">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-7 h-7 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Insights</h3>
|
|
||||||
<p class="text-zinc-400">Win rates, velocity, forecast accuracy — all AI-analyzed.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ 70 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Products</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Notes</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Files</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Goals</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Filters</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Stages</span>
|
|
||||||
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Email Sync</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/10 to-emerald-500/10 rounded-3xl blur-xl"></div>
|
|
||||||
<div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="Your phone number"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message (hidden by default) -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const submitBtn = document.getElementById('submit-btn');
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/pipedrive-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Pipedrive MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 76 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Pipedrive account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Pipedrive API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Pipedrive settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Pipedrive?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 300+ sales teams already automating with Pipedrive Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center">
|
|
||||||
<i data-lucide="git-branch" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Pipedrive Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Pipedrive Connect. Not affiliated with Pipedrive.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-emerald-500 rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
rippling.html
Normal file
408
rippling.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Rippling Connect — AI-Power Your Workforce in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#FEC400',
|
||||||
|
600: '#FEC400dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #FEC400 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FEC40025, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #FEC40020; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FEC400">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #000"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Rippling Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FEC400; color: #000">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #FEC400"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Rippling</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Rippling MCP server. HR, IT, and Finance unified. <strong class="text-white">89 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FEC400; color: #000">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/rippling.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FEC400; color: #000">
|
||||||
|
89 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Rippling data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #FEC400, #FEC40099)">
|
||||||
|
<span class="font-bold text-xs" style="color: #000">RP</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Rippling Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 89 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Rippling Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FEC400">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #000"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Rippling + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Onboarding takes days</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FEC40030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FEC400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI sets up in minutes</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Offboarding security gaps</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FEC40030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FEC400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Instant access revocation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual app provisioning</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FEC40030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FEC400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Role-based auto-setup</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Rippling API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FEC40020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FEC400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Employee Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Onboard, offboard, manage the full lifecycle.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FEC40020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FEC400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Device Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Provision laptops, manage software, track assets.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FEC40020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FEC400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Payroll & Benefits</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Run payroll, manage benefits, handle compliance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FEC40020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FEC400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">App Provisioning</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Auto-provision SaaS access based on role.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FEC400; color: #000">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Rippling account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Rippling API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Rippling settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Rippling?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Rippling Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FEC400; color: #000">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Rippling Connect. Not affiliated with Rippling.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"We're offboarding Tom from engineering. What needs to happen?"},{"type":"ai","text":"Here's Tom's access footprint:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eSaaS Apps\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003e14 apps: Slack, GitHub, AWS, Jira...\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eActive\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eRevoke\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eDevices\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eMacBook Pro M3 + Monitor\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eReturn\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eShip label\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003ePayroll\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eFinal paycheck + PTO payout: $4,820\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eCalc'd\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003eReady\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e14 app licenses · 2 devices · Last day: Friday\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Revoke all access at 5pm Friday and process the final paycheck"},{"type":"ai","text":"Scheduled access revocation for all 14 apps at 5:00 PM Friday. Return shipping label generated for devices. Final paycheck of $4,820 queued for next pay cycle.","action":"✓ 14 apps scheduled for revocation · Shipping label sent · Payroll queued"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #FEC40020; border: 1px solid #FEC40040;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#FEC400;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #FEC400, #FEC40099)"><span class="font-bold text-[10px]" style="color: #000">RP</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,763 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Rippling Connect — AI-Power Your Workforce in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#fefce8',
|
|
||||||
100: '#fef9c3',
|
|
||||||
200: '#fef08a',
|
|
||||||
300: '#fde047',
|
|
||||||
400: '#FEC400',
|
|
||||||
500: '#FEC400',
|
|
||||||
600: '#d4a500',
|
|
||||||
700: '#a16207',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #FEC400 0%, #fbbf24 50%, #f59e0b 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(254, 196, 0, 0.15), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(254, 196, 0, 0.12), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(254, 196, 0, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite 2s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite 1s;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(254, 196, 0, 0.15), 0 25px 80px -20px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.btn-glow {
|
|
||||||
box-shadow: 0 0 30px rgba(254, 196, 0, 0.3);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.btn-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(254, 196, 0, 0.5);
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(254, 196, 0, 0.15), rgba(251, 191, 36, 0.08));
|
|
||||||
border: 1px solid rgba(254, 196, 0, 0.2);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(254, 196, 0, 0.4), 0 0 40px 0 rgba(254, 196, 0, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(254, 196, 0, 0.5), 0 0 60px 10px rgba(254, 196, 0, 0.25); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1) rotate(5deg);
|
|
||||||
}
|
|
||||||
.pillar-card {
|
|
||||||
background: linear-gradient(180deg, rgba(254, 196, 0, 0.08) 0%, transparent 100%);
|
|
||||||
}
|
|
||||||
.pillar-card:hover {
|
|
||||||
background: linear-gradient(180deg, rgba(254, 196, 0, 0.12) 0%, transparent 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Ambient Background Elements -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 -right-32 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="layers" class="w-5 h-5 text-zinc-900"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Rippling Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 text-zinc-900">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20">
|
|
||||||
<div class="max-w-3xl mx-auto text-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
<span>Open Source + Hosted</span>
|
|
||||||
<span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 rounded-full text-xs font-medium ml-1">NEW</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">Rippling</span><br>to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
|
|
||||||
The complete Rippling MCP server. <strong class="text-white">89 tools</strong> for HR, IT, and Finance — unified.
|
|
||||||
No OAuth headaches. Just connect and automate your workforce management.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
|
||||||
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-center text-zinc-900">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
|
|
||||||
<i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center gap-4 justify-center">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold shadow-lg text-zinc-900">
|
|
||||||
+65
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-left">
|
|
||||||
<div class="flex items-center gap-1 text-brand-400 text-sm">
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">280+</strong> growing companies</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your workforce management</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/rippling.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">HR</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="laptop" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">IT</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="wallet" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Finance</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Three Pillars -->
|
|
||||||
<section class="py-16 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<p class="text-brand-400 font-medium mb-2">One Platform. Three Pillars.</p>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold">HR + IT + Finance, Unified</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-6">
|
|
||||||
<div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
|
|
||||||
<div class="w-16 h-16 rounded-2xl bg-purple-500/20 flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="users" class="w-8 h-8 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">HR</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">Onboarding, offboarding, PTO, performance — all automated with AI.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
|
|
||||||
<div class="w-16 h-16 rounded-2xl bg-blue-500/20 flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="laptop" class="w-8 h-8 text-blue-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">IT</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">Device provisioning, app access, security policies — zero-touch setup.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
|
|
||||||
<div class="w-16 h-16 rounded-2xl bg-green-500/20 flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="wallet" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Finance</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">Payroll, benefits, expenses, compliance — handled automatically.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pain Points / Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up Rippling + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="clock" class="w-7 h-7 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Onboarding takes days</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">New hire starts Monday. Laptop arrives Thursday. Apps access by next week.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI sets up in minutes</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="shield-alert" class="w-7 h-7 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Offboarding security gaps</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Employee leaves. Still has Slack access. GitHub? Who knows.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">Instant access revocation</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="settings" class="w-7 h-7 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Manual app provisioning</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">IT tickets for every new app. Each role needs different access. It's endless.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">Role-based auto-setup</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Rippling API access through one simple connection. 89 tools at your AI's fingertips.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="user-plus" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Employee Management</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Onboard, offboard, manage the full employee lifecycle with AI.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="monitor" class="w-7 h-7 text-blue-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Device Management</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Provision laptops, manage software, track assets automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="banknote" class="w-7 h-7 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Payroll & Benefits</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Run payroll, manage benefits, handle compliance seamlessly.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-amber-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="key" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">App Provisioning</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Auto-provision SaaS access based on role and department.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 70 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Time & Attendance</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Org Chart</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Compensation</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Custom Fields</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Documents</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Groups</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Workflows</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Webhooks</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Automation Examples -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">AI-Powered Workflows</h2>
|
|
||||||
<p class="text-zinc-400 text-lg">Real automations you can build in minutes</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-6">
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="user-check" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Zero-Touch Onboarding</h3>
|
|
||||||
<p class="text-zinc-400 text-sm mb-3">"When new hire added → order laptop, provision apps, send welcome email, schedule orientation"</p>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">HR</span>
|
|
||||||
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">IT</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-red-500/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="user-minus" class="w-6 h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Secure Offboarding</h3>
|
|
||||||
<p class="text-zinc-400 text-sm mb-3">"When employee terminated → revoke all apps, wipe device, transfer files, update payroll"</p>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Security</span>
|
|
||||||
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Compliance</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="arrow-up-circle" class="w-6 h-6 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Role Change Automation</h3>
|
|
||||||
<p class="text-zinc-400 text-sm mb-3">"When promoted to manager → add to Slack channels, grant HR access, update comp band"</p>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">HR</span>
|
|
||||||
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Finance</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="calendar-check" class="w-6 h-6 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">PTO Intelligence</h3>
|
|
||||||
<p class="text-zinc-400 text-sm mb-3">"When PTO requested → check team coverage, auto-approve if ok, notify manager if conflict"</p>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Scheduling</span>
|
|
||||||
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">AI</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25 text-zinc-900"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle of OAuth and token management.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/rippling-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Rippling MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 89 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
<p class="text-zinc-400">Everything you need to know about Rippling Connect</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Rippling account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my employee data secure?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Absolutely. We use OAuth 2.0 and never store your Rippling API keys. All tokens are encrypted at rest and in transit.
|
|
||||||
We're SOC 2 compliant and you can revoke access anytime from your Rippling admin console.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Which Rippling modules are supported?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Rippling Connect supports all core modules — HR Cloud, IT Cloud, and Finance Cloud.
|
|
||||||
The available API endpoints depend on which modules you have enabled in your Rippling subscription.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Final CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Rippling?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
|
||||||
Join 280+ growing companies already automating with Rippling Connect. Be first in line when we launch.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-zinc-900">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
|
|
||||||
<i data-lucide="calendar" class="w-5 h-5"></i>
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="layers" class="w-5 h-5 text-zinc-900"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Rippling Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
|
||||||
<i data-lucide="twitter" class="w-4 h-4"></i>
|
|
||||||
Twitter
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Rippling Connect. Not affiliated with Rippling.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all shadow-xl text-zinc-900"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
servicetitan.html
Normal file
408
servicetitan.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>ServiceTitan Connect — AI-Power Your Field Service in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#FF6B00',
|
||||||
|
600: '#FF6B00dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #FF6B00 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FF6B0025, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #FF6B0020; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF6B00">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">ServiceTitan Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FF6B00; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #FF6B00"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">ServiceTitan</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete ServiceTitan MCP server. Jobs, dispatch, and invoicing. <strong class="text-white">124 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FF6B00; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/servicetitan.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FF6B00; color: #fff">
|
||||||
|
124 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your ServiceTitan data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #FF6B00, #FF6B0099)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">ST</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">ServiceTitan Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 124 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask ServiceTitan Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF6B00">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up ServiceTitan + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Dispatch phone chaos</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF6B0030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FF6B00"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI optimizes routes instantly</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Missed upsell opportunities</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF6B0030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FF6B00"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI suggests relevant services</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Paper-based job tracking</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF6B0030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FF6B00"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Real-time digital updates</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full ServiceTitan API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF6B0020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6B00"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Job Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, schedule, track jobs end-to-end.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF6B0020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6B00"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Dispatch</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Optimize routes, assign techs, manage capacity.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF6B0020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6B00"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Estimates & Invoices</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Generate quotes, convert to invoices, collect payments.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF6B0020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF6B00"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Customer Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track equipment, history, and service agreements.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FF6B00; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your ServiceTitan account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your ServiceTitan API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your ServiceTitan settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your ServiceTitan?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with ServiceTitan Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FF6B00; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 ServiceTitan Connect. Not affiliated with ServiceTitan.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"How's the dispatch board looking for tomorrow? Any gaps or overloads?"},{"type":"ai","text":"Here's tomorrow's dispatch overview:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eMike T.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003e6 jobs · HVAC installs\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eOver\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e10h scheduled\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eSarah K.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003e4 jobs · Maintenance\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eGood\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e7h scheduled\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003eDave R.\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003e2 jobs · Plumbing\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eLight\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e4h scheduled\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e12 jobs total · 1 tech overloaded · $14,200 est. revenue\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Move Mike's afternoon install to Dave and optimize all routes"},{"type":"ai","text":"Reassigned the 2pm install to Dave (now 3 jobs, 6.5h). Routes optimized for all techs — saving 47 minutes total drive time. Customers notified of updated ETAs.","action":"✓ Job reassigned · Routes optimized · 47 min saved · Customers notified"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #FF6B0020; border: 1px solid #FF6B0040;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#FF6B00;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #FF6B00, #FF6B0099)"><span class="font-bold text-[10px]" style="color: #fff">ST</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,708 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>ServiceTitan Connect — AI-Power Your Field Service in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#fff7ed',
|
|
||||||
100: '#ffedd5',
|
|
||||||
200: '#fed7aa',
|
|
||||||
300: '#fdba74',
|
|
||||||
400: '#fb923c',
|
|
||||||
500: '#FF6B00',
|
|
||||||
600: '#ea580c',
|
|
||||||
700: '#c2410c',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #FF6B00 0%, #f97316 50%, #fbbf24 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 107, 0, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(255, 107, 0, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(255, 107, 0, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite 2s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite 1s;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(255, 107, 0, 0.2), 0 25px 80px -20px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.btn-glow {
|
|
||||||
box-shadow: 0 0 30px rgba(255, 107, 0, 0.4);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.btn-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(255, 107, 0, 0.6);
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(249, 115, 22, 0.1));
|
|
||||||
border: 1px solid rgba(255, 107, 0, 0.2);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 107, 0, 0.4), 0 0 40px 0 rgba(255, 107, 0, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(255, 107, 0, 0.6), 0 0 60px 10px rgba(255, 107, 0, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1) rotate(5deg);
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), transparent);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Ambient Background Elements -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 -right-32 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">ServiceTitan Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20">
|
|
||||||
<div class="max-w-3xl mx-auto text-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
<span>Open Source + Hosted</span>
|
|
||||||
<span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 rounded-full text-xs font-medium ml-1">NEW</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">ServiceTitan</span><br>to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
|
|
||||||
The complete ServiceTitan MCP server. <strong class="text-white">124 tools</strong> for jobs, dispatch, and invoicing.
|
|
||||||
No OAuth headaches. Just connect and automate your field operations.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
|
||||||
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-center">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
|
|
||||||
<i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center gap-4 justify-center">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold shadow-lg">
|
|
||||||
+80
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-left">
|
|
||||||
<div class="flex items-center gap-1 text-amber-400 text-sm">
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">350+</strong> field service companies</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your field service operations</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/servicetitan.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="briefcase" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Jobs</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="truck" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Dispatch</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="file-text" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Invoicing</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Stats Banner -->
|
|
||||||
<section class="py-12 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
|
|
||||||
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">124</div>
|
|
||||||
<div class="text-zinc-400 text-sm">API Tools</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
|
|
||||||
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">2 min</div>
|
|
||||||
<div class="text-zinc-400 text-sm">Setup Time</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
|
|
||||||
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">350+</div>
|
|
||||||
<div class="text-zinc-400 text-sm">Companies</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
|
|
||||||
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">99.9%</div>
|
|
||||||
<div class="text-zinc-400 text-sm">Uptime</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pain Points / Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up ServiceTitan + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="phone-call" class="w-7 h-7 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Dispatch phone chaos</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Constant calls, manual scheduling, techs waiting. Inefficiency everywhere.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI optimizes routes instantly</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="dollar-sign" class="w-7 h-7 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Missed upsell opportunities</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Techs on-site don't know customer history. Revenue left on the table.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI suggests relevant services</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
|
||||||
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="clipboard" class="w-7 h-7 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Paper-based job tracking</h3>
|
|
||||||
<p class="text-zinc-500 mb-6">Lost work orders, illegible notes, no real-time visibility.</p>
|
|
||||||
<div class="pt-6 border-t border-zinc-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">Real-time digital updates</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full ServiceTitan API access through one simple connection. 124 tools at your AI's fingertips.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-amber-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="briefcase" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Job Management</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Create, schedule, and track jobs end-to-end with AI assistance.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="truck" class="w-7 h-7 text-blue-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Dispatch</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Optimize routes, assign techs, manage capacity automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="file-text" class="w-7 h-7 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Estimates & Invoices</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Generate quotes, convert to invoices, collect payments fast.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Customer Management</h3>
|
|
||||||
<p class="text-zinc-400 text-sm leading-relaxed">Track equipment, history, and service agreements in one place.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 100 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Technicians</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Inventory</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Memberships</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Marketing</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Reporting</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Pricebook</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Tags</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Webhooks</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Use Cases -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Built for Field Service</h2>
|
|
||||||
<p class="text-zinc-400 text-lg">Whether you're HVAC, plumbing, or electrical — we've got you covered</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-cyan-500/5 border border-blue-500/20">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="thermometer-snowflake" class="w-6 h-6 text-blue-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">HVAC</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">Seasonal demand, maintenance agreements, equipment tracking — all automated.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-teal-500/5 border border-cyan-500/20">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="droplets" class="w-6 h-6 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Plumbing</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">Emergency dispatch, flat-rate pricing, drain camera integrations.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-amber-500/10 to-yellow-500/5 border border-amber-500/20">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center mb-4">
|
|
||||||
<i data-lucide="zap" class="w-6 h-6 text-amber-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Electrical</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">Permit tracking, safety compliance, panel upgrade workflows.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle of OAuth and token management.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/st-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ ServiceTitan MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 124 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
<p class="text-zinc-400">Everything you need to know about ServiceTitan Connect</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your ServiceTitan account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your ServiceTitan API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your ServiceTitan settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Does this work with Pro and Titan plans?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes! ServiceTitan Connect works with all ServiceTitan plans that have API access enabled.
|
|
||||||
The available endpoints may vary based on your plan's features.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Final CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your ServiceTitan?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
|
||||||
Join 350+ field service companies already automating with ServiceTitan Connect. Be first in line when we launch.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
|
|
||||||
<i data-lucide="calendar" class="w-5 h-5"></i>
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">ServiceTitan Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
|
||||||
<i data-lucide="twitter" class="w-4 h-4"></i>
|
|
||||||
Twitter
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 ServiceTitan Connect. Not affiliated with ServiceTitan, Inc.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all shadow-xl"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
squarespace.html
Normal file
408
squarespace.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Squarespace Connect — AI-Power Your Website in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#000000',
|
||||||
|
600: '#000000dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #000000 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #00000025, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #00000020; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #000000">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Squarespace Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #000000; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #000000"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Squarespace</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Squarespace MCP server. Pages, products, and analytics. <strong class="text-white">67 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #000000; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/squarespace.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #000000; color: #fff">
|
||||||
|
67 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Squarespace data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #000000, #00000099)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">SQ</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Squarespace Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 67 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Squarespace Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #000000">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Squarespace + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual content updates</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI keeps your site fresh</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Inventory headaches</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Auto-sync stock levels</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Missed form leads</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #00000030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #000000"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Instant AI follow-up on submissions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Squarespace API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Content Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Update pages, blogs, and galleries programmatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Commerce</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage products, inventory, orders, and fulfillment.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Form Submissions</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access and process contact form data automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #00000020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #000000"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Analytics</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Pull traffic, sales, and engagement metrics.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #000000; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Squarespace account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Squarespace API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Squarespace settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Squarespace?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Squarespace Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #000000; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Squarespace Connect. Not affiliated with Squarespace.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"How's the store performing? What are our top products this week?"},{"type":"ai","text":"Here's your store dashboard:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eRevenue\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$8,420\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+12%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eOrders\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e127\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+8%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAvg Order\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$66.30\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+3.5%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e🔥 Top seller: \"Minimalist Desk Lamp\" — 43 units this week\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"The desk lamp is almost out of stock. Mark it limited edition and update the homepage banner"},{"type":"ai","text":"Updated \"Minimalist Desk Lamp\" with \"Limited Edition - Only 12 Left\" badge. Homepage banner now features it with urgency messaging. SEO meta updated too.","action":"✓ Product badge added · Homepage updated · SEO refreshed"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #00000020; border: 1px solid #00000040;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#000000;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #000000, #00000099)"><span class="font-bold text-[10px]" style="color: #fff">SQ</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,652 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Squarespace Connect — AI-Power Your Website in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#fafafa',
|
|
||||||
100: '#f5f5f5',
|
|
||||||
200: '#e5e5e5',
|
|
||||||
300: '#d4d4d4',
|
|
||||||
400: '#a3a3a3',
|
|
||||||
500: '#171717',
|
|
||||||
600: '#0a0a0a',
|
|
||||||
700: '#000000',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #ffffff 0%, #a3a3a3 50%, #ffffff 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 255, 255, 0.08), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.15); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.25); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% { background-position: -200% 0; }
|
|
||||||
100% { background-position: 200% 0; }
|
|
||||||
}
|
|
||||||
.shimmer-border {
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 3s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.2), 0 0 40px 0 rgba(255, 255, 255, 0.1); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(255, 255, 255, 0.3), 0 0 60px 10px rgba(255, 255, 255, 0.15); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.orb {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(100px);
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
.sq-gradient {
|
|
||||||
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Orbs Background -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="orb w-96 h-96 bg-zinc-400/20 top-1/4 -left-48 animate-float"></div>
|
|
||||||
<div class="orb w-64 h-64 bg-zinc-300/10 top-1/2 -right-32 animate-float-delayed"></div>
|
|
||||||
<div class="orb w-72 h-72 bg-zinc-500/10 bottom-1/4 left-1/3 animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center shadow-lg shadow-white/10">
|
|
||||||
<i data-lucide="layout" class="w-5 h-5 text-black"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Squarespace Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-white text-black hover:bg-zinc-200 rounded-xl font-medium transition shadow-lg shadow-white/10">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-white animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
|
|
||||||
Connect <span class="gradient-text">Squarespace</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10 leading-relaxed">
|
|
||||||
The complete Squarespace MCP server. <strong class="text-white">67 tools</strong> for pages, products, and analytics.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-white/20">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
|
|
||||||
<i data-lucide="play-circle" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col items-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">400+</strong> website owners & creators
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI manages your Squarespace site</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/squarespace.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="file-text" class="w-4 h-4 text-white"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Pages</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="shopping-bag" class="w-4 h-4 text-white"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Products</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-4 h-4 text-white"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Analytics</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-8 leading-tight">
|
|
||||||
Setting up Squarespace + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Manual content updates</p>
|
|
||||||
<p class="text-zinc-500">Updating pages, products, and blogs takes forever.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Inventory headaches</p>
|
|
||||||
<p class="text-zinc-500">Stock levels out of sync, overselling nightmares.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Missed form leads</p>
|
|
||||||
<p class="text-zinc-500">Contact submissions sit unread for days.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="sq-gradient rounded-3xl border border-zinc-700/50 p-8 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-3 mb-8">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-lg">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-black"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold">With Squarespace Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-5 text-lg">
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-white"></i>
|
|
||||||
</div>
|
|
||||||
AI keeps your site fresh automatically
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-white"></i>
|
|
||||||
</div>
|
|
||||||
Auto-sync stock levels across channels
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-white"></i>
|
|
||||||
</div>
|
|
||||||
Instant AI follow-up on form submissions
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-white"></i>
|
|
||||||
</div>
|
|
||||||
Works with Claude, GPT, any MCP client
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-zinc-300">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-white"></i>
|
|
||||||
</div>
|
|
||||||
Connect in 2 clicks via OAuth
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Squarespace API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
|
|
||||||
<i data-lucide="file-text" class="w-7 h-7 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Content Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Update pages, blogs, and galleries programmatically. Keep content fresh with AI.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
|
|
||||||
<i data-lucide="shopping-bag" class="w-7 h-7 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Commerce</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Manage products, inventory, orders, and fulfillment. Complete e-commerce control.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
|
|
||||||
<i data-lucide="inbox" class="w-7 h-7 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Form Submissions</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Access and process contact form data automatically. Never miss a lead again.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mb-5 border border-white/10">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-7 h-7 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Analytics</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Pull traffic, sales, and engagement metrics. AI-powered insights on demand.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-16 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">Full API coverage including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Pages</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Products</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Orders</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Inventory</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Blogs</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Forms</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Members</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Profiles</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 text-white text-sm font-medium mb-6 border border-white/20">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sq-gradient rounded-3xl border border-zinc-700/50 p-8 shadow-2xl">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-white">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/10 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-white">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="+1 (555) 000-0000"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/10 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/10 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-white/10"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Success Message (hidden by default) -->
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const submitBtn = document.getElementById('submit-btn');
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="sq-gradient rounded-3xl border border-zinc-700/50 p-8 md:p-12 shadow-2xl">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6 border border-zinc-700">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6 text-lg leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-white hover:text-zinc-300 font-medium text-lg group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800 shadow-xl">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 leading-relaxed"><code><span class="text-zinc-500">$</span> git clone github.com/squarespace-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-white">✓ Squarespace MCP Server running</span>
|
|
||||||
<span class="text-white">✓ 67 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Squarespace account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Squarespace API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Squarespace settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Squarespace?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 400+ website owners already automating with Squarespace Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition shadow-xl shadow-white/20">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 rounded-xl font-semibold text-lg transition border border-zinc-700">
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center">
|
|
||||||
<i data-lucide="layout" class="w-5 h-5 text-black"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Squarespace Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Squarespace Connect. Not affiliated with Squarespace.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-white text-black rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
toast.html
Normal file
408
toast.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Toast Connect — AI-Power Your Restaurant in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#FF4C00',
|
||||||
|
600: '#FF4C00dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #FF4C00 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #FF4C0025, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #FF4C0020; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF4C00">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Toast Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #FF4C00; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #FF4C00"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Toast</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Toast MCP server. Orders, menu, and operations. <strong class="text-white">94 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #FF4C00; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/toast.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #FF4C00; color: #fff">
|
||||||
|
94 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Toast data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #FF4C00, #FF4C0099)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">TT</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Toast Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 94 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Toast Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #FF4C00">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Toast + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">86'd item confusion</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF4C0030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FF4C00"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI updates menu instantly</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Labor cost overruns</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF4C0030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FF4C00"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI optimizes scheduling</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">No sales insights</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #FF4C0030">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #FF4C00"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI identifies profit drivers</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Toast API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF4C0020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF4C00"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Order Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access tickets, modifiers, and order flow.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF4C0020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF4C00"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Menu Control</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Update items, prices, availability in real-time.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF4C0020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF4C00"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Labor Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track shifts, manage schedules, monitor labor cost.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #FF4C0020">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #FF4C00"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Sales mix, peak hours, server performance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #FF4C00; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Toast account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Toast API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Toast settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Toast?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Toast Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #FF4C00; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Toast Connect. Not affiliated with Toast.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"How's service going tonight? Table status and any kitchen bottlenecks?"},{"type":"ai","text":"Here's your floor status:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eSeated\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e18/24\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e75% full\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAvg Turn\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e48 min\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#F87171;margin-top:1px;\"\u003e-4 min\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eKitchen Q\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e12 items\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-top:1px;\"\u003e~18 min\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ Table 7: waiting 22min for entrees · 4 tables on dessert\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Flag Table 7 as priority in kitchen and prep the 4 dessert tables for turnover"},{"type":"ai","text":"Table 7 bumped to priority — kitchen ETA now 8 min. Dessert tables 3, 9, 14, 21 flagged for check drop. Waitlist notified: 4 parties ready to seat.","action":"✓ Kitchen priority set · 4 tables prepped for turn · Waitlist alerted"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #FF4C0020; border: 1px solid #FF4C0040;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#FF4C00;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #FF4C00, #FF4C0099)"><span class="font-bold text-[10px]" style="color: #fff">TT</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
648
toast/index.html
648
toast/index.html
@ -1,648 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Toast Connect — AI-Power Your Restaurant in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#fff7ed',
|
|
||||||
100: '#ffedd5',
|
|
||||||
200: '#fed7aa',
|
|
||||||
300: '#fdba74',
|
|
||||||
400: '#fb923c',
|
|
||||||
500: '#FF4C00',
|
|
||||||
600: '#e64500',
|
|
||||||
700: '#c73d00',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #FF4C00 0%, #ff8c42 30%, #f97316 60%, #fbbf24 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 76, 0, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(255, 76, 0, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(255, 76, 0, 0.4);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 25px 80px rgba(255, 76, 0, 0.25), 0 10px 40px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { opacity: 0.5; }
|
|
||||||
50% { opacity: 1; }
|
|
||||||
}
|
|
||||||
.pulse-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
box-shadow: 0 0 30px rgba(255, 76, 0, 0.4);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 76, 0, 0.4), 0 0 40px 0 rgba(255, 76, 0, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(255, 76, 0, 0.6), 0 0 60px 10px rgba(255, 76, 0, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(255, 76, 0, 0.5), rgba(251, 191, 36, 0.5));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: #18181b;
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
.text-glow {
|
|
||||||
text-shadow: 0 0 40px rgba(255, 76, 0, 0.5);
|
|
||||||
}
|
|
||||||
@keyframes sizzle {
|
|
||||||
0%, 100% { transform: scale(1); }
|
|
||||||
50% { transform: scale(1.05); }
|
|
||||||
}
|
|
||||||
.sizzle:hover {
|
|
||||||
animation: sizzle 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
.fire-gradient {
|
|
||||||
background: linear-gradient(180deg, rgba(255, 76, 0, 0.1) 0%, transparent 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-80 h-80 bg-red-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl tracking-tight">Toast Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-lg font-semibold transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20">
|
|
||||||
<div class="max-w-4xl mx-auto text-center">
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="relative flex h-2 w-2">
|
|
||||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-500 opacity-75"></span>
|
|
||||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500"></span>
|
|
||||||
</span>
|
|
||||||
Open Source + Hosted Cloud
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text text-glow">Toast</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
|
|
||||||
The complete Toast MCP server. <strong class="text-white">94 tools</strong> for orders, menus, and operations.
|
|
||||||
No tech headaches. Just connect and serve.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 flex items-center justify-center gap-2 sizzle">
|
|
||||||
Join the Waitlist
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2 backdrop-blur-sm">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex items-center justify-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=41" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=42" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=43" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=44" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400 text-sm">
|
|
||||||
Trusted by <strong class="text-white">500+</strong> restaurants
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your restaurant operations</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/toast.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="clipboard-list" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Orders</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Menus</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Reports</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
||||||
<div>
|
|
||||||
<span class="inline-block px-3 py-1 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">The Problem</span>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
|
|
||||||
Running a restaurant + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't be this hard</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-start gap-4 group">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">86'd item confusion</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Servers keep selling items you ran out of 20 minutes ago.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 group">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Labor cost overruns</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Overstaffed on slow nights, understaffed during rush.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 group">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">No actionable sales insights</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Data exists but nobody has time to analyze it.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8 md:p-10">
|
|
||||||
<div class="flex items-center gap-3 mb-8">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold">With Toast Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-5">
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
|
||||||
<span>AI updates menu instantly when items run out</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
|
||||||
<span>Smart scheduling based on predicted demand</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
|
||||||
<span>AI identifies your profit drivers daily</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
|
||||||
<span>Works with Claude, GPT, any MCP client</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 text-lg">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
|
||||||
<span>2-click OAuth — no API key headaches</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 fire-gradient pointer-events-none"></div>
|
|
||||||
<div class="max-w-6xl mx-auto px-6 relative">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="inline-block px-3 py-1 rounded-full bg-amber-500/10 text-amber-400 text-sm font-medium mb-4">Features</span>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Toast API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="clipboard-list" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Order Management</h3>
|
|
||||||
<p class="text-zinc-400">Access tickets, modifiers, and real-time order flow from every station.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="book-open" class="w-7 h-7 text-amber-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Menu Control</h3>
|
|
||||||
<p class="text-zinc-400">Update items, prices, and availability in real-time across all locations.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Labor Management</h3>
|
|
||||||
<p class="text-zinc-400">Track shifts, manage schedules, and monitor labor costs intelligently.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-2">Reporting</h3>
|
|
||||||
<p class="text-zinc-400">Sales mix, peak hours, server performance — all AI-analyzed.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 80 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Guests</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Payments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Discounts</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Tables</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Inventory</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Modifiers</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Revenue Centers</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Tips</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="flame" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-500">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-500">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@restaurant.com"
|
|
||||||
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25 sizzle"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 leading-tight">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 text-lg mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="https://github.com" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold transition-colors group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/toast-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Toast MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 94 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
<p class="text-zinc-400">Everything you need to know about Toast Connect</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors" open>
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Toast account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Toast API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Toast settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Does it work with multiple restaurant locations?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Absolutely. Toast Connect is designed for multi-location restaurant groups. Manage all your locations from a single AI interface,
|
|
||||||
with location-specific commands and reporting.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
|
||||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your <span class="gradient-text">restaurant?</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 500+ restaurants already automating with Toast Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 sizzle">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Toast Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Terms</a>
|
|
||||||
<a href="https://github.com" class="hover:text-white transition-colors">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Toast Connect. Not affiliated with Toast, Inc.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-amber-500 rounded-full font-semibold transition-all"
|
|
||||||
>
|
|
||||||
<i data-lucide="flame" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
touchbistro.html
Normal file
408
touchbistro.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>TouchBistro Connect — AI-Power Your Restaurant POS in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#F26522',
|
||||||
|
600: '#F26522dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #F26522 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #F2652225, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #F2652220; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #F26522">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">TouchBistro Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #F26522; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #F26522"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">TouchBistro</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete TouchBistro MCP server. Orders, reservations, and reports. <strong class="text-white">58 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #F26522; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/touchbistro.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #F26522; color: #fff">
|
||||||
|
58 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your TouchBistro data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #F26522, #F2652299)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">TB</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">TouchBistro Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 58 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask TouchBistro Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #F26522">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up TouchBistro + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Reservation no-shows</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F2652230">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #F26522"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI confirms and reminds</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Menu update delays</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F2652230">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #F26522"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Instant 86 management</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">End-of-day reporting</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #F2652230">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #F26522"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Real-time dashboards</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full TouchBistro API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F2652220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #F26522"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Order Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access tickets, mods, and transaction data.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F2652220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #F26522"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Reservations</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage bookings, waitlists, and table turns.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F2652220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #F26522"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Menu Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Update items, prices, and availability.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #F2652220">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #F26522"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Sales, labor, and inventory analytics.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #F26522; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your TouchBistro account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your TouchBistro API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your TouchBistro settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your TouchBistro?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with TouchBistro Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #F26522; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 TouchBistro Connect. Not affiliated with TouchBistro.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"How was the dinner rush? Give me the numbers and any issues."},{"type":"ai","text":"Here's your dinner service report:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:8px;\"\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eDinner Rev.\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$6,840\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+18%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eCovers\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e142\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+12%\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"padding:8px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:2px;\"\u003eAvg Check\u003c/div\u003e\u003cdiv style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F3F4F6;\"\u003e$48.17\u003c/div\u003e\u003cdiv style=\"font-size:10px;color:#34D399;margin-top:1px;\"\u003e+5.3%\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e🔥 Record Friday dinner · Ribeye special sold out in 90 min\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Double the ribeye order for next Friday and comp Table 12's dessert — they waited too long"},{"type":"ai","text":"Updated next Friday's ribeye prep to 60 portions (from 30). Applied comp to Table 12's dessert ($24) with manager note. Apology card flagged for server.","action":"✓ Prep updated · Comp applied ($24) · Apology noted"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #F2652220; border: 1px solid #F2652240;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#F26522;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #F26522, #F2652299)"><span class="font-bold text-[10px]" style="color: #fff">TB</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,672 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>TouchBistro Connect — AI-Power Your Restaurant POS in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#fff7ed',
|
|
||||||
100: '#ffedd5',
|
|
||||||
200: '#fed7aa',
|
|
||||||
300: '#fdba74',
|
|
||||||
400: '#fb923c',
|
|
||||||
500: '#F26522',
|
|
||||||
600: '#ea580c',
|
|
||||||
700: '#c2410c',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #F26522 0%, #ff8c00 50%, #ffc107 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(242, 101, 34, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 60px rgba(242, 101, 34, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(242, 101, 34, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(242, 101, 34, 0.3); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(242, 101, 34, 0.5); }
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes gradient-shift {
|
|
||||||
0%, 100% { background-position: 0% 50%; }
|
|
||||||
50% { background-position: 100% 50%; }
|
|
||||||
}
|
|
||||||
.animated-gradient {
|
|
||||||
background: linear-gradient(-45deg, #F26522, #ff8c00, #F26522, #c2410c);
|
|
||||||
background-size: 400% 400%;
|
|
||||||
animation: gradient-shift 8s ease infinite;
|
|
||||||
}
|
|
||||||
.glow-orb {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(60px);
|
|
||||||
opacity: 0.35;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse-btn {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(242, 101, 34, 0.4), 0 0 40px 0 rgba(242, 101, 34, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(242, 101, 34, 0.6), 0 0 60px 10px rgba(242, 101, 34, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse-btn 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover .feature-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% { background-position: -200% 0; }
|
|
||||||
100% { background-position: 200% 0; }
|
|
||||||
}
|
|
||||||
.shimmer {
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 2s infinite;
|
|
||||||
}
|
|
||||||
.restaurant-pattern {
|
|
||||||
background-image: radial-gradient(circle at 1px 1px, rgba(242, 101, 34, 0.1) 1px, transparent 0);
|
|
||||||
background-size: 40px 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Orbs -->
|
|
||||||
<div class="glow-orb w-96 h-96 bg-orange-500 top-20 -left-48 fixed animate-float-slow"></div>
|
|
||||||
<div class="glow-orb w-72 h-72 bg-yellow-500 top-1/2 -right-36 fixed animate-float-delayed"></div>
|
|
||||||
<div class="glow-orb w-64 h-64 bg-orange-600 bottom-20 left-1/4 fixed animate-float"></div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-yellow-500 flex items-center justify-center shadow-lg shadow-brand-500/20">
|
|
||||||
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">TouchBistro Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/20 hover:shadow-brand-500/40">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="absolute inset-0 restaurant-pattern opacity-30"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20 relative">
|
|
||||||
<div class="flex flex-col items-center text-center">
|
|
||||||
<div class="relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">TouchBistro</span> to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed max-w-3xl mx-auto">
|
|
||||||
The complete TouchBistro MCP server. <strong class="text-white">58 tools</strong> for orders, reservations, and reports.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-xl shadow-brand-500/25 relative overflow-hidden">
|
|
||||||
<span class="relative z-10">Join the Waitlist</span>
|
|
||||||
<div class="absolute inset-0 shimmer"></div>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Restaurant Stats -->
|
|
||||||
<div class="flex flex-wrap justify-center gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center border border-brand-500/20">
|
|
||||||
<i data-lucide="receipt" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div class="text-left">
|
|
||||||
<div class="text-2xl font-bold">58</div>
|
|
||||||
<div class="text-sm text-zinc-500">API Tools</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-yellow-500/10 flex items-center justify-center border border-yellow-500/20">
|
|
||||||
<i data-lucide="clock" class="w-6 h-6 text-yellow-400"></i>
|
|
||||||
</div>
|
|
||||||
<div class="text-left">
|
|
||||||
<div class="text-2xl font-bold">2 min</div>
|
|
||||||
<div class="text-sm text-zinc-500">Setup Time</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center border border-green-500/20">
|
|
||||||
<i data-lucide="trending-up" class="w-6 h-6 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<div class="text-left">
|
|
||||||
<div class="text-2xl font-bold">24/7</div>
|
|
||||||
<div class="text-sm text-zinc-500">AI Uptime</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your restaurant operations</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-r from-brand-500/50 to-yellow-500/20 p-[1px] rounded-2xl">
|
|
||||||
<div class="bg-zinc-900 rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/touchbistro.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="shopping-cart" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Orders</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="calendar-days" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Reservations</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Reports</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
||||||
<div>
|
|
||||||
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">The Problem</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-8 leading-tight">
|
|
||||||
Setting up TouchBistro + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Reservation no-shows</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Empty tables at prime time because guests forgot or ghosted.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">Menu update delays</p>
|
|
||||||
<p class="text-zinc-500 mt-1">86'd items still showing. Guests order, kitchen can't deliver.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-lg">End-of-day reporting chaos</p>
|
|
||||||
<p class="text-zinc-500 mt-1">Hours spent reconciling sales, tips, and inventory.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-xl relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl"></div>
|
|
||||||
<div class="relative">
|
|
||||||
<div class="flex items-center gap-3 mb-8">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-yellow-500 flex items-center justify-center shadow-lg shadow-brand-500/30">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold">With TouchBistro Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4 text-lg">
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>AI confirms and reminds guests</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>Instant 86 management</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>Real-time dashboards</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>Works with Claude, GPT, any MCP client</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
|
||||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
|
||||||
<p>Full API access — 58 tools ready</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">Features</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full TouchBistro API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5 border border-brand-500/20">
|
|
||||||
<i data-lucide="shopping-cart" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Order Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Access tickets, mods, and transaction data in real-time.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-yellow-500/20 to-yellow-500/5 flex items-center justify-center mb-5 border border-yellow-500/20">
|
|
||||||
<i data-lucide="calendar-days" class="w-7 h-7 text-yellow-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Reservations</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Manage bookings, waitlists, and table turns automatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5 border border-green-500/20">
|
|
||||||
<i data-lucide="book-open" class="w-7 h-7 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Menu Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Update items, prices, and availability instantly.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5 border border-purple-500/20">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3">Reporting</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Sales, labor, and inventory analytics on demand.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-16 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 40 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Table Management</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Staff Scheduling</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Inventory Tracking</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Payments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Tips & Gratuity</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Kitchen Display</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Customer Profiles</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Loyalty Programs</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-2xl mx-auto px-6 relative">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-semibold mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-2xl">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="+1 (555) 000-0000"
|
|
||||||
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email <span class="text-zinc-500">(optional)</span></label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25 relative overflow-hidden"
|
|
||||||
>
|
|
||||||
<span class="relative z-10">Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 relative z-10"></i>
|
|
||||||
<div class="absolute inset-0 shimmer"></div>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
||||||
<i data-lucide="check" class="w-10 h-10 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="error-message" class="hidden mt-4 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-center">
|
|
||||||
Something went wrong. Please try again.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const submitBtn = document.getElementById('submit-btn');
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
|
|
||||||
|
|
||||||
await new Promise(r => setTimeout(r, 1000));
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-xl">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 text-lg mb-8 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold text-lg group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-inner">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/touchbistro-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ TouchBistro MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 58 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">FAQ</span>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your TouchBistro account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your TouchBistro API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your TouchBistro settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can my kitchen staff use this?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Absolutely! AI can help with menu updates, 86 management, and answering questions about orders.
|
|
||||||
Train it once on your menu and processes, and it works 24/7.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your TouchBistro?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join restaurants already automating with TouchBistro Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25 relative overflow-hidden">
|
|
||||||
<span class="relative z-10">Join the Waitlist</span>
|
|
||||||
<div class="absolute inset-0 shimmer"></div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-yellow-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">TouchBistro Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 TouchBistro Connect. Not affiliated with TouchBistro.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
trello.html
Normal file
408
trello.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Trello Connect — AI-Power Your Boards in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#0079BF',
|
||||||
|
600: '#0079BFdd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #0079BF 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #0079BF25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #0079BF20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0079BF">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Trello Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #0079BF; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #0079BF"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Trello</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Trello MCP server. Boards, cards, and lists — fully automated. <strong class="text-white">89 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #0079BF; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/trello.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #0079BF; color: #fff">
|
||||||
|
89 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Trello data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #0079BF, #0079BF99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">TR</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Trello Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 89 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Trello Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #0079BF">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Trello + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Manual card shuffling</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0079BF30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0079BF"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI moves cards based on status</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Forgetting due dates</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0079BF30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0079BF"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Proactive deadline reminders</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Scattered project updates</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #0079BF30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #0079BF"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI summarizes board activity</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Trello API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0079BF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0079BF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Card Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, move, update cards. Full control over your workflow.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0079BF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0079BF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Board Operations</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage lists, labels, and board settings programmatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0079BF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0079BF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Checklists & Due Dates</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track progress, set deadlines, manage subtasks.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #0079BF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #0079BF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Member Actions</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Assign cards, manage permissions, coordinate teams.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #0079BF; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Trello account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Trello API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Trello settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Trello?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Trello Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #0079BF; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Trello Connect. Not affiliated with Trello.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"What's the status of our Q1 launch board? Any blockers?"},{"type":"ai","text":"Here's your sprint board:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:6px;\"\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eTo Do\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#6B728020;border:1px solid #6B728040;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#6B7280;\"\u003e5\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eIn Progress\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#F59E0B20;border:1px solid #F59E0B40;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F59E0B;\"\u003e8\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eReview\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#8B5CF620;border:1px solid #8B5CF640;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#8B5CF6;\"\u003e3\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eDone\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#10B98120;border:1px solid #10B98140;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#10B981;\"\u003e14\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ 2 cards overdue · 1 blocked on design approval\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Move the 3 review cards to done and assign next sprint's top priority to Sarah"},{"type":"ai","text":"All 3 review cards moved to Done. Assigned \"API Integration v2\" to Sarah with a Monday deadline. Board completion is now at 57%.","action":"✓ 3 cards moved · 1 assigned · Sprint updated"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #0079BF20; border: 1px solid #0079BF40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#0079BF;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #0079BF, #0079BF99)"><span class="font-bold text-[10px]" style="color: #fff">TR</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,624 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Trello Connect — AI-Power Your Boards in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#eff6ff',
|
|
||||||
100: '#dbeafe',
|
|
||||||
200: '#bfdbfe',
|
|
||||||
300: '#93c5fd',
|
|
||||||
400: '#60a5fa',
|
|
||||||
500: '#0079BF',
|
|
||||||
600: '#0067a3',
|
|
||||||
700: '#005587',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #0079BF 0%, #8b5cf6 50%, #ec4899 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 121, 191, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 40px rgba(0, 121, 191, 0.15);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(0, 121, 191, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
animation-delay: -1.5s;
|
|
||||||
}
|
|
||||||
.animate-pulse-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
||||||
50% { transform: translateY(-20px) rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { opacity: 0.5; transform: scale(1); }
|
|
||||||
50% { opacity: 0.8; transform: scale(1.05); }
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 121, 191, 0.4), 0 0 40px 0 rgba(0, 121, 191, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(0, 121, 191, 0.6), 0 0 60px 10px rgba(0, 121, 191, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, #0079BF, #8b5cf6, #ec4899);
|
|
||||||
padding: 2px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: #09090b;
|
|
||||||
border-radius: calc(1rem - 2px);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
background: linear-gradient(135deg, rgba(0, 121, 191, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
|
|
||||||
}
|
|
||||||
.bg-grid {
|
|
||||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
|
|
||||||
}
|
|
||||||
/* Floating Trello cards */
|
|
||||||
.floating-card {
|
|
||||||
background: linear-gradient(135deg, rgba(0, 121, 191, 0.1), rgba(139, 92, 246, 0.05));
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
|
|
||||||
|
|
||||||
<!-- Floating decorative elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-10 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
|
|
||||||
<!-- Decorative floating cards (Trello-themed) -->
|
|
||||||
<div class="absolute top-1/3 right-1/4 floating-card w-32 h-20 rounded-lg animate-float opacity-30"></div>
|
|
||||||
<div class="absolute bottom-1/3 left-1/5 floating-card w-28 h-16 rounded-lg animate-float-delayed opacity-20"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Trello Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105 transform">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20">
|
|
||||||
<div class="flex flex-col items-center text-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">Trello</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
|
|
||||||
The complete Trello MCP server. <strong class="text-white">89 tools</strong> covering boards, cards, and lists.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 flex items-center justify-center gap-2">
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">10,000+</strong> project managers
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your project workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/trello.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="sticky-note" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Cards</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="layout-dashboard" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Boards</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="check-square" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Checklists</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up Trello + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<!-- Pain Point 1 -->
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-medium text-zinc-400">Manual card shuffling</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-semibold text-white">AI moves cards based on status</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 2 -->
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-medium text-zinc-400">Forgetting due dates</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-semibold text-white">Proactive deadline reminders</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 3 -->
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-medium text-zinc-400">Scattered project updates</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-semibold text-white">AI summarizes board activity</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Trello API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="sticky-note" class="w-7 h-7 text-brand-500"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Card Management</h3>
|
|
||||||
<p class="text-zinc-400">Create, move, update cards. Full control over your workflow.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="layout-dashboard" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Board Operations</h3>
|
|
||||||
<p class="text-zinc-400">Manage lists, labels, and board settings programmatically.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="check-square" class="w-7 h-7 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Checklists & Dates</h3>
|
|
||||||
<p class="text-zinc-400">Track progress, set deadlines, manage subtasks.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-orange-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Member Actions</h3>
|
|
||||||
<p class="text-zinc-400">Assign cards, manage permissions, coordinate teams.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ 80 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Labels</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Attachments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Comments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Power-Ups</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Webhooks</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Custom Fields</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/trello-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Trello MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 89 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
For the hosted version, no. Just connect your Trello account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Trello API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Trello settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Trello?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join thousands of project managers already automating with Trello Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Trello Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Trello Connect. Not affiliated with Trello.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
wave.html
Normal file
408
wave.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Wave Connect — AI-Power Your Accounting in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#165DFF',
|
||||||
|
600: '#165DFFdd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #165DFF 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #165DFF25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #165DFF20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #165DFF">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Wave Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #165DFF; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #165DFF"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Wave</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Wave MCP server. Invoices, receipts, and reports. <strong class="text-white">42 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #165DFF; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/wave.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #165DFF; color: #fff">
|
||||||
|
42 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Wave data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #165DFF, #165DFF99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">WV</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Wave Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 42 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Wave Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #165DFF">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Wave + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Shoebox of receipts</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #165DFF30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #165DFF"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI categorizes everything</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Inconsistent invoicing</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #165DFF30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #165DFF"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Automated billing cycles</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Accounting anxiety</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #165DFF30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #165DFF"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI keeps books clean</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Wave API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #165DFF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #165DFF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Invoice Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, send, track invoices automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #165DFF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #165DFF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Receipt Scanning</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Capture expenses, categorize, attach to records.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #165DFF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #165DFF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Banking</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Connect accounts, categorize transactions, reconcile.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #165DFF20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #165DFF"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Reports</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">P&L, balance sheet, cash flow — on demand.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #165DFF; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Wave account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Wave API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Wave settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Wave?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Wave Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #165DFF; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Wave Connect. Not affiliated with Wave.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"Pull up my P&L for this quarter. How are we tracking against budget?"},{"type":"ai","text":"Here's your Q2 P&L summary:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eRevenue\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#34D399;\"\u003e$128,400\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eCOGS\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#F3F4F6;\"\u003e$38,520\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eGross Profit\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#34D399;\"\u003e$89,880\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;color:#9CA3AF;\"\u003eNet Income\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;font-family:monospace;font-weight:600;color:#34D399;\"\u003e$34,200\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#FBBF24;\"\u003e📈 12% above budget · Net margin: 26.6%\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Export this as PDF for our investor meeting and flag any unusual expenses"},{"type":"ai","text":"Generated Q2 P&L report (PDF). Flagged 2 anomalies: Software subscriptions up 34% ($2,100 over budget) and travel up 28%. Both itemized in the appendix.","action":"✓ PDF exported · 2 anomalies flagged · Investor-ready format"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #165DFF20; border: 1px solid #165DFF40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#165DFF;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #165DFF, #165DFF99)"><span class="font-bold text-[10px]" style="color: #fff">WV</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
769
wave/index.html
769
wave/index.html
@ -1,769 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Wave Connect — AI-Power Your Accounting in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#eff6ff',
|
|
||||||
100: '#dbeafe',
|
|
||||||
200: '#bfdbfe',
|
|
||||||
300: '#93c5fd',
|
|
||||||
400: '#165DFF',
|
|
||||||
500: '#1447cc',
|
|
||||||
600: '#1036a3',
|
|
||||||
700: '#0c2a7a',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #165DFF 0%, #0c2a7a 50%, #1e1b4b 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.gradient-text-hero {
|
|
||||||
background: linear-gradient(135deg, #165DFF 0%, #8b5cf6 50%, #ec4899 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(22, 93, 255, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 50px rgba(22, 93, 255, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(22, 93, 255, 0.3);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(22, 93, 255, 0.4); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(22, 93, 255, 0.6); }
|
|
||||||
}
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% { background-position: -200% 0; }
|
|
||||||
100% { background-position: 200% 0; }
|
|
||||||
}
|
|
||||||
.shimmer-border {
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(22, 93, 255, 0.3), transparent);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 3s infinite;
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(22, 93, 255, 0.2), 0 0 120px rgba(22, 93, 255, 0.1);
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
background: linear-gradient(135deg, #165DFF 0%, #1447cc 100%);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 0 30px rgba(22, 93, 255, 0.5);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
background: linear-gradient(135deg, rgba(22, 93, 255, 0.2) 0%, rgba(22, 93, 255, 0.05) 100%);
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(22, 93, 255, 0.4), 0 0 40px 0 rgba(22, 93, 255, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(22, 93, 255, 0.6), 0 0 60px 10px rgba(22, 93, 255, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: linear-gradient(135deg, rgba(22, 93, 255, 0.1) 0%, transparent 100%);
|
|
||||||
}
|
|
||||||
@keyframes count-up {
|
|
||||||
from { opacity: 0; transform: translateY(10px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
.number-highlight {
|
|
||||||
background: linear-gradient(135deg, #165DFF 0%, #8b5cf6 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
||||||
<div class="absolute top-1/4 left-10 w-72 h-72 bg-brand-400/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute bottom-1/4 left-1/3 w-64 h-64 bg-cyan-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center shadow-lg shadow-brand-400/20">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Wave Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
|
|
||||||
<a href="#pricing" class="btn-primary px-5 py-2.5 rounded-xl font-semibold text-white">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20 text-center">
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
|
|
||||||
Free for Small Businesses
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text-hero">Wave</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
|
|
||||||
The complete Wave MCP server. <strong class="text-white">42 tools</strong> for invoices, receipts, and reports.
|
|
||||||
Simplify your accounting with AI.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="btn-primary w-full sm:w-auto px-8 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
|
|
||||||
Join the Waitlist
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Stats Row -->
|
|
||||||
<div class="grid grid-cols-3 gap-8 max-w-md mx-auto">
|
|
||||||
<div class="text-center">
|
|
||||||
<p class="text-3xl font-bold number-highlight">42</p>
|
|
||||||
<p class="text-sm text-zinc-500">API Tools</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-center">
|
|
||||||
<p class="text-3xl font-bold number-highlight">2 min</p>
|
|
||||||
<p class="text-sm text-zinc-500">Setup Time</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-center">
|
|
||||||
<p class="text-3xl font-bold number-highlight">100%</p>
|
|
||||||
<p class="text-sm text-zinc-500">API Coverage</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your accounting workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="rounded-2xl p-[1px] bg-gradient-to-br from-brand-400/50 to-purple-500/20">
|
|
||||||
<div class="bg-zinc-900 rounded-2xl p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/wave.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="file-text" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Invoices</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="receipt" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Expenses</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="pie-chart" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Reports</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Accounting + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't be complicated</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">
|
|
||||||
Stop dreading your bookkeeping. Let AI handle the tedious work while you focus on your business.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-8 items-stretch">
|
|
||||||
<!-- Problems -->
|
|
||||||
<div class="space-y-4">
|
|
||||||
<h3 class="text-lg font-semibold text-red-400 mb-6 flex items-center gap-2">
|
|
||||||
<i data-lucide="x-circle" class="w-5 h-5"></i>
|
|
||||||
The Old Way
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Shoebox of receipts</p>
|
|
||||||
<p class="text-zinc-500">Piles of paper receipts waiting to be entered. Tax season panic mode.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Inconsistent invoicing</p>
|
|
||||||
<p class="text-zinc-500">Some months you invoice on time. Others... not so much.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Accounting anxiety</p>
|
|
||||||
<p class="text-zinc-500">Always worried if your books are right. Afraid of what you'll find.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Solutions -->
|
|
||||||
<div class="space-y-4">
|
|
||||||
<h3 class="text-lg font-semibold text-brand-400 mb-6 flex items-center gap-2">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5"></i>
|
|
||||||
With Wave Connect
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">AI categorizes everything</p>
|
|
||||||
<p class="text-zinc-400">Snap a photo, AI does the rest. Perfectly categorized, every time.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">Automated billing cycles</p>
|
|
||||||
<p class="text-zinc-400">Set it and forget it. Invoices go out on time, every time.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-white mb-1">AI keeps books clean</p>
|
|
||||||
<p class="text-zinc-400">Always know where you stand. Real-time financial clarity.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/10 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Wave API access through one simple connection. 42 tools at your fingertips.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="file-text" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Invoice Management</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Create, send, track invoices automatically. Get paid faster.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="scan" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Receipt Scanning</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Capture expenses, categorize, attach to records instantly.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="landmark" class="w-7 h-7 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Banking</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">Connect accounts, categorize transactions, reconcile effortlessly.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="pie-chart" class="w-7 h-7 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Reports</h3>
|
|
||||||
<p class="text-zinc-400 leading-relaxed">P&L, balance sheet, cash flow — on demand, anytime.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-6">+ 38 more tools including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-3">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Customer Management</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Vendor Payments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Tax Prep</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Multi-Currency</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Estimates</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Recurring Billing</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- How It Works -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-400/10 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="terminal" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
How It Works
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Just talk to Claude
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-8 leading-relaxed">
|
|
||||||
No accounting jargon required. Just describe what you need in plain English and Claude handles
|
|
||||||
the bookkeeping through your Wave account.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-zinc-300">"Create an invoice for Acme Corp, $500"</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-zinc-300">"Categorize last week's expenses"</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-zinc-300">"Show me my P&L for Q4"</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Claude + Wave</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">You:</span> How much did I spend on
|
|
||||||
software this month?
|
|
||||||
|
|
||||||
<span class="text-brand-400">Claude:</span> Let me check your expenses...
|
|
||||||
|
|
||||||
<span class="text-zinc-500">→ Using:</span> wave_get_expenses
|
|
||||||
<span class="text-zinc-500">→ Category:</span> Software
|
|
||||||
<span class="text-zinc-500">→ Period:</span> This month
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Found 8 transactions</span>
|
|
||||||
|
|
||||||
<span class="text-brand-400">Claude:</span> You spent <span class="text-white">$847.32</span> on
|
|
||||||
software this month:
|
|
||||||
|
|
||||||
• Figma: $45
|
|
||||||
• AWS: $312.32
|
|
||||||
• Notion: $96
|
|
||||||
• GitHub: $44
|
|
||||||
...</code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 relative overflow-hidden">
|
|
||||||
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-400/5 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<form id="waitlist-form" class="space-y-6 relative z-10">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="btn-primary w-full py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-20 h-20 bg-brand-400/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
||||||
<i data-lucide="check" class="w-10 h-10 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
|
|
||||||
<div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-8 leading-relaxed">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle of managing infrastructure.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
|
|
||||||
<i data-lucide="github" class="w-5 h-5"></i>
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300"><code><span class="text-zinc-500">$</span> git clone github.com/wave-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Wave MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 42 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
<p class="text-zinc-400">Everything you need to know about Wave Connect</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is Wave really free?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Wave's accounting software is free. Wave Connect (this integration) will have a free tier for basic usage,
|
|
||||||
with paid tiers for higher volume. We believe every small business should have access to AI-powered accounting.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my financial data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Absolutely. We use OAuth 2.0 and never store your Wave credentials. Data flows directly between Claude and Wave —
|
|
||||||
we don't store your financial information. All connections are encrypted with bank-level security.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can AI make mistakes with my accounting?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Claude always confirms before taking important actions. For sensitive operations like deleting transactions or sending invoices,
|
|
||||||
you'll see a preview and confirm. Think of it as a very smart assistant that always double-checks with you.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need accounting experience?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Not at all! That's the beauty of AI. Just describe what you need in plain English: "Send an invoice to John for last week's work"
|
|
||||||
or "How much did I spend on marketing?" Claude handles the accounting complexity.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-brand-400/5 to-transparent"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Wave?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
|
||||||
Join small businesses already automating their accounting with Wave Connect. Be first in line for early access.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="btn-primary w-full sm:w-auto px-10 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
|
|
||||||
Join the Waitlist
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-10 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Wave Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition-colors">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Wave Connect. Not affiliated with Wave Financial.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-400 to-brand-600 rounded-full font-semibold text-white transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Form submission
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sticky CTA visibility
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
wrike.html
Normal file
408
wrike.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Wrike Connect — AI-Power Your Workflows in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#08CF65',
|
||||||
|
600: '#08CF65dd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #08CF65 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #08CF6525, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #08CF6520; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #08CF65">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Wrike Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #08CF65; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #08CF65"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Wrike</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Wrike MCP server. Projects, tasks, and collaboration. <strong class="text-white">98 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #08CF65; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/wrike.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #08CF65; color: #fff">
|
||||||
|
98 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Wrike data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #08CF65, #08CF6599)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">WR</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Wrike Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 98 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Wrike Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #08CF65">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Wrike + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Project status chaos</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #08CF6530">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #08CF65"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI dashboards everything</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Approval bottlenecks</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #08CF6530">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #08CF65"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI routes and reminds reviewers</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Resource conflicts</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #08CF6530">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #08CF65"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI optimizes team allocation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Wrike API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #08CF6520">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #08CF65"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Task Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, assign, track tasks across projects.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #08CF6520">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #08CF65"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Project Ops</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Manage folders, timelines, and dependencies.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #08CF6520">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #08CF65"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Time & Budget</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Track hours, expenses, and project budgets.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #08CF6520">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #08CF65"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Approvals</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Route reviews, collect feedback, manage sign-offs.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #08CF65; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Wrike account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Wrike API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Wrike settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Wrike?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Wrike Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #08CF65; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Wrike Connect. Not affiliated with Wrike.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"We have a client deliverable Thursday. Where are we on the project?"},{"type":"ai","text":"Here's the project status:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003cdiv style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:6px;\"\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eNot Started\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#EF444420;border:1px solid #EF444440;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#EF4444;\"\u003e2\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eIn Progress\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#F59E0B20;border:1px solid #F59E0B40;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#F59E0B;\"\u003e5\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eIn Review\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#8B5CF620;border:1px solid #8B5CF640;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#8B5CF6;\"\u003e3\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"text-align:center;\"\u003e\u003cdiv style=\"font-size:10px;color:#9CA3AF;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\"\u003eApproved\u003c/div\u003e\u003cdiv style=\"height:40px;border-radius:6px;background:#10B98120;border:1px solid #10B98140;display:flex;align-items:center;justify-content:center;\"\u003e\u003cspan style=\"font-size:16px;font-weight:700;font-family:monospace;color:#10B981;\"\u003e11\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"margin-top:8px;font-size:10px;color:#FBBF24;\"\u003e⚠ 2 tasks not started · Deadline: 48 hours · At risk\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Assign the 2 unstarted tasks to available team members and fast-track the reviews"},{"type":"ai","text":"Assigned \"Asset Export\" to Chris (available) and \"QA Checklist\" to Dana. Sent review nudges to 3 approvers with Thursday deadline flagged.","action":"✓ 2 tasks assigned · 3 review reminders sent · Deadline tracked"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #08CF6520; border: 1px solid #08CF6540;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#08CF65;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #08CF65, #08CF6599)"><span class="font-bold text-[10px]" style="color: #fff">WR</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
620
wrike/index.html
620
wrike/index.html
@ -1,620 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Wrike Connect — AI-Power Your Workflows in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#ecfdf5',
|
|
||||||
100: '#d1fae5',
|
|
||||||
200: '#a7f3d0',
|
|
||||||
300: '#6ee7b7',
|
|
||||||
400: '#34d399',
|
|
||||||
500: '#08CF65',
|
|
||||||
600: '#059669',
|
|
||||||
700: '#047857',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #08CF65 0%, #06b557 50%, #059669 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(8, 207, 101, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 60px rgba(8, 207, 101, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(8, 207, 101, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite 2s;
|
|
||||||
}
|
|
||||||
.animate-float-slow {
|
|
||||||
animation: float 8s ease-in-out infinite 1s;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px); }
|
|
||||||
50% { transform: translateY(-20px); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px rgba(8, 207, 101, 0.4); }
|
|
||||||
50% { box-shadow: 0 0 40px rgba(8, 207, 101, 0.6); }
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(8, 207, 101, 0.4), 0 0 40px 0 rgba(8, 207, 101, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(8, 207, 101, 0.6), 0 0 60px 10px rgba(8, 207, 101, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.feature-card:hover .feature-icon {
|
|
||||||
transform: scale(1.1) rotate(5deg);
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, rgba(8, 207, 101, 0.5), rgba(6, 181, 87, 0.2));
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: rgb(24 24 27);
|
|
||||||
border-radius: calc(1rem - 1px);
|
|
||||||
}
|
|
||||||
.text-shadow {
|
|
||||||
text-shadow: 0 0 40px rgba(8, 207, 101, 0.5);
|
|
||||||
}
|
|
||||||
.bg-grid {
|
|
||||||
background-image:
|
|
||||||
linear-gradient(rgba(8, 207, 101, 0.03) 1px, transparent 1px),
|
|
||||||
linear-gradient(90deg, rgba(8, 207, 101, 0.03) 1px, transparent 1px);
|
|
||||||
background-size: 50px 50px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
|
||||||
|
|
||||||
<!-- Floating Background Elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-emerald-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-green-400/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
||||||
<i data-lucide="workflow" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Wrike Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20 bg-grid">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
|
||||||
Connect <span class="gradient-text text-shadow">Wrike</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10">
|
|
||||||
The most comprehensive Wrike MCP server. <strong class="text-white">98 tools</strong> covering projects, tasks, and collaboration.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col items-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">300+</strong> project teams worldwide
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your Wrike workflows</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/wrike.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="zap" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">98 API Tools</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="clock" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">2-Click Setup</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4 text-brand-500"></i>
|
|
||||||
<span class="text-sm text-zinc-300">OAuth 2.0</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
|
||||||
Managing Wrike + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't be a full-time job</span>
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-5">
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium text-white">Project status chaos</p>
|
|
||||||
<p class="text-zinc-500 text-sm mt-1">Constantly switching between tools to track progress across teams.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium text-white">Approval bottlenecks</p>
|
|
||||||
<p class="text-zinc-500 text-sm mt-1">Reviews get stuck. Deadlines slip. Everyone's frustrated.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="font-medium text-white">Resource conflicts</p>
|
|
||||||
<p class="text-zinc-500 text-sm mt-1">Team members overbooked. Projects understaffed. No visibility.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-8 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-semibold">With Wrike Connect</h3>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>AI dashboards everything automatically</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>Smart routing & reviewer reminders</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>AI optimizes team allocation</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>Works with Claude, GPT, any MCP client</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
|
||||||
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
|
||||||
<span>Automatic token refresh forever</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Wrike API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:bg-brand-500/20 transition-all">
|
|
||||||
<i data-lucide="check-square" class="w-7 h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Task Management</h3>
|
|
||||||
<p class="text-zinc-400">Create, assign, track tasks across projects. Full CRUD with dependencies.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:bg-purple-500/20 transition-all">
|
|
||||||
<i data-lucide="folder-kanban" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Project Ops</h3>
|
|
||||||
<p class="text-zinc-400">Manage folders, timelines, and dependencies. Full project lifecycle control.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-5 group-hover:bg-cyan-500/20 transition-all">
|
|
||||||
<i data-lucide="clock" class="w-7 h-7 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Time & Budget</h3>
|
|
||||||
<p class="text-zinc-400">Track hours, expenses, and project budgets. Real-time cost visibility.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
|
||||||
<div class="feature-icon w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center mb-5 group-hover:bg-amber-500/20 transition-all">
|
|
||||||
<i data-lucide="badge-check" class="w-7 h-7 text-amber-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-2">Approvals</h3>
|
|
||||||
<p class="text-zinc-400">Route reviews, collect feedback, manage sign-offs. Never miss a deadline.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ 90 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Comments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Attachments</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Custom Fields</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Workflows</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Teams</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Reports</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Timelogs</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Webhooks</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="Your phone number"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 shadow-2xl">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4 transition group-hover:translate-x-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/wrike-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Wrike MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 98 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
For the hosted version, no. Just connect your Wrike account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Wrike API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Wrike settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Can I use this with other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Wrike?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 300+ project teams already automating with Wrike Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="workflow" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Wrike Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition flex items-center gap-1">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Wrike Connect. Not affiliated with Wrike.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-emerald-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
408
zendesk.html
Normal file
408
zendesk.html
Normal file
@ -0,0 +1,408 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Zendesk Connect — AI-Power Your Support in 2 Clicks</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
500: '#03363D',
|
||||||
|
600: '#03363Ddd',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #03363D 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #03363D25, transparent); }
|
||||||
|
.card-glow:hover { box-shadow: 0 0 40px #03363D20; }
|
||||||
|
|
||||||
|
/* Chat demo styles */
|
||||||
|
.chat-demo-container {
|
||||||
|
background: rgba(24, 24, 27, 0.6);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.chat-embed {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.06);
|
||||||
|
}
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-red { background: rgba(239,68,68,0.15); color: #F87171; }
|
||||||
|
.status-amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
|
||||||
|
.status-green { background: rgba(16,185,129,0.15); color: #34D399; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #03363D">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Zendesk Connect</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
||||||
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
||||||
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #03363D; color: #fff">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
||||||
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #03363D"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Zendesk</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-8">
|
||||||
|
The complete Zendesk MCP server. Tickets, users, and automations — all AI-accessible. <strong class="text-white">156 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #03363D; color: #fff">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
||||||
|
See Features
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../output/zendesk.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #03363D; color: #fff">
|
||||||
|
156 API Tools
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Chat Demo -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">See it in action</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-10">Watch AI work with your Zendesk data in real-time</p>
|
||||||
|
<div class="chat-demo-container">
|
||||||
|
<!-- Chat header -->
|
||||||
|
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #03363D, #03363D99)">
|
||||||
|
<span class="font-bold text-xs" style="color: #fff">ZD</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-sm">Zendesk Connect AI</div>
|
||||||
|
<div class="text-xs text-zinc-500 flex items-center gap-1.5">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||||||
|
Online · 156 tools available
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chat messages -->
|
||||||
|
<div class="p-4 sm:p-6 space-y-4 min-h-[280px]" id="chat-demo">
|
||||||
|
<!-- Messages animated in via JS -->
|
||||||
|
</div>
|
||||||
|
<!-- Chat input -->
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-800/50 border border-zinc-700/30">
|
||||||
|
<input type="text" placeholder="Ask Zendesk Connect anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-400 placeholder:text-zinc-600" disabled>
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #03363D">
|
||||||
|
<i data-lucide="arrow-up" class="w-4 h-4" style="color: #fff"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||||
|
Setting up Zendesk + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Drowning in ticket queues</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #03363D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #03363D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI triages and prioritizes automatically</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Slow first response times</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #03363D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #03363D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Instant AI-drafted replies</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<div class="flex items-start gap-3 mb-4">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">Context switching constantly</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #03363D30">
|
||||||
|
<i data-lucide="check" class="w-4 h-4" style="color: #03363D"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI surfaces relevant ticket history</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-center mb-12">Full Zendesk API access through one simple connection</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #03363D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #03363D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Ticket Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Create, update, resolve tickets. Full CRUD on your queue.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #03363D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #03363D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">User & Org Data</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Access customer history, tags, and organization details.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #03363D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #03363D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Automations</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Trigger macros, update fields, route tickets intelligently.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
||||||
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #03363D20">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5" style="color: #03363D"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Analytics</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Pull satisfaction scores, response times, agent performance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
||||||
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
||||||
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
||||||
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #03363D; color: #fff">
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="flex items-center gap-3 mb-4">
|
||||||
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||||
|
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 mb-6">
|
||||||
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
||||||
|
The hosted version just saves you the hassle.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
||||||
|
<i data-lucide="github" class="w-5 h-5"></i>
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-3xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
What is MCP?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Do I need to install anything?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Zendesk account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
||||||
|
</details>
|
||||||
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
||||||
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
||||||
|
Is my data secure?
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Zendesk API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Zendesk settings.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Zendesk?</h2>
|
||||||
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Zendesk Connect.</p>
|
||||||
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #03363D; color: #fff">
|
||||||
|
Join the Waitlist →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="py-8 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
||||||
|
© 2026 Zendesk Connect. Not affiliated with Zendesk.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script>
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
// Chat demo animation
|
||||||
|
const chatDemo = document.getElementById('chat-demo');
|
||||||
|
const chatMessages = [{"type":"user","text":"Show me the current ticket backlog. Anything about to breach SLA?"},{"type":"ai","text":"Here's your real-time queue:","widgetHtml":"\u003cdiv class=\"chat-embed\"\u003e\u003ctable style=\"width:100%;border-collapse:collapse;font-size:11px;\"\u003e\u003cthead\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.1);text-align:left;\"\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eID\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003eIssue\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;\"\u003ePriority\u003c/th\u003e\u003cth style=\"padding:4px 6px;color:#9CA3AF;font-weight:500;text-align:right;\"\u003eStatus\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#4281\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eLogin failures - Enterprise\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-red\"\u003eUrgent\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e12m left\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#4279\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eBilling discrepancy Q4\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-amber\"\u003eHigh\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e2h left\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#4277\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eAPI rate limit questions\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eNormal\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e6h left\u003c/td\u003e\u003c/tr\u003e\u003ctr style=\"border-bottom:1px solid rgba(255,255,255,0.05);\"\u003e\u003ctd style=\"padding:5px 6px;font-family:monospace;color:#E5E7EB;font-weight:600;white-space:nowrap;\"\u003e#4275\u003c/td\u003e\u003ctd style=\"padding:5px 6px;color:#D1D5DB;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\u003eFeature request: SSO\u003c/td\u003e\u003ctd style=\"padding:5px 6px;\"\u003e\u003cspan class=\"status-badge status-green\"\u003eLow\u003c/span\u003e\u003c/td\u003e\u003ctd style=\"padding:5px 6px;text-align:right;color:#9CA3AF;font-family:monospace;white-space:nowrap;\"\u003e1d left\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cdiv style=\"margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:#9CA3AF;\"\u003e34 open · 3 breaching · Avg response: 1.4h\u003c/div\u003e\u003c/div\u003e"},{"type":"user","text":"Auto-respond to #4281 with our login troubleshooting guide and escalate to Tier 2"},{"type":"ai","text":"Done! Sent the KB article \"Login Troubleshooting (Enterprise)\" to the customer and escalated to Tier 2 with full context attached.","action":"✓ Auto-reply sent · Escalated to Tier 2 · SLA preserved"}];
|
||||||
|
|
||||||
|
function createChatMessage(msg) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.style.opacity = '0';
|
||||||
|
div.style.transform = 'translateY(15px)';
|
||||||
|
|
||||||
|
if (msg.type === 'user') {
|
||||||
|
div.className = 'flex justify-end';
|
||||||
|
div.innerHTML = '<div style="background: #03363D20; border: 1px solid #03363D40;" class="rounded-2xl rounded-br-sm px-4 py-3 max-w-[85%]"><p class="text-sm">' + msg.text + '</p></div>';
|
||||||
|
} else {
|
||||||
|
div.className = 'flex gap-3';
|
||||||
|
var widgetHtml = msg.widgetHtml || '';
|
||||||
|
var actionHtml = msg.action ? '<div style="margin-top:8px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:12px;color:#03363D;display:inline-flex;align-items:center;gap:6px;">' + msg.action + '</div>' : '';
|
||||||
|
div.innerHTML = '<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background: linear-gradient(135deg, #03363D, #03363D99)"><span class="font-bold text-[10px]" style="color: #fff">ZD</span></div><div class="max-w-[85%]"><div class="rounded-2xl rounded-tl-sm px-4 py-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);"><p class="text-sm text-zinc-300">' + msg.text + '</p>' + widgetHtml + '</div>' + actionHtml + '</div>';
|
||||||
|
}
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
|
||||||
|
let chatAnimated = false;
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: chatDemo,
|
||||||
|
start: 'top 80%',
|
||||||
|
onEnter: () => {
|
||||||
|
if (chatAnimated) return;
|
||||||
|
chatAnimated = true;
|
||||||
|
chatMessages.forEach((msg, i) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const el = createChatMessage(msg);
|
||||||
|
chatDemo.appendChild(el);
|
||||||
|
lucide.createIcons();
|
||||||
|
gsap.to(el, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
|
||||||
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
||||||
|
}, i * 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
once: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reveal animations for other sections
|
||||||
|
gsap.utils.toArray('section').forEach(section => {
|
||||||
|
gsap.fromTo(section, { opacity: 0.8, y: 20 }, {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out',
|
||||||
|
scrollTrigger: { trigger: section, start: 'top 85%', once: true }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,620 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="scroll-smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Zendesk Connect — AI-Power Your Support in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#f0fdfa',
|
|
||||||
100: '#ccfbf1',
|
|
||||||
200: '#99f6e4',
|
|
||||||
300: '#5eead4',
|
|
||||||
400: '#17c3b2',
|
|
||||||
500: '#03363D',
|
|
||||||
600: '#024850',
|
|
||||||
700: '#014451',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #17c3b2 0%, #8b5cf6 50%, #ec4899 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(23, 195, 178, 0.2), transparent);
|
|
||||||
}
|
|
||||||
.card-glow {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.card-glow:hover {
|
|
||||||
box-shadow: 0 0 40px rgba(23, 195, 178, 0.15);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
}
|
|
||||||
.video-glow {
|
|
||||||
box-shadow: 0 0 80px rgba(23, 195, 178, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
|
|
||||||
}
|
|
||||||
.animate-float {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.animate-float-delayed {
|
|
||||||
animation: float 6s ease-in-out infinite;
|
|
||||||
animation-delay: -3s;
|
|
||||||
}
|
|
||||||
.animate-pulse-glow {
|
|
||||||
animation: pulse-glow 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
||||||
50% { transform: translateY(-20px) rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% { opacity: 0.5; transform: scale(1); }
|
|
||||||
50% { opacity: 0.8; transform: scale(1.05); }
|
|
||||||
}
|
|
||||||
@keyframes wiggle {
|
|
||||||
0%, 100% { transform: rotate(-2deg); }
|
|
||||||
50% { transform: rotate(2deg); }
|
|
||||||
}
|
|
||||||
@keyframes glow-pulse {
|
|
||||||
0%, 100% { box-shadow: 0 0 20px 0 rgba(23, 195, 178, 0.4), 0 0 40px 0 rgba(23, 195, 178, 0.2); }
|
|
||||||
50% { box-shadow: 0 0 30px 5px rgba(23, 195, 178, 0.6), 0 0 60px 10px rgba(23, 195, 178, 0.3); }
|
|
||||||
}
|
|
||||||
.sticky-btn {
|
|
||||||
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.sticky-btn:hover {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
background: linear-gradient(135deg, #17c3b2, #8b5cf6, #ec4899);
|
|
||||||
padding: 2px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
}
|
|
||||||
.gradient-border-inner {
|
|
||||||
background: #09090b;
|
|
||||||
border-radius: calc(1rem - 2px);
|
|
||||||
}
|
|
||||||
.feature-icon {
|
|
||||||
background: linear-gradient(135deg, rgba(23, 195, 178, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
|
|
||||||
}
|
|
||||||
.bg-grid {
|
|
||||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
|
|
||||||
}
|
|
||||||
.teal-accent {
|
|
||||||
color: #17c3b2;
|
|
||||||
}
|
|
||||||
.teal-bg {
|
|
||||||
background-color: #17c3b2;
|
|
||||||
}
|
|
||||||
.teal-glow {
|
|
||||||
box-shadow: 0 0 20px rgba(23, 195, 178, 0.4);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
|
|
||||||
|
|
||||||
<!-- Floating decorative elements -->
|
|
||||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
||||||
<div class="absolute top-1/4 left-10 w-64 h-64 bg-teal-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
|
||||||
<div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-teal-400 to-teal-600 flex items-center justify-center shadow-lg shadow-teal-500/25">
|
|
||||||
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Zendesk Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
||||||
<a href="#pricing" class="px-4 py-2 teal-bg hover:opacity-90 rounded-lg font-medium transition shadow-lg shadow-teal-500/25 hover:shadow-teal-500/40 hover:scale-105 transform text-white">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 py-20">
|
|
||||||
<div class="flex flex-col items-center text-center">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
||||||
Connect <span class="gradient-text">Zendesk</span><br>
|
|
||||||
to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
|
|
||||||
The complete Zendesk MCP server. <strong class="text-white">156 tools</strong> covering tickets, users, and automations.
|
|
||||||
No setup. No OAuth headaches. Just connect and automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 teal-bg hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-teal-500/25 hover:shadow-teal-500/40 flex items-center justify-center gap-2 text-white">
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
|
||||||
<i data-lucide="play" class="w-5 h-5"></i>
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Proof -->
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<div class="flex -space-x-3">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
<img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">
|
|
||||||
Trusted by <strong class="text-white">5,000+</strong> support teams
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Video Demo -->
|
|
||||||
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-5xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Watch how AI transforms your support workflow</p>
|
|
||||||
</div>
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-2">
|
|
||||||
<div class="rounded-xl overflow-hidden video-glow">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../../output/zendesk.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="ticket" class="w-4 h-4 teal-accent"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Tickets</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="users" class="w-4 h-4 teal-accent"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Users</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-4 bg-zinc-700"></div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-4 h-4 teal-accent"></i>
|
|
||||||
<span class="text-sm text-zinc-300">Analytics</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Problem/Solution -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
|
||||||
Setting up Zendesk + AI<br>
|
|
||||||
<span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<!-- Pain Point 1 -->
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-medium text-zinc-400">Drowning in ticket queues</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 teal-accent"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-semibold text-white">AI triages and prioritizes automatically</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 2 -->
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-medium text-zinc-400">Slow first response times</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 teal-accent"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-semibold text-white">Instant AI-drafted replies</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pain Point 3 -->
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-medium text-zinc-400">Context switching constantly</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 teal-accent"></i>
|
|
||||||
</div>
|
|
||||||
<p class="font-semibold text-white">AI surfaces relevant ticket history</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-teal-500/10 teal-accent text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Full API Coverage
|
|
||||||
</span>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Full Zendesk API access through one simple connection</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="ticket" class="w-7 h-7 teal-accent"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Ticket Management</h3>
|
|
||||||
<p class="text-zinc-400">Create, update, resolve tickets. Full CRUD on your queue.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">User & Org Data</h3>
|
|
||||||
<p class="text-zinc-400">Access customer history, tags, and organization details.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="workflow" class="w-7 h-7 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Automations</h3>
|
|
||||||
<p class="text-zinc-400">Trigger macros, update fields, route tickets intelligently.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
|
||||||
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-7 h-7 text-orange-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3">Analytics</h3>
|
|
||||||
<p class="text-zinc-400">Pull satisfaction scores, response times, agent performance.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 text-center">
|
|
||||||
<p class="text-zinc-400 mb-4">+ 150 more endpoints including:</p>
|
|
||||||
<div class="flex flex-wrap justify-center gap-2">
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Views</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Macros</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Groups</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">SLAs</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Triggers</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Brands</span>
|
|
||||||
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Help Center</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-2xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-teal-500/20 teal-accent text-sm font-medium mb-6">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
||||||
Coming Soon
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gradient-border">
|
|
||||||
<div class="gradient-border-inner p-8">
|
|
||||||
<form id="waitlist-form" class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="teal-accent">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your full name"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="teal-accent">*</span></label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
id="phone"
|
|
||||||
name="phone"
|
|
||||||
required
|
|
||||||
placeholder="(555) 123-4567"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="submit-btn"
|
|
||||||
class="w-full py-4 bg-gradient-to-r from-teal-500 to-purple-500 hover:from-teal-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-teal-500/25 text-white"
|
|
||||||
>
|
|
||||||
<span>Join the Waitlist</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div id="success-message" class="hidden text-center py-8">
|
|
||||||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<i data-lucide="check" class="w-8 h-8 text-green-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
||||||
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
||||||
We respect your privacy. No spam, ever.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = this;
|
|
||||||
const successMsg = document.getElementById('success-message');
|
|
||||||
form.classList.add('hidden');
|
|
||||||
successMsg.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
|
|
||||||
<div class="absolute top-0 right-0 w-96 h-96 bg-teal-500/5 rounded-full blur-3xl"></div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
Open Source
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br>
|
|
||||||
<span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 teal-accent hover:text-teal-300 font-medium transition">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/zendesk-connect/mcp
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Zendesk MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 156 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
For the hosted version, no. Just connect your Zendesk account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Zendesk API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Zendesk settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-teal-500/5 to-transparent"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Zendesk?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join thousands of support teams already automating with Zendesk Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-teal-500 to-purple-500 hover:from-teal-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-teal-500/25 text-white">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-teal-400 to-teal-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Zendesk Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="#" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="#" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Zendesk Connect. Not affiliated with Zendesk.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 teal-bg hover:opacity-90 rounded-full font-semibold transition-all transform hover:scale-110 text-white"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user