867 lines
46 KiB
HTML
867 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CloseBot Connect — AI-Power Your Chatbots in 2 Clicks</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
50: '#f5f3ff',
|
|
100: '#ede9fe',
|
|
200: '#ddd6fe',
|
|
300: '#c4b5fd',
|
|
400: '#a78bfa',
|
|
500: '#7C3AED',
|
|
600: '#6D28D9',
|
|
700: '#5B21B6',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #7C3AED 0%, #a78bfa 50%, #7C3AED 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.hero-glow {
|
|
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.25), transparent);
|
|
}
|
|
.card-glow {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card-glow:hover {
|
|
box-shadow: 0 0 50px rgba(124, 58, 237, 0.2);
|
|
transform: translateY(-4px);
|
|
border-color: rgba(124, 58, 237, 0.5);
|
|
}
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
.animate-float-delayed {
|
|
animation: float 6s ease-in-out infinite;
|
|
animation-delay: -3s;
|
|
}
|
|
.animate-float-slow {
|
|
animation: float 8s ease-in-out infinite;
|
|
}
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
@keyframes pulse-glow {
|
|
0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.4); }
|
|
50% { box-shadow: 0 0 40px rgba(124, 58, 237, 0.6); }
|
|
}
|
|
.video-glow {
|
|
animation: pulse-glow 3s ease-in-out infinite;
|
|
}
|
|
@keyframes gradient-shift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
.animated-gradient {
|
|
background: linear-gradient(90deg, #7C3AED, #a78bfa, #7C3AED);
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 4s ease infinite;
|
|
}
|
|
@keyframes wiggle {
|
|
0%, 100% { transform: rotate(-2deg); }
|
|
50% { transform: rotate(2deg); }
|
|
}
|
|
@keyframes glow-pulse {
|
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(124, 58, 237, 0.4), 0 0 40px 0 rgba(124, 58, 237, 0.2); }
|
|
50% { box-shadow: 0 0 30px 5px rgba(124, 58, 237, 0.6), 0 0 60px 10px rgba(124, 58, 237, 0.3); }
|
|
}
|
|
.sticky-btn {
|
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
}
|
|
.sticky-btn:hover {
|
|
animation: none;
|
|
}
|
|
.feature-icon {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card-glow:hover .feature-icon {
|
|
transform: scale(1.1);
|
|
}
|
|
.orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.5;
|
|
}
|
|
.closebot-gradient {
|
|
background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(167, 139, 250, 0.05) 100%);
|
|
}
|
|
.gradient-border {
|
|
background: linear-gradient(135deg, rgba(124, 58, 237, 0.5), rgba(167, 139, 250, 0.2));
|
|
padding: 1px;
|
|
border-radius: 1rem;
|
|
}
|
|
.gradient-border-inner {
|
|
background: rgb(24 24 27);
|
|
border-radius: calc(1rem - 1px);
|
|
}
|
|
.app-card {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.app-card:hover {
|
|
box-shadow: 0 0 40px rgba(124, 58, 237, 0.15);
|
|
transform: translateY(-2px);
|
|
border-color: rgba(124, 58, 237, 0.4);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
|
|
<!-- Floating Orbs Background -->
|
|
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
<div class="orb w-96 h-96 bg-brand-500/30 top-1/4 -left-48 animate-float"></div>
|
|
<div class="orb w-64 h-64 bg-violet-400/20 top-1/2 -right-32 animate-float-delayed"></div>
|
|
<div class="orb w-72 h-72 bg-purple-500/20 bottom-1/4 left-1/3 animate-float-slow"></div>
|
|
</div>
|
|
|
|
<!-- Nav -->
|
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-violet-400 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
<i data-lucide="bot" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<span class="font-bold text-xl">CloseBot Connect</span>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a href="#features" class="text-zinc-400 hover:text-white transition">Features</a>
|
|
<a href="#demo" class="text-zinc-400 hover:text-white transition">Demo</a>
|
|
<a href="#apps" class="text-zinc-400 hover:text-white transition">Apps</a>
|
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition">Waitlist</a>
|
|
<a href="#faq" class="text-zinc-400 hover:text-white transition">FAQ</a>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<a href="#" class="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
|
<a href="#pricing" class="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-violet-500 hover:from-brand-600 hover:to-violet-600 rounded-xl font-medium transition shadow-lg shadow-brand-500/25">
|
|
Join Waitlist
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
|
<div class="max-w-6xl mx-auto px-6 py-20 text-center relative z-10">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
<span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
|
|
Open Source + Hosted
|
|
</div>
|
|
|
|
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
|
|
Connect <span class="gradient-text">CloseBot</span><br>
|
|
to AI in 2 Clicks
|
|
</h1>
|
|
|
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto mb-10 leading-relaxed">
|
|
The complete CloseBot MCP server. <strong class="text-white">119 tools</strong> for bots, leads, analytics, and automation.
|
|
No setup. No API headaches. Just connect and build.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
|
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-violet-500 hover:from-brand-600 hover:to-violet-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/30">
|
|
Join the Waitlist
|
|
</a>
|
|
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
|
|
<i data-lucide="play-circle" class="w-5 h-5"></i>
|
|
Watch Demo
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Stats Row -->
|
|
<div class="flex flex-wrap items-center justify-center gap-8 md:gap-12 mb-12">
|
|
<div class="text-center">
|
|
<div class="text-3xl md:text-4xl font-extrabold gradient-text">119</div>
|
|
<div class="text-zinc-500 text-sm mt-1">AI Tools</div>
|
|
</div>
|
|
<div class="w-px h-10 bg-zinc-800 hidden md:block"></div>
|
|
<div class="text-center">
|
|
<div class="text-3xl md:text-4xl font-extrabold gradient-text">14</div>
|
|
<div class="text-zinc-500 text-sm mt-1">Lazy Modules</div>
|
|
</div>
|
|
<div class="w-px h-10 bg-zinc-800 hidden md:block"></div>
|
|
<div class="text-center">
|
|
<div class="text-3xl md:text-4xl font-extrabold gradient-text">6</div>
|
|
<div class="text-zinc-500 text-sm mt-1">Visual Apps</div>
|
|
</div>
|
|
<div class="w-px h-10 bg-zinc-800 hidden md:block"></div>
|
|
<div class="text-center">
|
|
<div class="text-3xl md:text-4xl font-extrabold gradient-text">8</div>
|
|
<div class="text-zinc-500 text-sm mt-1">Tool Groups</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social Proof -->
|
|
<div class="flex flex-col items-center gap-4">
|
|
<div class="flex -space-x-3">
|
|
<img src="https://i.pravatar.cc/100?img=11" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
|
</div>
|
|
<p class="text-zinc-400">
|
|
Trusted by <strong class="text-white">500+</strong> chatbot agencies
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Video Demo -->
|
|
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-5xl mx-auto px-6">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
<p class="text-xl text-zinc-400">Watch how AI manages your CloseBot chatbots</p>
|
|
</div>
|
|
<div class="gradient-border">
|
|
<div class="gradient-border-inner p-2">
|
|
<div class="rounded-xl overflow-hidden video-glow">
|
|
<video autoplay loop muted playsinline class="w-full">
|
|
<source src="output/closebot.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center mt-8">
|
|
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="bot" class="w-4 h-4 text-brand-500"></i>
|
|
<span class="text-sm text-zinc-300">Bots</span>
|
|
</div>
|
|
<div class="w-px h-4 bg-zinc-700"></div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="users" class="w-4 h-4 text-brand-500"></i>
|
|
<span class="text-sm text-zinc-300">Leads</span>
|
|
</div>
|
|
<div class="w-px h-4 bg-zinc-700"></div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="bar-chart-3" class="w-4 h-4 text-brand-500"></i>
|
|
<span class="text-sm text-zinc-300">Analytics</span>
|
|
</div>
|
|
<div class="w-px h-4 bg-zinc-700"></div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="flask-conical" class="w-4 h-4 text-brand-500"></i>
|
|
<span class="text-sm text-zinc-300">Testing</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Problem/Solution -->
|
|
<section class="py-24 border-t border-zinc-800/50">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-8 leading-tight">
|
|
Managing chatbots at scale<br>
|
|
<span class="text-zinc-500">shouldn't be this painful</span>
|
|
</h2>
|
|
<div class="space-y-6">
|
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-lg">Dashboard tab overload</p>
|
|
<p class="text-zinc-500">Dozens of bots, sources, and leads spread across endless UI tabs.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-lg">No visibility into performance</p>
|
|
<p class="text-zinc-500">Scattered analytics with no unified view of bookings, responses, or revenue.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-lg">Manual testing and iteration</p>
|
|
<p class="text-zinc-500">Hours spent clicking through test conversations and tweaking configs.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="closebot-gradient rounded-3xl border border-brand-500/20 p-8 shadow-2xl">
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-violet-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
|
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold">With CloseBot Connect</h3>
|
|
</div>
|
|
<div class="space-y-5 text-lg">
|
|
<div class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
</div>
|
|
Manage all bots with natural language
|
|
</div>
|
|
<div class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
</div>
|
|
Unified analytics across every source
|
|
</div>
|
|
<div class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
</div>
|
|
AI-powered bot testing and iteration
|
|
</div>
|
|
<div class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
</div>
|
|
Works with Claude, GPT, any MCP client
|
|
</div>
|
|
<div class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-6 h-6 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
</div>
|
|
119 tools, zero configuration
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features / Tool Groups -->
|
|
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">119 Tools. 8 Powerful Groups.</h2>
|
|
<p class="text-xl text-zinc-400">Full CloseBot platform access through one simple connection</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<!-- Bot Management -->
|
|
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-violet-500/20 flex items-center justify-center mb-5 border border-brand-500/20">
|
|
<i data-lucide="bot" class="w-7 h-7 text-brand-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Bot Management</h3>
|
|
<span class="inline-block px-2 py-0.5 bg-brand-500/10 text-brand-400 text-xs font-semibold rounded-full mb-3">18 tools</span>
|
|
<p class="text-zinc-400 leading-relaxed">CRUD bots, AI creation, publish, versioning, templates, source attach.</p>
|
|
</div>
|
|
|
|
<!-- Source Management -->
|
|
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 border border-purple-500/20">
|
|
<i data-lucide="plug" class="w-7 h-7 text-purple-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Source Management</h3>
|
|
<span class="inline-block px-2 py-0.5 bg-purple-500/10 text-purple-400 text-xs font-semibold rounded-full mb-3">9 tools</span>
|
|
<p class="text-zinc-400 leading-relaxed">Sources (GHL sub-accounts), calendars, channels, fields, tags.</p>
|
|
</div>
|
|
|
|
<!-- Lead Management -->
|
|
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5 border border-blue-500/20">
|
|
<i data-lucide="user-search" class="w-7 h-7 text-blue-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Lead Management</h3>
|
|
<span class="inline-block px-2 py-0.5 bg-blue-500/10 text-blue-400 text-xs font-semibold rounded-full mb-3">6 tools</span>
|
|
<p class="text-zinc-400 leading-relaxed">Search, filter, update leads and lead instances with full context.</p>
|
|
</div>
|
|
|
|
<!-- Analytics & Metrics -->
|
|
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center mb-5 border border-amber-500/20">
|
|
<i data-lucide="bar-chart-3" class="w-7 h-7 text-amber-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Analytics & Metrics</h3>
|
|
<span class="inline-block px-2 py-0.5 bg-amber-500/10 text-amber-400 text-xs font-semibold rounded-full mb-3">14 tools</span>
|
|
<p class="text-zinc-400 leading-relaxed">Agency summary, booking graphs, leaderboards, message analytics, logs.</p>
|
|
</div>
|
|
|
|
<!-- Bot Testing -->
|
|
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-5 border border-emerald-500/20">
|
|
<i data-lucide="flask-conical" class="w-7 h-7 text-emerald-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Bot Testing</h3>
|
|
<span class="inline-block px-2 py-0.5 bg-emerald-500/10 text-emerald-400 text-xs font-semibold rounded-full mb-3">7 tools</span>
|
|
<p class="text-zinc-400 leading-relaxed">Test sessions with send/listen, force-step, rollback. Iterate fast.</p>
|
|
</div>
|
|
|
|
<!-- Library & KB -->
|
|
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-rose-500/20 to-red-500/20 flex items-center justify-center mb-5 border border-rose-500/20">
|
|
<i data-lucide="book-open" class="w-7 h-7 text-rose-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Library & KB</h3>
|
|
<span class="inline-block px-2 py-0.5 bg-rose-500/10 text-rose-400 text-xs font-semibold rounded-full mb-3">11 tools</span>
|
|
<p class="text-zinc-400 leading-relaxed">Files, web-scraping, source attachment, content management.</p>
|
|
</div>
|
|
|
|
<!-- Agency & Billing -->
|
|
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500/20 to-blue-500/20 flex items-center justify-center mb-5 border border-indigo-500/20">
|
|
<i data-lucide="credit-card" class="w-7 h-7 text-indigo-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Agency & Billing</h3>
|
|
<span class="inline-block px-2 py-0.5 bg-indigo-500/10 text-indigo-400 text-xs font-semibold rounded-full mb-3">18 tools</span>
|
|
<p class="text-zinc-400 leading-relaxed">Billing, transactions, wallets, usage tracking, re-billing for agencies.</p>
|
|
</div>
|
|
|
|
<!-- Configuration -->
|
|
<div class="bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 card-glow backdrop-blur-sm">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl bg-gradient-to-br from-slate-500/20 to-gray-500/20 flex items-center justify-center mb-5 border border-slate-500/20">
|
|
<i data-lucide="settings" class="w-7 h-7 text-slate-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Configuration</h3>
|
|
<span class="inline-block px-2 py-0.5 bg-slate-500/10 text-slate-400 text-xs font-semibold rounded-full mb-3">30 tools</span>
|
|
<p class="text-zinc-400 leading-relaxed">Personas, FAQs, folders, notifications, live demos, webhooks, API keys.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-16 text-center">
|
|
<p class="text-zinc-400 mb-6">Full platform coverage including:</p>
|
|
<div class="flex flex-wrap justify-center gap-3">
|
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Bot Versioning</span>
|
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">AI Bot Creation</span>
|
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Leaderboards</span>
|
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Web Scraping</span>
|
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Webhooks</span>
|
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Wallets</span>
|
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Personas</span>
|
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition cursor-default">Live Demos</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Visual Apps Showcase -->
|
|
<section id="apps" class="py-24 border-t border-zinc-800/50 relative">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6 border border-brand-500/30">
|
|
<i data-lucide="layout-dashboard" class="w-4 h-4"></i>
|
|
Rich UI Tool Apps
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">6 Visual Dashboards, Built In</h2>
|
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Not just API calls — get rich HTML dashboards rendered directly in your AI client. See your data, don't just read it.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Bot Dashboard -->
|
|
<div class="app-card bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 backdrop-blur-sm">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500/20 to-violet-500/20 flex items-center justify-center border border-brand-500/20">
|
|
<i data-lucide="layout-grid" class="w-5 h-5 text-brand-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold">Bot Dashboard</h3>
|
|
</div>
|
|
<p class="text-zinc-400 leading-relaxed text-sm">Grid view of all bots with status indicators, version history, and source count. See everything at a glance.</p>
|
|
<div class="mt-4 flex items-center gap-2 text-xs text-brand-400">
|
|
<i data-lucide="terminal" class="w-3 h-3"></i>
|
|
<code class="bg-brand-500/10 px-2 py-0.5 rounded">bot_dashboard_app</code>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analytics Dashboard -->
|
|
<div class="app-card bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 backdrop-blur-sm">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center border border-amber-500/20">
|
|
<i data-lucide="trending-up" class="w-5 h-5 text-amber-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold">Analytics Dashboard</h3>
|
|
</div>
|
|
<p class="text-zinc-400 leading-relaxed text-sm">Agency stats, response rates, booking metrics, and revenue tracking with customizable time ranges.</p>
|
|
<div class="mt-4 flex items-center gap-2 text-xs text-amber-400">
|
|
<i data-lucide="terminal" class="w-3 h-3"></i>
|
|
<code class="bg-amber-500/10 px-2 py-0.5 rounded">analytics_dashboard_app</code>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Console -->
|
|
<div class="app-card bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 backdrop-blur-sm">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center border border-emerald-500/20">
|
|
<i data-lucide="terminal-square" class="w-5 h-5 text-emerald-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold">Test Console</h3>
|
|
</div>
|
|
<p class="text-zinc-400 leading-relaxed text-sm">Interactive test session viewer with conversation history, step controls, and rollback capability.</p>
|
|
<div class="mt-4 flex items-center gap-2 text-xs text-emerald-400">
|
|
<i data-lucide="terminal" class="w-3 h-3"></i>
|
|
<code class="bg-emerald-500/10 px-2 py-0.5 rounded">test_console_app</code>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lead Manager -->
|
|
<div class="app-card bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 backdrop-blur-sm">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center border border-blue-500/20">
|
|
<i data-lucide="contact" class="w-5 h-5 text-blue-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold">Lead Manager</h3>
|
|
</div>
|
|
<p class="text-zinc-400 leading-relaxed text-sm">Searchable lead table with custom fields, conversation data, and engagement history.</p>
|
|
<div class="mt-4 flex items-center gap-2 text-xs text-blue-400">
|
|
<i data-lucide="terminal" class="w-3 h-3"></i>
|
|
<code class="bg-blue-500/10 px-2 py-0.5 rounded">lead_manager_app</code>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Library Manager -->
|
|
<div class="app-card bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 backdrop-blur-sm">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-rose-500/20 to-red-500/20 flex items-center justify-center border border-rose-500/20">
|
|
<i data-lucide="library" class="w-5 h-5 text-rose-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold">Library Manager</h3>
|
|
</div>
|
|
<p class="text-zinc-400 leading-relaxed text-sm">File list with type indicators, source assignments, and web scrape status tracking.</p>
|
|
<div class="mt-4 flex items-center gap-2 text-xs text-rose-400">
|
|
<i data-lucide="terminal" class="w-3 h-3"></i>
|
|
<code class="bg-rose-500/10 px-2 py-0.5 rounded">library_manager_app</code>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaderboard -->
|
|
<div class="app-card bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800/80 p-6 backdrop-blur-sm">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center border border-indigo-500/20">
|
|
<i data-lucide="trophy" class="w-5 h-5 text-indigo-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold">Leaderboard</h3>
|
|
</div>
|
|
<p class="text-zinc-400 leading-relaxed text-sm">Global and local rankings by responses, bookings, or contacts. Gamify your agency performance.</p>
|
|
<div class="mt-4 flex items-center gap-2 text-xs text-indigo-400">
|
|
<i data-lucide="terminal" class="w-3 h-3"></i>
|
|
<code class="bg-indigo-500/10 px-2 py-0.5 rounded">leaderboard_app</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Waitlist -->
|
|
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
<div class="max-w-2xl mx-auto px-6">
|
|
<div class="text-center mb-12">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/20 text-brand-400 text-sm font-medium mb-6 border border-brand-500/30">
|
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
Coming Soon
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
</div>
|
|
|
|
<div class="closebot-gradient rounded-3xl border border-brand-500/20 p-8 shadow-2xl">
|
|
<form id="waitlist-form" class="space-y-6">
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
placeholder="Your full name"
|
|
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
required
|
|
placeholder="+1 (555) 000-0000"
|
|
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
placeholder="you@agency.com"
|
|
class="w-full px-4 py-3.5 bg-zinc-800/80 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition"
|
|
>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
id="submit-btn"
|
|
class="w-full py-4 bg-gradient-to-r from-brand-500 to-violet-500 hover:from-brand-600 hover:to-violet-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25"
|
|
>
|
|
<span>Join the Waitlist</span>
|
|
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Success Message (hidden by default) -->
|
|
<div id="success-message" class="hidden text-center py-8">
|
|
<div class="w-16 h-16 bg-brand-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="check" class="w-8 h-8 text-brand-400"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
</div>
|
|
|
|
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
<i data-lucide="lock" class="w-4 h-4"></i>
|
|
We respect your privacy. No spam, ever.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
const form = this;
|
|
const submitBtn = document.getElementById('submit-btn');
|
|
const successMsg = document.getElementById('success-message');
|
|
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<span>Submitting...</span><svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
|
|
|
|
setTimeout(() => {
|
|
form.classList.add('hidden');
|
|
successMsg.classList.remove('hidden');
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
|
|
<!-- Open Source -->
|
|
<section class="py-24 border-t border-zinc-800/50">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="closebot-gradient rounded-3xl border border-brand-500/20 p-8 md:p-12 shadow-2xl">
|
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-800 text-sm mb-6 border border-zinc-700">
|
|
<i data-lucide="github" class="w-4 h-4"></i>
|
|
Open Source
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight">
|
|
Self-host if you want.<br>
|
|
<span class="text-zinc-500">We won't stop you.</span>
|
|
</h2>
|
|
<p class="text-zinc-400 mb-6 text-lg leading-relaxed">
|
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
The hosted version just saves you the hassle.
|
|
</p>
|
|
<a href="https://github.com/BusyBee3333/closebot-mcp-2026-complete" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium text-lg group">
|
|
View on GitHub
|
|
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
|
|
</a>
|
|
</div>
|
|
<div class="bg-zinc-950 rounded-2xl p-6 font-mono text-sm border border-zinc-800 shadow-xl">
|
|
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
<span class="ml-2">Terminal</span>
|
|
</div>
|
|
<pre class="text-zinc-300 leading-relaxed"><code><span class="text-zinc-500">$</span> git clone https://github.com/BusyBee3333/closebot-mcp-2026-complete.git
|
|
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
<span class="text-zinc-500">$</span> npm run build
|
|
<span class="text-zinc-500">$</span> node dist/index.js
|
|
|
|
<span class="text-brand-400">✓ CloseBot MCP Server running</span>
|
|
<span class="text-brand-400">✓ 119 tools loaded (14 modules)</span>
|
|
<span class="text-brand-400">✓ 6 visual apps ready</span>
|
|
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
<div class="max-w-3xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently asked questions</h2>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
<span class="font-semibold text-lg">What is MCP?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
</p>
|
|
</details>
|
|
|
|
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
<span class="font-semibold text-lg">What is CloseBot?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
CloseBot is an AI chatbot platform at <a href="https://closebot.com" class="text-brand-400 hover:underline">closebot.com</a>.
|
|
It lets agencies build, deploy, and manage AI chatbots for lead qualification, booking, and customer support — often integrated with GoHighLevel.
|
|
</p>
|
|
</details>
|
|
|
|
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
For the hosted version, no. Just connect your CloseBot account via API key and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
|
If you self-host, you'll need Node.js.
|
|
</p>
|
|
</details>
|
|
|
|
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
<span class="font-semibold text-lg">What are visual apps?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
Visual apps are rich HTML dashboards rendered directly in your AI client. Instead of reading raw JSON data,
|
|
you see beautiful grids, charts, and tables — like a Bot Dashboard with status cards or an Analytics Dashboard with graphs.
|
|
</p>
|
|
</details>
|
|
|
|
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
<span class="font-semibold text-lg">Can AI create and deploy bots for me?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
Yes. AI can create bots from templates, configure personas and FAQs, attach knowledge base files,
|
|
test conversations, and publish — all through natural language. You stay in control with approval steps.
|
|
</p>
|
|
</details>
|
|
|
|
<details class="group bg-gradient-to-br from-zinc-900/80 to-zinc-900/40 rounded-2xl border border-zinc-800 p-6 backdrop-blur-sm">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
<span class="font-semibold text-lg">Is my data secure?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
Yes. We never store your CloseBot API keys in plain text. Tokens are encrypted at rest and in transit.
|
|
You can revoke access anytime from your CloseBot settings.
|
|
</p>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
|
<div class="absolute inset-0 hero-glow"></div>
|
|
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
Ready to AI-power your CloseBot?
|
|
</h2>
|
|
<p class="text-xl text-zinc-400 mb-10">
|
|
Join 500+ chatbot agencies already automating with CloseBot Connect.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-violet-500 hover:from-brand-600 hover:to-violet-600 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/30">
|
|
Join the Waitlist
|
|
</a>
|
|
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 rounded-xl font-semibold text-lg transition border border-zinc-700">
|
|
Watch Demo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-zinc-800/50 py-12">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-violet-500 flex items-center justify-center">
|
|
<i data-lucide="bot" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<span class="font-bold text-xl">CloseBot Connect</span>
|
|
</div>
|
|
<div class="flex items-center gap-8 text-zinc-400">
|
|
<a href="#" class="hover:text-white transition">Privacy</a>
|
|
<a href="#" class="hover:text-white transition">Terms</a>
|
|
<a href="https://github.com/BusyBee3333/closebot-mcp-2026-complete" target="_blank" rel="noopener" class="hover:text-white transition flex items-center gap-2">
|
|
<i data-lucide="github" class="w-4 h-4"></i>
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
<p class="text-zinc-500 text-sm">© 2026 CloseBot Connect. Not affiliated with CloseBot.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Sticky Floating CTA -->
|
|
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
<a
|
|
href="#pricing"
|
|
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-500 to-violet-500 rounded-full font-semibold transition-all transform hover:scale-110 shadow-xl"
|
|
>
|
|
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
<span>Join Waitlist</span>
|
|
</a>
|
|
</div>
|
|
|
|
<script>
|
|
const stickyCta = document.getElementById('sticky-cta');
|
|
const pricingSection = document.getElementById('pricing');
|
|
|
|
function updateStickyCta() {
|
|
const scrollY = window.scrollY;
|
|
const pricingTop = pricingSection.offsetTop;
|
|
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
const viewportBottom = scrollY + window.innerHeight;
|
|
|
|
const shouldShow = scrollY > 300 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
|
|
if (shouldShow) {
|
|
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
} else {
|
|
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', updateStickyCta);
|
|
updateStickyCta();
|
|
</script>
|
|
|
|
<script>lucide.createIcons();</script>
|
|
</body>
|
|
</html> |