53 landing pages generated from gold-standard template (waitlist + GHL + GitHub links)
This commit is contained in:
Jake Shore
parent
c82d939e84
commit
3c7de8a7d8
File diff suppressed because it is too large
Load Diff
1014
airtable/index.html
1014
airtable/index.html
File diff suppressed because it is too large
Load Diff
1014
apollo/index.html
1014
apollo/index.html
File diff suppressed because it is too large
Load Diff
1014
asana/index.html
1014
asana/index.html
File diff suppressed because one or more lines are too long
1301
basecamp/index.html
1301
basecamp/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1328
calendly/index.html
1328
calendly/index.html
File diff suppressed because it is too large
Load Diff
1014
chargebee/index.html
1014
chargebee/index.html
File diff suppressed because it is too large
Load Diff
1317
clickup/index.html
1317
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
1014
closebot/index.html
1014
closebot/index.html
File diff suppressed because one or more lines are too long
1319
clover/index.html
1319
clover/index.html
File diff suppressed because one or more lines are too long
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>
|
||||
1014
docusign/index.html
1014
docusign/index.html
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
1291
freshdesk/index.html
1291
freshdesk/index.html
File diff suppressed because it is too large
Load Diff
1014
ghl/index.html
1014
ghl/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1267
gusto/index.html
1267
gusto/index.html
File diff suppressed because it is too large
Load Diff
1307
helpscout/index.html
1307
helpscout/index.html
File diff suppressed because it is too large
Load Diff
1014
intercom/index.html
1014
intercom/index.html
File diff suppressed because it is too large
Load Diff
1014
jira/index.html
1014
jira/index.html
File diff suppressed because it is too large
Load Diff
1325
keap/index.html
1325
keap/index.html
File diff suppressed because one or more lines are too long
1014
klaviyo/index.html
1014
klaviyo/index.html
File diff suppressed because it is too large
Load Diff
1014
lever/index.html
1014
lever/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1014
loom/index.html
1014
loom/index.html
File diff suppressed because it is too large
Load Diff
1014
meta-ads/index.html
1014
meta-ads/index.html
File diff suppressed because it is too large
Load Diff
1014
monday/index.html
1014
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>
|
||||
1014
notion/index.html
1014
notion/index.html
File diff suppressed because it is too large
Load Diff
1014
pandadoc/index.html
1014
pandadoc/index.html
File diff suppressed because it is too large
Load Diff
1307
pipedrive/index.html
1307
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
878
reonomy/index.html
Normal file
878
reonomy/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 Reonomy — AI-Power Your Reonomy in 2 Clicks</title>
|
||||
<meta name="description" content="Connect Reonomy to any AI model with MCPEngage. Research properties, track owners, and analyze transactions 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 Reonomy + 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">Reonomy</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 Reonomy to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Search properties, analyze ownership, and track deals — 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/reonomy" 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/reonomy
|
||||
</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="building-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="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="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="map-pin" 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 commercial real estate..." 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="building-2" class="w-4 h-4"></i>
|
||||
Properties
|
||||
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">1,248</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="trending-up" class="w-4 h-4"></i>
|
||||
Deals
|
||||
</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">Hudson Yards Tower A</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">30 Hudson Yards, NYC</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">For Sale</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">$450M</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">Office</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">SoHo Retail Plaza</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">285 Lafayette St, NYC</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">Leased</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">$18M/yr</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">Retail</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">Brooklyn Industrial Park</h4>
|
||||
<p class="text-[10px] xl:text-xs text-zinc-500">1200 Bedford Ave, BK</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">Off Market</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">Est. $125M</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">Industrial</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="52">0</span>+</div>
|
||||
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Reonomy 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">Market Intel</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/reonomy" 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 property research</p><p class="text-xs sm:text-sm text-zinc-500">Click through dozens of listings, copy-paste addresses into spreadsheets</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">Fragmented data sources</p><p class="text-xs sm:text-sm text-zinc-500">CoStar for comps, LoopNet for listings, county records for ownership</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">Stale deal flow</p><p class="text-xs sm:text-sm text-zinc-500">Find properties that sold 3 months ago, miss opportunities</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">No ownership insights</p><p class="text-xs sm:text-sm text-zinc-500">Who owns the building? What else do they own? Manual detective work</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 search</p><p class="text-xs sm:text-sm text-zinc-500">"Find office buildings in Manhattan over $50M with cap rate under 5%"</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">Unified intelligence</p><p class="text-xs sm:text-sm text-zinc-500">Property details, ownership, transaction history, comps — all in one query</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 deal alerts</p><p class="text-xs sm:text-sm text-zinc-500">Get notified the moment properties hit market or change ownership</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 owner profiles</p><p class="text-xs sm:text-sm text-zinc-500">Full portfolio analysis, acquisition patterns, contact info — 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 Deal Flow Is<br><span class="text-red-400">Too Slow</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">
|
||||
Reonomy has the data, but by the time you research a property, the best deals are already 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="timer" 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">Research Lag</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">See a listing, research ownership, pull comps, analyze financials — 2 hours later, three other brokers already called the seller. Speed kills deals.</p>
|
||||
</div>
|
||||
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
|
||||
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
||||
<i data-lucide="search" 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">Search Limitations</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Reonomy's UI makes you filter by checkboxes and dropdowns. You want "office buildings owned by REITs near transit with recent financing" — can't search that.</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="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">Data Silos</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Property data in Reonomy. Deal pipeline in your CRM. Comps in Excel. Market research in Google Docs. You waste hours connecting dots across systems.</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 CRE</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 Reonomy</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Reonomy API key. MCPEngage discovers all properties, owners, transactions, and market data — building 52+ 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 office properties in Austin sold in the last 6 months over $20M." "Who owns 30 Hudson Yards and what else is in their portfolio?" Your AI understands and delivers instant 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 Deal Flow</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up alerts for new listings, ownership changes, or distressed properties. Generate weekly market reports, track target owners, sync to your CRM — 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 Reonomy</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">
|
||||
52+ Reonomy 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="building" 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">Property Intelligence</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Search by address, price, cap rate, class, or custom criteria. "Find Class A industrial properties in Dallas under $100M."</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="user-search" 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">Owner Research</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Discover who owns what, analyze portfolios, and track acquisition patterns. "Show all properties owned by Blackstone in NYC."</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="receipt" 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">Transaction History</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Pull sales history, price trends, and comparable transactions. "Show recent office sales in San Francisco over $50M."</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" 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">Market Analysis</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Analyze submarkets, cap rate trends, and vacancy rates. "What's the average cap rate for multifamily in Miami?"</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="contact" 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">Contact Discovery</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Get owner contact info, decision-maker names, and outreach intelligence. "Find contact info for the owner of 285 Lafayette St."</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">Deal Alerts</h3>
|
||||
<p class="text-zinc-400 text-sm sm:text-base">Real-time notifications when properties match your criteria, ownership changes, or new transactions close. Never miss an opportunity.</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 Reonomy.
|
||||
</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 Reonomy?</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 Reonomy API key (available in your Reonomy account settings). MCPEngage uses the Reonomy API to create 52+ tools covering properties, owners, transactions, market data, 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 search properties with complex filters?</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! Unlike Reonomy's UI, MCPEngage understands natural language queries with multiple criteria. "Office buildings in Manhattan over $50M with cap rate under 5% owned by REITs" — it parses and executes complex searches instantly.
|
||||
</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 CoStar, LoopNet, Salesforce, HubSpot, Google Sheets, 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 Reonomy<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 hundreds of CRE pros using MCPEngage to close deals faster.
|
||||
</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 Reonomy 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;">Manhattan Office Properties</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">7 results</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(23,195,178,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#17c3b2;">A</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;">30 Hudson Yards</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Midtown West</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;">Cap 4.2%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">$450M</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(23,195,178,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#17c3b2;">A</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;">425 Park Avenue</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Midtown</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;">Cap 3.8%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">$625M</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(23,195,178,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#17c3b2;">A</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;">520 Madison Avenue</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Midtown</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;">Cap 4.5%</span><span style="font-size:10px;color:rgba(255,255,255,0.3);">$280M</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);">+4 more properties</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">View all →</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(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;">Owner Portfolio</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">Related Companies</span></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="margin-bottom:8px;"><div style="font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:4px;">Owner:</div><div style="font-size:13px;font-weight:600;color:#e4e4e7;">Related Companies</div></div><div style="display:flex;gap:6px;flex-wrap:wrap;"><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(23,195,178,0.15);color:#17c3b2;">42 properties</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">$12.8B total value</span><span style="padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4);">Office, Retail</span></div></div><div style="padding:0;"><div style="padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">30 Hudson Yards</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Manhattan • $450M • Office</div></div><div style="padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">55 Hudson Yards</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Manhattan • $780M • Office</div></div><div style="padding:8px 14px;"><div style="font-size:11px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">The Shops at Columbus Circle</div><div style="font-size:10px;color:rgba(255,255,255,0.3);">Manhattan • $1.2B • Retail</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);">+39 more properties</span><span style="font-size:10px;color:#17c3b2;cursor:pointer;">Full portfolio →</span></div></div>`;
|
||||
|
||||
const messages = [
|
||||
{ type:'user', text:'Find office buildings in Manhattan over $50M with cap rate under 5%' },
|
||||
{ type:'ai', text:'Found 7 matching properties:', embed: embed_1 },
|
||||
{ type:'user', text:'Who owns 30 Hudson Yards? Show me their full portfolio' },
|
||||
{ type:'ai', text:'Owner found. Here\'s their portfolio:', 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: Reonomy', color:'text-cyan-400', delay:1200 },
|
||||
{ text:'', color:'text-white', delay:1600 },
|
||||
{ text:' Connecting to Reonomy API...', color:'text-zinc-500', delay:2000 },
|
||||
{ text:'✓ Connected to Reonomy API', color:'text-green-400', delay:3000 },
|
||||
{ text:'✓ 52 tools loaded', color:'text-green-400', delay:3600 },
|
||||
{ text:'✓ Ready! Ask your AI anything about Reonomy', 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 = 'Reonomy';
|
||||
|
||||
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>
|
||||
1431
rippling/index.html
1431
rippling/index.html
File diff suppressed because it is too large
Load Diff
1014
salesloft/index.html
1014
salesloft/index.html
File diff suppressed because it is too large
Load Diff
1014
shopify/index.html
1014
shopify/index.html
File diff suppressed because it is too large
Load Diff
1014
square/index.html
1014
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
1014
stripe/index.html
1014
stripe/index.html
File diff suppressed because it is too large
Load Diff
1314
toast/index.html
1314
toast/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1342
trello/index.html
1342
trello/index.html
File diff suppressed because it is too large
Load Diff
1014
twilio/index.html
1014
twilio/index.html
File diff suppressed because it is too large
Load Diff
1437
wave/index.html
1437
wave/index.html
File diff suppressed because it is too large
Load Diff
1014
webflow/index.html
1014
webflow/index.html
File diff suppressed because it is too large
Load Diff
1288
wrike/index.html
1288
wrike/index.html
File diff suppressed because it is too large
Load Diff
1014
xero/index.html
1014
xero/index.html
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user