2aaf6c8e48
=== DONE === - 30 landing pages updated (all MCP servers) - Deploy-ready static site (deploy/public/) with homepage + 30 server pages - SEO battle plan added - Homepage redesigned: cleaner platform grid by category, updated pricing === TO-DO === - [ ] Deploy to production (Vercel/Netlify/custom) - [ ] SEO battle plan execution - [ ] Add remaining MCP server pages (Stage 5-7 servers) - [ ] Analytics/tracking setup - [ ] Custom domain configuration - [ ] Pricing page finalization
782 lines
37 KiB
HTML
782 lines
37 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>Close Connect — AI-Power Your Sales in 2 Clicks</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
50: '#eef2ff',
|
|
100: '#e0e7ff',
|
|
200: '#c7d2fe',
|
|
300: '#a5b4fc',
|
|
400: '#3D5AFE',
|
|
500: '#3048e5',
|
|
600: '#2438bf',
|
|
700: '#1c2c99',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #3D5AFE 0%, #1c2c99 50%, #1e1b4b 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.gradient-text-hero {
|
|
background: linear-gradient(135deg, #3D5AFE 0%, #8b5cf6 50%, #ec4899 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.hero-glow {
|
|
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(61, 90, 254, 0.25), transparent);
|
|
}
|
|
.card-glow {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card-glow:hover {
|
|
box-shadow: 0 0 50px rgba(61, 90, 254, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
transform: translateY(-4px);
|
|
border-color: rgba(61, 90, 254, 0.3);
|
|
}
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
.animate-float-delayed {
|
|
animation: float 6s ease-in-out infinite;
|
|
animation-delay: -3s;
|
|
}
|
|
.animate-float-slow {
|
|
animation: float 8s ease-in-out infinite;
|
|
}
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
@keyframes pulse-ring {
|
|
0% { transform: scale(1); opacity: 1; }
|
|
100% { transform: scale(1.5); opacity: 0; }
|
|
}
|
|
.pulse-ring::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -4px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(61, 90, 254, 0.5);
|
|
animation: pulse-ring 2s ease-out infinite;
|
|
}
|
|
.video-glow {
|
|
box-shadow: 0 0 80px rgba(61, 90, 254, 0.2), 0 0 120px rgba(61, 90, 254, 0.1);
|
|
}
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #3D5AFE 0%, #3048e5 100%);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.btn-primary:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 30px rgba(61, 90, 254, 0.5);
|
|
}
|
|
.feature-icon {
|
|
background: linear-gradient(135deg, rgba(61, 90, 254, 0.2) 0%, rgba(61, 90, 254, 0.05) 100%);
|
|
}
|
|
@keyframes wiggle {
|
|
0%, 100% { transform: rotate(-2deg); }
|
|
50% { transform: rotate(2deg); }
|
|
}
|
|
@keyframes glow-pulse {
|
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(61, 90, 254, 0.4), 0 0 40px 0 rgba(61, 90, 254, 0.2); }
|
|
50% { box-shadow: 0 0 30px 5px rgba(61, 90, 254, 0.6), 0 0 60px 10px rgba(61, 90, 254, 0.3); }
|
|
}
|
|
.sticky-btn {
|
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
|
}
|
|
.sticky-btn:hover {
|
|
animation: none;
|
|
transform: scale(1.1);
|
|
}
|
|
.number-highlight {
|
|
background: linear-gradient(135deg, #3D5AFE 0%, #8b5cf6 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.pipeline-stage {
|
|
position: relative;
|
|
}
|
|
.pipeline-stage::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -24px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border: 6px solid transparent;
|
|
border-left-color: rgba(61, 90, 254, 0.3);
|
|
}
|
|
.pipeline-stage:last-child::after {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
|
|
|
<!-- Floating Background Elements -->
|
|
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
|
<div class="absolute top-1/4 left-10 w-72 h-72 bg-brand-400/5 rounded-full blur-3xl animate-float"></div>
|
|
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
|
<div class="absolute bottom-1/4 left-1/3 w-64 h-64 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
|
</div>
|
|
|
|
<!-- Nav -->
|
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/80 backdrop-blur-xl">
|
|
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center shadow-lg shadow-brand-400/20">
|
|
<i data-lucide="phone-call" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<span class="font-bold text-xl">Close Connect</span>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a href="#features" class="text-zinc-400 hover:text-white transition-colors">Features</a>
|
|
<a href="#demo" class="text-zinc-400 hover:text-white transition-colors">Demo</a>
|
|
<a href="#pricing" class="text-zinc-400 hover:text-white transition-colors">Waitlist</a>
|
|
<a href="#faq" class="text-zinc-400 hover:text-white transition-colors">FAQ</a>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<a href="#" class="hidden sm:block text-zinc-400 hover:text-white transition-colors">Sign In</a>
|
|
<a href="#pricing" class="btn-primary px-5 py-2.5 rounded-xl font-semibold text-white">
|
|
Join Waitlist
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
|
<div class="max-w-4xl mx-auto px-6 py-20 text-center">
|
|
<div class="flex flex-col items-center">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-sm text-zinc-300 mb-8 backdrop-blur-sm">
|
|
<span class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
|
|
Built for Sales Teams
|
|
</div>
|
|
|
|
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
|
Connect <span class="gradient-text-hero">Close</span><br>
|
|
to AI in 2 Clicks
|
|
</h1>
|
|
|
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
|
|
The complete Close CRM MCP server. <strong class="text-white">84 tools</strong> for leads, calls, and pipeline.
|
|
Close more deals with AI by your side.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
|
<a href="#pricing" class="btn-primary w-full sm:w-auto px-8 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
|
|
Join the Waitlist
|
|
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
</a>
|
|
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2">
|
|
<i data-lucide="play" class="w-5 h-5"></i>
|
|
Watch Demo
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Pipeline Visual -->
|
|
<div class="flex items-center justify-center gap-4 sm:gap-8 overflow-x-auto pb-2 max-w-full">
|
|
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800/50 border border-zinc-700/50 whitespace-nowrap">
|
|
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
|
<span class="text-sm">New Lead</span>
|
|
</div>
|
|
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800/50 border border-zinc-700/50 whitespace-nowrap">
|
|
<div class="w-3 h-3 rounded-full bg-brand-400"></div>
|
|
<span class="text-sm">Contacted</span>
|
|
</div>
|
|
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800/50 border border-zinc-700/50 whitespace-nowrap">
|
|
<div class="w-3 h-3 rounded-full bg-purple-400"></div>
|
|
<span class="text-sm">Qualified</span>
|
|
</div>
|
|
<div class="pipeline-stage flex items-center gap-2 px-4 py-2 rounded-lg bg-green-500/20 border border-green-500/30 whitespace-nowrap">
|
|
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
|
<span class="text-sm text-green-400">Closed Won</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Video Demo -->
|
|
<section id="demo" class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-5xl mx-auto px-6">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
<p class="text-xl text-zinc-400">Watch how AI transforms your sales workflow</p>
|
|
</div>
|
|
<div class="rounded-2xl p-[1px] bg-gradient-to-br from-brand-400/50 to-purple-500/20">
|
|
<div class="bg-zinc-900 rounded-2xl p-2">
|
|
<div class="rounded-xl overflow-hidden video-glow">
|
|
<video autoplay loop muted playsinline class="w-full">
|
|
<source src="../../output/closecrm.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center mt-8">
|
|
<div class="inline-flex items-center gap-6 px-6 py-3 rounded-full bg-zinc-900/80 border border-zinc-800 backdrop-blur-sm">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="users" class="w-4 h-4 text-brand-400"></i>
|
|
<span class="text-sm text-zinc-300">Leads</span>
|
|
</div>
|
|
<div class="w-px h-4 bg-zinc-700"></div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="phone-call" class="w-4 h-4 text-brand-400"></i>
|
|
<span class="text-sm text-zinc-300">Calls</span>
|
|
</div>
|
|
<div class="w-px h-4 bg-zinc-700"></div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="git-branch" class="w-4 h-4 text-brand-400"></i>
|
|
<span class="text-sm text-zinc-300">Pipeline</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Problem/Solution -->
|
|
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
Connecting CRM + AI<br>
|
|
<span class="text-zinc-500">shouldn't slow you down</span>
|
|
</h2>
|
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">
|
|
Sales reps spend too much time on data entry. Let AI handle the busywork while you focus on selling.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 items-stretch">
|
|
<!-- Problems -->
|
|
<div class="space-y-4">
|
|
<h3 class="text-lg font-semibold text-red-400 mb-6 flex items-center gap-2">
|
|
<i data-lucide="x-circle" class="w-5 h-5"></i>
|
|
The Old Way
|
|
</h3>
|
|
|
|
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-white mb-1">Leads falling through cracks</p>
|
|
<p class="text-zinc-500">Too many leads, not enough follow-up. Hot prospects go cold.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-white mb-1">Manual activity logging</p>
|
|
<p class="text-zinc-500">Hours spent updating the CRM instead of talking to prospects.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-colors">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-white mb-1">Inconsistent follow-up</p>
|
|
<p class="text-zinc-500">Some leads get 10 touches, others get forgotten entirely.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Solutions -->
|
|
<div class="space-y-4">
|
|
<h3 class="text-lg font-semibold text-brand-400 mb-6 flex items-center gap-2">
|
|
<i data-lucide="check-circle" class="w-5 h-5"></i>
|
|
With Close Connect
|
|
</h3>
|
|
|
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-white mb-1">AI tracks every opportunity</p>
|
|
<p class="text-zinc-400">No lead left behind. AI surfaces who needs attention right now.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-white mb-1">Auto-captured communications</p>
|
|
<p class="text-zinc-400">Calls, emails, SMS — all logged automatically. Just sell.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-400/10 to-transparent border border-brand-400/20 hover:border-brand-400/40 transition-colors">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-xl bg-brand-400/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-white mb-1">AI-powered sequences</p>
|
|
<p class="text-zinc-400">Perfect follow-up cadence for every lead, automatically.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/10 text-brand-400 text-sm font-medium mb-6">
|
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
Full API Coverage
|
|
</div>
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need to close</h2>
|
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Close CRM API access through one simple connection. 84 tools at your fingertips.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
<i data-lucide="users" class="w-7 h-7 text-brand-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3">Lead Management</h3>
|
|
<p class="text-zinc-400 leading-relaxed">Create, qualify, nurture leads automatically. Never miss an opportunity.</p>
|
|
</div>
|
|
|
|
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
<i data-lucide="message-circle" class="w-7 h-7 text-purple-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3">Communication</h3>
|
|
<p class="text-zinc-400 leading-relaxed">Log calls, emails, SMS — all in one place. Full conversation history.</p>
|
|
</div>
|
|
|
|
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
<i data-lucide="git-branch" class="w-7 h-7 text-pink-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3">Pipeline</h3>
|
|
<p class="text-zinc-400 leading-relaxed">Track opportunities, forecast revenue, manage deals through stages.</p>
|
|
</div>
|
|
|
|
<div class="group p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
|
<div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mb-5">
|
|
<i data-lucide="repeat" class="w-7 h-7 text-cyan-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3">Sequences</h3>
|
|
<p class="text-zinc-400 leading-relaxed">Automate outreach, follow-ups, and cadences. Never drop the ball.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12 text-center">
|
|
<p class="text-zinc-400 mb-6">+ 80 more tools including:</p>
|
|
<div class="flex flex-wrap justify-center gap-3">
|
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Smart Views</span>
|
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Call Recording</span>
|
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Email Tracking</span>
|
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Custom Fields</span>
|
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Reporting</span>
|
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-400/50 transition-colors">Team Performance</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="py-24 border-t border-zinc-800/50">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-400/10 rounded-full blur-3xl"></div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
<i data-lucide="terminal" class="w-4 h-4 text-brand-400"></i>
|
|
How It Works
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
Just talk to Claude
|
|
</h2>
|
|
<p class="text-zinc-400 mb-8 leading-relaxed">
|
|
No clicking through menus. Just describe what you need and Claude works your pipeline
|
|
through your Close account in real-time.
|
|
</p>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
</div>
|
|
<span class="text-zinc-300">"Add a new lead from Acme Corp"</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
</div>
|
|
<span class="text-zinc-300">"Log my call with John, discussed pricing"</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-6 h-6 rounded-full bg-brand-400/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
|
</div>
|
|
<span class="text-zinc-300">"Move Acme to Qualified stage"</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
<span class="ml-2">Claude + Close CRM</span>
|
|
</div>
|
|
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">You:</span> Who should I call next?
|
|
|
|
<span class="text-brand-400">Claude:</span> Let me check your pipeline...
|
|
|
|
<span class="text-zinc-500">→ Using:</span> close_search_leads
|
|
<span class="text-zinc-500">→ Filter:</span> No contact in 3+ days
|
|
<span class="text-zinc-500">→ Sort:</span> By deal value
|
|
|
|
<span class="text-green-400">✓ Found 3 hot leads</span>
|
|
|
|
<span class="text-brand-400">Claude:</span> Top priority:
|
|
|
|
<span class="text-white">1. Acme Corp</span> - $45K deal
|
|
Last contact: 4 days ago
|
|
<span class="text-yellow-400">⚠ Decision deadline Friday</span>
|
|
|
|
<span class="text-white">2. TechStart Inc</span> - $28K deal
|
|
Requested callback today
|
|
|
|
Want me to prep talking points?</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Waitlist -->
|
|
<section id="pricing" class="py-24 border-t border-zinc-800/50">
|
|
<div class="max-w-2xl mx-auto px-6">
|
|
<div class="text-center mb-12">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-400/20 text-brand-400 text-sm font-medium mb-6">
|
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
Coming Soon
|
|
</div>
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">Join the Waitlist</h2>
|
|
<p class="text-xl text-zinc-400">Be the first to know when we launch. Early access + exclusive perks for waitlist members.</p>
|
|
</div>
|
|
|
|
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-10 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-400/5 rounded-full blur-3xl"></div>
|
|
|
|
<form id="waitlist-form" class="space-y-6 relative z-10">
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-zinc-300 mb-2">Name <span class="text-brand-400">*</span></label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
placeholder="Your full name"
|
|
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-400">*</span></label>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
required
|
|
placeholder="(555) 123-4567"
|
|
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
placeholder="you@company.com"
|
|
class="w-full px-5 py-4 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-400/20 transition-all"
|
|
>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
id="submit-btn"
|
|
class="btn-primary w-full py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2"
|
|
>
|
|
<span>Join the Waitlist</span>
|
|
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
</button>
|
|
</form>
|
|
|
|
<div id="success-message" class="hidden text-center py-8">
|
|
<div class="w-20 h-20 bg-brand-400/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<i data-lucide="check" class="w-10 h-10 text-brand-400"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-2">You're on the list!</h3>
|
|
<p class="text-zinc-400">We'll reach out as soon as we're ready for you.</p>
|
|
</div>
|
|
|
|
<p class="text-zinc-500 text-sm text-center mt-6 flex items-center justify-center gap-2">
|
|
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
We respect your privacy. No spam, ever.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Open Source -->
|
|
<section class="py-24 border-t border-zinc-800/50">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 relative overflow-hidden">
|
|
<div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-800 text-sm mb-6">
|
|
<i data-lucide="github" class="w-4 h-4"></i>
|
|
Open Source
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
|
Self-host if you want.<br>
|
|
<span class="text-zinc-500">We won't stop you.</span>
|
|
</h2>
|
|
<p class="text-zinc-400 mb-8 leading-relaxed">
|
|
The entire MCP server is open source. Run it yourself, modify it, contribute back.
|
|
The hosted version just saves you the hassle of managing infrastructure.
|
|
</p>
|
|
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
|
|
<i data-lucide="github" class="w-5 h-5"></i>
|
|
View on GitHub
|
|
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800">
|
|
<div class="flex items-center gap-2 text-zinc-500 mb-4">
|
|
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
|
|
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
<span class="ml-2">Terminal</span>
|
|
</div>
|
|
<pre class="text-zinc-300"><code><span class="text-zinc-500">$</span> git clone github.com/close-connect/mcp
|
|
<span class="text-zinc-500">$</span> cd mcp && npm install
|
|
<span class="text-zinc-500">$</span> npm run build
|
|
<span class="text-zinc-500">$</span> node dist/server.js
|
|
|
|
<span class="text-brand-400">✓ Close MCP Server running</span>
|
|
<span class="text-brand-400">✓ 84 tools loaded</span>
|
|
<span class="text-zinc-500">Listening on stdio...</span></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section id="faq" class="py-24 border-t border-zinc-800/50">
|
|
<div class="max-w-3xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">Frequently asked questions</h2>
|
|
<p class="text-zinc-400">Everything you need to know about Close Connect</p>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
<span class="font-semibold text-lg">What is MCP?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
MCP (Model Context Protocol) is a standard for connecting AI assistants to external tools and data.
|
|
It's supported by Claude, and lets AI actually take actions in your systems — not just chat about them.
|
|
</p>
|
|
</details>
|
|
|
|
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
<span class="font-semibold text-lg">Will my sales team need training?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
Not really — that's the beauty of AI. Your reps just talk to Claude like they would a colleague: "Add a note to the Acme deal"
|
|
or "Who hasn't been contacted this week?" No special syntax, no training sessions.
|
|
</p>
|
|
</details>
|
|
|
|
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
<span class="font-semibold text-lg">Is my sales data secure?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
Absolutely. We use OAuth 2.0 and never store your Close credentials. Data flows directly between Claude and Close —
|
|
your deal information, customer data, and sales metrics never touch our servers.
|
|
</p>
|
|
</details>
|
|
|
|
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
<span class="font-semibold text-lg">Can AI make mistakes with my CRM?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
Claude confirms before any destructive actions. Moving a deal, adding notes, logging calls — all instant.
|
|
But deleting leads or bulk changes require your explicit approval. Think of it as a very smart assistant that double-checks the important stuff.
|
|
</p>
|
|
</details>
|
|
|
|
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition-colors">
|
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
|
<span class="font-semibold text-lg">How does this help me close more deals?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:rotate-180 transition-transform"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
|
Time saved on data entry = more time selling. AI finds your hottest leads, reminds you of follow-ups, and surfaces deal insights.
|
|
Early users report 40%+ more prospect conversations per day.
|
|
</p>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="py-24 border-t border-zinc-800/50 relative">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-brand-400/5 to-transparent"></div>
|
|
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
|
Ready to AI-power your Close?
|
|
</h2>
|
|
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
|
Join sales teams already closing more deals with Close Connect. Be first in line for early access.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<a href="#pricing" class="btn-primary w-full sm:w-auto px-10 py-4 rounded-xl font-semibold text-lg text-white flex items-center justify-center gap-2">
|
|
Join the Waitlist
|
|
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
|
</a>
|
|
<a href="#demo" class="w-full sm:w-auto px-10 py-4 bg-zinc-800/80 hover:bg-zinc-700/80 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
|
|
Watch Demo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-zinc-800/50 py-12">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center">
|
|
<i data-lucide="phone-call" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<span class="font-bold text-xl">Close Connect</span>
|
|
</div>
|
|
<div class="flex items-center gap-8 text-zinc-400">
|
|
<a href="#" class="hover:text-white transition-colors">Privacy</a>
|
|
<a href="#" class="hover:text-white transition-colors">Terms</a>
|
|
<a href="#" class="hover:text-white transition-colors">GitHub</a>
|
|
<a href="#" class="hover:text-white transition-colors">Twitter</a>
|
|
</div>
|
|
<p class="text-zinc-500 text-sm">© 2026 Close Connect. Not affiliated with Close.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Sticky Floating CTA -->
|
|
<div id="sticky-cta" class="fixed bottom-6 right-6 z-50 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none">
|
|
<a
|
|
href="#pricing"
|
|
class="sticky-btn flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-400 to-brand-600 rounded-full font-semibold text-white transition-all transform hover:scale-110"
|
|
>
|
|
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
|
<span>Join Waitlist</span>
|
|
</a>
|
|
</div>
|
|
|
|
<script>
|
|
// Form submission
|
|
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
this.classList.add('hidden');
|
|
document.getElementById('success-message').classList.remove('hidden');
|
|
});
|
|
|
|
// Sticky CTA visibility
|
|
const stickyCta = document.getElementById('sticky-cta');
|
|
const pricingSection = document.getElementById('pricing');
|
|
|
|
function updateStickyCta() {
|
|
const scrollY = window.scrollY;
|
|
const pricingTop = pricingSection.offsetTop;
|
|
const pricingBottom = pricingTop + pricingSection.offsetHeight;
|
|
const viewportBottom = scrollY + window.innerHeight;
|
|
|
|
const shouldShow = scrollY > 400 && (viewportBottom < pricingTop || scrollY > pricingBottom);
|
|
|
|
if (shouldShow) {
|
|
stickyCta.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
stickyCta.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
} else {
|
|
stickyCta.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
|
|
stickyCta.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', updateStickyCta);
|
|
updateStickyCta();
|
|
</script>
|
|
|
|
<script>lucide.createIcons();</script>
|
|
</body>
|
|
</html>
|