Compare commits
10 Commits
22a2a74443
...
db816d5d5e
| Author | SHA1 | Date | |
|---|---|---|---|
|
db816d5d5e | ||
|
|
5dff17109d | ||
|
|
1d8eb60f04 | ||
|
|
962e544f42 | ||
|
|
22131a8fd2 | ||
|
|
3c7de8a7d8 | ||
|
|
c82d939e84 | ||
|
|
7b01d72f58 | ||
|
|
5c5f772910 | ||
|
|
e1027bab97 |
File diff suppressed because it is too large
Load Diff
878
acuity-scheduling/index.html
Normal file
878
acuity-scheduling/index.html
Normal file
@ -0,0 +1,878 @@
|
||||
<!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 Acuity Scheduling — AI-Power Your Acuity in 2 Clicks</title>
|
||||
<meta name="description" content="Connect Acuity Scheduling to any AI model with MCPEngage. Manage appointments, calendars, and clients 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>
|
||||
.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-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-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">Join Waitlist</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">
|
||||
<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 Acuity + AI
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Acuity Scheduling</span>
|
||||
<span class="block">in 2 Clicks</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<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 Acuity to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage appointments, track availability, and serve clients — all through conversation.</span>
|
||||
</p>
|
||||
|
||||
<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>Join Waitlist</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>
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/acuity-scheduling" target="_blank" rel="noopener" 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="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
||||
</div>
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
</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">
|
||||
<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/acuity-scheduling
|
||||
</div>
|
||||
<div class="w-16 sm:w-20"></div>
|
||||
</div>
|
||||
|
||||
<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 transition-colors">
|
||||
<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="calendar" 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="clock" 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 today's appointments..." 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 -->
|
||||
<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="calendar" class="w-4 h-4"></i>
|
||||
Appointments
|
||||
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">14</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="users" class="w-4 h-4"></i>
|
||||
Clients
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
|
||||
|
||||
<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">Sarah Johnson — Consultation</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Today 2:00 PM • 60 min</p>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Confirmed</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">In 2 hrs</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">New client</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">Mike Chen — Follow-up</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Today 4:30 PM • 30 min</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">Confirmed</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">In 4.5 hrs</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">Returning</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">Lisa Park — Strategy Session</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Tomorrow 10:00 AM • 90 min</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">Pending</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">Awaiting confirm</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">VIP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="49">0</span>+</div>
|
||||
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Acuity 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 Scheduler</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">
|
||||
<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>
|
||||
<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 class="mt-6 sm:mt-8 text-center reveal-up">
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/acuity-scheduling" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
|
||||
<i data-lucide="github" class="w-5 h-5"></i>
|
||||
<span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
|
||||
<i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
|
||||
</a>
|
||||
</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">
|
||||
<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 schedule checking</p><p class="text-xs sm:text-sm text-zinc-500">Looking at your calendar means logging into Acuity and clicking through day/week/month views</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">No-show chaos</p><p class="text-xs sm:text-sm text-zinc-500">Clients ghost appointments, you lose revenue, and you only know after sitting there waiting</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">Client history buried</p><p class="text-xs sm:text-sm text-zinc-500">Past appointments, notes, and preferences scattered across client records</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">Availability guesswork</p><p class="text-xs sm:text-sm text-zinc-500">Can't quickly see when you're free or when peak booking times are</p></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
<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">Voice schedule access</p><p class="text-xs sm:text-sm text-zinc-500">"What's on my calendar today?" — instant list without logging in</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">Smart no-show alerts</p><p class="text-xs sm:text-sm text-zinc-500">AI flags at-risk appointments and auto-sends reminders to reduce no-shows</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">Unified client intel</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Show me Sarah's appointment history" — full context in seconds</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">Real-time availability</p><p class="text-xs sm:text-sm text-zinc-500">"When's my next opening this week?" — AI scans calendar and responds instantly</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 Calendar Is<br><span class="text-red-400">Losing You Money</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">
|
||||
Acuity books your appointments, but no-shows, gaps, and admin work are eating your billable hours.
|
||||
</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="dollar-sign" 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">No-Show Revenue Drain</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">10-20% of appointments no-show or cancel last-minute. That's thousands in lost revenue because your reminder game is weak and you're not rebooking fast enough.</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="clock" 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">Schedule Gap Waste</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have 30-minute gaps between appointments that could be filled but aren't. Your utilization is 60% when it should be 85%, and you're leaving money on the table daily.</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="alert-circle" 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">Client Context Loss</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You walk into appointments cold because digging through Acuity notes takes too long. Clients feel like strangers, repeat the same info, and wonder if you care.</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 Scheduling</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 Acuity</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Acuity API credentials. MCPEngage discovers appointments, clients, calendars, and availability — building 49+ tools automatically. No technical skills needed.</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">"Who's my next appointment?" "Block off Friday afternoon." "Show me clients who haven't booked in 60 days." Your AI understands Acuity and acts instantly.</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 Your Practice</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: send appointment summaries every morning, flag no-show risks, generate weekly revenue reports, and sync Acuity to your CRM or billing software.</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 Acuity</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">
|
||||
49+ Acuity 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="calendar" 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">Appointment Management</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">View, create, reschedule, and cancel appointments through conversation. "Move tomorrow's 2pm to Thursday 3pm."</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="users" 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">Client Intelligence</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Track appointment history, preferences, and notes. "Show me all clients who booked a consultation."</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="clock" 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">Availability Optimization</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Monitor open slots, peak times, and booking patterns. "When am I most booked this month?"</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="bell" 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">Smart Reminders</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Auto-send confirmations and reduce no-shows. "Send reminder to all appointments tomorrow."</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="trending-up" 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">Revenue Analytics</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Track bookings, cancellations, and revenue trends. "What's my show rate for the last 30 days?"</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="calendar-check" 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">Schedule Automation</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Auto-generate daily appointment lists, client prep sheets, and utilization reports. "Send me my schedule every morning at 7am."</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. MCPEngage uses MCP to give your AI real-time read/write access to Acuity Scheduling.
|
||||
</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 Acuity?</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 an Acuity API User ID and Key (generated in Acuity Settings > Integrations > API). MCPEngage uses the Acuity API to create 49+ tools covering appointments, clients, and calendars. 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">Will it mess up my Acuity data?</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">
|
||||
No. MCPEngage uses Acuity's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in Acuity's activity history.
|
||||
</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 it sync with my CRM or billing software?</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! Connect Acuity + HubSpot, Stripe, QuickBooks, or any other MCP-enabled platform. Have AI sync appointments, client data, and payments automatically — no manual exports.
|
||||
</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. Multi-calendar and team plans 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 Google Calendar, Zoom, Slack, and more. Each platform gets its own MCP server. 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 Acuity<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 professionals using MCPEngage to supercharge their Acuity scheduling.
|
||||
</p>
|
||||
<form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
|
||||
<div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
|
||||
<div class="flex gap-3">
|
||||
<input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
|
||||
Join Waitlist
|
||||
</button>
|
||||
<p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
|
||||
</form>
|
||||
<div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
|
||||
<div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-brand-500/20 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-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Acuity Scheduling is ready.</p>
|
||||
</div>
|
||||
</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="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" 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.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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
const chatDemo = document.getElementById('chat-demo');
|
||||
const embed_1 = `<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(59,130,246,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#3b82f6;"></div><span style="font-size:11px;font-weight:700;color:#60a5fa;text-transform:uppercase;letter-spacing:0.5px;">Today's Schedule</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">3 appointments</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);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:9px;font-weight:800;color:#22c55e;">2PM</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;">Sarah Johnson</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Confirmed</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Consultation · 60 min · New client</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:8px;font-weight:800;color:#3b82f6;">4:30</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;">Mike Chen</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Confirmed</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Follow-up · 30 min · Returning</span></div></div></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);">Utilization: 75% · Next open slot: Tomorrow 9am</span></div></div>`;
|
||||
const embed_3 = `<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;">Reminders Sent</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">4 clients</span></div><div style="padding:10px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:8px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;">✓ Lisa Park — 10:00 AM (Strategy Session)</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Email & SMS sent · Confirmation link included</div></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;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;">✓ Tom Wilson — 2:00 PM (Consultation)</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Email sent · Calendar invite attached</div></div></div></div>`;
|
||||
|
||||
const messages = [
|
||||
{ type:'user', text:'What\'s on my calendar today?' },
|
||||
{ type:'ai', text:'You have 3 appointments today:', embed: embed_1 },
|
||||
{ type:'user', text:'Send reminders to all appointments tomorrow' },
|
||||
{ type:'ai', text:'Done! Reminders sent to 4 clients:', embed: embed_3 },
|
||||
];
|
||||
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
|
||||
const termLines = [
|
||||
{ text:'$ npx mcpengage init', color:'text-white', delay:0 },
|
||||
{ text:'', color:'text-white', delay:600 },
|
||||
{ text:'? Select your platform: Acuity Scheduling', color:'text-cyan-400', delay:1200 },
|
||||
{ text:'', color:'text-white', delay:1600 },
|
||||
{ text:' Connecting to Acuity API...', color:'text-zinc-500', delay:2000 },
|
||||
{ text:'✓ Connected to Acuity API', color:'text-green-400', delay:3000 },
|
||||
{ text:'✓ 49 tools loaded', color:'text-green-400', delay:3600 },
|
||||
{ text:'✓ Ready! Ask your AI anything about Acuity', 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); }
|
||||
}
|
||||
const finalCursor = document.createElement('div');
|
||||
finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
|
||||
termContainer.appendChild(finalCursor);
|
||||
},
|
||||
once: true
|
||||
});
|
||||
|
||||
// FAQ
|
||||
function toggleFaq(btn) {
|
||||
const item = btn.closest('.faq-item');
|
||||
const wasOpen = item.classList.contains('open');
|
||||
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
|
||||
if(!wasOpen) item.classList.add('open');
|
||||
}
|
||||
|
||||
// WAITLIST FORM → GoHighLevel
|
||||
async function submitWaitlist(e) {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('wl-btn');
|
||||
const status = document.getElementById('wl-status');
|
||||
const form = document.getElementById('waitlist-form');
|
||||
const success = document.getElementById('wl-success');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Joining...';
|
||||
status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Adding you to the waitlist...';
|
||||
|
||||
const firstName = document.getElementById('wl-first').value.trim();
|
||||
const lastName = document.getElementById('wl-last').value.trim();
|
||||
const phone = document.getElementById('wl-phone').value.trim();
|
||||
const email = document.getElementById('wl-email').value.trim();
|
||||
const platformName = 'Acuity Scheduling';
|
||||
|
||||
try {
|
||||
const body = {
|
||||
firstName,
|
||||
lastName,
|
||||
phone,
|
||||
tags: ['MCP waitlist', platformName],
|
||||
source: 'MCPEngage Waitlist — ' + platformName
|
||||
};
|
||||
if (email) body.email = email;
|
||||
if (!body.name) body.name = firstName + ' ' + lastName;
|
||||
|
||||
const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
if (res.ok || res.status === 200 || res.status === 201) {
|
||||
form.classList.add('hidden');
|
||||
success.classList.remove('hidden');
|
||||
lucide.createIcons();
|
||||
} else {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.message || 'Server error');
|
||||
}
|
||||
} catch (err) {
|
||||
status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Something went wrong. Please try again.';
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Join Waitlist';
|
||||
console.error('Waitlist error:', err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// MAGNETIC BUTTONS
|
||||
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>
|
||||
@ -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>
|
||||
1058
airtable/index.html
1058
airtable/index.html
File diff suppressed because it is too large
Load Diff
1058
apollo/index.html
1058
apollo/index.html
File diff suppressed because it is too large
Load Diff
1058
asana/index.html
1058
asana/index.html
File diff suppressed because one or more lines are too long
1373
bamboohr/index.html
1373
bamboohr/index.html
File diff suppressed because it is too large
Load Diff
1317
basecamp/index.html
1317
basecamp/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1354
brevo/index.html
1354
brevo/index.html
File diff suppressed because it is too large
Load Diff
1288
calendly/index.html
1288
calendly/index.html
File diff suppressed because it is too large
Load Diff
1058
chargebee/index.html
1058
chargebee/index.html
File diff suppressed because it is too large
Load Diff
1341
clickup/index.html
1341
clickup/index.html
File diff suppressed because it is too large
Load Diff
878
close/index.html
Normal file
878
close/index.html
Normal file
File diff suppressed because one or more lines are too long
1058
closebot/index.html
1058
closebot/index.html
File diff suppressed because one or more lines are too long
@ -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>
|
||||
1337
clover/index.html
1337
clover/index.html
File diff suppressed because one or more lines are too long
865
competitor-research/index.html
Normal file
865
competitor-research/index.html
Normal file
@ -0,0 +1,865 @@
|
||||
<!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 Competitor Research — AI-Power Your Market Intel in 2 Clicks</title>
|
||||
<meta name="description" content="Connect Competitor Research tools to any AI model with MCPEngage. Track competitors, analyze markets, and monitor trends 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>
|
||||
.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-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-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">Join Waitlist</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">
|
||||
<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 Research + AI
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Competitor Research</span>
|
||||
<span class="block">in 2 Clicks</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<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 market research tools to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Track competitors, analyze markets, and monitor trends — all through conversation.</span>
|
||||
</p>
|
||||
|
||||
<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>Join Waitlist</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>
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/competitor-research" target="_blank" rel="noopener" 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="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
||||
</div>
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
</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">
|
||||
<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/competitor-research
|
||||
</div>
|
||||
<div class="w-16 sm:w-20"></div>
|
||||
</div>
|
||||
|
||||
<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 transition-colors">
|
||||
<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="search" 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="trending-up" 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="target" 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 competitors..." 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 -->
|
||||
<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="target" class="w-4 h-4"></i>
|
||||
Tracked
|
||||
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">14</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="bell" class="w-4 h-4"></i>
|
||||
Alerts
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
|
||||
|
||||
<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">TechCorp — Product Launch</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">2 days ago • Enterprise SaaS</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">High Impact</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">New pricing</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">3 features</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">CompeteFlow — Funding Round</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">1 week ago • Series B $45M</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">Watch</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">Expansion</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">4 markets</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="38">0</span>+</div>
|
||||
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Research 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 Monitoring</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">
|
||||
<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>
|
||||
<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 class="mt-6 sm:mt-8 text-center reveal-up">
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/competitor-research" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
|
||||
<i data-lucide="github" class="w-5 h-5"></i>
|
||||
<span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
|
||||
<i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
|
||||
</a>
|
||||
</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">
|
||||
<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 monitoring</p><p class="text-xs sm:text-sm text-zinc-500">Check competitor websites, LinkedIn, and press releases daily for product updates and pricing changes</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">Spreadsheet chaos</p><p class="text-xs sm:text-sm text-zinc-500">Maintain a Google Sheet with competitor features, pricing tiers, and launch dates — always outdated</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">Missed opportunities</p><p class="text-xs sm:text-sm text-zinc-500">Competitor launches new feature — you find out weeks later from a customer who switched</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">Shallow analysis</p><p class="text-xs sm:text-sm text-zinc-500">"How do we compare?" — you spend hours building feature comparison tables from scratch</p></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
<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">Real-time alerts</p><p class="text-xs sm:text-sm text-zinc-500">"What changed at TechCorp this week?" — AI delivers pricing updates, feature launches, and news</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 comparisons</p><p class="text-xs sm:text-sm text-zinc-500">"Compare our pricing to top 5 competitors" — automated table with features, tiers, and gaps</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">Proactive intel</p><p class="text-xs sm:text-sm text-zinc-500">AI monitors competitor sites, sends alerts when they launch features or change pricing — you react fast</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">Deep market insights</p><p class="text-xs sm:text-sm text-zinc-500">"Which competitor is gaining market share?" — AI analyzes funding, job postings, and product velocity</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 Competitive Intel Is<br><span class="text-red-400">Always Outdated</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">
|
||||
You know competitors matter, but tracking them manually is a full-time job you don't have.
|
||||
</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="search" 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">Manual Surveillance</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You're checking competitor websites, social media, and press releases daily. One person's job is babysitting Google Alerts and praying nothing slips through.</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="file-text" 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">Stale Spreadsheets</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your competitive analysis lives in a Google Sheet that's out of date the moment you close it. Updates require hours of research and manual data entry.</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="alert-triangle" 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">Reactive Strategy</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Competitors launch features, drop prices, or raise funding — and you find out from customers or LinkedIn. By then, you're already behind.</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 Research</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 Sources</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Add competitor domains, RSS feeds, and API keys for research tools (Crunchbase, SimilarWeb, etc.). MCPEngage builds 38+ research tools automatically. No code required.</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">"What did TechCorp launch this month?" "Compare our features to CompeteFlow." "Which competitor raised funding?" Your AI understands market research like a veteran analyst.</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 Intelligence Gathering</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: monitor competitor sites, track pricing changes, flag product launches, analyze funding announcements, and generate weekly reports — 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">Dominate Your Market</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">
|
||||
38+ research 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="search" 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">Competitor Monitoring</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Track websites, product updates, pricing changes, and feature launches. "Show me all changes at TechCorp this month."</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="trending-up" 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">Market Trend Analysis</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Monitor industry trends, emerging technologies, and shifting customer preferences. "What's trending in SaaS?"</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="dollar-sign" 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">Pricing Intelligence</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Track competitor pricing tiers, discounts, and packaging changes. "How does our pricing compare?"</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="briefcase" 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">Funding & Growth Tracking</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Monitor funding rounds, acquisitions, job postings, and expansion signals. "Who raised money this quarter?"</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="file-text" 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">Feature Comparison</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Generate side-by-side feature matrices and gap analyses. "Compare our roadmap to top 3 competitors."</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="bell" 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">Smart Alerts</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Get notified when competitors launch products, change pricing, hire executives, or publish content.</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 access to research tools and data.
|
||||
</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 sources can it monitor?</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 can track competitor websites, RSS feeds, API-based tools (Crunchbase, SimilarWeb, LinkedIn), press releases, social media, job boards, and more. You control which sources to monitor.
|
||||
</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 this legal?</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 monitors publicly available information like websites, press releases, and social media. It does not scrape private data or bypass authentication. Always comply with terms of service.
|
||||
</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 it integrate with existing tools?</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 connects to Crunchbase, SimilarWeb, SEMrush, Ahrefs, Google Analytics, and more. It can also sync findings to Notion, Slack, or your internal dashboards.
|
||||
</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 Slack, Notion, Salesforce, HubSpot, 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 Tracking Competitors<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 businesses using MCPEngage to supercharge their market research.
|
||||
</p>
|
||||
<form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
|
||||
<div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
|
||||
<div class="flex gap-3">
|
||||
<input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
|
||||
Join Waitlist
|
||||
</button>
|
||||
<p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
|
||||
</form>
|
||||
<div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
|
||||
<div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-brand-500/20 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-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Competitor Research is ready.</p>
|
||||
</div>
|
||||
</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="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" 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.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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
const chatDemo = document.getElementById('chat-demo');
|
||||
const embed_1 = `<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(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">TechCorp — 4 Updates</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">High priority</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);"><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;">New AI features launched</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">2 days ago · Product page</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;">Competitive</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><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;">Pricing page updated</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">1 week ago · 15% price drop</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;">Monitor</span></div></div></div></div></div>`;
|
||||
const embed_3 = `<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;">Feature Comparison</span></div></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><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;"><div style="margin-bottom:6px;font-weight:600;color:rgba(255,255,255,0.7);">Your Product vs 2 Competitors</div><div style="font-size:10px;">✅ 12 features ahead · ⚠️ 3 gaps · 📊 Full table exported to Notion</div></div></div><div style="padding:10px 14px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);">Analysis includes pricing, integrations, and roadmap intel</div></div></div>`;
|
||||
|
||||
const messages = [
|
||||
{ type:'user', text:'What updates did TechCorp make in the last 30 days?' },
|
||||
{ type:'ai', text:'TechCorp made 4 significant updates:', embed: embed_1 },
|
||||
{ type:'user', text:'Create a comparison table of our features vs TechCorp and CompeteFlow' },
|
||||
{ type:'ai', text:'Feature comparison generated:', embed: embed_3 },
|
||||
];
|
||||
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
|
||||
const termLines = [
|
||||
{ text:'$ npx mcpengage init', color:'text-white', delay:0 },
|
||||
{ text:'', color:'text-white', delay:600 },
|
||||
{ text:'? Select your platform: Competitor Research', color:'text-cyan-400', delay:1200 },
|
||||
{ text:'', color:'text-white', delay:1600 },
|
||||
{ text:' Connecting to research APIs...', color:'text-zinc-500', delay:2000 },
|
||||
{ text:'✓ Connected to research tools', color:'text-green-400', delay:3000 },
|
||||
{ text:'✓ 38 tools loaded', color:'text-green-400', delay:3600 },
|
||||
{ text:'✓ Ready! Ask your AI anything about competitors', 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); }
|
||||
}
|
||||
const finalCursor = document.createElement('div');
|
||||
finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
|
||||
termContainer.appendChild(finalCursor);
|
||||
},
|
||||
once: true
|
||||
});
|
||||
|
||||
// FAQ
|
||||
function toggleFaq(btn) {
|
||||
const item = btn.closest('.faq-item');
|
||||
const wasOpen = item.classList.contains('open');
|
||||
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
|
||||
if(!wasOpen) item.classList.add('open');
|
||||
}
|
||||
|
||||
// WAITLIST FORM → GoHighLevel
|
||||
async function submitWaitlist(e) {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('wl-btn');
|
||||
const status = document.getElementById('wl-status');
|
||||
const form = document.getElementById('waitlist-form');
|
||||
const success = document.getElementById('wl-success');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Joining...';
|
||||
status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Adding you to the waitlist...';
|
||||
|
||||
const firstName = document.getElementById('wl-first').value.trim();
|
||||
const lastName = document.getElementById('wl-last').value.trim();
|
||||
const phone = document.getElementById('wl-phone').value.trim();
|
||||
const email = document.getElementById('wl-email').value.trim();
|
||||
const platformName = 'Competitor Research';
|
||||
|
||||
try {
|
||||
const body = {
|
||||
firstName,
|
||||
lastName,
|
||||
phone,
|
||||
tags: ['MCP waitlist', platformName],
|
||||
source: 'MCPEngage Waitlist — ' + platformName
|
||||
};
|
||||
if (email) body.email = email;
|
||||
if (!body.name) body.name = firstName + ' ' + lastName;
|
||||
|
||||
const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
if (res.ok || res.status === 200 || res.status === 201) {
|
||||
form.classList.add('hidden');
|
||||
success.classList.remove('hidden');
|
||||
lucide.createIcons();
|
||||
} else {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.message || 'Server error');
|
||||
}
|
||||
} catch (err) {
|
||||
status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Something went wrong. Please try again.';
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Join Waitlist';
|
||||
console.error('Waitlist error:', err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// MAGNETIC BUTTONS
|
||||
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>
|
||||
865
compliance-grc/index.html
Normal file
865
compliance-grc/index.html
Normal file
@ -0,0 +1,865 @@
|
||||
<!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 Compliance GRC — AI-Power Your Compliance in 2 Clicks</title>
|
||||
<meta name="description" content="Connect Compliance GRC tools to any AI model with MCPEngage. Manage controls, risks, policies, and audits 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>
|
||||
.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-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-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">Join Waitlist</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">
|
||||
<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 GRC + AI
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Compliance GRC</span>
|
||||
<span class="block">in 2 Clicks</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<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 GRC platforms to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage controls, track risks, and handle audits — all through conversation.</span>
|
||||
</p>
|
||||
|
||||
<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>Join Waitlist</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>
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/compliance-grc" target="_blank" rel="noopener" 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="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
||||
</div>
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
</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">
|
||||
<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/compliance-grc
|
||||
</div>
|
||||
<div class="w-16 sm:w-20"></div>
|
||||
</div>
|
||||
|
||||
<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 transition-colors">
|
||||
<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="shield" 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="alert-triangle" 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="file-text" 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 compliance status..." 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 -->
|
||||
<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="shield" class="w-4 h-4"></i>
|
||||
Controls
|
||||
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">142</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="alert-triangle" class="w-4 h-4"></i>
|
||||
Risks
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
|
||||
|
||||
<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">Access Control Review</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Due in 5 days • SOC 2 requirement</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">Overdue</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">Critical</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">IT dept</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">Data Encryption Policy</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Reviewed 2 days ago • Approved</p>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Compliant</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">SOC 2</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">Security</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="45">0</span>+</div>
|
||||
<div class="text-xs sm:text-sm text-zinc-500 font-medium">GRC 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 Compliance</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">
|
||||
<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>
|
||||
<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 class="mt-6 sm:mt-8 text-center reveal-up">
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/compliance-grc" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
|
||||
<i data-lucide="github" class="w-5 h-5"></i>
|
||||
<span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
|
||||
<i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
|
||||
</a>
|
||||
</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">
|
||||
<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">Spreadsheet audits</p><p class="text-xs sm:text-sm text-zinc-500">Track 200+ controls across SOC 2, GDPR, and HIPAA in Excel — version conflicts everywhere</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">Manual evidence collection</p><p class="text-xs sm:text-sm text-zinc-500">Auditor asks for access logs — you spend 3 hours exporting from 5 different 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">Risk assessment chaos</p><p class="text-xs sm:text-sm text-zinc-500">Quarterly risk reviews require collecting input from 12 departments via email threads</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">Policy update hell</p><p class="text-xs sm:text-sm text-zinc-500">Update password policy — must manually notify teams, track acknowledgments, update docs</p></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
<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">Real-time compliance view</p><p class="text-xs sm:text-sm text-zinc-500">"Show me all overdue SOC 2 controls" — instant list with owners, due dates, and evidence gaps</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">Automated evidence</p><p class="text-xs sm:text-sm text-zinc-500">"Pull access logs for Q4 audit" — AI collects from AWS, Okta, GitHub, formats for auditors</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">Smart risk tracking</p><p class="text-xs sm:text-sm text-zinc-500">"What are our top 5 risks?" — AI scores by likelihood + impact, surfaces mitigation status</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">Policy automation</p><p class="text-xs sm:text-sm text-zinc-500">"Update MFA policy and notify all employees" — AI updates docs, sends emails, tracks reads</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 Compliance Program Is<br><span class="text-red-400">Drowning in Spreadsheets</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">
|
||||
You're compliant on paper, but proving it to auditors is a nightmare of manual work.
|
||||
</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="shield" 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">Control Chaos</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You're tracking 100+ controls across SOC 2, ISO 27001, and GDPR. Each control has owners, evidence, and testing schedules — all managed in spreadsheets that break constantly.</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="alert-triangle" 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">Risk Blindness</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your risk register is a static document updated quarterly. By the time you score a new risk, the business has already changed. You're always reactive, never proactive.</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="file-text" 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">Audit Nightmares</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Auditors request evidence for 50 controls. You spend weeks hunting down screenshots, logs, and policy docs from Slack, Notion, and five different SaaS tools. Every audit is chaos.</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 GRC</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 GRC Platform</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste API credentials from your GRC tool (Vanta, Drata, OneTrust, etc.). MCPEngage discovers all controls, risks, policies, and evidence — building 45+ tools automatically. No code required.</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 overdue SOC 2 controls." "What's our highest-priority risk?" "Pull Q4 audit evidence." Your AI understands compliance like a veteran GRC analyst.</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 Compliance Ops</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: collect evidence, track control testing, monitor risks, send policy updates, generate audit reports, and flag gaps — 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">Dominate Compliance</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">
|
||||
45+ GRC 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="shield" 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">Control Management</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Track, test, and monitor controls across frameworks. "Show me all critical controls due this month."</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="alert-triangle" 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">Risk Intelligence</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Score, prioritize, and mitigate risks with AI-assisted analysis. "What are our top cyber risks?"</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="file-text" 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">Policy Automation</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Draft, update, distribute, and track policy acknowledgments. "Send updated security policy to all employees."</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="search" 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">Evidence Collection</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Automatically gather audit evidence from integrated systems. "Pull access logs for SOC 2."</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" 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">Audit Reporting</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Generate compliance reports, status dashboards, and readiness assessments 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="bell" 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">Smart Alerts</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Get notified about overdue controls, high-priority risks, and upcoming audit deadlines.</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 access to GRC platforms.
|
||||
</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">Which GRC platforms 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">
|
||||
MCPEngage integrates with Vanta, Drata, OneTrust, LogicGate, and other major GRC tools. It can also work with custom compliance databases via API.
|
||||
</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 compliance 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 infrastructure — compliance data never passes through our servers. API keys are encrypted at rest. You control all access permissions.
|
||||
</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 it help with multiple frameworks?</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 SOC 2, ISO 27001, GDPR, HIPAA, PCI-DSS, and custom frameworks. It maps controls across frameworks to reduce duplication.
|
||||
</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 Slack, Jira, AWS, Okta, 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 Compliance<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 businesses using MCPEngage to supercharge their GRC programs.
|
||||
</p>
|
||||
<form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
|
||||
<div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
|
||||
<div class="flex gap-3">
|
||||
<input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
|
||||
Join Waitlist
|
||||
</button>
|
||||
<p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
|
||||
</form>
|
||||
<div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
|
||||
<div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-brand-500/20 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-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Compliance GRC is ready.</p>
|
||||
</div>
|
||||
</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="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" 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.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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
const chatDemo = document.getElementById('chat-demo');
|
||||
const embed_1 = `<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(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Overdue Controls — Action Required</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">4 controls</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);"><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;">Access Control Review</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">CC6.1 · Due 5 days ago</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;">Critical</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><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;">Vendor Risk Assessment</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">CC9.2 · Due 2 days ago</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;">High</span></div></div></div></div></div>`;
|
||||
const embed_3 = `<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;">Control Updated</span></div></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;">Access Control Review (CC6.1)</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;"><div style="margin-bottom:6px;">Assigned to: <span style="color:#22c55e;font-weight:600;">Sarah Johnson</span></div><div style="font-size:10px;opacity:0.7;">New due date: Friday, Dec 20 · Notification sent</div></div></div><div style="padding:10px 14px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);">Control status updated in GRC platform</div></div></div>`;
|
||||
|
||||
const messages = [
|
||||
{ type:'user', text:'Show me all overdue SOC 2 controls' },
|
||||
{ type:'ai', text:'You have 4 overdue SOC 2 controls:', embed: embed_1 },
|
||||
{ type:'user', text:'Assign the access control review to Sarah and set due date to next Friday' },
|
||||
{ type:'ai', text:'Control updated and assigned:', embed: embed_3 },
|
||||
];
|
||||
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
|
||||
const termLines = [
|
||||
{ text:'$ npx mcpengage init', color:'text-white', delay:0 },
|
||||
{ text:'', color:'text-white', delay:600 },
|
||||
{ text:'? Select your platform: Compliance GRC', color:'text-cyan-400', delay:1200 },
|
||||
{ text:'', color:'text-white', delay:1600 },
|
||||
{ text:' Connecting to GRC platform...', color:'text-zinc-500', delay:2000 },
|
||||
{ text:'✓ Connected to GRC tools', color:'text-green-400', delay:3000 },
|
||||
{ text:'✓ 45 tools loaded', color:'text-green-400', delay:3600 },
|
||||
{ text:'✓ Ready! Ask your AI anything about compliance', 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); }
|
||||
}
|
||||
const finalCursor = document.createElement('div');
|
||||
finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
|
||||
termContainer.appendChild(finalCursor);
|
||||
},
|
||||
once: true
|
||||
});
|
||||
|
||||
// FAQ
|
||||
function toggleFaq(btn) {
|
||||
const item = btn.closest('.faq-item');
|
||||
const wasOpen = item.classList.contains('open');
|
||||
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
|
||||
if(!wasOpen) item.classList.add('open');
|
||||
}
|
||||
|
||||
// WAITLIST FORM → GoHighLevel
|
||||
async function submitWaitlist(e) {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('wl-btn');
|
||||
const status = document.getElementById('wl-status');
|
||||
const form = document.getElementById('waitlist-form');
|
||||
const success = document.getElementById('wl-success');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Joining...';
|
||||
status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Adding you to the waitlist...';
|
||||
|
||||
const firstName = document.getElementById('wl-first').value.trim();
|
||||
const lastName = document.getElementById('wl-last').value.trim();
|
||||
const phone = document.getElementById('wl-phone').value.trim();
|
||||
const email = document.getElementById('wl-email').value.trim();
|
||||
const platformName = 'Compliance GRC';
|
||||
|
||||
try {
|
||||
const body = {
|
||||
firstName,
|
||||
lastName,
|
||||
phone,
|
||||
tags: ['MCP waitlist', platformName],
|
||||
source: 'MCPEngage Waitlist — ' + platformName
|
||||
};
|
||||
if (email) body.email = email;
|
||||
if (!body.name) body.name = firstName + ' ' + lastName;
|
||||
|
||||
const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
if (res.ok || res.status === 200 || res.status === 201) {
|
||||
form.classList.add('hidden');
|
||||
success.classList.remove('hidden');
|
||||
lucide.createIcons();
|
||||
} else {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.message || 'Server error');
|
||||
}
|
||||
} catch (err) {
|
||||
status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Something went wrong. Please try again.';
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Join Waitlist';
|
||||
console.error('Waitlist error:', err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// MAGNETIC BUTTONS
|
||||
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>
|
||||
878
constant-contact/index.html
Normal file
878
constant-contact/index.html
Normal file
@ -0,0 +1,878 @@
|
||||
<!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 Constant Contact — AI-Power Your Constant Contact in 2 Clicks</title>
|
||||
<meta name="description" content="Connect Constant Contact to any AI model with MCPEngage. Manage campaigns, automate email sequences, segment contacts 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>
|
||||
.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-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-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">Join Waitlist</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">
|
||||
<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 Constant Contact + AI
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Constant Contact</span>
|
||||
<span class="block">in 2 Clicks</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<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 Constant Contact to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Create campaigns, manage contacts, analyze performance — all through conversation.</span>
|
||||
</p>
|
||||
|
||||
<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>Join Waitlist</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>
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/constant-contact" target="_blank" rel="noopener" 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="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
||||
</div>
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
</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">
|
||||
<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/constant-contact
|
||||
</div>
|
||||
<div class="w-16 sm:w-20"></div>
|
||||
</div>
|
||||
|
||||
<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 transition-colors">
|
||||
<i data-lucide="mail" 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="list" 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 Constant Contact campaigns..." 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 -->
|
||||
<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="mail" class="w-4 h-4"></i>
|
||||
Campaigns
|
||||
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">8</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="list" class="w-4 h-4"></i>
|
||||
Lists
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
|
||||
|
||||
<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">June Newsletter</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Sent to 12,458 contacts</p>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Sent</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">42% open rate</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">8.5% CTR</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">Summer Sale Announcement</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Scheduled for 9:00 AM tomorrow</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">Scheduled</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">8,234 recipients</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">VIP List</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">Re-engagement Campaign</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Draft • 3,521 inactive contacts</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">Draft</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">A/B test ready</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">3 variants</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Constant Contact 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 Marketing</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">
|
||||
<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>
|
||||
<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 class="mt-6 sm:mt-8 text-center reveal-up">
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/constant-contact" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
|
||||
<i data-lucide="github" class="w-5 h-5"></i>
|
||||
<span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
|
||||
<i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
|
||||
</a>
|
||||
</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">
|
||||
<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 campaign building</p><p class="text-xs sm:text-sm text-zinc-500">Spend hours designing emails, writing copy, and setting up segments</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">Guessing at send times</p><p class="text-xs sm:text-sm text-zinc-500">No idea when your audience actually opens emails, so you just send at 9am</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">Spreadsheet list management</p><p class="text-xs sm:text-sm text-zinc-500">Export contacts to Excel, clean data manually, re-import, hope nothing breaks</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">Week-old analytics</p><p class="text-xs sm:text-sm text-zinc-500">By the time you review campaign performance, it's too late to optimize</p></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
<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 builds campaigns instantly</p><p class="text-xs sm:text-sm text-zinc-500">"Create a summer sale email for VIP customers" — AI writes copy, selects template, builds segment</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">Smart send optimization</p><p class="text-xs sm:text-sm text-zinc-500">AI analyzes open patterns and schedules campaigns when YOUR audience is most engaged</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-command list management</p><p class="text-xs sm:text-sm text-zinc-500">"Remove bounced emails and add tags to engaged contacts" — done in seconds</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">Real-time insights</p><p class="text-xs sm:text-sm text-zinc-500">"How's the newsletter performing?" — get live open rates, clicks, and engagement scores</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 Email Marketing Is<br><span class="text-red-400">Stuck in Manual Mode</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">
|
||||
Constant Contact has the features, but you're still clicking through dashboards and building campaigns by hand.
|
||||
</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="clock" 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">Campaign Creation Takes Hours</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every email campaign requires manual design, copy writing, list selection, scheduling, and testing. Your team can't move fast enough to stay relevant.</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="users-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">List Decay Kills Deliverability</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Bounced emails, unengaged contacts, and duplicate entries pile up. You know you should clean your lists, but who has time? Your sender score suffers.</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="trending-down" 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">Generic Campaigns = Low Engagement</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You send the same email to everyone because segmentation is too complex. Open rates drop, unsubscribes rise, and your campaigns get ignored.</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 Email Marketing</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 Constant Contact</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Constant Contact API key. 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">"Create a re-engagement campaign for inactive VIP contacts." "What's our average open rate this month?" "Add all webinar attendees to the nurture list." 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: clean lists weekly, send triggered campaigns based on behavior, A/B test subject lines, and sync data across your marketing 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 Constant Contact</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+ Constant Contact 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="mail" 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">Campaign Automation</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Create, schedule, and send campaigns through conversation. "Send a summer sale email to all VIP customers tomorrow at 10am."</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="users" 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">Smart Contact Management</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Segment, tag, and manage contacts with natural language. "Show me all contacts who opened last month but didn't click."</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="list" 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">List Intelligence</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Build dynamic lists based on behavior, engagement, and custom criteria. "Create a list of engaged contacts from California."</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="sparkles" 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">AI Copy Generation</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Generate email subject lines, body copy, and CTAs optimized for your audience. "Write a promotional email about our new product launch."</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">Performance Analytics</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Track open rates, click rates, bounces, and conversions in real-time with natural language queries.</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="zap" 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">Triggered Campaigns</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Set up behavior-based email sequences that send automatically. "Welcome series for new subscribers, 3 emails over 7 days."</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 Constant Contact.
|
||||
</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 Constant Contact?</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 Constant Contact API key (generated in your account under Settings → API Keys). MCPEngage uses the Constant Contact V3 API to create 50+ tools covering campaigns, contacts, lists, and analytics. 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">Can AI actually write good email copy?</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! AI analyzes your past campaigns, brand voice, and audience engagement patterns to generate on-brand copy. You maintain full control — review, edit, and approve before sending.
|
||||
</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 Mailchimp, HubSpot, ActiveCampaign, Salesforce, 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 Constant Contact<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 marketers using MCPEngage to supercharge their email campaigns.
|
||||
</p>
|
||||
<form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
|
||||
<div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
|
||||
<div class="flex gap-3">
|
||||
<input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
|
||||
Join Waitlist
|
||||
</button>
|
||||
<p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
|
||||
</form>
|
||||
<div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
|
||||
<div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-brand-500/20 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-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Constant Contact is ready.</p>
|
||||
</div>
|
||||
</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="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" 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.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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
const chatDemo = document.getElementById('chat-demo');
|
||||
const embed_1 = `<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(59,130,246,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#3b82f6;"></div><span style="font-size:11px;font-weight:700;color:#3b82f6;text-transform:uppercase;letter-spacing:0.5px;">Recent Campaigns</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 30 days</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);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">✓</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;">June Newsletter</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Sent 2 days ago</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">12,458 sent</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;">42% open</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#93c5fd;">8.5% CTR</span></div></div><span style="padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(34,197,94,0.15);color:#86efac;text-transform:uppercase;">Great</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><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;">Flash Sale Alert</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Sent 1 week ago</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">8,234 sent</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;">35% open</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#93c5fd;">12.2% CTR</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;">Good</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><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;">Product Update</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Sent 2 weeks ago</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">15,892 sent</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;">18% open</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;">2.1% CTR</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;">Low</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);">Avg open rate: 31.7% (↑ 12% vs last month)</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View details →</span></div></div>`;
|
||||
const embed_3 = `<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;">Campaign Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Draft</span></div><div style="padding:12px 14px;"><div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;"><div style="flex-shrink:0;width:36px;height:36px;border-radius:10px;background:rgba(168,85,247,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:16px;">💌</span></div><div style="flex:1;"><div style="font-size:13px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">We Miss You! Special Offer Inside</div><div style="font-size:11px;color:rgba(255,255,255,0.4);">Re-engagement campaign</div></div></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;margin-bottom:10px;"><div style="display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:11px;"><span style="color:rgba(255,255,255,0.4);">Audience:</span><span style="color:#e4e4e7;font-weight:500;">3,521 inactive contacts (90+ days)</span><span style="color:rgba(255,255,255,0.4);">Subject A:</span><span style="color:#e4e4e7;font-weight:500;">"We Miss You! 20% Off Your Next Order"</span><span style="color:rgba(255,255,255,0.4);">Subject B:</span><span style="color:#e4e4e7;font-weight:500;">"Still Interested? Here's What You've Missed"</span><span style="color:rgba(255,255,255,0.4);">Send Time:</span><span style="color:#e4e4e7;font-weight:500;">Tuesday 10:30 AM (optimal for this segment)</span></div></div><div style="padding:8px 12px;background:rgba(59,130,246,0.05);border:1px solid rgba(59,130,246,0.15);border-radius:8px;margin-bottom:10px;"><div style="font-size:10px;font-weight:600;color:#60a5fa;margin-bottom:4px;">AI-GENERATED PREVIEW:</div><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.5;font-style:italic;">"Hey [FirstName], we noticed you haven't visited in a while. We've missed you! As a thank you for being part of our community, here's an exclusive 20% discount code..."</div></div><div style="display:flex;gap:6px;"><button style="flex:1;padding:6px 12px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(34,197,94,0.15);color:#86efac;border:none;cursor:pointer;">Send Test</button><button style="flex:1;padding:6px 12px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(59,130,246,0.15);color:#93c5fd;border:none;cursor:pointer;">Schedule Send</button></div></div></div>`;
|
||||
|
||||
const messages = [
|
||||
{ type:'user', text:'Show me the performance of my last 3 campaigns' },
|
||||
{ type:'ai', text:'Here\'s your recent campaign performance:', embed: embed_1 },
|
||||
{ type:'user', text:'Create a re-engagement campaign for contacts who haven\'t opened in 90 days' },
|
||||
{ type:'ai', text:'Campaign created! Here\'s what I built:', embed: embed_3 },
|
||||
];
|
||||
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
|
||||
const termLines = [
|
||||
{ text:'$ npx mcpengage init', color:'text-white', delay:0 },
|
||||
{ text:'', color:'text-white', delay:600 },
|
||||
{ text:'? Select your platform: Constant Contact', color:'text-cyan-400', delay:1200 },
|
||||
{ text:'', color:'text-white', delay:1600 },
|
||||
{ text:' Connecting to Constant Contact API...', color:'text-zinc-500', delay:2000 },
|
||||
{ text:'✓ Connected to Constant Contact API', color:'text-green-400', delay:3000 },
|
||||
{ text:'✓ 50 tools loaded', color:'text-green-400', delay:3600 },
|
||||
{ text:'✓ Ready! Ask your AI anything about Constant Contact', 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); }
|
||||
}
|
||||
const finalCursor = document.createElement('div');
|
||||
finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
|
||||
termContainer.appendChild(finalCursor);
|
||||
},
|
||||
once: true
|
||||
});
|
||||
|
||||
// FAQ
|
||||
function toggleFaq(btn) {
|
||||
const item = btn.closest('.faq-item');
|
||||
const wasOpen = item.classList.contains('open');
|
||||
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
|
||||
if(!wasOpen) item.classList.add('open');
|
||||
}
|
||||
|
||||
// WAITLIST FORM → GoHighLevel
|
||||
async function submitWaitlist(e) {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('wl-btn');
|
||||
const status = document.getElementById('wl-status');
|
||||
const form = document.getElementById('waitlist-form');
|
||||
const success = document.getElementById('wl-success');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Joining...';
|
||||
status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Adding you to the waitlist...';
|
||||
|
||||
const firstName = document.getElementById('wl-first').value.trim();
|
||||
const lastName = document.getElementById('wl-last').value.trim();
|
||||
const phone = document.getElementById('wl-phone').value.trim();
|
||||
const email = document.getElementById('wl-email').value.trim();
|
||||
const platformName = 'Constant Contact';
|
||||
|
||||
try {
|
||||
const body = {
|
||||
firstName,
|
||||
lastName,
|
||||
phone,
|
||||
tags: ['MCP waitlist', platformName],
|
||||
source: 'MCPEngage Waitlist — ' + platformName
|
||||
};
|
||||
if (email) body.email = email;
|
||||
if (!body.name) body.name = firstName + ' ' + lastName;
|
||||
|
||||
const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
if (res.ok || res.status === 200 || res.status === 201) {
|
||||
form.classList.add('hidden');
|
||||
success.classList.remove('hidden');
|
||||
lucide.createIcons();
|
||||
} else {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.message || 'Server error');
|
||||
}
|
||||
} catch (err) {
|
||||
status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Something went wrong. Please try again.';
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Join Waitlist';
|
||||
console.error('Waitlist error:', err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// MAGNETIC BUTTONS
|
||||
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>
|
||||
@ -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>
|
||||
1045
datadog/index.html
1045
datadog/index.html
File diff suppressed because it is too large
Load Diff
1058
docusign/index.html
1058
docusign/index.html
File diff suppressed because one or more lines are too long
1332
fieldedge/index.html
1332
fieldedge/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1311
freshdesk/index.html
1311
freshdesk/index.html
File diff suppressed because it is too large
Load Diff
1058
ghl/index.html
1058
ghl/index.html
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1293
gusto/index.html
1293
gusto/index.html
File diff suppressed because it is too large
Load Diff
1323
helpscout/index.html
1323
helpscout/index.html
File diff suppressed because it is too large
Load Diff
878
housecall-pro/index.html
Normal file
878
housecall-pro/index.html
Normal file
@ -0,0 +1,878 @@
|
||||
<!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 Housecall Pro — AI-Power Your Housecall Pro in 2 Clicks</title>
|
||||
<meta name="description" content="Connect Housecall Pro to any AI model with MCPEngage. Manage jobs, customers, and invoices 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>
|
||||
.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-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-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">Join Waitlist</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">
|
||||
<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 Housecall Pro + AI
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Housecall Pro</span>
|
||||
<span class="block">in 2 Clicks</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<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 Housecall Pro to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage jobs, customers, and invoices — all through conversation.</span>
|
||||
</p>
|
||||
|
||||
<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>Join Waitlist</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>
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/housecall-pro" target="_blank" rel="noopener" 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="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
||||
</div>
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
</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">
|
||||
<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/housecall-pro
|
||||
</div>
|
||||
<div class="w-16 sm:w-20"></div>
|
||||
</div>
|
||||
|
||||
<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 transition-colors">
|
||||
<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="credit-card" 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="repeat" 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="file-text" 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 Housecall Pro data..." 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 -->
|
||||
<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="wrench" class="w-4 h-4"></i>
|
||||
Jobs
|
||||
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">15</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>
|
||||
Customers
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
|
||||
|
||||
<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">$2,450.00 — Enterprise Plan</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Acme Corp • Succeeded</p>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Paid</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">Annual</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">Visa •••• 4242</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">$149.00 — Pro Plan</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">TechFlow Inc • Requires action</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">Failed</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">Monthly</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">MC •••• 5555</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">$49.00 — Starter Plan</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">DesignHub • Processing</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">Pending</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">Monthly</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">Amex •••• 0005</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="30">0</span>+</div>
|
||||
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Housecall Pro 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 Billing</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">
|
||||
<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>
|
||||
<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 class="mt-6 sm:mt-8 text-center reveal-up">
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/housecall-pro" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
|
||||
<i data-lucide="github" class="w-5 h-5"></i>
|
||||
<span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
|
||||
<i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
|
||||
</a>
|
||||
</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">
|
||||
<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">Dashboard diving</p><p class="text-xs sm:text-sm text-zinc-500">Switch between 6 different Stripe dashboards to understand revenue health</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">Failed payment chaos</p><p class="text-xs sm:text-sm text-zinc-500">Manually email customers about declined cards and chase down payments</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">Subscription headaches</p><p class="text-xs sm:text-sm text-zinc-500">Customers ask "when does my plan renew?" — you have to look it up every time</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">Refund delays</p><p class="text-xs sm:text-sm text-zinc-500">Support tickets pile up while you manually process refunds one by one</p></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
<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">One-question insights</p><p class="text-xs sm:text-sm text-zinc-500">"Show me MRR growth this quarter" — instant answer with breakdown by plan</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">Auto-recovery workflows</p><p class="text-xs sm:text-sm text-zinc-500">AI detects failures, sends smart retry emails, and updates billing contact</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">Subscription intel on demand</p><p class="text-xs sm:text-sm text-zinc-500">"When does Acme's subscription renew?" — answer in chat without tab switching</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">Instant refunds</p><p class="text-xs sm:text-sm text-zinc-500">"Refund invoice #1234 and email the customer" — done in one command</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 Field Service Team Is<br><span class="text-red-400">Struggling</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">
|
||||
Housecall Pro is powerful, but your team spends more time navigating it than getting results.
|
||||
</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="credit-card" 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">Failed Payment Firefighting</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Cards decline, subscriptions churn, and your team manually chases customers. Revenue leaks while you play email tag.</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="refresh-ccw" 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">Subscription Complexity</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Customers upgrade, downgrade, pause, and cancel — each change creates support overhead. Your team can't keep up.</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="search" 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">Revenue Reconciliation Hell</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Finance needs MRR by cohort, churn by plan, and LTV by segment. You spend hours exporting CSVs and building pivot tables.</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 Field Service</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 Housecall Pro</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Housecall Pro API key. MCPEngage discovers all available endpoints and builds 30+ tools automatically. No code, no configuration.</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 failed payments this week." "Refund invoice #1234." "What's our MRR breakdown by plan?" Your AI understands Stripe like a veteran finance ops pro.</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 Billing Ops</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: retry failed payments, send renewal reminders, flag subscription downgrades, generate revenue reports, and sync data to your accounting system — 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 Housecall Pro</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">
|
||||
30+ Housecall Pro 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="calendar" 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">undefined</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">undefined</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="users" 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">undefined</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">undefined</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="file-text" 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">undefined</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">undefined</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="map-pin" 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">undefined</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">undefined</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="bell" 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">undefined</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">undefined</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="bar-chart-3" 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">undefined</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">undefined</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 Stripe.
|
||||
</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 Housecall Pro?</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 Housecall Pro API key. MCPEngage uses the Housecall Pro API to create 30+ tools. 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 payment 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 infrastructure — payment data never passes through our servers. API keys are encrypted at rest. You can use restricted keys to limit scope to read-only operations if preferred.
|
||||
</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 it work with test mode and live mode?</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! You can connect both test and live mode simultaneously. MCPEngage clearly labels which mode you're operating in and prevents accidental cross-mode operations.
|
||||
</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, Zendesk, Slack, QuickBooks, 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 Housecall Pro<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 Housecall Pro.
|
||||
</p>
|
||||
<form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
|
||||
<div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
|
||||
<div class="flex gap-3">
|
||||
<input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
|
||||
Join Waitlist
|
||||
</button>
|
||||
<p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
|
||||
</form>
|
||||
<div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
|
||||
<div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-brand-500/20 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-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Housecall Pro is ready.</p>
|
||||
</div>
|
||||
</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="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" 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.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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
const chatDemo = document.getElementById('chat-demo');
|
||||
const embed_1 = `<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(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Failed Payments — Action Needed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">$3,847 at risk</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);"><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;">$149.00</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Pro Plan Subscription</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">TechFlow Inc · MC •••• 5555</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;">Card declined</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;">2 days ago</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><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;">$49.00</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Starter Monthly</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">DesignHub · Visa •••• 1234</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;">Insufficient funds</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;">5 days ago</span></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><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;">$299.00</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Team Plan Annual</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">GlobalShip · Amex •••• 0005</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;">Card expired</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;">6 days ago</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);">3 auto-retries scheduled, 9 need customer action</span><span style="font-size:10px;color:#ef4444;cursor:pointer;">Email customers →</span></div></div>`;
|
||||
const embed_3 = `<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;">Recovery Actions Completed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">12 customers</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;">Sent 12 payment retry emails</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;"><div style="margin-bottom:6px;font-weight:600;color:rgba(255,255,255,0.7);">Email template used: "Update Payment Method"</div><div>✉️ TechFlow Inc — Card declined<br>✉️ DesignHub — Insufficient funds<br>✉️ GlobalShip — Card expired<br><span style="opacity:0.6;">+ 9 more customers</span></div></div></div><div style="padding:10px 14px;"><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;">Posted alert to #billing-alerts</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;"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"><div style="width:18px;height:18px;border-radius:4px;background:#4A154B;display:flex;align-items:center;justify-content:center;font-size:10px;">📊</div><span style="font-size:11px;color:rgba(255,255,255,0.7);font-weight:600;">Slack notification sent</span></div><div style="font-size:10px;color:rgba(255,255,255,0.5);">"🚨 12 failed payments ($3,847) — recovery emails sent. Monitor responses in Stripe."</div></div></div></div>`;
|
||||
|
||||
const messages = [
|
||||
{ type:'user', text:'Show me all failed payments from the last 7 days' },
|
||||
{ type:'ai', text:'Found 12 failed payments totaling $3,847:', embed: embed_1 },
|
||||
{ type:'user', text:'Send payment retry emails to all failed subscriptions and flag them in Slack' },
|
||||
{ type:'ai', text:'Done! Here\'s what I automated:', embed: embed_3 },
|
||||
];
|
||||
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
|
||||
const termLines = [
|
||||
{ text:'$ npx mcpengage init', color:'text-white', delay:0 },
|
||||
{ text:'', color:'text-white', delay:600 },
|
||||
{ text:'? Select your platform: Housecall Pro', color:'text-cyan-400', delay:1200 },
|
||||
{ text:'', color:'text-white', delay:1600 },
|
||||
{ text:' Connecting to Stripe API...', color:'text-zinc-500', delay:2000 },
|
||||
{ text:'✓ Connected to Housecall Pro API', color:'text-green-400', delay:3000 },
|
||||
{ text:'✓ 30 tools loaded', color:'text-green-400', delay:3600 },
|
||||
{ text:'✓ Ready! Ask your AI anything about Housecall Pro', 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); }
|
||||
}
|
||||
const finalCursor = document.createElement('div');
|
||||
finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
|
||||
termContainer.appendChild(finalCursor);
|
||||
},
|
||||
once: true
|
||||
});
|
||||
|
||||
// FAQ
|
||||
function toggleFaq(btn) {
|
||||
const item = btn.closest('.faq-item');
|
||||
const wasOpen = item.classList.contains('open');
|
||||
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
|
||||
if(!wasOpen) item.classList.add('open');
|
||||
}
|
||||
|
||||
// WAITLIST FORM → GoHighLevel
|
||||
async function submitWaitlist(e) {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('wl-btn');
|
||||
const status = document.getElementById('wl-status');
|
||||
const form = document.getElementById('waitlist-form');
|
||||
const success = document.getElementById('wl-success');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Joining...';
|
||||
status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Adding you to the waitlist...';
|
||||
|
||||
const firstName = document.getElementById('wl-first').value.trim();
|
||||
const lastName = document.getElementById('wl-last').value.trim();
|
||||
const phone = document.getElementById('wl-phone').value.trim();
|
||||
const email = document.getElementById('wl-email').value.trim();
|
||||
const platformName = 'Housecall Pro';
|
||||
|
||||
try {
|
||||
const body = {
|
||||
firstName,
|
||||
lastName,
|
||||
phone,
|
||||
tags: ['MCP waitlist', platformName],
|
||||
source: 'MCPEngage Waitlist — ' + platformName
|
||||
};
|
||||
if (email) body.email = email;
|
||||
if (!body.name) body.name = firstName + ' ' + lastName;
|
||||
|
||||
const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
if (res.ok || res.status === 200 || res.status === 201) {
|
||||
form.classList.add('hidden');
|
||||
success.classList.remove('hidden');
|
||||
lucide.createIcons();
|
||||
} else {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.message || 'Server error');
|
||||
}
|
||||
} catch (err) {
|
||||
status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Something went wrong. Please try again.';
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Join Waitlist';
|
||||
console.error('Waitlist error:', err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// MAGNETIC BUTTONS
|
||||
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>
|
||||
@ -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>
|
||||
1058
hubspot/index.html
1058
hubspot/index.html
File diff suppressed because it is too large
Load Diff
1058
intercom/index.html
1058
intercom/index.html
File diff suppressed because it is too large
Load Diff
1058
jira/index.html
1058
jira/index.html
File diff suppressed because it is too large
Load Diff
1440
jobber/index.html
1440
jobber/index.html
File diff suppressed because it is too large
Load Diff
1339
keap/index.html
1339
keap/index.html
File diff suppressed because one or more lines are too long
1058
klaviyo/index.html
1058
klaviyo/index.html
File diff suppressed because it is too large
Load Diff
1058
lever/index.html
1058
lever/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1058
linear/index.html
1058
linear/index.html
File diff suppressed because it is too large
Load Diff
1058
loom/index.html
1058
loom/index.html
File diff suppressed because it is too large
Load Diff
1310
mailchimp/index.html
1310
mailchimp/index.html
File diff suppressed because it is too large
Load Diff
1058
meta-ads/index.html
1058
meta-ads/index.html
File diff suppressed because it is too large
Load Diff
1058
monday/index.html
1058
monday/index.html
File diff suppressed because it is too large
Load Diff
878
n8n-apps/index.html
Normal file
878
n8n-apps/index.html
Normal file
@ -0,0 +1,878 @@
|
||||
<!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 n8n — AI-Power Your n8n in 2 Clicks</title>
|
||||
<meta name="description" content="Connect n8n to any AI model with MCPEngage. Manage workflows, monitor executions, and automate integrations 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>
|
||||
.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-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-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">Join Waitlist</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">
|
||||
<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 n8n + AI
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">n8n</span>
|
||||
<span class="block">in 2 Clicks</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<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 n8n to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Build workflows, debug executions, and manage credentials — all through conversation.</span>
|
||||
</p>
|
||||
|
||||
<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>Join Waitlist</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>
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/n8n-apps" target="_blank" rel="noopener" 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="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
||||
</div>
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
</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">
|
||||
<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/n8n-apps
|
||||
</div>
|
||||
<div class="w-16 sm:w-20"></div>
|
||||
</div>
|
||||
|
||||
<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 transition-colors">
|
||||
<i data-lucide="workflow" 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="zap" 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="key" 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="activity" 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 n8n workflows..." 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 -->
|
||||
<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="workflow" class="w-4 h-4"></i>
|
||||
Workflows
|
||||
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">18</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="clock" class="w-4 h-4"></i>
|
||||
Recent
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
|
||||
|
||||
<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">Slack to Notion Sync</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Active • Runs every 15m</p>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Running</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">324 runs</span>
|
||||
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">98.2% success</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">Customer Onboarding</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Active • Webhook trigger</p>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Running</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">1.2K runs</span>
|
||||
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">94.8% success</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">Daily Sales Report</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">Inactive • 2 errors</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">Error</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-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Last run 6h</span>
|
||||
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">Auth failed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="42">0</span>+</div>
|
||||
<div class="text-xs sm:text-sm text-zinc-500 font-medium">n8n 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">Workflow Monitor</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">
|
||||
<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>
|
||||
<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 class="mt-6 sm:mt-8 text-center reveal-up">
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/n8n-apps" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
|
||||
<i data-lucide="github" class="w-5 h-5"></i>
|
||||
<span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
|
||||
<i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
|
||||
</a>
|
||||
</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">
|
||||
<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 workflow debugging</p><p class="text-xs sm:text-sm text-zinc-500">Click through 20+ nodes trying to find where the execution failed</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">Credential chaos</p><p class="text-xs sm:text-sm text-zinc-500">Which API key expired? Check every integration manually</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">No execution visibility</p><p class="text-xs sm:text-sm text-zinc-500">Did the workflow run? Did it succeed? Log into n8n to check</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">Complex workflow edits</p><p class="text-xs sm:text-sm text-zinc-500">Need to change one filter? Open the UI, find the node, edit JSON</p></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
<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-powered debugging</p><p class="text-xs sm:text-sm text-zinc-500">"Why did Customer Onboarding fail?" — instant error analysis</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">Smart credential management</p><p class="text-xs sm:text-sm text-zinc-500">Get alerts before credentials expire, update through conversation</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">Real-time monitoring</p><p class="text-xs sm:text-sm text-zinc-500">Slack alerts when workflows fail, success rate tracking, instant logs</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">Natural-language edits</p><p class="text-xs sm:text-sm text-zinc-500">"Add a 5-second delay after the Slack node" — done in seconds</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 Workflows Are<br><span class="text-red-400">Breaking Silently</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">
|
||||
n8n is powerful, but by the time you notice a workflow failed, you've already lost hours of data.
|
||||
</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="circle-slash" 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">Silent Failures</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Workflows fail at 3 AM. You find out at 10 AM when a customer asks why they didn't get onboarded. No alerts, no visibility, just broken automation.</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="puzzle" 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">Debugging Hell</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">20 nodes, 5 branches, nested if/else logic. Which node failed? What was the input? You click through execution logs for 30 minutes trying to understand.</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="key-round" 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">Credential Rot</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">API keys expire, OAuth tokens become invalid, service passwords change. Your workflows stop working and you have no idea why until you manually test every connection.</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 Automation</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 n8n Instance</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your n8n instance URL and API key. MCPEngage discovers all workflows, executions, and credentials — building 42+ tools automatically. Works with self-hosted and cloud n8n.</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 failed executions from the last 24 hours." "Activate the Daily Sales Report workflow." "Which credentials expire this month?" 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 Management</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up alerts for workflow failures, monitor execution success rates, get notified before credentials expire, generate weekly automation reports — 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 n8n</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">
|
||||
42+ n8n 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="workflow" 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">Workflow Management</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Create, activate, deactivate, and duplicate workflows through conversation. "Duplicate Slack to Notion Sync and change the trigger to hourly."</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="play-circle" 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">Execution Monitoring</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Track workflow runs, analyze failures, and debug errors in real-time. "Show me the input data from the last failed Customer Onboarding run."</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="shield-check" 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">Credential Manager</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">View, update, and validate credentials before they break your workflows. "Test all Slack credentials and notify me if any fail."</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="search" 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">Smart Search</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Find workflows by name, tag, or the services they use. "Show all workflows that use the HubSpot API."</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-4" 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">Success Analytics</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Track workflow performance, success rates, and execution times. "Which workflow has the lowest success rate this 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-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="bell" 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">Proactive Alerts</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Get notified immediately when workflows fail, credentials expire, or execution times spike. Stop issues before they impact users.</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 n8n.
|
||||
</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 n8n?</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 n8n instance URL (self-hosted or cloud) and an API key (generated in n8n Settings). MCPEngage uses the n8n REST API to create 42+ tools covering workflows, executions, credentials, 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">Can it actually activate workflows and update credentials?</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 has full read/write access to your n8n instance (with your permission). You can activate/deactivate workflows, update credentials, duplicate workflows, and trigger executions — all through natural language.
|
||||
</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 Zapier, Make, Slack, HubSpot, Salesforce, Stripe, 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 n8n<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 automation teams using MCPEngage to bulletproof their workflows.
|
||||
</p>
|
||||
<form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
|
||||
<div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
|
||||
<div class="flex gap-3">
|
||||
<input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
|
||||
Join Waitlist
|
||||
</button>
|
||||
<p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
|
||||
</form>
|
||||
<div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
|
||||
<div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-brand-500/20 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-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for n8n is ready.</p>
|
||||
</div>
|
||||
</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="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" 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.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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
const chatDemo = document.getElementById('chat-demo');
|
||||
const embed_1 = `<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(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Failed Executions</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 24h</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);"><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;">Daily Sales Report</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">6h ago</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;">Auth failed</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Node: Salesforce</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><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;">Customer Onboarding</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">14h ago</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;">Timeout</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Node: HTTP Request</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><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;">Lead Enrichment</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">22h ago</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;">Invalid JSON</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">Node: Code</span></div></div></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);">3 of 142 executions failed (2.1%)</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View in n8n →</span></div></div>`;
|
||||
const embed_3 = `<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;">Workflow Fixed</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Just now</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:6px;">Problem found:</div><div style="background:rgba(239,68,68,0.05);border:1px solid rgba(239,68,68,0.15);border-radius:8px;padding:8px 10px;margin-bottom:10px;"><div style="font-size:11px;font-weight:600;color:#ef4444;margin-bottom:4px;">Salesforce OAuth token expired</div><div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.4;">Error 401: Unauthorized — credential "Salesforce Production" last refreshed 92 days ago</div></div><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;"><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;">Credential refreshed</span></div><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;">Workflow reactivated</span></div></div><div style="padding:10px 14px;"><div style="font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:6px;">Next scheduled run:</div><div style="font-size:12px;color:rgba(255,255,255,0.7);font-weight:600;">Today at 6:00 PM EST</div></div></div>`;
|
||||
|
||||
const messages = [
|
||||
{ type:'user', text:'Show me all failed workflow executions from the last 24 hours' },
|
||||
{ type:'ai', text:'Found 3 failed executions:', embed: embed_1 },
|
||||
{ type:'user', text:'What\'s wrong with Daily Sales Report? Fix it and reactivate' },
|
||||
{ type:'ai', text:'Diagnosed and fixed! Here\'s what I did:', embed: embed_3 },
|
||||
];
|
||||
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
|
||||
const termLines = [
|
||||
{ text:'$ npx mcpengage init', color:'text-white', delay:0 },
|
||||
{ text:'', color:'text-white', delay:600 },
|
||||
{ text:'? Select your platform: n8n', color:'text-cyan-400', delay:1200 },
|
||||
{ text:'', color:'text-white', delay:1600 },
|
||||
{ text:' Connecting to n8n API...', color:'text-zinc-500', delay:2000 },
|
||||
{ text:'✓ Connected to n8n API', color:'text-green-400', delay:3000 },
|
||||
{ text:'✓ 42 tools loaded', color:'text-green-400', delay:3600 },
|
||||
{ text:'✓ Ready! Ask your AI anything about n8n', 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); }
|
||||
}
|
||||
const finalCursor = document.createElement('div');
|
||||
finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
|
||||
termContainer.appendChild(finalCursor);
|
||||
},
|
||||
once: true
|
||||
});
|
||||
|
||||
// FAQ
|
||||
function toggleFaq(btn) {
|
||||
const item = btn.closest('.faq-item');
|
||||
const wasOpen = item.classList.contains('open');
|
||||
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
|
||||
if(!wasOpen) item.classList.add('open');
|
||||
}
|
||||
|
||||
// WAITLIST FORM → GoHighLevel
|
||||
async function submitWaitlist(e) {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('wl-btn');
|
||||
const status = document.getElementById('wl-status');
|
||||
const form = document.getElementById('waitlist-form');
|
||||
const success = document.getElementById('wl-success');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Joining...';
|
||||
status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Adding you to the waitlist...';
|
||||
|
||||
const firstName = document.getElementById('wl-first').value.trim();
|
||||
const lastName = document.getElementById('wl-last').value.trim();
|
||||
const phone = document.getElementById('wl-phone').value.trim();
|
||||
const email = document.getElementById('wl-email').value.trim();
|
||||
const platformName = 'n8n';
|
||||
|
||||
try {
|
||||
const body = {
|
||||
firstName,
|
||||
lastName,
|
||||
phone,
|
||||
tags: ['MCP waitlist', platformName],
|
||||
source: 'MCPEngage Waitlist — ' + platformName
|
||||
};
|
||||
if (email) body.email = email;
|
||||
if (!body.name) body.name = firstName + ' ' + lastName;
|
||||
|
||||
const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
if (res.ok || res.status === 200 || res.status === 201) {
|
||||
form.classList.add('hidden');
|
||||
success.classList.remove('hidden');
|
||||
lucide.createIcons();
|
||||
} else {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.message || 'Server error');
|
||||
}
|
||||
} catch (err) {
|
||||
status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Something went wrong. Please try again.';
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Join Waitlist';
|
||||
console.error('Waitlist error:', err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// MAGNETIC BUTTONS
|
||||
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>
|
||||
1058
notion/index.html
1058
notion/index.html
File diff suppressed because it is too large
Load Diff
1058
pandadoc/index.html
1058
pandadoc/index.html
File diff suppressed because it is too large
Load Diff
1323
pipedrive/index.html
1323
pipedrive/index.html
File diff suppressed because it is too large
Load Diff
878
product-analytics/index.html
Normal file
878
product-analytics/index.html
Normal file
@ -0,0 +1,878 @@
|
||||
<!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 Product Analytics — AI-Power Your Product Analytics in 2 Clicks</title>
|
||||
<meta name="description" content="Connect Product Analytics to any AI model with MCPEngage. Track events, analyze funnels, and understand user behavior 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>
|
||||
.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-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-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">Join Waitlist</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">
|
||||
<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 Product Analytics + AI
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">Product Analytics</span>
|
||||
<span class="block">in 2 Clicks</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<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 Product Analytics to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Query events, build cohorts, and optimize funnels — all through conversation.</span>
|
||||
</p>
|
||||
|
||||
<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>Join Waitlist</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>
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/product-analytics" target="_blank" rel="noopener" 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="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
||||
</div>
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
</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">
|
||||
<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/product-analytics
|
||||
</div>
|
||||
<div class="w-16 sm:w-20"></div>
|
||||
</div>
|
||||
|
||||
<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 transition-colors">
|
||||
<i data-lucide="activity" 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="filter" 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-2" 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 product analytics..." 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 -->
|
||||
<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="activity" class="w-4 h-4"></i>
|
||||
Events
|
||||
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">1.2M</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="lightbulb" class="w-4 h-4"></i>
|
||||
Insights
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
|
||||
|
||||
<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">User Signup</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">842 events • Last hour</p>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Rising</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-green-500/15 text-green-400 text-[10px] xl:text-xs font-medium">+24% vs avg</span>
|
||||
<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">Conversion 8.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">Feature Adoption</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">1.2K events • Last hour</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">Stable</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-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">+2% vs avg</span>
|
||||
<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">Retention 68%</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">Checkout Drop-off</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">238 events • Last hour</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">Alert</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-red-500/15 text-red-400 text-[10px] xl:text-xs font-medium">+42% vs avg</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">Step 2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="58">0</span>+</div>
|
||||
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Analytics 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">User Insights</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">
|
||||
<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>
|
||||
<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 class="mt-6 sm:mt-8 text-center reveal-up">
|
||||
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/product-analytics" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
|
||||
<i data-lucide="github" class="w-5 h-5"></i>
|
||||
<span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
|
||||
<i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
|
||||
</a>
|
||||
</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">
|
||||
<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">SQL for every question</p><p class="text-xs sm:text-sm text-zinc-500">Want to know signup conversion? Write a query, wait 5 minutes, debug syntax errors</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">Dashboard overload</p><p class="text-xs sm:text-sm text-zinc-500">Create 20 dashboards for different metrics, still can't find the answer you need</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">Delayed insights</p><p class="text-xs sm:text-sm text-zinc-500">Funnel drop-off happened yesterday, discover it today, fix it tomorrow — revenue lost</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">Siloed data</p><p class="text-xs sm:text-sm text-zinc-500">Events in Mixpanel, revenue in Stripe, support tickets in Zendesk — no unified view</p></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
<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">Natural-language queries</p><p class="text-xs sm:text-sm text-zinc-500">"Show signup conversion rate by traffic source last 30 days" — instant answer</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">AI-powered insights</p><p class="text-xs sm:text-sm text-zinc-500">Your AI proactively surfaces anomalies, trends, and opportunities</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">Real-time alerts</p><p class="text-xs sm:text-sm text-zinc-500">Get notified the moment funnel conversion drops or feature adoption spikes</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">Unified intelligence</p><p class="text-xs sm:text-sm text-zinc-500">Cross-reference analytics with CRM, revenue, and support data in one query</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 Product Decisions Are<br><span class="text-red-400">Data-Blind</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">
|
||||
You have analytics tools, but by the time you find the insight, the opportunity is gone.
|
||||
</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="code-2" 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">SQL Dependency</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every product question requires SQL. Analyst backlog is 2 weeks. You ship features blind because waiting for data is slower than guessing.</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="calendar-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">Historical Blindness</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your dashboard shows what happened last week. You need to know what's happening right now. Drop-offs, spikes, anomalies — you see them after it's too late to act.</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="puzzle" 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">Insight Fragmentation</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Event data in analytics. Revenue in Stripe. User feedback in Zendesk. NPS in Delighted. The full story is scattered across 6 tools. You spend hours stitching context.</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 Product Intelligence</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 Analytics Platform</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your API key for Mixpanel, Amplitude, PostHog, or any analytics platform. MCPEngage discovers all events, properties, and user data — building 58+ tools automatically.</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">"Which features have the highest 7-day retention?" "Show funnel drop-off by device type." "Create a cohort of users who signed up this month." Your AI understands and delivers insights.</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 Intelligence</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up alerts for conversion drops, feature adoption spikes, or cohort behavior changes. Generate weekly retention reports, track north star metrics — 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 Product Analytics</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">
|
||||
58+ analytics 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="zap" 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">Event Analysis</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Query any event, filter by properties, and analyze trends. "Show button_click events where plan='enterprise' last 7 days."</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="git-branch" 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">Funnel Intelligence</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Build, analyze, and optimize conversion funnels through conversation. "Where do users drop off in the checkout funnel?"</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="users-round" 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">Cohort Builder</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Create user cohorts with natural language criteria. "Create cohort of users who completed onboarding but haven't used feature X."</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="line-chart" 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">Retention Analysis</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Track user retention, churn, and engagement over time. "Show 30-day retention for users who signed up in January."</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="layout-dashboard" 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">Dashboard Automation</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Generate custom dashboards and reports on demand. "Create dashboard showing DAU, WAU, and top 5 features by usage."</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="bell-ring" 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">Anomaly Detection</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">AI proactively alerts you to unusual patterns, spikes, or drops in key metrics. Catch issues before they impact revenue.</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 Product Analytics.
|
||||
</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">Which analytics platforms 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">
|
||||
MCPEngage supports all major product analytics platforms including Mixpanel, Amplitude, PostHog, Heap, Segment, Google Analytics 4, and more. You can also connect to custom analytics databases via SQL.
|
||||
</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 it actually create cohorts and build funnels?</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 has full read/write access to your analytics platform (with your permission). You can create cohorts, define funnels, build dashboards, and export data — all through natural language.
|
||||
</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 Stripe, Salesforce, Zendesk, HubSpot, Google Ads, 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 Product Analytics<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 product teams using MCPEngage to build data-driven products.
|
||||
</p>
|
||||
<form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
|
||||
<div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
|
||||
<div class="flex gap-3">
|
||||
<input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
<input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
|
||||
</div>
|
||||
<button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
|
||||
Join Waitlist
|
||||
</button>
|
||||
<p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
|
||||
</form>
|
||||
<div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
|
||||
<div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-brand-500/20 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-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Product Analytics is ready.</p>
|
||||
</div>
|
||||
</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="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" 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.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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
const chatDemo = document.getElementById('chat-demo');
|
||||
const embed_1 = `<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;">Signup Conversion</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 30 days</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);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">1</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;">Organic Search</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">12.4K visitors</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">CVR 12.8%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">1,587 signups</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#22c55e;">2</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;">Paid Ads</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">8.2K visitors</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">CVR 9.6%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">787 signups</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><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;">3</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;">Social Media</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">6.8K visitors</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;">CVR 4.2%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">286 signups</span></div></div></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);">Overall CVR: 9.8% (2,660 signups)</span></div></div>`;
|
||||
const embed_3 = `<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(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Checkout Funnel</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Last 7 days</span></div><div style="padding:0;"><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;"><span style="font-size:11px;font-weight:600;color:#e4e4e7;">Step 1: Add to Cart</span><span style="font-size:11px;font-weight:600;color:#22c55e;">100%</span></div><div style="width:100%;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;"><div style="width:100%;height:100%;background:#22c55e;"></div></div><div style="font-size:9px;color:rgba(255,255,255,0.3);margin-top:2px;">4,280 users</div></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;"><span style="font-size:11px;font-weight:600;color:#e4e4e7;">Step 2: Enter Payment</span><span style="font-size:11px;font-weight:600;color:#f59e0b;">68%</span></div><div style="width:100%;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;"><div style="width:68%;height:100%;background:#f59e0b;"></div></div><div style="font-size:9px;color:rgba(255,255,255,0.3);margin-top:2px;">2,910 users • <span style="color:#ef4444;">32% drop-off</span></div></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);background:rgba(239,68,68,0.03);"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;"><span style="font-size:11px;font-weight:600;color:#e4e4e7;">Step 3: Review Order</span><span style="font-size:11px;font-weight:600;color:#ef4444;">38%</span></div><div style="width:100%;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;"><div style="width:38%;height:100%;background:#ef4444;"></div></div><div style="font-size:9px;color:rgba(255,255,255,0.3);margin-top:2px;">1,626 users • <span style="color:#ef4444;">44% drop-off ⚠️</span></div></div><div style="padding:10px 14px;"><div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;"><span style="font-size:11px;font-weight:600;color:#e4e4e7;">Step 4: Complete Purchase</span><span style="font-size:11px;font-weight:600;color:#22c55e;">34%</span></div><div style="width:100%;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;"><div style="width:34%;height:100%;background:#22c55e;"></div></div><div style="font-size:9px;color:rgba(255,255,255,0.3);margin-top:2px;">1,455 users</div></div></div><div style="padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="font-size:10px;font-weight:600;color:#ef4444;margin-bottom:2px;">⚠️ Biggest drop: Step 2 → Step 3 (44%)</div><div style="font-size:9px;color:rgba(255,255,255,0.4);">1,284 users abandoned at payment review</div></div></div>`;
|
||||
|
||||
const messages = [
|
||||
{ type:'user', text:'Show signup conversion rate by traffic source in the last 30 days' },
|
||||
{ type:'ai', text:'Here\'s the breakdown by source:', embed: embed_1 },
|
||||
{ type:'user', text:'Where do users drop off in the checkout funnel?' },
|
||||
{ type:'ai', text:'Identified the drop-off point:', embed: embed_3 },
|
||||
];
|
||||
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
|
||||
const termLines = [
|
||||
{ text:'$ npx mcpengage init', color:'text-white', delay:0 },
|
||||
{ text:'', color:'text-white', delay:600 },
|
||||
{ text:'? Select your platform: Product Analytics', color:'text-cyan-400', delay:1200 },
|
||||
{ text:'', color:'text-white', delay:1600 },
|
||||
{ text:' Connecting to Product Analytics API...', color:'text-zinc-500', delay:2000 },
|
||||
{ text:'✓ Connected to Product Analytics API', color:'text-green-400', delay:3000 },
|
||||
{ text:'✓ 58 tools loaded', color:'text-green-400', delay:3600 },
|
||||
{ text:'✓ Ready! Ask your AI anything about Product Analytics', 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); }
|
||||
}
|
||||
const finalCursor = document.createElement('div');
|
||||
finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
|
||||
termContainer.appendChild(finalCursor);
|
||||
},
|
||||
once: true
|
||||
});
|
||||
|
||||
// FAQ
|
||||
function toggleFaq(btn) {
|
||||
const item = btn.closest('.faq-item');
|
||||
const wasOpen = item.classList.contains('open');
|
||||
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
|
||||
if(!wasOpen) item.classList.add('open');
|
||||
}
|
||||
|
||||
// WAITLIST FORM → GoHighLevel
|
||||
async function submitWaitlist(e) {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('wl-btn');
|
||||
const status = document.getElementById('wl-status');
|
||||
const form = document.getElementById('waitlist-form');
|
||||
const success = document.getElementById('wl-success');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Joining...';
|
||||
status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Adding you to the waitlist...';
|
||||
|
||||
const firstName = document.getElementById('wl-first').value.trim();
|
||||
const lastName = document.getElementById('wl-last').value.trim();
|
||||
const phone = document.getElementById('wl-phone').value.trim();
|
||||
const email = document.getElementById('wl-email').value.trim();
|
||||
const platformName = 'Product Analytics';
|
||||
|
||||
try {
|
||||
const body = {
|
||||
firstName,
|
||||
lastName,
|
||||
phone,
|
||||
tags: ['MCP waitlist', platformName],
|
||||
source: 'MCPEngage Waitlist — ' + platformName
|
||||
};
|
||||
if (email) body.email = email;
|
||||
if (!body.name) body.name = firstName + ' ' + lastName;
|
||||
|
||||
const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
if (res.ok || res.status === 200 || res.status === 201) {
|
||||
form.classList.add('hidden');
|
||||
success.classList.remove('hidden');
|
||||
lucide.createIcons();
|
||||
} else {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.message || 'Server error');
|
||||
}
|
||||
} catch (err) {
|
||||
status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
|
||||
status.textContent = 'Something went wrong. Please try again.';
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Join Waitlist';
|
||||
console.error('Waitlist error:', err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// MAGNETIC BUTTONS
|
||||
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>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1449
rippling/index.html
1449
rippling/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1058
salesloft/index.html
1058
salesloft/index.html
File diff suppressed because it is too large
Load Diff
1058
sendgrid/index.html
1058
sendgrid/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1058
shopify/index.html
1058
shopify/index.html
File diff suppressed because it is too large
Load Diff
1058
square/index.html
1058
square/index.html
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1058
stripe/index.html
1058
stripe/index.html
File diff suppressed because it is too large
Load Diff
1058
supabase/index.html
1058
supabase/index.html
File diff suppressed because it is too large
Load Diff
1346
toast/index.html
1346
toast/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1302
trello/index.html
1302
trello/index.html
File diff suppressed because it is too large
Load Diff
1058
twilio/index.html
1058
twilio/index.html
File diff suppressed because it is too large
Load Diff
1058
typeform/index.html
1058
typeform/index.html
File diff suppressed because it is too large
Load Diff
1443
wave/index.html
1443
wave/index.html
File diff suppressed because it is too large
Load Diff
1058
webflow/index.html
1058
webflow/index.html
File diff suppressed because it is too large
Load Diff
1330
wrike/index.html
1330
wrike/index.html
File diff suppressed because it is too large
Load Diff
1058
xero/index.html
1058
xero/index.html
File diff suppressed because it is too large
Load Diff
1298
zendesk/index.html
1298
zendesk/index.html
File diff suppressed because it is too large
Load Diff
1058
zoho-crm/index.html
1058
zoho-crm/index.html
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user