jake/mcpengage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

62 landing pages live — 8 remaining configs still generating

Browse Source
This commit is contained in:
Jake Shore 2026-02-13 21:36:39 -05:00
parent 22131a8fd2
commit 962e544f42
5 changed files with 2663 additions and 789 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
bamboohr/index.html
View File

@ -3,8 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCPEngage for BambooHR — AI-Power Your BambooHR in 2 Clicks</title> <title>MCPEngage for BambooHR — AI-Power Your HR in 2 Clicks</title>
<meta name="description" content="Connect BambooHR to any AI model with MCPEngage. Manage employees, time off, and HR operations through natural conversation."> <meta name="description" content="Connect BambooHR to any AI model with MCPEngage. Manage employees, time off, benefits, and reports through natural conversation.">
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@ -137,7 +137,7 @@
</div> </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"> <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 BambooHR to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage employees, track time off, and handle HR tasks — all through conversation.</span> MCPEngage connects BambooHR to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage employees, track time off, and handle benefits — all through conversation.</span>
</p> </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"> <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">
@ -186,7 +186,7 @@
<i data-lucide="calendar" class="w-4 h-4 lg:w-5 lg:h-5"></i> <i data-lucide="calendar" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div> </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"> <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="award" class="w-4 h-4 lg:w-5 lg:h-5"></i> <i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div> </div>
</div> </div>
@ -195,7 +195,7 @@
<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="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="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"> <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 BambooHR employees..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0"> <input type="text" placeholder="Ask about your employees..." 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"> <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> <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
</button> </button>
@ -207,13 +207,13 @@
<div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5"> <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"> <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"> <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
<i data-lucide="calendar" class="w-4 h-4"></i> <i data-lucide="users" class="w-4 h-4"></i>
Time Off Team
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">8</span> <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">87</span>
</button> </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"> <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
<i data-lucide="users" class="w-4 h-4"></i> <i data-lucide="clock" class="w-4 h-4"></i>
Employees Pending
</button> </button>
</div> </div>
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto"> <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
@ -221,40 +221,27 @@
<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="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 class="flex items-start justify-between mb-2 xl:mb-3">
<div> <div>
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Sarah Chen — Vacation</h4> <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Sarah Johnson — PTO Request</h4>
<p class="text-[10px] xl:text-xs text-zinc-500">Engineering • Feb 10-17 (5 days)</p> <p class="text-[10px] xl:text-xs text-zinc-500">Dec 20-27 • 5 business days</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">Approved</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-blue-500/15 text-blue-400 text-[10px] xl:text-xs font-medium">PTO balance: 12d</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">Vacation</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">Jake Shore — Sick Leave</h4>
<p class="text-[10px] xl:text-xs text-zinc-500">Product • Jan 20 (1 day)</p>
</div> </div>
<span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Pending</span> <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Pending</span>
</div> </div>
<div class="flex gap-1.5 xl:gap-2"> <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-yellow-500/15 text-yellow-400 text-[10px] xl:text-xs font-medium">Needs approval</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">Engineering</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">Sick</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">16.5 days left</span>
</div> </div>
</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="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 class="flex items-start justify-between mb-2 xl:mb-3">
<div> <div>
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Alex Martinez — Parental Leave</h4> <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Mike Chen — New Hire</h4>
<p class="text-[10px] xl:text-xs text-zinc-500">Design • Mar 1 - Apr 30 (43 days)</p> <p class="text-[10px] xl:text-xs text-zinc-500">Start date: Jan 15 • Engineering</p>
</div> </div>
<span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Approved</span> <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Onboarding</span>
</div> </div>
<div class="flex gap-1.5 xl:gap-2"> <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">FMLA</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">Senior Dev</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">Parental</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">Docs sent</span>
</div> </div>
</div> </div>
</div> </div>
@ -281,8 +268,8 @@
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
<div class="stat-card text-center"> <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="46">0</span>+</div> <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="48">0</span>+</div>
<div class="text-xs sm:text-sm text-zinc-500 font-medium">BambooHR Tools</div> <div class="text-xs sm:text-sm text-zinc-500 font-medium">HR Tools</div>
</div> </div>
<div class="stat-card text-center"> <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-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>
@ -363,10 +350,10 @@
</div> </div>
<ul class="space-y-4"> <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">Time-off approval bottleneck</p><p class="text-xs sm:text-sm text-zinc-500">Manually reviewing requests, checking balances, updating calendars — 10 minutes per request</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="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">Employee lookup hell</p><p class="text-xs sm:text-sm text-zinc-500">Check who's on vacation, who started when, and manager hierarchies across multiple tabs</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">Employee data scattered</p><p class="text-xs sm:text-sm text-zinc-500">Jumping between employee profiles, spreadsheets, and documents to find basic info</p></div></li> <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual PTO approvals</p><p class="text-xs sm:text-sm text-zinc-500">Slack ping → open BambooHR → check balance → approve → email employee — 10 minutes per request</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">Reporting is painful</p><p class="text-xs sm:text-sm text-zinc-500">Generating headcount reports, PTO balances, or org charts requires exporting CSVs and manual work</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">Reporting chaos</p><p class="text-xs sm:text-sm text-zinc-500">Finance needs headcount by department; you export CSV, open Excel, build pivot tables</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">Onboarding chaos</p><p class="text-xs sm:text-sm text-zinc-500">Creating profiles, assigning benefits, setting up permissions — hours per new hire</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">Onboarding delays</p><p class="text-xs sm:text-sm text-zinc-500">New hires ask about benefits, start dates, and managers — you dig through records every time</p></div></li>
</ul> </ul>
</div> </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="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
@ -378,10 +365,10 @@
</div> </div>
<ul class="space-y-4"> <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">Instant time-off handling</p><p class="text-xs sm:text-sm text-zinc-500">"Approve Sarah's vacation request" — AI checks balance, updates calendar, and notifies team 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="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">Instant employee intel</p><p class="text-xs sm:text-sm text-zinc-500">"Who's Sarah's manager?" or "Show me all Engineering hires this year" — answers 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="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">360° employee view</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Show me Sarah's PTO balance and performance reviews" — full profile 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="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">One-command PTO</p><p class="text-xs sm:text-sm text-zinc-500">"Approve Sarah's PTO request" — AI checks balance, approves, updates calendar, emails confirmation</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 reports</p><p class="text-xs sm:text-sm text-zinc-500">"Generate headcount by department" or "Show me Q1 turnover rate" — instant, formatted reports</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">Reports on demand</p><p class="text-xs sm:text-sm text-zinc-500">"Headcount by department" or "Show me all pending time off" — generated instantly, no spreadsheets</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">Automated onboarding</p><p class="text-xs sm:text-sm text-zinc-500">"Onboard new hire: Jake Shore, Engineering, start date Feb 1" — AI creates profile, assigns benefits, sends welcome</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">Onboarding autopilot</p><p class="text-xs sm:text-sm text-zinc-500">"When does Mike start?" or "Send Mike the benefits docs" — AI handles lookup and delivery</p></div></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -397,34 +384,34 @@
The Problem The Problem
</div> </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"> <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 HR Team Is<br><span class="text-red-400">Stuck in Admin Hell</span> Your HR Team Is<br><span class="text-red-400">Buried in Admin</span>
</h2> </h2>
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up"> <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
BambooHR has the data, but you're too busy clicking to focus on actual people work. BambooHR stores employee data, but your team drowns in repetitive lookups and manual approvals.
</p> </p>
</div> </div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8"> <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="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"> <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> <i data-lucide="users" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div> </div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Time-Off Approval Tax</h3> <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Employee Data Scattered</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every PTO request needs manual review, balance check, and calendar update. You lose 2+ hours weekly on approval admin.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Managers, departments, time off balances, and hire dates are all in BambooHR — but finding what you need takes five clicks and three page loads.</p>
</div> </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="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"> <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="file-text" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i> <i data-lucide="calendar" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div> </div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Reporting Nightmare</h3> <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Time Off Bottlenecks</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Executives ask for headcount data and you spend half a day exporting CSVs, pivoting tables, and formatting slides. By then, the meeting is over.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">PTO requests pile up in your inbox. Each approval requires checking balances, team coverage, and blackout dates. It's death by a thousand clicks.</p>
</div> </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="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"> <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="user-plus" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i> <i data-lucide="file-text" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div> </div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Onboarding Overhead</h3> <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Report Generation Hell</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">New hires wait days for system access because creating profiles, assigning benefits, and setting permissions is a 15-step manual process.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Every stakeholder wants different reports: headcount trends, turnover by department, onboarding status. You're stuck exporting CSVs and manually formatting.</p>
</div> </div>
</div> </div>
</div> </div>
@ -452,7 +439,7 @@
</div> </div>
<div class="text-center lg:text-left"> <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 BambooHR</h3> <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your BambooHR</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your BambooHR API key. MCPEngage discovers all employees, time-off policies, benefits, and org structure — building 46+ tools automatically. No code, no configuration.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your BambooHR API key from your account settings. MCPEngage discovers all employees, departments, time off policies, and custom fields — building 48+ tools automatically. No code required.</p>
</div> </div>
</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="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">
@ -461,7 +448,7 @@
</div> </div>
<div class="text-center lg:text-left"> <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> <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">"Approve Jake's PTO request." "Show me all employees in Engineering." "What's the company PTO balance?" Your AI understands and acts.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all pending PTO requests." "Who reports to Sarah?" "List all Engineering hires since July." Your AI understands HR like an experienced people ops manager.</p>
</div> </div>
</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="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">
@ -469,8 +456,8 @@
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span> <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
</div> </div>
<div class="text-center lg:text-left"> <div class="text-center lg:text-left">
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Workflow</h3> <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate HR Ops</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: auto-approve eligible PTO, flag policy violations, generate weekly headcount reports, and sync HR data across your stack.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: approve time off, send onboarding docs, generate headcount reports, flag policy violations, and sync org charts — all running 24/7.</p>
</div> </div>
</div> </div>
</div> </div>
@ -486,10 +473,10 @@
Features Features
</div> </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"> <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 BambooHR</span> Everything to<br><span class="gradient-text">Supercharge HR</span>
</h2> </h2>
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up"> <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
46+ BambooHR tools accessible through one natural-language interface. 48+ BambooHR tools accessible through one natural-language interface.
</p> </p>
</div> </div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6"> <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
@ -498,43 +485,43 @@
<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"> <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="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i> <i data-lucide="users" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
</div> </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">Employee Management</h3> <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Employee Directory</h3>
<p class="text-zinc-400 text-sm sm:text-base">Access employee profiles, update records, and manage org structure. "Show me all remote employees."</p> <p class="text-zinc-400 text-sm sm:text-base">Access contact info, manager chains, hire dates, and department assignments. "Show me everyone in Engineering."</p>
</div> </div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group"> <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"> <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="calendar" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i> <i data-lucide="calendar" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
</div> </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">Time-Off Automation</h3> <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Time Off Management</h3>
<p class="text-zinc-400 text-sm sm:text-base">Approve requests, check balances, and track accruals automatically. "Who's out next week?"</p> <p class="text-zinc-400 text-sm sm:text-base">View balances, approve requests, check coverage, and track accruals through conversation.</p>
</div> </div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group"> <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"> <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="award" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i> <i data-lucide="briefcase" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
</div> </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">Benefits Intelligence</h3> <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Org Chart Intelligence</h3>
<p class="text-zinc-400 text-sm sm:text-base">Manage enrollments, track coverage, and answer benefits questions instantly.</p> <p class="text-zinc-400 text-sm sm:text-base">Query reporting structures, team sizes, and manager responsibilities. "Who reports to Mike?"</p>
</div> </div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group"> <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"> <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="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i> <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
</div> </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">HR Analytics</h3> <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Custom Reporting</h3>
<p class="text-zinc-400 text-sm sm:text-base">Generate headcount reports, turnover rates, and diversity metrics on demand.</p> <p class="text-zinc-400 text-sm sm:text-base">Generate headcount, turnover, tenure, and demographic reports on demand with natural language.</p>
</div> </div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group"> <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"> <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="user-plus" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i> <i data-lucide="bell" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
</div> </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">Onboarding Workflows</h3> <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Onboarding Automation</h3>
<p class="text-zinc-400 text-sm sm:text-base">Create new hire profiles, assign tasks, and track completion. "Onboard new engineer starting Monday."</p> <p class="text-zinc-400 text-sm sm:text-base">Track new hire status, send documents, assign tasks, and monitor completion automatically.</p>
</div> </div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group"> <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"> <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="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i> <i data-lucide="shield" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
</div> </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">Custom Reports</h3> <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Compliance Tracking</h3>
<p class="text-zinc-400 text-sm sm:text-base">Pull any employee data field, filter by criteria, and export formatted reports through chat.</p> <p class="text-zinc-400 text-sm sm:text-base">Monitor I-9 status, certifications, and required training. Flag expiring documents before deadlines.</p>
</div> </div>
</div> </div>
</div> </div>
@ -569,25 +556,25 @@
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i> <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button> </button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed"> <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
You provide a BambooHR API key (generated in Settings > API Keys). MCPEngage uses the BambooHR API to create 46+ tools covering employees, time off, benefits, and reports. Your credentials are encrypted and never stored on our servers. You provide a BambooHR API key from your account settings. MCPEngage uses the BambooHR API to create 48+ tools covering employees, time off, reports, and org structure. Your credentials are encrypted and never stored on our servers.
</div> </div>
</div> </div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item"> <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)"> <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my BambooHR data?</span> <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my employee data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i> <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button> </button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed"> <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
No. MCPEngage uses BambooHR's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in BambooHR's activity feed, and you can set read-only mode if preferred. Absolutely. MCPEngage runs locally or in your own infrastructure — employee data never passes through our servers. API keys are encrypted at rest. You control all access permissions and can limit to read-only if preferred.
</div> </div>
</div> </div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item"> <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)"> <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with Workday or ADP?</span> <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it handle custom fields?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i> <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button> </button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed"> <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
Yes! You can connect multiple platforms simultaneously. Use BambooHR as your source of truth and have AI sync employee data to Workday, ADP, or any other MCP-enabled platform in your stack. Yes! MCPEngage automatically discovers all custom fields in your BambooHR instance and makes them queryable through natural language.
</div> </div>
</div> </div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item"> <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
@ -605,7 +592,7 @@
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i> <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button> </button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed"> <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 Workday, ADP, Gusto, Slack, HubSpot, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need. Yes! MCPEngage supports 66+ platforms including Slack, Gmail, Google Calendar, Workday, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
</div> </div>
</div> </div>
</div> </div>
@ -618,10 +605,10 @@
<div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></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"> <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"> <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 BambooHR<br><span class="gradient-text">Today</span> Start Automating HR<br><span class="gradient-text">Today</span>
</h2> </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"> <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 HR teams using MCPEngage to supercharge their people operations. Join thousands of businesses using MCPEngage to supercharge their BambooHR.
</p> </p>
<form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)"> <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="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
@ -716,14 +703,14 @@
// CHAT DEMO // CHAT DEMO
const chatDemo = document.getElementById('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(245,158,11,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#f59e0b;"></div><span style="font-size:11px;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:0.5px;">Pending Requests</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">2 requests</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:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Jake Shore — Sick Leave</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Product · Jan 20 (1 day)</span><span style="padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Awaiting approval</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex:1;min-width:0;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:2px;">Emma Davis — Vacation</div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Marketing · Mar 5-9 (3 days)</span><span style="padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Awaiting approval</span></div></div></div></div></div>`; 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(245,158,11,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#f59e0b;"></div><span style="font-size:11px;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:0.5px;">Pending Approval — 6 Requests</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">29 days total</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(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;">Sarah Johnson</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Dec 20-27</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Engineering · 5 days</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;">16.5 days left</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Alex Martinez</span><span style="font-size:10px;color:rgba(255,255,255,0.4);">Jan 8-12</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">Marketing · 4 days</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;">12 days left</span></div></div></div></div></div>`;
const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Request Approved</span></div></div><div style="padding:10px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;"><div style="font-size:12px;font-weight:600;color:#e4e4e7;margin-bottom:6px;">Jake Shore — Sick Leave</div><div style="display:flex;flex-direction:column;gap:4px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);">📅 Date: Monday, Jan 20 (1 day)</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">✅ Approved by: HR Manager</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">📧 Product team notified</div></div></div></div></div>`; const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">PTO Approved</span></div></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Sarah Johnson — Dec 20-27</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;"><div style="margin-bottom:6px;">5 business days approved</div><div style="font-size:10px;opacity:0.7;">Remaining balance: 11.5 days</div><div style="font-size:10px;opacity:0.7;">Confirmation sent to sarah.johnson@company.com</div></div></div><div style="padding:10px 14px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);">Calendar updated • Team notified</div></div></div>`;
const messages = [ const messages = [
{ type:'user', text:'Show me all pending time-off requests' }, { type:'user', text:'Show me all pending time off requests' },
{ type:'ai', text:'Found 2 pending requests:', embed: embed_1 }, { type:'ai', text:'You have 6 pending PTO requests:', embed: embed_1 },
{ type:'user', text:'Approve Jake\'s sick leave request and notify the team' }, { type:'user', text:'Approve Sarah\'s request and send her a confirmation' },
{ type:'ai', text:'Request approved and team notified:', embed: embed_3 }, { type:'ai', text:'Done! Sarah\'s PTO has been approved:', embed: embed_3 },
]; ];
function createMessage(msg){ function createMessage(msg){
const div = document.createElement('div'); const div = document.createElement('div');
@ -763,7 +750,7 @@
{ text:'', color:'text-white', delay:1600 }, { text:'', color:'text-white', delay:1600 },
{ text:' Connecting to BambooHR API...', color:'text-zinc-500', delay:2000 }, { text:' Connecting to BambooHR API...', color:'text-zinc-500', delay:2000 },
{ text:'✓ Connected to BambooHR API', color:'text-green-400', delay:3000 }, { text:'✓ Connected to BambooHR API', color:'text-green-400', delay:3000 },
{ text:'✓ 46 tools loaded', color:'text-green-400', delay:3600 }, { text:'✓ 48 tools loaded', color:'text-green-400', delay:3600 },
{ text:'✓ Ready! Ask your AI anything about BambooHR', color:'text-green-400', delay:4200 }, { text:'✓ Ready! Ask your AI anything about BambooHR', color:'text-green-400', delay:4200 },
]; ];
const termContainer = document.getElementById('terminal-lines'); const termContainer = document.getElementById('terminal-lines');

161
brevo/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCPEngage for Brevo — AI-Power Your Brevo in 2 Clicks</title> <title>MCPEngage for Brevo — AI-Power Your Marketing in 2 Clicks</title>
<meta name="description" content="Connect Brevo to any AI model with MCPEngage. Manage contacts, campaigns, and transactional email through natural conversation."> <meta name="description" content="Connect Brevo to any AI model with MCPEngage. Manage contacts, campaigns, and transactional email through natural conversation.">
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@ -137,7 +137,7 @@
</div> </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"> <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 Brevo to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage contacts, launch campaigns, and track email performance — all through conversation.</span> MCPEngage connects Brevo to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage contacts, launch campaigns, and send emails — all through conversation.</span>
</p> </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"> <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">
@ -186,7 +186,7 @@
<i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i> <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div> </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"> <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> <i data-lucide="send" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div> </div>
</div> </div>
@ -195,7 +195,7 @@
<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="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="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"> <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 campaign performance..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0"> <input type="text" placeholder="Ask about your 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"> <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> <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
</button> </button>
@ -209,7 +209,7 @@
<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"> <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> <i data-lucide="mail" class="w-4 h-4"></i>
Campaigns Campaigns
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">8</span> <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">23</span>
</button> </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"> <button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
<i data-lucide="users" class="w-4 h-4"></i> <i data-lucide="users" class="w-4 h-4"></i>
@ -221,40 +221,27 @@
<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="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 class="flex items-start justify-between mb-2 xl:mb-3">
<div> <div>
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Q1 Product Launch</h4> <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Holiday Sale 2024</h4>
<p class="text-[10px] xl:text-xs text-zinc-500">12,450 sent • 3,247 opened</p> <p class="text-[10px] xl:text-xs text-zinc-500">Sent 3 days ago • 12,450 recipients</p>
</div> </div>
<span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Active</span> <span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Active</span>
</div> </div>
<div class="flex gap-1.5 xl:gap-2"> <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">26.1% open</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">32% 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">148 clicks</span> <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">4.2% CTR</span>
</div> </div>
</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="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 class="flex items-start justify-between mb-2 xl:mb-3">
<div> <div>
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Winter Sale Announcement</h4> <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Product Update Newsletter</h4>
<p class="text-[10px] xl:text-xs text-zinc-500">8,920 sent • 2,187 opened</p> <p class="text-[10px] xl:text-xs text-zinc-500">Draft • 8,920 subscribers</p>
</div> </div>
<span class="px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-[10px] xl:text-xs font-bold">Sent</span> <span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Draft</span>
</div> </div>
<div class="flex gap-1.5 xl:gap-2"> <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">24.5% open</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">Scheduled Mon</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">92 clicks</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">A/B test ready</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">Weekly Newsletter #47</h4>
<p class="text-[10px] xl:text-xs text-zinc-500">Scheduled for tomorrow 9am</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">15,200 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">Reviewed</span>
</div> </div>
</div> </div>
</div> </div>
@ -281,8 +268,8 @@
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
<div class="stat-card text-center"> <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="56">0</span>+</div> <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">Brevo Tools</div> <div class="text-xs sm:text-sm text-zinc-500 font-medium">Marketing Tools</div>
</div> </div>
<div class="stat-card text-center"> <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-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>
@ -294,7 +281,7 @@
</div> </div>
<div class="stat-card text-center"> <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-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 class="text-xs sm:text-sm text-zinc-500 font-medium">AI Email</div>
</div> </div>
</div> </div>
</div> </div>
@ -363,10 +350,10 @@
</div> </div>
<ul class="space-y-4"> <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 tracking</p><p class="text-xs sm:text-sm text-zinc-500">Checking open rates, clicks, and conversions means logging into Brevo and clicking through reports</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="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">Campaign chaos</p><p class="text-xs sm:text-sm text-zinc-500">Switch between campaign builder, contact lists, and analytics dashboards to see what's working</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Contact list chaos</p><p class="text-xs sm:text-sm text-zinc-500">Segments scattered across lists, duplicates everywhere, no unified view of subscriber behavior</p></div></li> <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual list management</p><p class="text-xs sm:text-sm text-zinc-500">Export CSV from Shopify, format columns, import to Brevo, create segment — 30 minutes per update</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">Campaign creation grind</p><p class="text-xs sm:text-sm text-zinc-500">Building emails, setting up automation, and scheduling sends takes hours of clicking</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">Template hell</p><p class="text-xs sm:text-sm text-zinc-500">Drag-drop editor for every email, test on 5 devices, fix broken links, re-upload images</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">Performance blindness</p><p class="text-xs sm:text-sm text-zinc-500">Can't see which campaigns drive revenue or which segments are engaged without manual analysis</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">Analytics guesswork</p><p class="text-xs sm:text-sm text-zinc-500">"Which campaign drove the most sales?" — you export reports and cross-reference with Stripe</p></div></li>
</ul> </ul>
</div> </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="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
@ -378,10 +365,10 @@
</div> </div>
<ul class="space-y-4"> <ul class="space-y-4">
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Voice campaign intel</p><p class="text-xs sm:text-sm text-zinc-500">"What's my average open rate this month?" — instant metrics without logging in</p></div></li> <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">One-question insights</p><p class="text-xs sm:text-sm text-zinc-500">"Show me campaign performance this month" — instant breakdown with opens, clicks, conversions</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 contact management</p><p class="text-xs sm:text-sm text-zinc-500">Ask "Show me engaged subscribers who haven't purchased" — AI segments instantly</p></div></li> <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart list updates</p><p class="text-xs sm:text-sm text-zinc-500">"Add all new Shopify customers to welcome series" — AI syncs and segments automatically</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="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-sentence campaigns</p><p class="text-xs sm:text-sm text-zinc-500">"Send a discount offer to churned customers" — AI drafts, segments, and schedules</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">Email on autopilot</p><p class="text-xs sm:text-sm text-zinc-500">"Send order confirmation to customer@email.com" — transactional email delivered instantly</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="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 performance</p><p class="text-xs sm:text-sm text-zinc-500">AI surfaces top campaigns, engagement trends, and revenue attribution automatically</p></div></li> <li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="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">Revenue attribution</p><p class="text-xs sm:text-sm text-zinc-500">"Which campaigns generated revenue?" — AI pulls Brevo clicks + Stripe conversions in one view</p></div></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -397,34 +384,34 @@
The Problem The Problem
</div> </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"> <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 Emails Are<br><span class="text-red-400">Getting Ignored</span> Your Marketing Team Is<br><span class="text-red-400">Drowning in Tools</span>
</h2> </h2>
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up"> <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
Brevo sends your campaigns, but you're blasting the wrong people with the wrong message at the wrong time. Brevo sends emails, but your team drowns in manual list updates and campaign reporting.
</p> </p>
</div> </div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8"> <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="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"> <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" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i> <i data-lucide="mail" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div> </div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Segmentation Failure</h3> <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Campaign Overload</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You're sending the same email to everyone because building smart segments takes too long. Engaged subscribers get annoyed, cold contacts unsubscribe, and your list quality tanks.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You're running newsletters, promos, drip sequences, and transactional emails — each with different templates, segments, and schedules. Keeping track is chaos.</p>
</div> </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="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"> <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> <i data-lucide="users" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div> </div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Campaign Guesswork</h3> <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Contact List Hell</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You can't tell which emails drive revenue, which subject lines work, or what content resonates. You're flying blind and repeating what doesn't work.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Contacts come from Shopify, WordPress, Stripe, and manual imports. Syncing, segmenting, and deduping is a weekly ritual that never ends.</p>
</div> </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="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"> <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> <i data-lucide="bar-chart" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div> </div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Automation Abandonment</h3> <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Analytics Black Box</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Setting up workflows and automations in Brevo is so time-consuming you just batch-and-blast instead. You leave money on the table and burn out your list.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Opens, clicks, bounces, and unsubscribes are in Brevo. Revenue and conversions are in Stripe. Connecting the dots requires spreadsheets and guesswork.</p>
</div> </div>
</div> </div>
</div> </div>
@ -441,7 +428,7 @@
The Solution The Solution
</div> </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"> <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> Three Steps to<br><span class="gradient-text">AI-Powered Email</span>
</h2> </h2>
</div> </div>
<div class="space-y-4 sm:space-y-6 lg:space-y-8"> <div class="space-y-4 sm:space-y-6 lg:space-y-8">
@ -452,7 +439,7 @@
</div> </div>
<div class="text-center lg:text-left"> <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 Brevo</h3> <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Brevo</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Brevo API key. MCPEngage discovers contacts, campaigns, lists, and automation — building 56+ tools automatically. No marketing expertise required.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste your Brevo API key from account settings. MCPEngage discovers all contacts, lists, campaigns, and templates — building 52+ tools automatically. No code required.</p>
</div> </div>
</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="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">
@ -461,7 +448,7 @@
</div> </div>
<div class="text-center lg:text-left"> <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> <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 campaigns had the highest click rate?" "Create a segment of engaged users." "Send a re-engagement email to cold contacts." Your AI understands Brevo and acts.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me all active campaigns." "Add new customers to welcome list." "Send password reset to user@email.com." Your AI understands email marketing like a seasoned growth marketer.</p>
</div> </div>
</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="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">
@ -469,8 +456,8 @@
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span> <span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
</div> </div>
<div class="text-center lg:text-left"> <div class="text-center lg:text-left">
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Your Marketing</h3> <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Marketing Ops</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set recurring tasks: generate weekly performance reports, auto-clean unengaged contacts, flag high-performing campaigns, and sync Brevo data to your CRM.</p> <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: sync contacts from Stripe, send transactional emails, A/B test subject lines, segment by behavior, and generate performance reports — all running 24/7.</p>
</div> </div>
</div> </div>
</div> </div>
@ -486,10 +473,10 @@
Features Features
</div> </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"> <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 Brevo</span> Everything to<br><span class="gradient-text">Supercharge Email Marketing</span>
</h2> </h2>
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up"> <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
56+ Brevo tools accessible through one natural-language interface. 52+ Brevo tools accessible through one natural-language interface.
</p> </p>
</div> </div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6"> <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
@ -499,42 +486,42 @@
<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> <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> </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 Management</h3> <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 Management</h3>
<p class="text-zinc-400 text-sm sm:text-base">Create, schedule, and track email campaigns through conversation. "Show me campaigns with open rate above 25%."</p> <p class="text-zinc-400 text-sm sm:text-base">Create, schedule, send, and track email campaigns through conversation. "Launch the holiday sale campaign."</p>
</div> </div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group"> <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"> <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> <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> </div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Contact Intelligence</h3> <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Contact Intelligence</h3>
<p class="text-zinc-400 text-sm sm:text-base">Segment, tag, and analyze subscriber behavior. "How many contacts opened my last 3 emails?"</p> <p class="text-zinc-400 text-sm sm:text-base">Search, segment, import, and update contacts with natural language. "Show me all contacts who opened last week's email."</p>
</div> </div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group"> <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"> <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="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i> <i data-lucide="send" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
</div> </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">Performance Analytics</h3> <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Transactional Email</h3>
<p class="text-zinc-400 text-sm sm:text-base">Track opens, clicks, conversions, and revenue. "Which campaign drove the most revenue last month?"</p> <p class="text-zinc-400 text-sm sm:text-base">Send order confirmations, password resets, and receipts on demand. "Send invoice to customer@email.com."</p>
</div> </div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group"> <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"> <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="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i> <i data-lucide="target" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
</div> </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">Automation Builder</h3> <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">List Segmentation</h3>
<p class="text-zinc-400 text-sm sm:text-base">Set up workflows, triggers, and sequences. "Create a welcome series for new subscribers."</p> <p class="text-zinc-400 text-sm sm:text-base">Create dynamic segments based on behavior, tags, and custom attributes. "Segment contacts by last purchase date."</p>
</div> </div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group"> <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"> <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="target" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i> <i data-lucide="bar-chart" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
</div> </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">List Management</h3> <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Campaign Analytics</h3>
<p class="text-zinc-400 text-sm sm:text-base">Clean, merge, and optimize contact lists. "Show me unengaged contacts from the past 90 days."</p> <p class="text-zinc-400 text-sm sm:text-base">Pull open rates, click-through rates, bounce rates, and conversion metrics. "What's our average open rate?"</p>
</div> </div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group"> <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"> <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="calendar-check" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i> <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> </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">Marketing Automation</h3> <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Automation Builder</h3>
<p class="text-zinc-400 text-sm sm:text-base">Auto-generate campaign summaries, segment reports, and A/B test results. "Send me weekly performance stats every Monday."</p> <p class="text-zinc-400 text-sm sm:text-base">Design multi-step drip campaigns, welcome series, and re-engagement flows through natural language instructions.</p>
</div> </div>
</div> </div>
</div> </div>
@ -560,7 +547,7 @@
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i> <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button> </button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed"> <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. MCPEngage uses MCP to give your AI real-time read/write access to Brevo (formerly Sendinblue). 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 Brevo.
</div> </div>
</div> </div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item"> <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
@ -569,25 +556,25 @@
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i> <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button> </button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed"> <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
You provide a Brevo API key (generated in Brevo Settings > SMTP & API > API Keys). MCPEngage uses the Brevo API to create 56+ tools covering contacts, campaigns, automation, and analytics. Your credentials are encrypted and never stored on our servers. You provide a Brevo API key from your account settings. MCPEngage uses the Brevo API to create 52+ tools covering contacts, campaigns, transactional email, and analytics. Your credentials are encrypted and never stored on our servers.
</div> </div>
</div> </div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item"> <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)"> <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Will it mess up my Brevo data?</span> <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my contact data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i> <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button> </button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed"> <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
No. MCPEngage uses Brevo's official API with the same permissions as any integration. You control which scopes to grant. All changes are logged in Brevo's activity history. Absolutely. MCPEngage runs locally or in your own infrastructure — contact data never passes through our servers. API keys are encrypted at rest. You control all access permissions.
</div> </div>
</div> </div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item"> <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)"> <button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it sync with my CRM?</span> <span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it send transactional emails?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i> <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button> </button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed"> <div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
Yes! Connect Brevo + HubSpot, Salesforce, or any other MCP-enabled platform. Have AI sync contact data, campaign engagement, and conversions automatically — no Zapier required. Yes! MCPEngage can send transactional emails (order confirmations, password resets, receipts) through Brevo's SMTP or API. You can trigger sends via natural language commands or automated workflows.
</div> </div>
</div> </div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item"> <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
@ -596,7 +583,7 @@
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i> <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button> </button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed"> <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. Agency plans with multi-account access available on request. 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> </div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item"> <div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
@ -605,7 +592,7 @@
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i> <i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button> </button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed"> <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, Stripe, Shopify, and more. Each platform gets its own MCP server. Connect as many as you need. Yes! MCPEngage supports 66+ platforms including Mailchimp, SendGrid, Stripe, Shopify, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
</div> </div>
</div> </div>
</div> </div>
@ -618,10 +605,10 @@
<div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></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"> <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"> <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 Brevo<br><span class="gradient-text">Today</span> Start Automating Email<br><span class="gradient-text">Today</span>
</h2> </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"> <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 Brevo campaigns. Join thousands of businesses using MCPEngage to supercharge their Brevo marketing.
</p> </p>
<form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)"> <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="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
@ -716,14 +703,14 @@
// CHAT DEMO // CHAT DEMO
const chatDemo = document.getElementById('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(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;">Top Performing 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;">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;">Q1 Product Launch</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">12,450 sent · 3,247 opened</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;">26.1%</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#3b82f6;">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;">Winter Sale Announcement</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">8,920 sent · 2,187 opened</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:#60a5fa;">24.5%</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);">Avg open rate: 22.3%</span></div></div>`; 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(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;">Last 30 Days — 8 Campaigns</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">38.2% avg open</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;">Holiday Sale 2024</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">12,450 sent · 3 days ago</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;">32% open</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;">✓</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;">Black Friday Preview</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">11,200 sent · 9 days ago</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;">41% open</span></div></div></div></div></div>`;
const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Segment Created</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">4,287 contacts</span></div><div style="padding:10px 14px;"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;margin-bottom:8px;"><div style="font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:6px;">✓ Engaged Subscribers</div><div style="font-size:10px;color:rgba(255,255,255,0.4);">Criteria: Opened 2+ emails in last 30 days</div></div><div style="font-size:10px;color:rgba(255,255,255,0.4);">• 4,287 contacts matched<br>• Avg open rate: 34.2%<br>• Ready to use in campaigns</div></div></div>`; const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Campaign Scheduled</span></div></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Product Update Newsletter</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;"><div style="margin-bottom:6px;">📅 <span style="color:#22c55e;font-weight:600;">Monday, 9:00 AM EST</span></div><div style="font-size:10px;opacity:0.7;">8,920 recipients · Newsletter Subscribers list</div></div></div><div style="padding:10px 14px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);">Campaign ID: 247 · Preview sent to your email</div></div></div>`;
const messages = [ const messages = [
{ type:'user', text:'Which campaigns had the highest open rate last month?' }, { type:'user', text:'Show me all campaigns sent in the last 30 days' },
{ type:'ai', text:'Top 3 campaigns by open rate:', embed: embed_1 }, { type:'ai', text:'You sent 8 campaigns in the last 30 days:', embed: embed_1 },
{ type:'user', text:'Create a segment of engaged subscribers' }, { type:'user', text:'Create a new campaign for the product update newsletter and send it Monday at 9am' },
{ type:'ai', text:'Done! Created "Engaged Subscribers" segment:', embed: embed_3 }, { type:'ai', text:'Campaign created and scheduled:', embed: embed_3 },
]; ];
function createMessage(msg){ function createMessage(msg){
const div = document.createElement('div'); const div = document.createElement('div');
@ -763,7 +750,7 @@
{ text:'', color:'text-white', delay:1600 }, { text:'', color:'text-white', delay:1600 },
{ text:' Connecting to Brevo API...', color:'text-zinc-500', delay:2000 }, { text:' Connecting to Brevo API...', color:'text-zinc-500', delay:2000 },
{ text:'✓ Connected to Brevo API', color:'text-green-400', delay:3000 }, { text:'✓ Connected to Brevo API', color:'text-green-400', delay:3000 },
{ text:'✓ 56 tools loaded', color:'text-green-400', delay:3600 }, { text:'✓ 52 tools loaded', color:'text-green-400', delay:3600 },
{ text:'✓ Ready! Ask your AI anything about Brevo', color:'text-green-400', delay:4200 }, { text:'✓ Ready! Ask your AI anything about Brevo', color:'text-green-400', delay:4200 },
]; ];
const termContainer = document.getElementById('terminal-lines'); const termContainer = document.getElementById('terminal-lines');

865
competitor-research/index.html Normal file
View File

@ -0,0 +1,865 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCPEngage for Competitor Research — AI-Power Your Market Intel in 2 Clicks</title>
<meta name="description" content="Connect Competitor Research tools to any AI model with MCPEngage. Track competitors, analyze markets, and monitor trends through natural conversation.">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
colors: {
brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 6s ease infinite;
}
@keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.mesh-gradient {
background:
radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
}
.glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
@supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
.glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
@supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
.glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
.glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
.float { animation: float 6s ease-in-out infinite; }
.float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
.gradient-border { position: relative; }
.gradient-border::before {
content:''; position:absolute; inset:0; padding:2px;
background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
border-radius: inherit;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
.feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
.feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.btn-shine { position:relative; overflow:hidden; }
.btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
.btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
.scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
@keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
.noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
.reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
.js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
.js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
.js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
.counter { font-variant-numeric: tabular-nums; }
.stat-card { transition: transform 0.3s ease; }
.stat-card:hover { transform: translateY(-5px); }
@media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
.terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
.faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.3s ease; }
</style>
</head>
<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
<a href="/" class="flex items-center gap-2 sm:gap-3 group">
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
<span class="font-black text-xs sm:text-sm text-black">ME</span>
</div>
<span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
</a>
<div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
<a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
<a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
<a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
</div>
<a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
</div>
</nav>
<!-- HERO -->
<section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
<div class="absolute inset-0 mesh-gradient opacity-60"></div>
<div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
<div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
<div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
<div class="max-w-7xl mx-auto relative z-10">
<div class="flex justify-center mb-6 sm:mb-8 reveal-up">
<div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
<span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
</span>
Now Available — Connect Research + AI
</div>
</div>
<div class="text-center mb-6 sm:mb-8">
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
<span class="block">AI-Power Your</span>
<span class="block gradient-text">Competitor Research</span>
<span class="block">in 2 Clicks</span>
</h1>
</div>
<p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
MCPEngage connects market research tools to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Track competitors, analyze markets, and monitor trends — all through conversation.</span>
</p>
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
<a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
<span>Join Waitlist</span>
<i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
</a>
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/competitor-research" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
<div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
<i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
</div>
<span>View on GitHub</span>
</a>
</div>
<!-- Product Mockup -->
<div class="relative max-w-6xl mx-auto reveal-scale">
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
<div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
<div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
<div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
<div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
<div class="flex items-center gap-1.5 sm:gap-2">
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
</div>
<div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
<i data-lucide="lock" class="w-3 h-3"></i>
app.mcpengage.com/competitor-research
</div>
<div class="w-16 sm:w-20"></div>
</div>
<div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
<!-- Sidebar -->
<div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
<i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div>
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
<i data-lucide="search" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div>
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
<i data-lucide="trending-up" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div>
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
<i data-lucide="target" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div>
</div>
<!-- Chat panel -->
<div class="flex-1 flex flex-col">
<div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
<div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
<div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
<input type="text" placeholder="Ask about your competitors..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
<button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
<i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
</button>
</div>
</div>
</div>
<!-- Right panel -->
<div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
<div class="flex border-b border-white/5">
<button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
<i data-lucide="target" class="w-4 h-4"></i>
Tracked
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">14</span>
</button>
<button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
<i data-lucide="bell" class="w-4 h-4"></i>
Alerts
</button>
</div>
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
<div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
<div class="flex items-start justify-between mb-2 xl:mb-3">
<div>
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">TechCorp — Product Launch</h4>
<p class="text-[10px] xl:text-xs text-zinc-500">2 days ago • Enterprise SaaS</p>
</div>
<span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">High Impact</span>
</div>
<div class="flex gap-1.5 xl:gap-2">
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">New pricing</span>
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">3 features</span>
</div>
</div>
<div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
<div class="flex items-start justify-between mb-2 xl:mb-3">
<div>
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">CompeteFlow — Funding Round</h4>
<p class="text-[10px] xl:text-xs text-zinc-500">1 week ago • Series B $45M</p>
</div>
<span class="px-2 py-0.5 rounded-md bg-yellow-500/20 text-yellow-400 text-[10px] xl:text-xs font-bold">Watch</span>
</div>
<div class="flex gap-1.5 xl:gap-2">
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Expansion</span>
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">4 markets</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden sm:flex justify-center mt-10 lg:mt-16">
<div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
<span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</div>
</div>
</div>
</section>
<!-- STATS BAR -->
<section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
<div class="max-w-7xl mx-auto relative">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
<div class="stat-card text-center">
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="38">0</span>+</div>
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Research Tools</div>
</div>
<div class="stat-card text-center">
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
</div>
<div class="stat-card text-center">
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
</div>
<div class="stat-card text-center">
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
<div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Monitoring</div>
</div>
</div>
</div>
</section>
<!-- TERMINAL / INSTALL -->
<section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-10 sm:mb-14 reveal-up">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
<i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
Quick Install
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
Up and Running in<br><span class="gradient-text">One Command</span>
</h2>
</div>
<div class="reveal-scale">
<div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
<div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
<div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
<div class="flex items-center gap-1.5 sm:gap-2">
<div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
</div>
<span class="text-xs text-zinc-600 font-mono">~/projects</span>
<button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
</div>
<div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
<div id="terminal-lines" class="space-y-1"></div>
</div>
</div>
</div>
</div>
<div class="mt-6 sm:mt-8 text-center reveal-up">
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/competitor-research" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
<i data-lucide="github" class="w-5 h-5"></i>
<span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
<i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
</a>
</div>
</div>
</section>
<!-- BEFORE & AFTER -->
<section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
<div class="absolute inset-0 mesh-gradient opacity-20"></div>
<div class="max-w-6xl mx-auto relative">
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
<i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
The Difference
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
Before vs. <span class="gradient-text">After</span>
</h2>
</div>
<div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
</div>
<h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
</div>
<ul class="space-y-4">
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual monitoring</p><p class="text-xs sm:text-sm text-zinc-500">Check competitor websites, LinkedIn, and press releases daily for product updates and pricing changes</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Spreadsheet chaos</p><p class="text-xs sm:text-sm text-zinc-500">Maintain a Google Sheet with competitor features, pricing tiers, and launch dates — always outdated</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Missed opportunities</p><p class="text-xs sm:text-sm text-zinc-500">Competitor launches new feature — you find out weeks later from a customer who switched</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Shallow analysis</p><p class="text-xs sm:text-sm text-zinc-500">"How do we compare?" — you spend hours building feature comparison tables from scratch</p></div></li>
</ul>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
</div>
<h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
</div>
<ul class="space-y-4">
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time alerts</p><p class="text-xs sm:text-sm text-zinc-500">"What changed at TechCorp this week?" — AI delivers pricing updates, feature launches, and news</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Instant comparisons</p><p class="text-xs sm:text-sm text-zinc-500">"Compare our pricing to top 5 competitors" — automated table with features, tiers, and gaps</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Proactive intel</p><p class="text-xs sm:text-sm text-zinc-500">AI monitors competitor sites, sends alerts when they launch features or change pricing — you react fast</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Deep market insights</p><p class="text-xs sm:text-sm text-zinc-500">"Which competitor is gaining market share?" — AI analyzes funding, job postings, and product velocity</p></div></li>
</ul>
</div>
</div>
</div>
</section>
<!-- PAIN POINTS -->
<section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
<i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
The Problem
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
Your Competitive Intel Is<br><span class="text-red-400">Always Outdated</span>
</h2>
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
You know competitors matter, but tracking them manually is a full-time job you don't have.
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="search" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Manual Surveillance</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You're checking competitor websites, social media, and press releases daily. One person's job is babysitting Google Alerts and praying nothing slips through.</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="file-text" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Stale Spreadsheets</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your competitive analysis lives in a Google Sheet that's out of date the moment you close it. Updates require hours of research and manual data entry.</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="alert-triangle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Reactive Strategy</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Competitors launch features, drop prices, or raise funding — and you find out from customers or LinkedIn. By then, you're already behind.</p>
</div>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
<div class="absolute inset-0 mesh-gradient opacity-30"></div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
<div class="max-w-5xl mx-auto relative">
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
<i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
The Solution
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
Three Steps to<br><span class="gradient-text">AI-Powered Research</span>
</h2>
</div>
<div class="space-y-4 sm:space-y-6 lg:space-y-8">
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
</div>
<div class="text-center lg:text-left">
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your Sources</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Add competitor domains, RSS feeds, and API keys for research tools (Crunchbase, SimilarWeb, etc.). MCPEngage builds 38+ research tools automatically. No code required.</p>
</div>
</div>
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
</div>
<div class="text-center lg:text-left">
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"What did TechCorp launch this month?" "Compare our features to CompeteFlow." "Which competitor raised funding?" Your AI understands market research like a veteran analyst.</p>
</div>
</div>
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
</div>
<div class="text-center lg:text-left">
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Intelligence Gathering</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: monitor competitor sites, track pricing changes, flag product launches, analyze funding announcements, and generate weekly reports — all running 24/7.</p>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES GRID -->
<section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
<i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
Features
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
Everything to<br><span class="gradient-text">Dominate Your Market</span>
</h2>
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
38+ research tools accessible through one natural-language interface.
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Competitor Monitoring</h3>
<p class="text-zinc-400 text-sm sm:text-base">Track websites, product updates, pricing changes, and feature launches. "Show me all changes at TechCorp this month."</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="trending-up" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Market Trend Analysis</h3>
<p class="text-zinc-400 text-sm sm:text-base">Monitor industry trends, emerging technologies, and shifting customer preferences. "What's trending in SaaS?"</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="dollar-sign" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Pricing Intelligence</h3>
<p class="text-zinc-400 text-sm sm:text-base">Track competitor pricing tiers, discounts, and packaging changes. "How does our pricing compare?"</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="briefcase" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Funding & Growth Tracking</h3>
<p class="text-zinc-400 text-sm sm:text-base">Monitor funding rounds, acquisitions, job postings, and expansion signals. "Who raised money this quarter?"</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Feature Comparison</h3>
<p class="text-zinc-400 text-sm sm:text-base">Generate side-by-side feature matrices and gap analyses. "Compare our roadmap to top 3 competitors."</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="bell" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Smart Alerts</h3>
<p class="text-zinc-400 text-sm sm:text-base">Get notified when competitors launch products, change pricing, hire executives, or publish content.</p>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
<div class="max-w-3xl mx-auto">
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
<i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
FAQ
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
Common <span class="gradient-text">Questions</span>
</h2>
</div>
<div class="space-y-3 sm:space-y-4" id="faq-list">
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time access to research tools and data.
</div>
</div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What sources can it monitor?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
MCPEngage can track competitor websites, RSS feeds, API-based tools (Crunchbase, SimilarWeb, LinkedIn), press releases, social media, job boards, and more. You control which sources to monitor.
</div>
</div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is this legal?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
Yes. MCPEngage monitors publicly available information like websites, press releases, and social media. It does not scrape private data or bypass authentication. Always comply with terms of service.
</div>
</div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it integrate with existing tools?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
Yes! MCPEngage connects to Crunchbase, SimilarWeb, SEMrush, Ahrefs, Google Analytics, and more. It can also sync findings to Notion, Slack, or your internal dashboards.
</div>
</div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
</div>
</div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
Yes! MCPEngage supports 66+ platforms including Slack, Notion, Salesforce, HubSpot, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
</div>
</div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
<div class="absolute inset-0 mesh-gradient"></div>
<div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
<div class="max-w-4xl mx-auto text-center relative">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
Start Tracking Competitors<br><span class="gradient-text">Today</span>
</h2>
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
Join thousands of businesses using MCPEngage to supercharge their market research.
</p>
<form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
<div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
<div class="flex gap-3">
<input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
<input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
</div>
<input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
<input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
</div>
<button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
Join Waitlist
</button>
<p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
</form>
<div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
<div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
<div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
<p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Competitor Research is ready.</p>
</div>
</div>
<p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
</div>
</section>
<!-- FOOTER -->
<footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
<a href="/" class="flex items-center gap-2 sm:gap-3">
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
<span class="font-black text-base sm:text-lg text-black">ME</span>
</div>
<span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
</a>
<div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
<a href="#features" class="hover:text-white transition-colors">Features</a>
<a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
<a href="#faq" class="hover:text-white transition-colors">FAQ</a>
<a href="#" class="hover:text-white transition-colors">Privacy</a>
<a href="#" class="hover:text-white transition-colors">Terms</a>
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
</div>
<p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
</div>
</div>
</footer>
<!-- SCRIPTS -->
<script>
lucide.createIcons();
document.body.classList.add('js-loaded');
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('.reveal-up').forEach(el => {
gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
});
});
gsap.utils.toArray('.reveal-scale').forEach(el => {
gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
});
});
gsap.utils.toArray('.stagger-item').forEach((el, i) => {
gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
delay: (i % 4) * 0.1
});
});
document.querySelectorAll('.counter').forEach(counter => {
const target = parseInt(counter.dataset.target);
ScrollTrigger.create({
trigger: counter, start:"top 80%",
onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
once: true
});
});
const navbar = document.getElementById('navbar');
ScrollTrigger.create({
start:"top -80",
onUpdate: self => {
if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
}
});
// CHAT DEMO
const chatDemo = document.getElementById('chat-demo');
const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">TechCorp — 4 Updates</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">High priority</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">New AI features launched</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">2 days ago · Product page</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Competitive</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#f59e0b;">$</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Pricing page updated</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">1 week ago · 15% price drop</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">Monitor</span></div></div></div></div></div>`;
const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Feature Comparison</span></div></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;"><div style="margin-bottom:6px;font-weight:600;color:rgba(255,255,255,0.7);">Your Product vs 2 Competitors</div><div style="font-size:10px;">✅ 12 features ahead · ⚠️ 3 gaps · 📊 Full table exported to Notion</div></div></div><div style="padding:10px 14px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);">Analysis includes pricing, integrations, and roadmap intel</div></div></div>`;
const messages = [
{ type:'user', text:'What updates did TechCorp make in the last 30 days?' },
{ type:'ai', text:'TechCorp made 4 significant updates:', embed: embed_1 },
{ type:'user', text:'Create a comparison table of our features vs TechCorp and CompeteFlow' },
{ type:'ai', text:'Feature comparison generated:', embed: embed_3 },
];
function createMessage(msg){
const div = document.createElement('div');
div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
div.style.opacity='0'; div.style.transform='translateY(15px)';
if(msg.type==='user'){
div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
} else {
const embedHtml = msg.embed || '';
div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo, start:"top 75%",
onEnter: () => {
if(chatAnimated) return; chatAnimated = true;
messages.forEach((msg,i) => {
setTimeout(() => {
const el = createMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i*1200);
});
},
once: true
});
// TERMINAL TYPING
const termLines = [
{ text:'$ npx mcpengage init', color:'text-white', delay:0 },
{ text:'', color:'text-white', delay:600 },
{ text:'? Select your platform: Competitor Research', color:'text-cyan-400', delay:1200 },
{ text:'', color:'text-white', delay:1600 },
{ text:' Connecting to research APIs...', color:'text-zinc-500', delay:2000 },
{ text:'✓ Connected to research tools', color:'text-green-400', delay:3000 },
{ text:'✓ 38 tools loaded', color:'text-green-400', delay:3600 },
{ text:'✓ Ready! Ask your AI anything about competitors', color:'text-green-400', delay:4200 },
];
const termContainer = document.getElementById('terminal-lines');
let termAnimated = false;
function typeTermLine(lineEl, text, speed=30) {
return new Promise(resolve => {
let idx = 0;
const cursor = document.createElement('span');
cursor.className = 'terminal-cursor';
lineEl.appendChild(cursor);
function tick() {
if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
else { cursor.remove(); resolve(); }
}
tick();
});
}
ScrollTrigger.create({
trigger: termContainer, start:"top 80%",
onEnter: async () => {
if(termAnimated) return; termAnimated = true;
for(const line of termLines) {
await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
const lineEl = document.createElement('div');
lineEl.className = line.color || 'text-white';
termContainer.appendChild(lineEl);
if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
}
const finalCursor = document.createElement('div');
finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
termContainer.appendChild(finalCursor);
},
once: true
});
// FAQ
function toggleFaq(btn) {
const item = btn.closest('.faq-item');
const wasOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
if(!wasOpen) item.classList.add('open');
}
// WAITLIST FORM → GoHighLevel
async function submitWaitlist(e) {
e.preventDefault();
const btn = document.getElementById('wl-btn');
const status = document.getElementById('wl-status');
const form = document.getElementById('waitlist-form');
const success = document.getElementById('wl-success');
btn.disabled = true;
btn.textContent = 'Joining...';
status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
status.textContent = 'Adding you to the waitlist...';
const firstName = document.getElementById('wl-first').value.trim();
const lastName = document.getElementById('wl-last').value.trim();
const phone = document.getElementById('wl-phone').value.trim();
const email = document.getElementById('wl-email').value.trim();
const platformName = 'Competitor Research';
try {
const body = {
firstName,
lastName,
phone,
tags: ['MCP waitlist', platformName],
source: 'MCPEngage Waitlist — ' + platformName
};
if (email) body.email = email;
if (!body.name) body.name = firstName + ' ' + lastName;
const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
if (res.ok || res.status === 200 || res.status === 201) {
form.classList.add('hidden');
success.classList.remove('hidden');
lucide.createIcons();
} else {
const errData = await res.json().catch(() => ({}));
throw new Error(errData.message || 'Server error');
}
} catch (err) {
status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
status.textContent = 'Something went wrong. Please try again.';
btn.disabled = false;
btn.textContent = 'Join Waitlist';
console.error('Waitlist error:', err);
}
return false;
}
// MAGNETIC BUTTONS
if(window.innerWidth >= 1024) {
document.querySelectorAll('.magnetic-btn').forEach(btn => {
btn.addEventListener('mousemove', e => {
const rect = btn.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width/2;
const y = e.clientY - rect.top - rect.height/2;
btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
});
btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
});
}
</script>
</body>
</html>

865
compliance-grc/index.html Normal file
View File

@ -0,0 +1,865 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCPEngage for Compliance GRC — AI-Power Your Compliance in 2 Clicks</title>
<meta name="description" content="Connect Compliance GRC tools to any AI model with MCPEngage. Manage controls, risks, policies, and audits through natural conversation.">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
colors: {
brand: { 400: '#4dd8c9', 500: '#17c3b2', 600: '#0fa898' },
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #17c3b2 0%, #0fa898 25%, #06b6d4 50%, #8b5cf6 75%, #17c3b2 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 6s ease infinite;
}
@keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.mesh-gradient {
background:
radial-gradient(at 40% 20%, rgba(23,195,178,0.15) 0px, transparent 50%),
radial-gradient(at 80% 0%, rgba(6,182,212,0.12) 0px, transparent 50%),
radial-gradient(at 0% 50%, rgba(139,92,246,0.1) 0px, transparent 50%),
radial-gradient(at 80% 50%, rgba(23,195,178,0.08) 0px, transparent 50%),
radial-gradient(at 0% 100%, rgba(23,195,178,0.12) 0px, transparent 50%);
}
.glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
@supports (backdrop-filter: blur(20px)) { .glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); } }
.glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
@supports (backdrop-filter: blur(40px)) { .glass-strong { background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); } }
.glow { box-shadow: 0 0 60px rgba(23,195,178,0.2), 0 0 100px rgba(23,195,178,0.1); }
.glow-hover:hover { box-shadow: 0 0 80px rgba(23,195,178,0.3), 0 0 120px rgba(23,195,178,0.15); }
.float { animation: float 6s ease-in-out infinite; }
.float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
.gradient-border { position: relative; }
.gradient-border::before {
content:''; position:absolute; inset:0; padding:2px;
background: linear-gradient(135deg, #17c3b2, #0fa898, #06b6d4, #8b5cf6, #17c3b2);
background-size: 300% 300%; animation: gradient-shift 4s linear infinite;
border-radius: inherit;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.feature-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(23,195,178,0.15); border-color: rgba(23,195,178,0.3); }
.feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
.feature-icon { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.btn-shine { position:relative; overflow:hidden; }
.btn-shine::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
.btn-shine:hover::after { transform: rotate(45deg) translateX(100%); }
.scroll-indicator { animation: scroll-bounce 2s ease-in-out infinite; }
@keyframes scroll-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0.5} }
.noise::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
.reveal-up, .reveal-scale, .stagger-item { opacity:1; transform:none; }
.js-loaded .reveal-up { opacity:0; transform:translateY(60px); }
.js-loaded .reveal-scale { opacity:0; transform:scale(0.95); }
.js-loaded .stagger-item { opacity:0; transform:translateY(40px); }
.counter { font-variant-numeric: tabular-nums; }
.stat-card { transition: transform 0.3s ease; }
.stat-card:hover { transform: translateY(-5px); }
@media (min-width:1024px) { .magnetic-btn { transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); } }
.terminal-cursor { display:inline-block; width:8px; height:18px; background:#17c3b2; animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), padding 0.4s ease; padding-top:0; padding-bottom:0; }
.faq-item.open .faq-answer { max-height:300px; padding-top:1rem; padding-bottom:0.25rem; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.3s ease; }
</style>
</head>
<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
<a href="/" class="flex items-center gap-2 sm:gap-3 group">
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
<span class="font-black text-xs sm:text-sm text-black">ME</span>
</div>
<span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
</a>
<div class="hidden md:flex items-center gap-8 lg:gap-10 text-sm font-medium text-zinc-400">
<a href="#features" class="hover:text-white transition-colors relative group">Features<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
<a href="#how-it-works" class="hover:text-white transition-colors relative group">How It Works<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
<a href="#faq" class="hover:text-white transition-colors relative group">FAQ<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span></a>
</div>
<a href="#cta" class="magnetic-btn px-4 sm:px-5 py-2 sm:py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">Join Waitlist</a>
</div>
</nav>
<!-- HERO -->
<section class="min-h-screen pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
<div class="absolute inset-0 mesh-gradient opacity-60"></div>
<div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
<div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
<div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
<div class="max-w-7xl mx-auto relative z-10">
<div class="flex justify-center mb-6 sm:mb-8 reveal-up">
<div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
<span class="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
</span>
Now Available — Connect GRC + AI
</div>
</div>
<div class="text-center mb-6 sm:mb-8">
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]">
<span class="block">AI-Power Your</span>
<span class="block gradient-text">Compliance GRC</span>
<span class="block">in 2 Clicks</span>
</h1>
</div>
<p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
MCPEngage connects GRC platforms to any AI model via MCP.<br class="hidden sm:block"><span class="text-white font-semibold">Manage controls, track risks, and handle audits — all through conversation.</span>
</p>
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
<a href="#cta" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
<span>Join Waitlist</span>
<i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
</a>
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/compliance-grc" target="_blank" rel="noopener" class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
<div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
<i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
</div>
<span>View on GitHub</span>
</a>
</div>
<!-- Product Mockup -->
<div class="relative max-w-6xl mx-auto reveal-scale">
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
<div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
<div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
<div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
<div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
<div class="flex items-center gap-1.5 sm:gap-2">
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
</div>
<div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
<i data-lucide="lock" class="w-3 h-3"></i>
app.mcpengage.com/compliance-grc
</div>
<div class="w-16 sm:w-20"></div>
</div>
<div class="flex h-[320px] sm:h-[420px] md:h-[500px] lg:h-[600px]">
<!-- Sidebar -->
<div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400 transition-colors">
<i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div>
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
<i data-lucide="shield" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div>
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
<i data-lucide="alert-triangle" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div>
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
<i data-lucide="file-text" class="w-4 h-4 lg:w-5 lg:h-5"></i>
</div>
</div>
<!-- Chat panel -->
<div class="flex-1 flex flex-col">
<div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-y-auto overflow-x-hidden" id="chat-demo" style="scrollbar-width:none;-ms-overflow-style:none;"></div>
<div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
<div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
<input type="text" placeholder="Ask about your compliance status..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
<button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors flex-shrink-0">
<i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
</button>
</div>
</div>
</div>
<!-- Right panel -->
<div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
<div class="flex border-b border-white/5">
<button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
<i data-lucide="shield" class="w-4 h-4"></i>
Controls
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">142</span>
</button>
<button class="flex-1 px-4 xl:px-5 py-3 xl:py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
<i data-lucide="alert-triangle" class="w-4 h-4"></i>
Risks
</button>
</div>
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
<div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
<div class="flex items-start justify-between mb-2 xl:mb-3">
<div>
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Access Control Review</h4>
<p class="text-[10px] xl:text-xs text-zinc-500">Due in 5 days • SOC 2 requirement</p>
</div>
<span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] xl:text-xs font-bold">Overdue</span>
</div>
<div class="flex gap-1.5 xl:gap-2">
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">Critical</span>
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">IT dept</span>
</div>
</div>
<div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
<div class="flex items-start justify-between mb-2 xl:mb-3">
<div>
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Data Encryption Policy</h4>
<p class="text-[10px] xl:text-xs text-zinc-500">Reviewed 2 days ago • Approved</p>
</div>
<span class="px-2 py-0.5 rounded-md bg-green-500/20 text-green-400 text-[10px] xl:text-xs font-bold">Compliant</span>
</div>
<div class="flex gap-1.5 xl:gap-2">
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">SOC 2</span>
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Security</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden sm:flex justify-center mt-10 lg:mt-16">
<div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
<span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</div>
</div>
</div>
</section>
<!-- STATS BAR -->
<section class="py-8 sm:py-10 lg:py-12 px-4 sm:px-6 border-y border-white/5 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
<div class="max-w-7xl mx-auto relative">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
<div class="stat-card text-center">
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2"><span class="counter" data-target="45">0</span>+</div>
<div class="text-xs sm:text-sm text-zinc-500 font-medium">GRC Tools</div>
</div>
<div class="stat-card text-center">
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="0">0</span></div>
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Setup Cost</div>
</div>
<div class="stat-card text-center">
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2"><span class="counter" data-target="2">0</span>min</div>
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Install Time</div>
</div>
<div class="stat-card text-center">
<div class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2">24/7</div>
<div class="text-xs sm:text-sm text-zinc-500 font-medium">AI Compliance</div>
</div>
</div>
</div>
</section>
<!-- TERMINAL / INSTALL -->
<section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-10 sm:mb-14 reveal-up">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6">
<i data-lucide="terminal" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
Quick Install
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 leading-tight">
Up and Running in<br><span class="gradient-text">One Command</span>
</h2>
</div>
<div class="reveal-scale">
<div class="gradient-border rounded-2xl lg:rounded-3xl glow relative">
<div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl overflow-hidden">
<div class="flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 border-b border-white/5">
<div class="flex items-center gap-1.5 sm:gap-2">
<div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500"></div>
</div>
<span class="text-xs text-zinc-600 font-mono">~/projects</span>
<button id="copy-btn" onclick="navigator.clipboard.writeText('npx mcpengage init');this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',2000)" class="px-3 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-xs text-zinc-400 font-medium transition-colors">Copy</button>
</div>
<div class="p-5 sm:p-6 lg:p-8 font-mono text-sm sm:text-base leading-relaxed" id="terminal-body">
<div id="terminal-lines" class="space-y-1"></div>
</div>
</div>
</div>
</div>
<div class="mt-6 sm:mt-8 text-center reveal-up">
<a href="https://github.com/BusyBee3333/mcpengine/tree/main/servers/compliance-grc" target="_blank" rel="noopener" class="inline-flex items-center gap-2 sm:gap-3 text-zinc-400 hover:text-white transition-colors group">
<i data-lucide="github" class="w-5 h-5"></i>
<span class="text-sm sm:text-base font-medium">Open source — view the full code on GitHub</span>
<i data-lucide="external-link" class="w-3.5 h-3.5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
</a>
</div>
</div>
</section>
<!-- BEFORE & AFTER -->
<section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
<div class="absolute inset-0 mesh-gradient opacity-20"></div>
<div class="max-w-6xl mx-auto relative">
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
<i data-lucide="arrow-left-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
The Difference
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
Before vs. <span class="gradient-text">After</span>
</h2>
</div>
<div class="grid md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/20 feature-card stagger-item">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
<i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6 text-red-400"></i>
</div>
<h3 class="text-lg sm:text-xl lg:text-2xl font-black text-red-400">Before MCPEngage</h3>
</div>
<ul class="space-y-4">
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="clock" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Spreadsheet audits</p><p class="text-xs sm:text-sm text-zinc-500">Track 200+ controls across SOC 2, GDPR, and HIPAA in Excel — version conflicts everywhere</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="copy" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Manual evidence collection</p><p class="text-xs sm:text-sm text-zinc-500">Auditor asks for access logs — you spend 3 hours exporting from 5 different systems</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="layout-grid" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Risk assessment chaos</p><p class="text-xs sm:text-sm text-zinc-500">Quarterly risk reviews require collecting input from 12 departments via email threads</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="hourglass" class="w-3.5 h-3.5 text-red-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Policy update hell</p><p class="text-xs sm:text-sm text-zinc-500">Update password policy — must manually notify teams, track acknowledgments, update docs</p></div></li>
</ul>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-brand-500/20 feature-card stagger-item">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
<i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6 text-brand-400"></i>
</div>
<h3 class="text-lg sm:text-xl lg:text-2xl font-black text-brand-400">After MCPEngage</h3>
</div>
<ul class="space-y-4">
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="zap" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Real-time compliance view</p><p class="text-xs sm:text-sm text-zinc-500">"Show me all overdue SOC 2 controls" — instant list with owners, due dates, and evidence gaps</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="sparkles" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Automated evidence</p><p class="text-xs sm:text-sm text-zinc-500">"Pull access logs for Q4 audit" — AI collects from AWS, Okta, GitHub, formats for auditors</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="message-square" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Smart risk tracking</p><p class="text-xs sm:text-sm text-zinc-500">"What are our top 5 risks?" — AI scores by likelihood + impact, surfaces mitigation status</p></div></li>
<li class="flex items-start gap-3"><div class="w-6 h-6 rounded-full bg-brand-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i data-lucide="rocket" class="w-3.5 h-3.5 text-brand-400"></i></div><div><p class="text-sm sm:text-base text-zinc-300 font-medium">Policy automation</p><p class="text-xs sm:text-sm text-zinc-500">"Update MFA policy and notify all employees" — AI updates docs, sends emails, tracks reads</p></div></li>
</ul>
</div>
</div>
</div>
</section>
<!-- PAIN POINTS -->
<section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
<i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
The Problem
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
Your Compliance Program Is<br><span class="text-red-400">Drowning in Spreadsheets</span>
</h2>
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
You're compliant on paper, but proving it to auditors is a nightmare of manual work.
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="shield" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Control Chaos</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">You're tracking 100+ controls across SOC 2, ISO 27001, and GDPR. Each control has owners, evidence, and testing schedules — all managed in spreadsheets that break constantly.</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="alert-triangle" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Risk Blindness</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Your risk register is a static document updated quarterly. By the time you score a new risk, the business has already changed. You're always reactive, never proactive.</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="file-text" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
</div>
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Audit Nightmares</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Auditors request evidence for 50 controls. You spend weeks hunting down screenshots, logs, and policy docs from Slack, Notion, and five different SaaS tools. Every audit is chaos.</p>
</div>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
<div class="absolute inset-0 mesh-gradient opacity-30"></div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
<div class="max-w-5xl mx-auto relative">
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
<i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
The Solution
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
Three Steps to<br><span class="gradient-text">AI-Powered GRC</span>
</h2>
</div>
<div class="space-y-4 sm:space-y-6 lg:space-y-8">
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
</div>
<div class="text-center lg:text-left">
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Connect Your GRC Platform</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Paste API credentials from your GRC tool (Vanta, Drata, OneTrust, etc.). MCPEngage discovers all controls, risks, policies, and evidence — building 45+ tools automatically. No code required.</p>
</div>
</div>
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
</div>
<div class="text-center lg:text-left">
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Ask in Plain English</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">"Show me overdue SOC 2 controls." "What's our highest-priority risk?" "Pull Q4 audit evidence." Your AI understands compliance like a veteran GRC analyst.</p>
</div>
</div>
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
<span class="text-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
</div>
<div class="text-center lg:text-left">
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Automate Compliance Ops</h3>
<p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Set up workflows: collect evidence, track control testing, monitor risks, send policy updates, generate audit reports, and flag gaps — all running 24/7.</p>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES GRID -->
<section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
<i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
Features
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
Everything to<br><span class="gradient-text">Dominate Compliance</span>
</h2>
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
45+ GRC tools accessible through one natural-language interface.
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="shield" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Control Management</h3>
<p class="text-zinc-400 text-sm sm:text-base">Track, test, and monitor controls across frameworks. "Show me all critical controls due this month."</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="alert-triangle" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Risk Intelligence</h3>
<p class="text-zinc-400 text-sm sm:text-base">Score, prioritize, and mitigate risks with AI-assisted analysis. "What are our top cyber risks?"</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">Policy Automation</h3>
<p class="text-zinc-400 text-sm sm:text-base">Draft, update, distribute, and track policy acknowledgments. "Send updated security policy to all employees."</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Evidence Collection</h3>
<p class="text-zinc-400 text-sm sm:text-base">Automatically gather audit evidence from integrated systems. "Pull access logs for SOC 2."</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="bar-chart" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">Audit Reporting</h3>
<p class="text-zinc-400 text-sm sm:text-base">Generate compliance reports, status dashboards, and readiness assessments on demand.</p>
</div>
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
<i data-lucide="bell" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
</div>
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Smart Alerts</h3>
<p class="text-zinc-400 text-sm sm:text-base">Get notified about overdue controls, high-priority risks, and upcoming audit deadlines.</p>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
<div class="max-w-3xl mx-auto">
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
<i data-lucide="help-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
FAQ
</div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black mb-4 sm:mb-6 reveal-up leading-tight">
Common <span class="gradient-text">Questions</span>
</h2>
</div>
<div class="space-y-3 sm:space-y-4" id="faq-list">
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">What is MCP?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
MCP (Model Context Protocol) is an open standard created by Anthropic that lets AI models securely connect to external tools and data sources. Think of it as a USB port for AI — MCPEngage uses MCP to give your AI real-time access to GRC platforms.
</div>
</div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Which GRC platforms are supported?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
MCPEngage integrates with Vanta, Drata, OneTrust, LogicGate, and other major GRC tools. It can also work with custom compliance databases via API.
</div>
</div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Is my compliance data secure?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
Absolutely. MCPEngage runs locally or in your own infrastructure — compliance data never passes through our servers. API keys are encrypted at rest. You control all access permissions.
</div>
</div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can it help with multiple frameworks?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
Yes! MCPEngage supports SOC 2, ISO 27001, GDPR, HIPAA, PCI-DSS, and custom frameworks. It maps controls across frameworks to reduce duplication.
</div>
</div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">How much does it cost?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
MCPEngage is free during the beta period. After launch, pricing starts at $29/month per platform connection. Enterprise plans with custom integrations and priority support are available on request.
</div>
</div>
<div class="faq-item glass rounded-2xl overflow-hidden feature-card stagger-item">
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
<span class="font-bold text-sm sm:text-base lg:text-lg pr-4">Can I use it with other platforms?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 faq-chevron flex-shrink-0"></i>
</button>
<div class="faq-answer px-5 sm:px-6 text-zinc-400 text-sm sm:text-base leading-relaxed">
Yes! MCPEngage supports 66+ platforms including Slack, Jira, AWS, Okta, and many more. Each platform gets its own MCP server with platform-specific tools. Connect as many as you need.
</div>
</div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section id="cta" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
<div class="absolute inset-0 mesh-gradient"></div>
<div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
<div class="max-w-4xl mx-auto text-center relative">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
Start Automating Compliance<br><span class="gradient-text">Today</span>
</h2>
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
Join thousands of businesses using MCPEngage to supercharge their GRC programs.
</p>
<form id="waitlist-form" class="max-w-md mx-auto reveal-up" onsubmit="return submitWaitlist(event)">
<div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
<div class="flex gap-3">
<input type="text" id="wl-first" name="firstName" placeholder="First Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
<input type="text" id="wl-last" name="lastName" placeholder="Last Name *" required class="flex-1 px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
</div>
<input type="tel" id="wl-phone" name="phone" placeholder="Phone Number *" required class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
<input type="email" id="wl-email" name="email" placeholder="Email (optional)" class="w-full px-4 sm:px-5 py-3 sm:py-3.5 glass-strong rounded-xl text-sm sm:text-base outline-none focus:ring-2 focus:ring-brand-500/50 transition-all placeholder:text-zinc-600">
</div>
<button type="submit" id="wl-btn" class="magnetic-btn w-full px-6 sm:px-8 py-3.5 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-xl text-base sm:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine">
Join Waitlist
</button>
<p id="wl-status" class="text-xs sm:text-sm text-zinc-600 mt-3 sm:mt-4 hidden"></p>
</form>
<div id="wl-success" class="hidden max-w-md mx-auto reveal-up">
<div class="glass-strong rounded-2xl p-6 sm:p-8 text-center">
<div class="w-16 h-16 rounded-full bg-brand-500/20 flex items-center justify-center mx-auto mb-4">
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
</div>
<h3 class="text-xl sm:text-2xl font-black mb-2">You're on the list!</h3>
<p class="text-zinc-400 text-sm sm:text-base">We'll notify you as soon as MCPEngage for Compliance GRC is ready.</p>
</div>
</div>
<p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">Free during beta. No credit card required.</p>
</div>
</section>
<!-- FOOTER -->
<footer class="py-10 sm:py-12 lg:py-16 px-4 sm:px-6 border-t border-white/5">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8 lg:gap-10">
<a href="/" class="flex items-center gap-2 sm:gap-3">
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-brand-500 via-teal-400 to-cyan-400 flex items-center justify-center">
<span class="font-black text-base sm:text-lg text-black">ME</span>
</div>
<span class="font-black text-xl sm:text-2xl tracking-tight">MCPEngage</span>
</a>
<div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 text-sm font-medium text-zinc-500">
<a href="#features" class="hover:text-white transition-colors">Features</a>
<a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
<a href="#faq" class="hover:text-white transition-colors">FAQ</a>
<a href="#" class="hover:text-white transition-colors">Privacy</a>
<a href="#" class="hover:text-white transition-colors">Terms</a>
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" rel="noopener" class="hover:text-white transition-colors">GitHub</a>
</div>
<p class="text-xs sm:text-sm text-zinc-600">&copy; 2025 MCPEngage. All rights reserved.</p>
</div>
</div>
</footer>
<!-- SCRIPTS -->
<script>
lucide.createIcons();
document.body.classList.add('js-loaded');
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('.reveal-up').forEach(el => {
gsap.fromTo(el, { opacity:0, y:50 }, { opacity:1, y:0, duration:0.8, ease:"power3.out",
scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
});
});
gsap.utils.toArray('.reveal-scale').forEach(el => {
gsap.fromTo(el, { opacity:0, scale:0.95 }, { opacity:1, scale:1, duration:1, ease:"power3.out",
scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" }
});
});
gsap.utils.toArray('.stagger-item').forEach((el, i) => {
gsap.fromTo(el, { opacity:0, y:30 }, { opacity:1, y:0, duration:0.6, ease:"power3.out",
scrollTrigger:{ trigger:el, start:"top 85%", toggleActions:"play none none none" },
delay: (i % 4) * 0.1
});
});
document.querySelectorAll('.counter').forEach(counter => {
const target = parseInt(counter.dataset.target);
ScrollTrigger.create({
trigger: counter, start:"top 80%",
onEnter: () => { gsap.to(counter, { innerText:target, duration:2, snap:{innerText:1}, ease:"power2.out" }); },
once: true
});
});
const navbar = document.getElementById('navbar');
ScrollTrigger.create({
start:"top -80",
onUpdate: self => {
if(self.scroll()>80){ navbar.classList.add('glass-strong'); navbar.style.borderBottom='1px solid rgba(255,255,255,0.05)'; }
else { navbar.classList.remove('glass-strong'); navbar.style.borderBottom='none'; }
}
});
// CHAT DEMO
const chatDemo = document.getElementById('chat-demo');
const embed_1 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(239,68,68,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#ef4444;"></div><span style="font-size:11px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;">Overdue Controls — Action Required</span></div><span style="font-size:10px;color:rgba(255,255,255,0.3);font-family:monospace;">4 controls</span></div><div style="padding:0;"><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Access Control Review</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">CC6.1 · Due 5 days ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(239,68,68,0.15);color:#f87171;">Critical</span></div></div></div><div style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:10px;font-weight:800;color:#ef4444;">!</span></div><div style="flex:1;min-width:0;"><div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;"><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Vendor Risk Assessment</span></div><div style="display:flex;align-items:center;gap:6px;"><span style="font-size:10px;color:rgba(255,255,255,0.3);">CC9.2 · Due 2 days ago</span><span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(245,158,11,0.15);color:#fbbf24;">High</span></div></div></div></div></div>`;
const embed_3 = `<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-top:8px;max-width:420px;"><div style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(34,197,94,0.05);"><div style="display:flex;align-items:center;gap:8px;"><div style="width:6px;height:6px;border-radius:50%;background:#22c55e;"></div><span style="font-size:11px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:0.5px;">Control Updated</span></div></div><div style="padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);"><div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:20px;height:20px;border-radius:6px;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;"><span style="font-size:11px;color:#22c55e;">✓</span></div><span style="font-size:12px;font-weight:600;color:#e4e4e7;">Access Control Review (CC6.1)</span></div><div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.5);line-height:1.5;"><div style="margin-bottom:6px;">Assigned to: <span style="color:#22c55e;font-weight:600;">Sarah Johnson</span></div><div style="font-size:10px;opacity:0.7;">New due date: Friday, Dec 20 · Notification sent</div></div></div><div style="padding:10px 14px;"><div style="font-size:10px;color:rgba(255,255,255,0.4);">Control status updated in GRC platform</div></div></div>`;
const messages = [
{ type:'user', text:'Show me all overdue SOC 2 controls' },
{ type:'ai', text:'You have 4 overdue SOC 2 controls:', embed: embed_1 },
{ type:'user', text:'Assign the access control review to Sarah and set due date to next Friday' },
{ type:'ai', text:'Control updated and assigned:', embed: embed_3 },
];
function createMessage(msg){
const div = document.createElement('div');
div.className = msg.type==='user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
div.style.opacity='0'; div.style.transform='translateY(15px)';
if(msg.type==='user'){
div.innerHTML=`<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
} else {
const embedHtml = msg.embed || '';
div.innerHTML=`<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm:rounded-xl bg-gradient-to-br from-brand-500 to-teal-400 flex items-center justify-center flex-shrink-0"><span class="font-bold text-[10px] sm:text-xs text-black">ME</span></div><div class="max-w-[90%]"><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p>${embedHtml}</div></div>`;
}
return div;
}
let chatAnimated = false;
ScrollTrigger.create({
trigger: chatDemo, start:"top 75%",
onEnter: () => {
if(chatAnimated) return; chatAnimated = true;
messages.forEach((msg,i) => {
setTimeout(() => {
const el = createMessage(msg);
chatDemo.appendChild(el);
lucide.createIcons();
gsap.to(el, { opacity:1, y:0, duration:0.4, ease:"power2.out" });
chatDemo.scrollTop = chatDemo.scrollHeight;
}, i*1200);
});
},
once: true
});
// TERMINAL TYPING
const termLines = [
{ text:'$ npx mcpengage init', color:'text-white', delay:0 },
{ text:'', color:'text-white', delay:600 },
{ text:'? Select your platform: Compliance GRC', color:'text-cyan-400', delay:1200 },
{ text:'', color:'text-white', delay:1600 },
{ text:' Connecting to GRC platform...', color:'text-zinc-500', delay:2000 },
{ text:'✓ Connected to GRC tools', color:'text-green-400', delay:3000 },
{ text:'✓ 45 tools loaded', color:'text-green-400', delay:3600 },
{ text:'✓ Ready! Ask your AI anything about compliance', color:'text-green-400', delay:4200 },
];
const termContainer = document.getElementById('terminal-lines');
let termAnimated = false;
function typeTermLine(lineEl, text, speed=30) {
return new Promise(resolve => {
let idx = 0;
const cursor = document.createElement('span');
cursor.className = 'terminal-cursor';
lineEl.appendChild(cursor);
function tick() {
if(idx < text.length) { lineEl.insertBefore(document.createTextNode(text[idx]), cursor); idx++; setTimeout(tick, speed); }
else { cursor.remove(); resolve(); }
}
tick();
});
}
ScrollTrigger.create({
trigger: termContainer, start:"top 80%",
onEnter: async () => {
if(termAnimated) return; termAnimated = true;
for(const line of termLines) {
await new Promise(r => setTimeout(r, line.delay ? 400 : 200));
const lineEl = document.createElement('div');
lineEl.className = line.color || 'text-white';
termContainer.appendChild(lineEl);
if(line.text) { await typeTermLine(lineEl, line.text, line.text.startsWith('$') ? 40 : 20); }
}
const finalCursor = document.createElement('div');
finalCursor.innerHTML = '<span class="text-white">$ </span><span class="terminal-cursor"></span>';
termContainer.appendChild(finalCursor);
},
once: true
});
// FAQ
function toggleFaq(btn) {
const item = btn.closest('.faq-item');
const wasOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
if(!wasOpen) item.classList.add('open');
}
// WAITLIST FORM → GoHighLevel
async function submitWaitlist(e) {
e.preventDefault();
const btn = document.getElementById('wl-btn');
const status = document.getElementById('wl-status');
const form = document.getElementById('waitlist-form');
const success = document.getElementById('wl-success');
btn.disabled = true;
btn.textContent = 'Joining...';
status.className = 'text-xs sm:text-sm text-zinc-400 mt-3 sm:mt-4';
status.textContent = 'Adding you to the waitlist...';
const firstName = document.getElementById('wl-first').value.trim();
const lastName = document.getElementById('wl-last').value.trim();
const phone = document.getElementById('wl-phone').value.trim();
const email = document.getElementById('wl-email').value.trim();
const platformName = 'Compliance GRC';
try {
const body = {
firstName,
lastName,
phone,
tags: ['MCP waitlist', platformName],
source: 'MCPEngage Waitlist — ' + platformName
};
if (email) body.email = email;
if (!body.name) body.name = firstName + ' ' + lastName;
const res = await fetch('https://mcpengage-waitlist.jake-2ab.workers.dev', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
if (res.ok || res.status === 200 || res.status === 201) {
form.classList.add('hidden');
success.classList.remove('hidden');
lucide.createIcons();
} else {
const errData = await res.json().catch(() => ({}));
throw new Error(errData.message || 'Server error');
}
} catch (err) {
status.className = 'text-xs sm:text-sm text-red-400 mt-3 sm:mt-4';
status.textContent = 'Something went wrong. Please try again.';
btn.disabled = false;
btn.textContent = 'Join Waitlist';
console.error('Waitlist error:', err);
}
return false;
}
// MAGNETIC BUTTONS
if(window.innerWidth >= 1024) {
document.querySelectorAll('.magnetic-btn').forEach(btn => {
btn.addEventListener('mousemove', e => {
const rect = btn.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width/2;
const y = e.clientY - rect.top - rect.height/2;
btn.style.transform = `translate(${x*0.15}px, ${y*0.15}px) scale(1.02)`;
});
btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
});
}
</script>
</body>
</html>

1394
servicetitan/index.html
View File

File diff suppressed because it is too large Load Diff