879 lines
70 KiB
HTML
879 lines
70 KiB
HTML
<!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 ActiveCampaign — AI-Power Your ActiveCampaign in 2 Clicks</title>
|
|
<meta name="description" content="Connect ActiveCampaign to any AI model with MCPEngage. Automate workflows, manage contacts, build campaigns, and track customer journeys 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 ActiveCampaign + 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">ActiveCampaign</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 ActiveCampaign to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Automate journeys, segment contacts, and optimize campaigns — 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/activecampaign" 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/activecampaign
|
|
</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="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="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="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="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 ActiveCampaign automations..." 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="zap" class="w-4 h-4"></i>
|
|
Automations
|
|
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">12</span>
|
|
</button>
|
|
<button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
|
|
<i data-lucide="users" class="w-4 h-4"></i>
|
|
Contacts
|
|
</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">Welcome Series</h4>
|
|
<p class="text-[10px] xl:text-xs text-zinc-500">Active • 1,247 contacts enrolled</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">Live</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">68% 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">Onboarding</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">Lead Scoring</h4>
|
|
<p class="text-[10px] xl:text-xs text-zinc-500">Active • 847 contacts scored today</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">Live</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">142 hot leads</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">Sales</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">Abandoned Cart Recovery</h4>
|
|
<p class="text-[10px] xl:text-xs text-zinc-500">Active • 23 carts recovered today</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">Live</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">$2,847 recovered</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">E-commerce</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="55">0</span>+</div>
|
|
<div class="text-xs sm:text-sm text-zinc-500 font-medium">ActiveCampaign 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 Automation</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/activecampaign" 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">Automation maze</p><p class="text-xs sm:text-sm text-zinc-500">Build complex workflows with drag-and-drop — one wrong connection breaks everything</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">Contact chaos</p><p class="text-xs sm:text-sm text-zinc-500">"Which contacts opened the last email but didn't click?" — requires multiple filters and exports</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">Manual tagging</p><p class="text-xs sm:text-sm text-zinc-500">Spend hours bulk-tagging contacts based on behavior you should have automated months ago</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">Campaign guesswork</p><p class="text-xs sm:text-sm text-zinc-500">Send emails and hope they work — insights arrive days later when 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">Natural language automation</p><p class="text-xs sm:text-sm text-zinc-500">"When a contact clicks the pricing link, tag them as 'high intent' and notify sales" — automation built instantly</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 contact queries</p><p class="text-xs sm:text-sm text-zinc-500">"Show me contacts with lead score > 50 who haven't been contacted this week" — results 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="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">AI-powered tagging</p><p class="text-xs sm:text-sm text-zinc-500">AI auto-tags contacts based on behavior, engagement, and purchase history — no manual work</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 optimization</p><p class="text-xs sm:text-sm text-zinc-500">AI monitors campaign performance and suggests improvements while emails are still sending</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 Marketing Automation Is<br><span class="text-red-400">Too Complicated</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">
|
|
ActiveCampaign is powerful, but building automations and managing contacts shouldn't require a certification.
|
|
</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="git-branch" 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">Automation Overwhelm</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You have 30+ automations. Half are paused because they broke. Nobody remembers what "Nurture 2.0 FINAL v3" does. Every change risks breaking the entire funnel.</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="database" 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">Contact Data Mess</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">15,000 contacts with inconsistent tags, duplicate records, and outdated custom fields. Finding the right audience for a campaign requires SQL-level knowledge.</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="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">Slow Iteration</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Building a new automation takes 2 hours of clicking and testing. By the time it's live, the campaign window has closed and the opportunity is gone.</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 Marketing 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 ActiveCampaign</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your ActiveCampaign API key and account URL. MCPEngage discovers all automations, contacts, campaigns, and deals, building 55+ tools automatically. No code, no configuration, no DevOps.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
|
|
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
|
|
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
|
|
</div>
|
|
<div class="text-center lg:text-left">
|
|
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me contacts with lead score above 50." "Create an automation that tags high-intent leads." "What's our welcome series conversion rate?" Your AI understands and acts.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
|
|
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
|
|
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
|
|
</div>
|
|
<div class="text-center lg:text-left">
|
|
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Everything</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up recurring workflows: auto-score leads, clean duplicate contacts, optimize send times, pause underperforming automations, and sync CRM data — 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 ActiveCampaign</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">
|
|
55+ ActiveCampaign 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">Automation Builder</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">Create and modify automations using natural language. "Build an automation that sends a follow-up 3 days after signup."</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">Contact Management</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">Search, update, tag, and segment contacts instantly. "Find all contacts tagged 'enterprise' who opened the last email."</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="mail" 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">Campaign Orchestration</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">Send campaigns, track performance, and optimize delivery. "Send the product launch email to the VIP segment 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-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="trophy" 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">Lead Scoring</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">View and update lead scores based on behavior. "Which contacts have lead scores above 75?"</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="briefcase" 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">Deal Pipeline</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">Manage deals, update stages, and forecast revenue. "Show me all deals in the negotiation stage."</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">Analytics & Reporting</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">Track automation performance, engagement metrics, and revenue attribution. "What's our ROI on the welcome automation?"</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 ActiveCampaign.
|
|
</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 ActiveCampaign?</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 ActiveCampaign API Key and Account URL (found in Settings → Developer). MCPEngage uses the ActiveCampaign API to create 55+ tools covering automations, contacts, campaigns, deals, tags, lists, 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 build automations for me?</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 describe an automation in plain English and the AI will create it in ActiveCampaign. For complex workflows, the AI will guide you through the logic and build each step. You review before activating.
|
|
</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 HubSpot, Mailchimp, Klaviyo, Salesforce, Pipedrive, 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 ActiveCampaign<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 automation.
|
|
</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 ActiveCampaign 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;">Hot Leads — No Recent Contact</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">23 contacts</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:32px;height:32px;border-radius:50%;background:linear-gradient(135deg, #ef4444, #dc2626);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:white;">92</div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Sarah Chen</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">sarah.chen@acmecorp.com</span></div><div style="display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;"><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Enterprise</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Pricing page</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:32px;height:32px;border-radius:50%;background:linear-gradient(135deg, #f59e0b, #d97706);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:white;">78</div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">James Park</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">james@techflow.io</span></div><div style="display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;"><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(59,130,246,0.15);color:#60a5fa;">Mid-Market</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(34,197,94,0.15);color:#4ade80;">Demo request</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:32px;height:32px;border-radius:50%;background:linear-gradient(135deg, #ef4444, #dc2626);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:white;">85</div><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Maria Lopez</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">maria.lopez@globalship.com</span></div><div style="display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;"><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;">Enterprise</span><span style="padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Trial active</span></div></div></div><div style="display:flex;align-items:center;justify-content:center;padding:10px 14px;border-top:1px solid rgba(255,255,255,0.04);"><span style="font-size:10px;color:rgba(255,255,255,0.4);">+ 20 more contacts</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 score: 72 · Last contact: 8+ days ago</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Export list →</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;">Automation Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Live</span></div><div style="padding:14px;"><div style="font-size:14px;font-weight:600;color:#e4e4e7;margin-bottom:10px;">Pricing Page → Sales Alert</div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:12px;margin-bottom:12px;"><div style="font-size:10px;font-weight:600;color:rgba(255,255,255,0.5);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px;">Automation Flow:</div><div style="display:flex;flex-direction:column;gap:8px;"><div style="display:flex;align-items:start;gap:10px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:6px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#3b82f6;">1</span></div><div style="flex:1;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;">Trigger</div><div style="font-size:10px;color:rgba(255,255,255,0.5);margin-top:2px;">Contact visits /pricing page</div></div></div><div style="margin-left:14px;width:2px;height:12px;background:rgba(255,255,255,0.1);"></div><div style="display:flex;align-items:start;gap:10px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:6px;background:rgba(139,92,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#a78bfa;">2</span></div><div style="flex:1;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;">Action: Add Tag</div><div style="font-size:10px;color:rgba(255,255,255,0.5);margin-top:2px;">Tag contact as "high intent"</div></div></div><div style="margin-left:14px;width:2px;height:12px;background:rgba(255,255,255,0.1);"></div><div style="display:flex;align-items:start;gap:10px;"><div style="flex-shrink:0;width:28px;height:28px;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;">3</span></div><div style="flex:1;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;">Action: Notify</div><div style="font-size:10px;color:rgba(255,255,255,0.5);margin-top:2px;">Send Slack notification to #sales channel</div></div></div></div></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:8px;text-align:center;"><div style="font-size:9px;color:rgba(255,255,255,0.4);margin-bottom:2px;">Status</div><div style="font-size:12px;font-weight:700;color:#22c55e;">Active</div></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:8px;text-align:center;"><div style="font-size:9px;color:rgba(255,255,255,0.4);margin-bottom:2px;">Enrolled</div><div style="font-size:12px;font-weight:700;color:#17c3b2;">0</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);">Automation ID: auto_9k2x7</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View in AC →</span></div></div>`;
|
|
|
|
const messages = [
|
|
{ type:'user', text:'Show me all contacts with lead score above 50 who haven\'t been contacted this week' },
|
|
{ type:'ai', text:'Found 23 high-scoring contacts ready for outreach:', embed: embed_1 },
|
|
{ type:'user', text:'Create an automation: when a contact visits the pricing page, tag them \'high intent\' and notify sales' },
|
|
{ type:'ai', text:'Automation created and activated!', 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: ActiveCampaign', color:'text-cyan-400', delay:1200 },
|
|
{ text:'', color:'text-white', delay:1600 },
|
|
{ text:' Connecting to ActiveCampaign API...', color:'text-zinc-500', delay:2000 },
|
|
{ text:'✓ Connected to ActiveCampaign API', color:'text-green-400', delay:3000 },
|
|
{ text:'✓ 55 tools loaded', color:'text-green-400', delay:3600 },
|
|
{ text:'✓ Ready! Ask your AI anything about ActiveCampaign', 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 = 'ActiveCampaign';
|
|
|
|
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>
|