remove 6 old-template pages (acuity, closecrm, constantcontact, google-ads, housecallpro, zendesk-v2)
This commit is contained in:
Jake Shore
parent
5dff17109d
commit
db816d5d5e
@ -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="https://github.com/BusyBee3333/acuity-scheduling-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium text-lg group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800 shadow-xl">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 leading-relaxed"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/acuity-scheduling-mcp-2026-complete.git
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-emerald-400">✓ Acuity MCP Server running</span>
|
|
||||||
<span class="text-emerald-400">✓ 38 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Acuity account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Acuity API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Acuity settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Acuity?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 300+ service professionals already automating with Acuity Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-indigo-600 hover:from-brand-600 hover:to-indigo-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/30">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 rounded-xl font-semibold text-lg transition border border-zinc-700">
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-indigo-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="calendar-check" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Acuity Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="https://github.com/BusyBee3333/acuity-scheduling-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/acuity-scheduling-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/acuity-scheduling-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-2">
|
|
||||||
<i data-lucide="github" class="w-4 h-4"></i>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Acuity Connect. Not affiliated with Acuity Scheduling.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-indigo-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Show/hide sticky CTA based on scroll position
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -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="https://github.com/BusyBee3333/close-crm-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
|
|
||||||
<i data-lucide="github" class="w-5 h-5"></i>
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/close-crm-mcp-2026-complete.git
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Close MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 84 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
<p class="text-zinc-400">Everything you need to know about Close Connect</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Will my sales team need training?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Not really — that's the beauty of AI. Your reps just talk to Claude like they would a colleague: "Add a note to the Acme deal"
|
|
||||||
or "Who hasn't been contacted this week?" No special syntax, no training sessions.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my sales data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Absolutely. We use OAuth 2.0 and never store your Close credentials. Data flows directly between Claude and Close —
|
|
||||||
your deal information, customer data, and sales metrics never touch our servers.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can AI make mistakes with my CRM?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Claude confirms before any destructive actions. Moving a deal, adding notes, logging calls — all instant.
|
|
||||||
But deleting leads or bulk changes require your explicit approval. Think of it as a very smart assistant that double-checks the important stuff.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">How does this help me close more deals?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Time saved on data entry = more time selling. AI finds your hottest leads, reminds you of follow-ups, and surfaces deal insights.
|
|
||||||
Early users report 40%+ more prospect conversations per day.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-brand-400/5 to-transparent"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Close?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
|
||||||
Join sales teams already closing more deals with Close Connect. Be first in line for early access.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="btn-primary w-full sm:w-auto px-10 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
|
|
||||||
Join the Waitlist
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#demo" class="w-full sm:w-auto px-10 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
|
|
||||||
Watch Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center">
|
|
||||||
<i data-lucide="phone-call" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Close Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="https://github.com/BusyBee3333/close-crm-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Privacy</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/close-crm-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Terms</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/close-crm-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/close-crm-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition-colors">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Close Connect. Not affiliated with Close.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-400 to-brand-600 rounded-full font-semibold text-white transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Form submission
|
|
||||||
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.classList.add('hidden');
|
|
||||||
document.getElementById('success-message').classList.remove('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sticky CTA visibility
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -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="https://github.com/BusyBee3333/constant-contact-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/constant-contact-mcp-2026-complete.git
|
|
||||||
<span class="text-zinc-500">$</span> cd constantcontact && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-brand-400">✓ Constant Contact MCP Server running</span>
|
|
||||||
<span class="text-brand-400">✓ 58 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
For the hosted version, no. Just connect your Constant Contact account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Constant Contact API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Constant Contact settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-medium">Can AI actually improve my email metrics?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">
|
|
||||||
Absolutely. AI can analyze your past campaigns, identify patterns in what works, write better subject lines,
|
|
||||||
segment your audience more intelligently, and optimize send times — all automatically.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your email marketing?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 250+ marketers already on the waitlist for Constant Contact Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="mail" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Constant Contact Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="https://github.com/BusyBee3333/constant-contact-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/constant-contact-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/constant-contact-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/constant-contact-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Constant Contact Connect. Not affiliated with Constant Contact.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,288 +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>Google Ads Connect — AI-Power Your PPC in 2 Clicks</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
500: '#4285F4',
|
|
||||||
600: '#4285F4dd',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #4285F4 0%, #8b5cf6 50%, #ec4899 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
.hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, #4285F425, transparent); }
|
|
||||||
.card-glow:hover { box-shadow: 0 0 40px #4285F420; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
|
||||||
|
|
||||||
<!-- Nav -->
|
|
||||||
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: #4285F4">
|
|
||||||
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Google Ads Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:flex items-center gap-8">
|
|
||||||
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
||||||
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
||||||
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<a href="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #4285F4; color: #fff">
|
|
||||||
Join Waitlist
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 py-20">
|
|
||||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8">
|
|
||||||
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #4285F4"></span>
|
|
||||||
Open Source + Hosted
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
|
||||||
Connect <span class="gradient-text">Google Ads</span><br>to AI in 2 Clicks
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl text-zinc-400 mb-8">
|
|
||||||
The complete Google Ads MCP server. Campaigns, keywords, and optimization. <strong class="text-white">134 tools</strong> ready to automate.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4">
|
|
||||||
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #4285F4; color: #fff">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
|
||||||
See Features
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative">
|
|
||||||
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
|
||||||
<video autoplay loop muted playsinline class="w-full">
|
|
||||||
<source src="../output/google-ads.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #4285F4; color: #fff">
|
|
||||||
134 API Tools
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pain Points -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
|
||||||
Setting up Google Ads + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
|
||||||
</h2>
|
|
||||||
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
|
||||||
|
|
||||||
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
||||||
<div class="flex items-start gap-3 mb-4">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">Budget waste on bad keywords</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4285F430">
|
|
||||||
<i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI auto-pauses low performers</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
||||||
<div class="flex items-start gap-3 mb-4">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">Manual bid adjustments</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4285F430">
|
|
||||||
<i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI optimizes bids hourly</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
||||||
<div class="flex items-start gap-3 mb-4">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400">No cross-campaign insights</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-3">
|
|
||||||
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #4285F430">
|
|
||||||
<i data-lucide="check" class="w-4 h-4" style="color: #4285F4"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-white font-medium">AI identifies top opportunities</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section id="features" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
|
||||||
<p class="text-zinc-400 text-center mb-12">Full Google Ads API access through one simple connection</p>
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
|
|
||||||
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
|
||||||
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4285F420">
|
|
||||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Campaign Management</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">Create, pause, and optimize search and display campaigns.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
|
||||||
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4285F420">
|
|
||||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Keyword Operations</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">Add keywords, set bids, manage match types.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
|
||||||
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4285F420">
|
|
||||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Ad Copy & Assets</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">Update headlines, descriptions, and responsive ads.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
|
||||||
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #4285F420">
|
|
||||||
<i data-lucide="layers" class="w-5 h-5" style="color: #4285F4"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-semibold text-lg mb-2">Performance Reporting</h3>
|
|
||||||
<p class="text-zinc-400 text-sm">CPC, CTR, conversions, and ROAS — AI-accessible.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Waitlist -->
|
|
||||||
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
||||||
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
|
||||||
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
|
||||||
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
|
||||||
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #4285F4; color: #fff">
|
|
||||||
Get Early Access
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Open Source -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6">
|
|
||||||
<div class="flex items-center gap-3 mb-4">
|
|
||||||
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
||||||
Self-host if you want.<br><span class="text-zinc-500">We won't stop you.</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-zinc-400 mb-6">
|
|
||||||
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
||||||
The hosted version just saves you the hassle.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="inline-flex items-center gap-2 text-zinc-300 hover:text-white transition">
|
|
||||||
<i data-lucide="github" class="w-5 h-5"></i>
|
|
||||||
View on GitHub
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
||||||
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
|
||||||
What is MCP?
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data. It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.</p>
|
|
||||||
</details>
|
|
||||||
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
||||||
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
|
||||||
Do I need to install anything?
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Google Ads account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.). If you self-host, you'll need Node.js.</p>
|
|
||||||
</details>
|
|
||||||
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
||||||
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
|
||||||
Is my data secure?
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Google Ads API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Google Ads settings.</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-20 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to AI-power your Google Ads?</h2>
|
|
||||||
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Google Ads Connect.</p>
|
|
||||||
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #4285F4; color: #fff">
|
|
||||||
Join the Waitlist →
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer class="py-8 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
|
||||||
© 2026 Google Ads Connect. Not affiliated with Google Ads.
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -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="https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold text-lg group">
|
|
||||||
View on GitHub
|
|
||||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-inner">
|
|
||||||
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
||||||
<span class="ml-2">Terminal</span>
|
|
||||||
</div>
|
|
||||||
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete.git
|
|
||||||
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
||||||
<span class="text-zinc-500">$</span> npm run build
|
|
||||||
<span class="text-zinc-500">$</span> node dist/server.js
|
|
||||||
|
|
||||||
<span class="text-green-400">✓ Housecall Pro MCP Server running</span>
|
|
||||||
<span class="text-green-400">✓ 72 tools loaded</span>
|
|
||||||
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
||||||
<div class="max-w-3xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">FAQ</span>
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold">Frequently asked questions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
||||||
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
For the hosted version, no. Just connect your Housecall Pro account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
||||||
If you self-host, you'll need Node.js.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
Yes. We use OAuth 2.0 and never store your Housecall Pro API keys. Tokens are encrypted at rest and in transit.
|
|
||||||
You can revoke access anytime from your Housecall Pro settings.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
|
||||||
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
||||||
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
||||||
</summary>
|
|
||||||
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
||||||
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
|
||||||
As MCP adoption grows, more clients will support it natively.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
||||||
<div class="absolute inset-0 hero-glow"></div>
|
|
||||||
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
|
||||||
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
||||||
Ready to AI-power your Housecall Pro?
|
|
||||||
</h2>
|
|
||||||
<p class="text-xl text-zinc-400 mb-10">
|
|
||||||
Join 300+ home service pros already automating with Housecall Pro Connect.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
||||||
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
|
||||||
Join the Waitlist
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
|
||||||
Book a Demo
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t border-zinc-800/50 py-12">
|
|
||||||
<div class="max-w-6xl mx-auto px-6">
|
|
||||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center">
|
|
||||||
<i data-lucide="home" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-xl">Housecall Pro Connect</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-8 text-zinc-400">
|
|
||||||
<a href="https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Privacy</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Terms</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">GitHub</a>
|
|
||||||
<a href="https://github.com/BusyBee3333/housecall-pro-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition">Twitter</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-500 text-sm">© 2026 Housecall Pro Connect. Not affiliated with Housecall Pro.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Sticky Floating CTA -->
|
|
||||||
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
||||||
<a
|
|
||||||
href="#pricing"
|
|
||||||
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
|
|
||||||
>
|
|
||||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
||||||
<span>Join Waitlist</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const stickyCta = document.getElementById('sticky-cta');
|
|
||||||
const pricingSection = document.getElementById('pricing');
|
|
||||||
|
|
||||||
function updateStickyCta() {
|
|
||||||
const scrollY = window.scrollY;
|
|
||||||
const pricingTop = pricingSection.offsetTop;
|
|
||||||
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
||||||
const viewportBottom = scrollY + window.innerHeight;
|
|
||||||
|
|
||||||
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
||||||
|
|
||||||
if (shouldShow) {
|
|
||||||
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
} else {
|
|
||||||
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
||||||
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', updateStickyCta);
|
|
||||||
updateStickyCta();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>lucide.createIcons();</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,970 +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>MCPEngage for Zendesk — AI-Power Your Zendesk in 2 Clicks</title>
|
|
||||||
<meta name="description" content="Connect Zendesk to any AI model with MCPEngage. Manage tickets, automate workflows, and get instant customer context through natural conversation.">
|
|
||||||
<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 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>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
||||||
colors: {
|
|
||||||
brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
/* --- DESIGN SYSTEM (matches CRESync) --- */
|
|
||||||
.gradient-text {
|
|
||||||
background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
|
|
||||||
background-size: 200% 200%;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
animation: gradient-shift 6s ease infinite;
|
|
||||||
}
|
|
||||||
@keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
|
|
||||||
|
|
||||||
.mesh-gradient {
|
|
||||||
background:
|
|
||||||
radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
|
|
||||||
radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
|
|
||||||
radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
|
|
||||||
radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
|
|
||||||
radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass {
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
@supports (backdrop-filter: blur(20px)) {
|
|
||||||
.glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); }
|
|
||||||
}
|
|
||||||
.glass-strong {
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
border: 1px solid rgba(255,255,255,0.12);
|
|
||||||
}
|
|
||||||
@supports (backdrop-filter: blur(40px)) {
|
|
||||||
.glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
|
|
||||||
.glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
|
|
||||||
|
|
||||||
.float { animation: float 6s ease-in-out infinite; }
|
|
||||||
.float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
|
|
||||||
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
|
|
||||||
|
|
||||||
.gradient-border { position: relative; }
|
|
||||||
.gradient-border::before {
|
|
||||||
content:''; position:absolute; inset:0; padding:2px;
|
|
||||||
background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
|
|
||||||
background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
|
|
||||||
border-radius: inherit;
|
|
||||||
-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-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
|
|
||||||
.feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
|
|
||||||
.feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
|
|
||||||
.feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
|
|
||||||
|
|
||||||
.shimmer {
|
|
||||||
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
|
|
||||||
background-size: 200% 100%; animation: shimmer 2s infinite;
|
|
||||||
}
|
|
||||||
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
|
|
||||||
|
|
||||||
.btn-shine { position:relative; overflow:hidden; }
|
|
||||||
.btn-shine::after {
|
|
||||||
content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
|
|
||||||
background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
|
|
||||||
transform: rotate(45deg) translateX(-100%); transition: transform 0.6s;
|
|
||||||
}
|
|
||||||
.btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
|
|
||||||
|
|
||||||
.scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
|
|
||||||
@keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
|
|
||||||
|
|
||||||
.noise::before {
|
|
||||||
content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
|
|
||||||
.js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
|
|
||||||
.js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
|
|
||||||
.js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
|
|
||||||
|
|
||||||
.counter { font-variant-numeric: tabular-nums; }
|
|
||||||
.stat-card { transition: transform 0.3s ease; }
|
|
||||||
.stat-card:hover { transform: translateY(-5px); }
|
|
||||||
|
|
||||||
@media (min-width:1024px) {
|
|
||||||
.magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Terminal typing cursor */
|
|
||||||
.terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
|
|
||||||
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
|
|
||||||
|
|
||||||
/* FAQ accordion */
|
|
||||||
.faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
|
|
||||||
.faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
|
|
||||||
.faq-item.open .faq-chevron { transform: rotate(180deg); }
|
|
||||||
.faq-chevron { transition: transform 0.3s ease; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
|
|
||||||
|
|
||||||
<!-- ═══════════════════ NAVBAR ═══════════════════ -->
|
|
||||||
<nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
|
|
||||||
<a href="#" class="flex items-center gap-2 sm:gap-3 group">
|
|
||||||
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
|
|
||||||
<span class="font-black text-xs sm:text-sm text-black">ME</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
|
|
||||||
</a>
|
|
||||||
<div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
|
|
||||||
<a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
|
|
||||||
<a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
|
|
||||||
<a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
|
|
||||||
</div>
|
|
||||||
<a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">
|
|
||||||
Get Started
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- ═══════════════════ HERO ═══════════════════ -->
|
|
||||||
<section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 mesh-gradient opacity-60"></div>
|
|
||||||
<div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
|
|
||||||
<div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
|
|
||||||
<div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
|
|
||||||
<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
|
|
||||||
|
|
||||||
<div class="max-w-7xl mx-auto relative z-10">
|
|
||||||
<!-- Badge -->
|
|
||||||
<div class="flex justify-center mb-6 sm:mb-8 reveal-up">
|
|
||||||
<div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
|
|
||||||
<span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
|
|
||||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
|
|
||||||
<span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
|
|
||||||
</span>
|
|
||||||
Now Available — Connect Zendesk + AI
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Headline -->
|
|
||||||
<div class="text-center mb-6 sm:mb-8">
|
|
||||||
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
|
|
||||||
<span class="block">AI-Power Your</span>
|
|
||||||
<span class="block gradient-text">Zendesk</span>
|
|
||||||
<span class="block">in 2 Clicks</span>
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Subtitle -->
|
|
||||||
<p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
|
|
||||||
MCPEngage connects Zendesk to any AI model via MCP.<br class="hidden sm:block">
|
|
||||||
<span class="text-white font-semibold">Manage tickets, pull customer context, and automate workflows — all through conversation.</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- CTA Buttons -->
|
|
||||||
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
|
|
||||||
<a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
|
|
||||||
<span>Get Started Free</span>
|
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
|
|
||||||
</a>
|
|
||||||
<button class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
|
|
||||||
<div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
|
|
||||||
<i data-lucide="play" class="w-4 h-4 sm:w-5 sm:h-5 ml-0.5"></i>
|
|
||||||
</div>
|
|
||||||
<span>Watch Demo</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Product Mockup -->
|
|
||||||
<div class="relative max-w-6xl mx-auto reveal-scale">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
|
|
||||||
<div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
|
|
||||||
<div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
|
|
||||||
<div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
|
|
||||||
<!-- Window chrome -->
|
|
||||||
<div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
|
|
||||||
<div class="flex items-center gap-1.5 sm:gap-2">
|
|
||||||
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
|
|
||||||
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
|
|
||||||
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
|
|
||||||
</div>
|
|
||||||
<div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
|
|
||||||
<i data-lucide="lock" class="w-3 h-3"></i>
|
|
||||||
app.mcpengage.com/zendesk
|
|
||||||
</div>
|
|
||||||
<div class="w-16 sm:w-20"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- App interface -->
|
|
||||||
<div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
|
|
||||||
<!-- Sidebar -->
|
|
||||||
<div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
|
|
||||||
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400">
|
|
||||||
<i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
|
|
||||||
</div>
|
|
||||||
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
|
|
||||||
<i data-lucide="ticket" class="w-4 h-4 lg:w-5 lg:h-5"></i>
|
|
||||||
</div>
|
|
||||||
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
|
|
||||||
<i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
|
|
||||||
</div>
|
|
||||||
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-4 h-4 lg:w-5 lg:h-5"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Chat panel -->
|
|
||||||
<div class="flex-1 flex flex-col">
|
|
||||||
<div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
|
|
||||||
<div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
|
|
||||||
<div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
|
|
||||||
<input type="text" placeholder="Ask about your Zendesk tickets..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
|
|
||||||
<button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
|
|
||||||
<i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Right panel: Tickets -->
|
|
||||||
<div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
|
|
||||||
<div class="flex border-b border-white/5">
|
|
||||||
<button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="ticket" class="w-4 h-4"></i>
|
|
||||||
Tickets
|
|
||||||
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">12</span>
|
|
||||||
</button>
|
|
||||||
<button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
|
|
||||||
<i data-lucide="user" class="w-4 h-4"></i>
|
|
||||||
Customer
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
|
|
||||||
<!-- Ticket 1 -->
|
|
||||||
<div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
|
|
||||||
<div class="flex items-start justify-between mb-2 xl:mb-3">
|
|
||||||
<div>
|
|
||||||
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">#4821 — Login Issue</h4>
|
|
||||||
<p class="text-[10px] xl:text-xs text-zinc-500">Sarah Chen • 12m ago</p>
|
|
||||||
</div>
|
|
||||||
<span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Urgent</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-1.5 xl:gap-2">
|
|
||||||
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">SLA: 28min</span>
|
|
||||||
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Enterprise</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Ticket 2 -->
|
|
||||||
<div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
|
|
||||||
<div class="flex items-start justify-between mb-2 xl:mb-3">
|
|
||||||
<div>
|
|
||||||
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">#4819 — Billing Question</h4>
|
|
||||||
<p class="text-[10px] xl:text-xs text-zinc-500">James Miller • 1h ago</p>
|
|
||||||
</div>
|
|
||||||
<span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">High</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-1.5 xl:gap-2">
|
|
||||||
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">SLA: 2h</span>
|
|
||||||
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Pro Plan</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Ticket 3 -->
|
|
||||||
<div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
|
|
||||||
<div class="flex items-start justify-between mb-2 xl:mb-3">
|
|
||||||
<div>
|
|
||||||
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">#4815 — Feature Request</h4>
|
|
||||||
<p class="text-[10px] xl:text-xs text-zinc-500">Priya Patel • 3h ago</p>
|
|
||||||
</div>
|
|
||||||
<span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Normal</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-1.5 xl:gap-2">
|
|
||||||
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">SLA: 8h</span>
|
|
||||||
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Team Plan</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Scroll indicator -->
|
|
||||||
<div class="hidden sm:flex justify-center mt-10 lg:mt-16">
|
|
||||||
<div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
|
|
||||||
<span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ═══════════════════ STATS BAR ═══════════════════ -->
|
|
||||||
<section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
|
|
||||||
<div class="max-w-7xl mx-auto relative">
|
|
||||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
|
|
||||||
<div class="stat-card text-center">
|
|
||||||
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="50">0</span>+</div>
|
|
||||||
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Zendesk Tools</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card text-center">
|
|
||||||
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
|
|
||||||
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card text-center">
|
|
||||||
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
|
|
||||||
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card text-center">
|
|
||||||
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
|
|
||||||
<div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Support</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ═══════════════════ TERMINAL / INSTALL ═══════════════════ -->
|
|
||||||
<section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
|
|
||||||
<div class="max-w-4xl mx-auto">
|
|
||||||
<div class="text-center mb-10 sm:mb-14 reveal-up">
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
|
|
||||||
<i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
|
|
||||||
Quick Install
|
|
||||||
</div>
|
|
||||||
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
|
|
||||||
Up and Running in<br><span class="gradient-text">One Command</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="reveal-scale">
|
|
||||||
<div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
|
|
||||||
<div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
|
|
||||||
<!-- Terminal chrome -->
|
|
||||||
<div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
|
|
||||||
<div class="flex items-center gap-1.5 sm:gap-2">
|
|
||||||
<div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
|
|
||||||
<div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
|
|
||||||
<div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
|
|
||||||
</div>
|
|
||||||
<span class="text-xs text-zinc-600 font-mono">~/projects</span>
|
|
||||||
<button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
|
|
||||||
</div>
|
|
||||||
<!-- Terminal body -->
|
|
||||||
<div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
|
|
||||||
<div id="terminal-lines" class="space-y-1"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ═══════════════════ BEFORE & AFTER ═══════════════════ -->
|
|
||||||
<section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 mesh-gradient opacity-20"></div>
|
|
||||||
<div class="max-w-6xl mx-auto relative">
|
|
||||||
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
|
|
||||||
<i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
|
|
||||||
The Difference
|
|
||||||
</div>
|
|
||||||
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
|
|
||||||
Before vs. <span class="gradient-text">After</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
|
||||||
<!-- Before -->
|
|
||||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
|
|
||||||
</div>
|
|
||||||
<ul class="space-y-4">
|
|
||||||
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual ticket triage</p><p class="text-xs sm:text-sm text-zinc-500">Sort through hundreds of tickets by hand every morning</p></div></li>
|
|
||||||
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Copy-paste customer data</p><p class="text-xs sm:text-sm text-zinc-500">Manually look up account info across multiple systems</p></div></li>
|
|
||||||
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Switching between tabs</p><p class="text-xs sm:text-sm text-zinc-500">Zendesk, CRM, docs, analytics — constant context switching</p></div></li>
|
|
||||||
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Slow response times</p><p class="text-xs sm:text-sm text-zinc-500">SLA breaches piling up, customers getting frustrated</p></div></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- After -->
|
|
||||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
|
|
||||||
<i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
|
|
||||||
</div>
|
|
||||||
<ul class="space-y-4">
|
|
||||||
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">AI auto-triage</p><p class="text-xs sm:text-sm text-zinc-500">Tickets categorized, prioritized, and routed automatically</p></div></li>
|
|
||||||
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant customer context</p><p class="text-xs sm:text-sm text-zinc-500">Full history, account tier, and past interactions in one view</p></div></li>
|
|
||||||
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One conversation interface</p><p class="text-xs sm:text-sm text-zinc-500">Ask your AI — it reads and writes to Zendesk for you</p></div></li>
|
|
||||||
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">3× faster resolution</p><p class="text-xs sm:text-sm text-zinc-500">Resolve tickets in minutes instead of hours</p></div></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ═══════════════════ PAIN POINTS ═══════════════════ -->
|
|
||||||
<section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
|
|
||||||
<div class="max-w-6xl mx-auto">
|
|
||||||
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
|
|
||||||
<i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
|
|
||||||
The Problem
|
|
||||||
</div>
|
|
||||||
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
|
|
||||||
Your Support Team Is<br><span class="text-red-400">Drowning</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
|
|
||||||
Zendesk is powerful, but your agents spend more time navigating it than helping customers.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
|
|
||||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
|
|
||||||
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
||||||
<i data-lucide="layers" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Tool Overload</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Zendesk views, macros, triggers, automations, reporting — agents need months of training just to become productive.</p>
|
|
||||||
</div>
|
|
||||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
|
|
||||||
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
||||||
<i data-lucide="search-x" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Context Blindness</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Customer history scattered across tickets, custom fields, and external systems. Agents ask customers to repeat themselves.</p>
|
|
||||||
</div>
|
|
||||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
|
|
||||||
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
||||||
<i data-lucide="timer-off" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">SLA Pressure</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Tickets pile up, response times slip, and CSAT scores tank. Your team works harder but the queue never shrinks.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ═══════════════════ HOW IT WORKS ═══════════════════ -->
|
|
||||||
<section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 mesh-gradient opacity-30"></div>
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
|
|
||||||
|
|
||||||
<div class="max-w-5xl mx-auto relative">
|
|
||||||
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
|
|
||||||
<i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
|
|
||||||
The Solution
|
|
||||||
</div>
|
|
||||||
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
|
|
||||||
Three Steps to<br><span class="gradient-text">AI-Powered Support</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4 sm:space-y-6 lg:space-y-8">
|
|
||||||
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
|
|
||||||
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
|
|
||||||
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-center lg:text-left">
|
|
||||||
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Zendesk</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Zendesk API key and subdomain. MCPEngage discovers all available endpoints and builds 50+ tools automatically. No code, no configuration, no DevOps.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
|
|
||||||
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
|
|
||||||
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-center lg:text-left">
|
|
||||||
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all urgent tickets from enterprise customers." "Draft a reply for ticket #4821." "What's our CSAT trend this week?" Your AI understands and acts.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
|
|
||||||
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
|
|
||||||
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-center lg:text-left">
|
|
||||||
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-triage incoming tickets, escalate SLA breaches, generate weekly reports, and sync data across your stack — all running 24/7.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ═══════════════════ FEATURES GRID ═══════════════════ -->
|
|
||||||
<section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
|
|
||||||
<div class="max-w-7xl mx-auto">
|
|
||||||
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
|
|
||||||
<i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
|
|
||||||
Features
|
|
||||||
</div>
|
|
||||||
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
|
|
||||||
Everything to<br><span class="gradient-text">Supercharge Zendesk</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
|
|
||||||
50+ Zendesk tools accessible through one natural-language interface.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
|
|
||||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
||||||
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
||||||
<i data-lucide="ticket" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Ticket Management</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base">Create, update, merge, and resolve tickets through conversation. "Close all resolved tickets from last week."</p>
|
|
||||||
</div>
|
|
||||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
||||||
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
||||||
<i data-lucide="shield-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">SLA Monitoring</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base">Real-time SLA tracking with proactive alerts. "Which tickets are about to breach SLA?"</p>
|
|
||||||
</div>
|
|
||||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
||||||
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
||||||
<i data-lucide="user-circle" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Customer Context</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base">Instant access to full customer history, account tier, past tickets, and satisfaction scores in one query.</p>
|
|
||||||
</div>
|
|
||||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
||||||
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
||||||
<i data-lucide="wand-2" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Macro Automation</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base">Apply macros, trigger automations, and execute bulk actions with natural language commands.</p>
|
|
||||||
</div>
|
|
||||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
||||||
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
||||||
<i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Analytics & Reports</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base">Generate CSAT reports, agent performance metrics, and ticket volume trends on demand.</p>
|
|
||||||
</div>
|
|
||||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
||||||
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
||||||
<i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">AI Draft Replies</h3>
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base">Generate contextual reply drafts using ticket history, knowledge base, and customer data. Review and send.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ═══════════════════ FAQ ═══════════════════ -->
|
|
||||||
<section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
|
|
||||||
<div class="max-w-3xl mx-auto">
|
|
||||||
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
|
|
||||||
<i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
|
|
||||||
FAQ
|
|
||||||
</div>
|
|
||||||
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
|
|
||||||
Common <span class="gradient-text">Questions</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-3 sm:space-y-4" id="faq-list">
|
|
||||||
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
|
|
||||||
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
|
|
||||||
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
|
|
||||||
</button>
|
|
||||||
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
|
|
||||||
MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time read/write access to Zendesk.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
|
|
||||||
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
|
|
||||||
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How does it connect to Zendesk?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
|
|
||||||
</button>
|
|
||||||
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
|
|
||||||
You provide your Zendesk subdomain and an API token (generated in Zendesk Admin). MCPEngage uses the Zendesk REST API to create 50+ tools covering tickets, users, organizations, macros, SLAs, and more. Your credentials are encrypted and never stored on our servers.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
|
|
||||||
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
|
|
||||||
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my data secure?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
|
|
||||||
</button>
|
|
||||||
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
|
|
||||||
Absolutely. MCPEngage runs locally or in your own cloud — data never passes through our servers. API keys are encrypted at rest. The MCP protocol is permission-based, so you control exactly which tools your AI can access. SOC 2 compliance coming Q1 2026.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
|
|
||||||
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
|
|
||||||
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What AI models are supported?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
|
|
||||||
</button>
|
|
||||||
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
|
|
||||||
Any MCP-compatible AI client works — Claude Desktop, Cursor, Windsurf, ChatGPT (via plugin), and more. MCPEngage is model-agnostic; it provides the tools, your preferred AI provides the intelligence.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
|
|
||||||
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
|
|
||||||
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
|
|
||||||
</button>
|
|
||||||
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
|
|
||||||
MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
|
|
||||||
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
|
|
||||||
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
|
|
||||||
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
|
|
||||||
</button>
|
|
||||||
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
|
|
||||||
Yes! MCPEngage supports 66+ platforms including Salesforce, HubSpot, Jira, Slack, Stripe, GitHub, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ═══════════════════ FINAL CTA ═══════════════════ -->
|
|
||||||
<section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
|
|
||||||
<div class="absolute inset-0 mesh-gradient"></div>
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
|
|
||||||
<div class="max-w-4xl mx-auto text-center relative">
|
|
||||||
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
|
|
||||||
Start Automating Zendesk<br><span class="gradient-text">Today</span>
|
|
||||||
</h2>
|
|
||||||
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
|
|
||||||
Join thousands of teams using MCPEngage to supercharge their support.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center max-w-xl mx-auto reveal-up">
|
|
||||||
<input type="email" placeholder="Enter your email" class="flex-1 px-4 sm:px-6 py-3.5 sm:py-4 lg:py-5 glass-strong rounded-xl lg:rounded-2xl text-base lg:text-lg outline-none focus:ring-2 focus:ring-brand-500/50 transition-all">
|
|
||||||
<button class="magnetic-btn px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine whitespace-nowrap">
|
|
||||||
Get Started Free
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ═══════════════════ FOOTER ═══════════════════ -->
|
|
||||||
<footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
|
|
||||||
<div class="max-w-7xl mx-auto">
|
|
||||||
<div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
|
|
||||||
<a href="#" class="flex items-center gap-2 sm:gap-3">
|
|
||||||
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
|
|
||||||
<span class="font-black text-base sm:text-lg text-black">ME</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
|
|
||||||
</a>
|
|
||||||
<div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
|
|
||||||
<a href="#features" class="hover:text-white transition-colors">Features</a>
|
|
||||||
<a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
|
|
||||||
<a href="#faq" class="hover:text-white transition-colors">FAQ</a>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<p class="text-xs sm:text-sm text-zinc-600">© 2025 MCPEngage. All rights reserved.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- ═══════════════════ SCRIPTS ═══════════════════ -->
|
|
||||||
<script>
|
|
||||||
lucide.createIcons();
|
|
||||||
document.body.classList.add('js-loaded');
|
|
||||||
|
|
||||||
// --- GSAP ---
|
|
||||||
gsap.registerPlugin(ScrollTrigger);
|
|
||||||
|
|
||||||
gsap.utils.toArray('.reveal-up').forEach(el => {
|
|
||||||
gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
|
|
||||||
scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
|
|
||||||
});
|
|
||||||
});
|
|
||||||
gsap.utils.toArray('.reveal-scale').forEach(el => {
|
|
||||||
gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
|
|
||||||
scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
|
|
||||||
});
|
|
||||||
});
|
|
||||||
gsap.utils.toArray('.stagger-item').forEach((el, i) => {
|
|
||||||
gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
|
|
||||||
scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
|
|
||||||
delay: (i % 4) * 0.1
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Counter animation
|
|
||||||
document.querySelectorAll('.counter').forEach(counter => {
|
|
||||||
const target = parseInt(counter.dataset.target);
|
|
||||||
ScrollTrigger.create({
|
|
||||||
trigger: counter, start:"top 80%",
|
|
||||||
onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
|
|
||||||
once: true
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Navbar scroll
|
|
||||||
const navbar = document.getElementById('navbar');
|
|
||||||
ScrollTrigger.create({
|
|
||||||
start:"top -80",
|
|
||||||
onUpdate: self => {
|
|
||||||
if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
|
|
||||||
else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- CHAT DEMO (scroll-triggered, like CRESync) ---
|
|
||||||
const chatDemo = document.getElementById('chat-demo');
|
|
||||||
const ticketAppEmbed = `
|
|
||||||
<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;">
|
|
||||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(23,195,178,0.05);">
|
|
||||||
<div style="display:flex;align-items:center;gap:8px;">
|
|
||||||
<div style="width:6px;height:6px;border-radius:50%;background:#17c3b2;"></div>
|
|
||||||
<span style="font-size:11px;font-weight:700;color:#17c3b2;text-transform:uppercase;letter-spacing:0.5px;">Urgent Enterprise Tickets</span>
|
|
||||||
</div>
|
|
||||||
<span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">3 results</span>
|
|
||||||
</div>
|
|
||||||
<div style="padding:0;">
|
|
||||||
<div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.03)'" onmouseout="this.style.background='transparent'">
|
|
||||||
<div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;">
|
|
||||||
<span style="font-size:10px;font-weight:800;color:#ef4444;">!</span>
|
|
||||||
</div>
|
|
||||||
<div style="flex:1;min-width:0;">
|
|
||||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;">
|
|
||||||
<span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4821</span>
|
|
||||||
<span style="font-size:10px;color:rgba(255,255,255,0.4);">Login Issue — SSO Failure</span>
|
|
||||||
</div>
|
|
||||||
<div style="display:flex;align-items:center;gap:6px;">
|
|
||||||
<span style="font-size:10px;color:rgba(255,255,255,0.3);">Sarah Chen · Acme Corp</span>
|
|
||||||
<span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">SLA 28m</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Urgent</span>
|
|
||||||
</div>
|
|
||||||
<div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.03)'" onmouseout="this.style.background='transparent'">
|
|
||||||
<div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;">
|
|
||||||
<span style="font-size:10px;font-weight:800;color:#f59e0b;">▲</span>
|
|
||||||
</div>
|
|
||||||
<div style="flex:1;min-width:0;">
|
|
||||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;">
|
|
||||||
<span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4819</span>
|
|
||||||
<span style="font-size:10px;color:rgba(255,255,255,0.4);">API Rate Limiting</span>
|
|
||||||
</div>
|
|
||||||
<div style="display:flex;align-items:center;gap:6px;">
|
|
||||||
<span style="font-size:10px;color:rgba(255,255,255,0.3);">James Park · TechFlow Inc</span>
|
|
||||||
<span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">SLA 1h 12m</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(245,158,11,0.15);color:#fbbf24;text-transform:uppercase;">High</span>
|
|
||||||
</div>
|
|
||||||
<div style="display:flex;align-items:center;gap:10px;padding:10px 14px;transition:background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.03)'" onmouseout="this.style.background='transparent'">
|
|
||||||
<div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;">
|
|
||||||
<span style="font-size:10px;font-weight:800;color:#ef4444;">!</span>
|
|
||||||
</div>
|
|
||||||
<div style="flex:1;min-width:0;">
|
|
||||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;">
|
|
||||||
<span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4815</span>
|
|
||||||
<span style="font-size:10px;color:rgba(255,255,255,0.4);">Data Export Timeout</span>
|
|
||||||
</div>
|
|
||||||
<div style="display:flex;align-items:center;gap:6px;">
|
|
||||||
<span style="font-size:10px;color:rgba(255,255,255,0.3);">Maria Lopez · GlobalShip</span>
|
|
||||||
<span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">SLA 45m</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(239,68,68,0.15);color:#f87171;text-transform:uppercase;">Urgent</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;">
|
|
||||||
<span style="font-size:10px;color:rgba(255,255,255,0.25);">Ticket #4821 is closest to SLA breach</span>
|
|
||||||
<span style="font-size:10px;color:#17c3b2;cursor:pointer;">Open in Zendesk →</span>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
const draftAppEmbed = `
|
|
||||||
<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;">
|
|
||||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);">
|
|
||||||
<div style="display:flex;align-items:center;gap:8px;">
|
|
||||||
<div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div>
|
|
||||||
<span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Actions Completed</span>
|
|
||||||
</div>
|
|
||||||
<span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 of 2</span>
|
|
||||||
</div>
|
|
||||||
<div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);">
|
|
||||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
|
|
||||||
<div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;">
|
|
||||||
<span style="font-size:11px;color:#22c55e;">✓</span>
|
|
||||||
</div>
|
|
||||||
<span style="font-size:12px;font-weight:600;color:#e4e4e7;">Reply drafted for #4821</span>
|
|
||||||
</div>
|
|
||||||
<div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;font-style:italic;">
|
|
||||||
"Hi Sarah, I've looked into the SSO failure you reported. Our team identified a certificate rotation issue affecting your IdP connection. I've refreshed the SAML metadata on our end — could you try logging in again? If the issue persists..."
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="padding:10px 14px;">
|
|
||||||
<div style="display:flex;align-items:center;gap:8px;">
|
|
||||||
<div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;">
|
|
||||||
<span style="font-size:11px;color:#22c55e;">✓</span>
|
|
||||||
</div>
|
|
||||||
<span style="font-size:12px;font-weight:600;color:#e4e4e7;">#4819 escalated to Tier 2</span>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top:6px;margin-left:28px;display:flex;gap:6px;flex-wrap:wrap;">
|
|
||||||
<span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Tier 2</span>
|
|
||||||
<span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Context attached</span>
|
|
||||||
<span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Priority: High</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
const messages = [
|
|
||||||
{ type:'user', text:'Show me all urgent tickets from enterprise customers' },
|
|
||||||
{ type:'ai', text:'Found 3 urgent enterprise tickets:', embed: ticketAppEmbed },
|
|
||||||
{ type:'user', text:'Draft a reply for #4821 and escalate #4819 to tier 2' },
|
|
||||||
{ type:'ai', text:'Done! Here\'s what I did:', embed: draftAppEmbed }
|
|
||||||
];
|
|
||||||
function createMessage(msg){
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
|
|
||||||
div.style.opacity='0'; div.style.transform='translateY(15px)';
|
|
||||||
if(msg.type==='user'){
|
|
||||||
div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
|
|
||||||
} else {
|
|
||||||
const embedHtml = msg.embed || '';
|
|
||||||
div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
|
|
||||||
}
|
|
||||||
return div;
|
|
||||||
}
|
|
||||||
let chatAnimated = false;
|
|
||||||
ScrollTrigger.create({
|
|
||||||
trigger: chatDemo, start:"top 75%",
|
|
||||||
onEnter: () => {
|
|
||||||
if(chatAnimated) return; chatAnimated = true;
|
|
||||||
messages.forEach((msg,i) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
const el = createMessage(msg);
|
|
||||||
chatDemo.appendChild(el);
|
|
||||||
lucide.createIcons();
|
|
||||||
gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
|
|
||||||
chatDemo.scrollTop = chatDemo.scrollHeight;
|
|
||||||
}, i*1200);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
once: true
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- TERMINAL TYPING ANIMATION ---
|
|
||||||
const termLines = [
|
|
||||||
{ text:'$ npx mcpengage init', color:'text-white', delay:0 },
|
|
||||||
{ text:'', color:'', delay:600 },
|
|
||||||
{ text:'? Select your platform: Zendesk', color:'text-cyan-400', delay:1200 },
|
|
||||||
{ text:'', color:'', delay:1600 },
|
|
||||||
{ text:' Connecting to Zendesk API...', color:'text-zinc-500', delay:2000 },
|
|
||||||
{ text:'✓ Connected to Zendesk API', color:'text-green-400', delay:3000 },
|
|
||||||
{ text:'✓ 50 tools loaded', color:'text-green-400', delay:3600 },
|
|
||||||
{ text:'✓ Ready! Ask your AI anything about Zendesk', color:'text-green-400', delay:4200 },
|
|
||||||
];
|
|
||||||
const termContainer = document.getElementById('terminal-lines');
|
|
||||||
let termAnimated = false;
|
|
||||||
|
|
||||||
function typeTermLine(lineEl, text, speed=30) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
let idx = 0;
|
|
||||||
const cursor = document.createElement('span');
|
|
||||||
cursor.className = 'terminal-cursor';
|
|
||||||
lineEl.appendChild(cursor);
|
|
||||||
function tick() {
|
|
||||||
if(idx < text.length) {
|
|
||||||
lineEl.insertBefore(document.createTextNode(text[idx]), cursor);
|
|
||||||
idx++;
|
|
||||||
setTimeout(tick, speed);
|
|
||||||
} else {
|
|
||||||
cursor.remove();
|
|
||||||
resolve();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tick();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ScrollTrigger.create({
|
|
||||||
trigger: termContainer, start:"top 80%",
|
|
||||||
onEnter: async () => {
|
|
||||||
if(termAnimated) return; termAnimated = true;
|
|
||||||
for(const line of termLines) {
|
|
||||||
await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
|
|
||||||
const lineEl = document.createElement('div');
|
|
||||||
lineEl.className = line.color || 'text-white';
|
|
||||||
termContainer.appendChild(lineEl);
|
|
||||||
if(line.text) {
|
|
||||||
await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Add blinking cursor at end
|
|
||||||
const finalCursor = document.createElement('div');
|
|
||||||
finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
|
|
||||||
termContainer.appendChild(finalCursor);
|
|
||||||
},
|
|
||||||
once: true
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- FAQ ACCORDION ---
|
|
||||||
function toggleFaq(btn) {
|
|
||||||
const item = btn.closest('.faq-item');
|
|
||||||
const wasOpen = item.classList.contains('open');
|
|
||||||
// Close all
|
|
||||||
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
|
|
||||||
// Toggle clicked
|
|
||||||
if(!wasOpen) item.classList.add('open');
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- MAGNETIC BUTTONS (desktop) ---
|
|
||||||
if(window.innerWidth >= 1024) {
|
|
||||||
document.querySelectorAll('.magnetic-btn').forEach(btn => {
|
|
||||||
btn.addEventListener('mousemove', e => {
|
|
||||||
const rect = btn.getBoundingClientRect();
|
|
||||||
const x = e.clientX - rect.left - rect.width/2;
|
|
||||||
const y = e.clientY - rect.top - rect.height/2;
|
|
||||||
btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
|
|
||||||
});
|
|
||||||
btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user