Deploy landing pages with embedded UI chat widgets
This commit is contained in:
Jake Shore
commit
85be3bb1ef
654
acuity/index.html
Normal file
654
acuity/index.html
Normal file
@ -0,0 +1,654 @@
|
|||||||
|
<!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>Acuity Connect — AI-Power Your Bookings 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: '#f0f7ff',
|
||||||
|
100: '#e0efff',
|
||||||
|
200: '#b9ddff',
|
||||||
|
300: '#7cc4ff',
|
||||||
|
400: '#36a7ff',
|
||||||
|
500: '#315B7D',
|
||||||
|
600: '#2a4e6b',
|
||||||
|
700: '#234159',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #315B7D 0%, #6366f1 50%, #a855f7 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(49, 91, 125, 0.25), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(49, 91, 125, 0.2);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(49, 91, 125, 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(49, 91, 125, 0.4); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(49, 91, 125, 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-size: 200% 200%;
|
||||||
|
animation: gradient-shift 8s 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(49, 91, 125, 0.4), 0 0 40px 0 rgba(49, 91, 125, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(49, 91, 125, 0.6), 0 0 60px 10px rgba(49, 91, 125, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sticky-btn:hover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.icon-float {
|
||||||
|
animation: float 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(49, 91, 125, 0.5), rgba(99, 102, 241, 0.2));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: rgb(24 24 27);
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
</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-purple-500/20 top-1/2 -right-32 animate-float-delayed"></div>
|
||||||
|
<div class="orb w-72 h-72 bg-indigo-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-indigo-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="calendar-check" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Acuity 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="#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-indigo-600 hover:from-brand-600 hover:to-indigo-700 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-emerald-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">Acuity</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 Acuity Scheduling MCP server. <strong class="text-white">38 tools</strong> for appointments, availability, and clients.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</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-indigo-600 hover:from-brand-600 hover:to-indigo-700 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>
|
||||||
|
|
||||||
|
<!-- 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">300+</strong> service professionals
|
||||||
|
</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 Acuity calendar</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/acuity.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="calendar-days" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Appointments</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="clock" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Availability</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">Clients</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">
|
||||||
|
Setting up Acuity + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</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">Phone tag with clients</p>
|
||||||
|
<p class="text-zinc-500">Back-and-forth scheduling eats up hours every week.</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-show revenue loss</p>
|
||||||
|
<p class="text-zinc-500">Missed appointments mean money walking out the door.</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 intake processing</p>
|
||||||
|
<p class="text-zinc-500">Copy-pasting form data into your systems wastes time.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-700/50 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-emerald-500 to-green-600 flex items-center justify-center shadow-lg shadow-emerald-500/25">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold">With Acuity 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-emerald-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
|
||||||
|
</div>
|
||||||
|
AI handles all booking communications
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-zinc-300">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
|
||||||
|
</div>
|
||||||
|
Smart reminders reduce no-shows by 60%
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-zinc-300">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
|
||||||
|
</div>
|
||||||
|
Auto-extract and act on form data
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-zinc-300">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-emerald-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-emerald-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
|
||||||
|
</div>
|
||||||
|
Connect in 2 clicks via OAuth
|
||||||
|
</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">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Acuity API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<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-indigo-500/20 flex items-center justify-center mb-5 border border-brand-500/20">
|
||||||
|
<i data-lucide="calendar-days" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Appointment Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Book, reschedule, cancel appointments automatically. Full control over your schedule.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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="clock" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Availability Control</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Set hours, block time, manage calendars. Let AI optimize your availability.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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-green-500/20 flex items-center justify-center mb-5 border border-emerald-500/20">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-emerald-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Client Data</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Access intake forms, history, and preferences. AI remembers every detail.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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="credit-card" class="w-7 h-7 text-amber-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Payment Integration</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Track payments, packages, and gift certificates. Complete financial visibility.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-16 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">Full API 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">Appointment Types</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">Calendars</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">Forms</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">Products</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">Coupons</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">Certificates</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">Labels</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>
|
||||||
|
</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="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-700/50 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@company.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-indigo-600 hover:from-brand-600 hover:to-indigo-700 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-emerald-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-emerald-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>';
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
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="bg-gradient-to-br from-zinc-900 to-zinc-800/50 rounded-3xl border border-zinc-700/50 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="#" 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 github.com/acuity-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-emerald-400">✓ Acuity MCP Server running</span>
|
||||||
|
<span class="text-emerald-400">✓ 38 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-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">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 Acuity account via OAuth 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">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 use OAuth 2.0 and never store your Acuity API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Acuity settings.
|
||||||
|
</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 I use this with GPT or other AI models?</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 is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</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 Acuity?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 300+ service professionals already automating with Acuity 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-indigo-600 hover:from-brand-600 hover:to-indigo-700 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-indigo-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="calendar-check" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Acuity 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="#" 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 Acuity Connect. Not affiliated with Acuity Scheduling.</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-indigo-600 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>
|
||||||
|
// Show/hide sticky CTA based on scroll position
|
||||||
|
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>
|
||||||
666
bamboohr/index.html
Normal file
666
bamboohr/index.html
Normal file
@ -0,0 +1,666 @@
|
|||||||
|
<!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>BambooHR Connect — AI-Power Your HR 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: '#f7fee7',
|
||||||
|
100: '#ecfccb',
|
||||||
|
200: '#d9f99d',
|
||||||
|
300: '#bef264',
|
||||||
|
400: '#a3e635',
|
||||||
|
500: '#73C41D',
|
||||||
|
600: '#65a30d',
|
||||||
|
700: '#4d7c0f',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #73C41D 0%, #84cc16 50%, #65a30d 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(115, 196, 29, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 60px rgba(115, 196, 29, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(115, 196, 29, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-delayed {
|
||||||
|
animation: float 6s ease-in-out infinite 2s;
|
||||||
|
}
|
||||||
|
.animate-float-slow {
|
||||||
|
animation: float 8s ease-in-out infinite 1s;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
@keyframes pulse-glow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(115, 196, 29, 0.4); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(115, 196, 29, 0.6); }
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(115, 196, 29, 0.4), 0 0 40px 0 rgba(115, 196, 29, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(115, 196, 29, 0.6), 0 0 60px 10px rgba(115, 196, 29, 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;
|
||||||
|
}
|
||||||
|
.feature-card:hover .feature-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(115, 196, 29, 0.5), rgba(101, 163, 13, 0.2));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: rgb(24 24 27);
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
.text-shadow {
|
||||||
|
text-shadow: 0 0 40px rgba(115, 196, 29, 0.5);
|
||||||
|
}
|
||||||
|
.bg-grid {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(115, 196, 29, 0.03) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(115, 196, 29, 0.03) 1px, transparent 1px);
|
||||||
|
background-size: 50px 50px;
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: linear-gradient(135deg, rgba(115, 196, 29, 0.1) 0%, rgba(115, 196, 29, 0.02) 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Floating Background Elements -->
|
||||||
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-lime-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-green-400/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-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-lime-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="users" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">BambooHR 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="#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-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20 bg-grid">
|
||||||
|
<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-500 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text text-shadow">BambooHR</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">
|
||||||
|
The most comprehensive BambooHR MCP server. <strong class="text-white">56 tools</strong> for employees, time-off, and performance.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</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-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
||||||
|
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 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats Row -->
|
||||||
|
<div class="grid grid-cols-3 gap-4 max-w-2xl mx-auto mb-12">
|
||||||
|
<div class="stat-card rounded-xl border border-brand-500/20 p-4">
|
||||||
|
<div class="text-3xl font-bold text-brand-400">56</div>
|
||||||
|
<div class="text-zinc-400 text-sm">API Tools</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card rounded-xl border border-brand-500/20 p-4">
|
||||||
|
<div class="text-3xl font-bold text-brand-400">2s</div>
|
||||||
|
<div class="text-zinc-400 text-sm">Setup Time</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card rounded-xl border border-brand-500/20 p-4">
|
||||||
|
<div class="text-3xl font-bold text-brand-400">∞</div>
|
||||||
|
<div class="text-zinc-400 text-sm">Token Refresh</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=21" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">200+</strong> HR teams worldwide
|
||||||
|
</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 transforms your HR operations</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/bamboohr.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-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Employee Data</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="calendar-off" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Time-Off</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="trophy" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Performance</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Problem/Solution -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
HR + AI shouldn't<br>
|
||||||
|
<span class="text-zinc-500">require a dev team</span>
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-5">
|
||||||
|
<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-full 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-medium text-white">PTO request chaos</p>
|
||||||
|
<p class="text-zinc-500 text-sm mt-1">Endless email threads. Lost requests. Frustrated employees.</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-full 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-medium text-white">Onboarding checklists</p>
|
||||||
|
<p class="text-zinc-500 text-sm mt-1">Paper forms. Missed tasks. New hires left hanging.</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-full 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-medium text-white">Scattered employee data</p>
|
||||||
|
<p class="text-zinc-500 text-sm mt-1">Hunting through spreadsheets for basic info.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-8 shadow-2xl">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold">With BambooHR Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>AI handles approvals instantly</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>Automated new hire workflows</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>AI answers HR questions fast</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>Works with Claude, GPT, any MCP client</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>Full employee directory access</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<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">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full BambooHR API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:bg-brand-500/20 transition-all">
|
||||||
|
<i data-lucide="contact" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Employee Directory</h3>
|
||||||
|
<p class="text-zinc-400">Access profiles, org charts, and contact info. Full employee database.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:bg-purple-500/20 transition-all">
|
||||||
|
<i data-lucide="calendar-clock" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Time-Off Management</h3>
|
||||||
|
<p class="text-zinc-400">Request, approve, track PTO automatically. Balances & accruals.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-5 group-hover:bg-cyan-500/20 transition-all">
|
||||||
|
<i data-lucide="user-plus" class="w-7 h-7 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Onboarding</h3>
|
||||||
|
<p class="text-zinc-400">Manage new hire tasks, documents, and training. Seamless start.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center mb-5 group-hover:bg-amber-500/20 transition-all">
|
||||||
|
<i data-lucide="line-chart" class="w-7 h-7 text-amber-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Performance</h3>
|
||||||
|
<p class="text-zinc-400">Track goals, reviews, and feedback cycles. Continuous improvement.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ 50 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Benefits</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Compensation</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Documents</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Reports</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Training</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Applicants</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Timesheets</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Webhooks</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Use Cases -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">What you can automate</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Real HR workflows, powered by AI</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid md:grid-cols-3 gap-6">
|
||||||
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-500/10 to-transparent border border-brand-500/20">
|
||||||
|
<div class="text-4xl mb-4">🏖️</div>
|
||||||
|
<h3 class="text-lg font-semibold mb-2">PTO Assistant</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">"Check my PTO balance and submit a request for next Friday."</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20">
|
||||||
|
<div class="text-4xl mb-4">📋</div>
|
||||||
|
<h3 class="text-lg font-semibold mb-2">Onboarding Bot</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">"Create onboarding tasks for our new engineer starting Monday."</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20">
|
||||||
|
<div class="text-4xl mb-4">📊</div>
|
||||||
|
<h3 class="text-lg font-semibold mb-2">HR Reports</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">"Generate a headcount report by department for Q1."</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 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">
|
||||||
|
<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="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8">
|
||||||
|
<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 bg-zinc-800/50 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="Your phone number"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800/50 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@company.com"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800/50 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-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
|
||||||
|
>
|
||||||
|
<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-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">
|
||||||
|
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
||||||
|
We respect your privacy. No spam, ever.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 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 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 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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4 transition group-hover:translate-x-1"></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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/bamboohr-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">✓ BambooHR MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 56 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-20 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 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
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 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">Is employee 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">
|
||||||
|
Absolutely. We use OAuth 2.0 and never store your BambooHR API keys. All data is encrypted at rest and in transit.
|
||||||
|
You control exactly what the AI can access through BambooHR's permissions.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">Can AI approve PTO requests?</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">
|
||||||
|
Yes! With the right permissions, AI can read requests, check balances, and approve or flag requests based on rules you define.
|
||||||
|
You stay in control of the approval logic.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">Does it work with our HRIS setup?</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">
|
||||||
|
If you use BambooHR, yes. We support the full BambooHR API including custom fields, reports, and webhooks.
|
||||||
|
Works with any BambooHR plan that includes API access.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your HR?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 200+ HR teams already automating with BambooHR 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-lime-600 hover:from-brand-600 hover:to-lime-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-lime-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="users" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">BambooHR 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="#" class="hover:text-white transition flex items-center gap-1">
|
||||||
|
<i data-lucide="github" class="w-4 h-4"></i>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 BambooHR Connect. Not affiliated with BambooHR.</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-lime-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
631
basecamp/index.html
Normal file
631
basecamp/index.html
Normal file
@ -0,0 +1,631 @@
|
|||||||
|
<!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>Basecamp Connect — AI-Power Your Projects 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: '#f8fafc',
|
||||||
|
100: '#f1f5f9',
|
||||||
|
200: '#e2e8f0',
|
||||||
|
300: '#cbd5e1',
|
||||||
|
400: '#94a3b8',
|
||||||
|
500: '#1D2D35',
|
||||||
|
600: '#18252c',
|
||||||
|
700: '#131d23',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #64748b 0%, #22d3ee 50%, #a78bfa 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(34, 211, 238, 0.15), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(34, 211, 238, 0.15);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(34, 211, 238, 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-pulse-glow {
|
||||||
|
animation: pulseGlow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
@keyframes pulseGlow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(34, 211, 238, 0.5); }
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(34, 211, 238, 0.4), 0 0 40px 0 rgba(34, 211, 238, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(34, 211, 238, 0.6), 0 0 60px 10px rgba(34, 211, 238, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sticky-btn:hover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(34, 211, 238, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(34, 211, 238, 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);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
.accent-gradient {
|
||||||
|
background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg accent-gradient flex items-center justify-center">
|
||||||
|
<i data-lucide="mountain" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Basecamp 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="#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-4 py-2 accent-gradient rounded-lg font-medium transition transform hover:scale-105">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
|
||||||
|
<!-- Floating background elements -->
|
||||||
|
<div class="absolute top-40 left-10 w-72 h-72 bg-cyan-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute bottom-20 right-10 w-96 h-96 bg-violet-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="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-cyan-400 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</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">Basecamp</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">
|
||||||
|
The complete Basecamp MCP server. <strong class="text-white">62 tools</strong> for projects, todos, and messages.
|
||||||
|
No setup. No OAuth headaches. Just connect and ship.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
||||||
|
<a href="#pricing" class="px-8 py-4 accent-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-cyan-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center gap-4 justify-center">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 accent-gradient flex items-center justify-center text-xs font-bold">+75</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">250+</strong> project teams
|
||||||
|
</p>
|
||||||
|
</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 project workflow</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/basecamp.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="folder-kanban" class="w-4 h-4 text-cyan-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Projects</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="check-square" class="w-4 h-4 text-cyan-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">To-dos</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="message-square" class="w-4 h-4 text-cyan-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Messages</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="text-center mb-16">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
||||||
|
Setting up Basecamp + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Pain Point 1 -->
|
||||||
|
<div class="relative group">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
||||||
|
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Project status meetings</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Endless check-ins. Everyone's time wasted. Progress buried in threads.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI summarizes progress</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 2 -->
|
||||||
|
<div class="relative group">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
||||||
|
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Lost in message threads</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Important decisions buried. Context scattered. Nobody can find anything.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI finds what you need</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 3 -->
|
||||||
|
<div class="relative group">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
||||||
|
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Forgotten deadlines</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Milestones slip. No one noticed until it's too late. Scramble mode.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Proactive milestone alerts</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<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-cyan-500/10 text-cyan-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</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Basecamp API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="folder-kanban" class="w-7 h-7 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Project Management</h3>
|
||||||
|
<p class="text-zinc-400">Create projects, manage access, organize work — all automated.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="check-square" class="w-7 h-7 text-violet-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">To-dos</h3>
|
||||||
|
<p class="text-zinc-400">Create lists, assign tasks, track completion automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-amber-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="message-square" class="w-7 h-7 text-orange-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Message Boards</h3>
|
||||||
|
<p class="text-zinc-400">Post updates, discussions, and announcements with AI help.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="calendar-days" class="w-7 h-7 text-pink-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Schedule</h3>
|
||||||
|
<p class="text-zinc-400">Manage milestones, events, and deadlines proactively.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ 55 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Campfires</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Documents</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">People</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Uploads</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Comments</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Questions</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Check-ins</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
|
||||||
|
</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-cyan-500/20 text-cyan-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="relative">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 to-violet-500/10 rounded-3xl blur-xl"></div>
|
||||||
|
<div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
|
||||||
|
<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-cyan-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-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-cyan-400">*</span></label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="phone"
|
||||||
|
name="phone"
|
||||||
|
required
|
||||||
|
placeholder="Your phone number"
|
||||||
|
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-cyan-500 focus:ring-2 focus:ring-cyan-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@company.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-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="submit-btn"
|
||||||
|
class="w-full py-4 accent-gradient hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-cyan-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-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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>
|
||||||
|
</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="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-cyan-500/5 rounded-full blur-3xl"></div>
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
||||||
|
<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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 font-medium transition">
|
||||||
|
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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/basecamp-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-green-400">✓ Basecamp MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 62 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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 Basecamp account via OAuth 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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 use OAuth 2.0 and never store your Basecamp API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Basecamp settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</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 is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your Basecamp?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 250+ project teams already automating with Basecamp 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 accent-gradient hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-cyan-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg accent-gradient flex items-center justify-center">
|
||||||
|
<i data-lucide="mountain" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Basecamp 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Basecamp Connect. Not affiliated with Basecamp.</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 accent-gradient rounded-full font-semibold transition-all transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
645
bigcommerce/index.html
Normal file
645
bigcommerce/index.html
Normal file
@ -0,0 +1,645 @@
|
|||||||
|
<!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>BigCommerce Connect — AI-Power Your Store 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;900&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: '#34313F',
|
||||||
|
600: '#2a2833',
|
||||||
|
700: '#201f28',
|
||||||
|
accent: '#6366f1',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 40%, #a855f7 70%, #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(99, 102, 241, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(99, 102, 241, 0.2);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(99, 102, 241, 0.4);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 25px 80px rgba(99, 102, 241, 0.25), 0 10px 40px rgba(0, 0, 0, 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% { opacity: 0.5; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
}
|
||||||
|
.pulse-glow {
|
||||||
|
animation: pulse-glow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: -200% 0; }
|
||||||
|
100% { background-position: 200% 0; }
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(99, 102, 241, 0.4), 0 0 40px 0 rgba(99, 102, 241, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(99, 102, 241, 0.6), 0 0 60px 10px rgba(99, 102, 241, 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);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: #18181b;
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
.text-glow {
|
||||||
|
text-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Floating Background Elements -->
|
||||||
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-80 h-80 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-indigo-500 to-purple-500 flex items-center justify-center shadow-lg shadow-indigo-500/25">
|
||||||
|
<i data-lucide="store" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl tracking-tight">BigCommerce 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="px-5 py-2.5 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-lg font-semibold transition-all shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40 hover:scale-105">
|
||||||
|
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-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="max-w-4xl mx-auto text-center">
|
||||||
|
<div class="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="relative flex h-2 w-2">
|
||||||
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-500 opacity-75"></span>
|
||||||
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
|
||||||
|
</span>
|
||||||
|
Open Source + Hosted Cloud
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
|
||||||
|
Connect <span class="gradient-text text-glow">BigCommerce</span><br>
|
||||||
|
to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
|
||||||
|
The complete BigCommerce MCP server. <strong class="text-white">112 tools</strong> for products, orders, and customers.
|
||||||
|
No setup headaches. Just connect and scale.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
||||||
|
<a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-indigo-500/25 flex items-center justify-center gap-2">
|
||||||
|
Join the Waitlist
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></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 backdrop-blur-sm">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center justify-center gap-4">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400 text-sm">
|
||||||
|
Trusted by <strong class="text-white">500+</strong> e-commerce businesses
|
||||||
|
</p>
|
||||||
|
</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 e-commerce operations</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/bigcommerce.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="package-search" class="w-4 h-4 text-indigo-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Products</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="shopping-cart" class="w-4 h-4 text-indigo-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Orders</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-indigo-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Analytics</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="grid md:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm font-medium mb-6">The Problem</span>
|
||||||
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
|
||||||
|
Setting up BigCommerce + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-start gap-4 group">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-lg">Manual product updates</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Updating hundreds of products one by one is mind-numbing.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 group">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-lg">Cart abandonment bleeds revenue</p>
|
||||||
|
<p class="text-zinc-500 mt-1">70% of carts are abandoned. Recovery emails are generic.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 group">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-lg">Generic promotions don't convert</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Same discount for everyone means leaving money on the table.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8 md:p-10">
|
||||||
|
<div class="flex items-center gap-3 mb-8">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center shadow-lg shadow-indigo-500/25">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold">With BigCommerce Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-5">
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
|
||||||
|
<span>AI syncs catalog changes automatically</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
|
||||||
|
<span>Smart recovery that actually converts</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
|
||||||
|
<span>AI personalizes offers per customer</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
|
||||||
|
<span>Works with Claude, GPT, any MCP client</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-indigo-400 flex-shrink-0"></i>
|
||||||
|
<span>2-click OAuth — no API key headaches</span>
|
||||||
|
</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">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full bg-purple-500/10 text-purple-400 text-sm font-medium mb-4">Features</span>
|
||||||
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full BigCommerce API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-indigo-500/20 to-indigo-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="package-search" class="w-7 h-7 text-indigo-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Product Management</h3>
|
||||||
|
<p class="text-zinc-400">Create, update, and manage your entire catalog at scale with AI assistance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="shopping-cart" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Order Processing</h3>
|
||||||
|
<p class="text-zinc-400">Track orders, manage fulfillment, and handle returns automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-pink-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Customer Data</h3>
|
||||||
|
<p class="text-zinc-400">Access profiles, order history, and preferences for personalization.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="percent" class="w-7 h-7 text-amber-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Promotions</h3>
|
||||||
|
<p class="text-zinc-400">Create coupons, discounts, and special offers intelligently.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 95 more endpoints 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-zinc-600 transition-colors">Variants</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Categories</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Brands</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Shipping</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Taxes</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Webhooks</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Scripts</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Widgets</span>
|
||||||
|
</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-indigo-500/20 text-indigo-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-4xl lg: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="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8">
|
||||||
|
<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-indigo-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/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-indigo-400">*</span></label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="phone"
|
||||||
|
name="phone"
|
||||||
|
required
|
||||||
|
placeholder="(555) 123-4567"
|
||||||
|
class="w-full px-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/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-4 py-3.5 bg-zinc-800/50 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="submit-btn"
|
||||||
|
class="w-full py-4 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-indigo-500/25"
|
||||||
|
>
|
||||||
|
<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-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
|
||||||
|
<div class="absolute top-0 right-0 w-96 h-96 bg-indigo-500/5 rounded-full blur-3xl"></div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
||||||
|
<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 lg:text-5xl 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 text-lg mb-6">
|
||||||
|
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" class="inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 font-semibold transition-colors group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
|
||||||
|
<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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/bigcommerce-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-green-400">✓ BigCommerce MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 112 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-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
<p class="text-zinc-400">Everything you need to know about BigCommerce 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" open>
|
||||||
|
<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">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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
For the hosted version, no. Just connect your BigCommerce account via OAuth 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-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 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">
|
||||||
|
Yes. We use OAuth 2.0 and never store your BigCommerce API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your BigCommerce settings.
|
||||||
|
</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">What BigCommerce plans are supported?</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">
|
||||||
|
BigCommerce Connect works with all BigCommerce plans that have API access — Standard, Plus, Pro, and Enterprise.
|
||||||
|
Some advanced features may require higher-tier plans.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-indigo-500/5 to-transparent"></div>
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
||||||
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your <span class="gradient-text">BigCommerce?</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 500+ e-commerce businesses already automating with BigCommerce 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-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-indigo-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
|
||||||
|
Book a 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-indigo-500 to-purple-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="store" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">BigCommerce 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="https://github.com" 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 BigCommerce Connect. Not affiliated with BigCommerce.</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-indigo-500 to-purple-500 rounded-full font-semibold transition-all"
|
||||||
|
>
|
||||||
|
<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 > 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>
|
||||||
653
brevo/index.html
Normal file
653
brevo/index.html
Normal file
@ -0,0 +1,653 @@
|
|||||||
|
<!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>Brevo Connect — AI-Power Your Marketing 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: '#ecfdf5',
|
||||||
|
100: '#d1fae5',
|
||||||
|
200: '#a7f3d0',
|
||||||
|
300: '#6ee7b7',
|
||||||
|
400: '#34d399',
|
||||||
|
500: '#0B996E',
|
||||||
|
600: '#059669',
|
||||||
|
700: '#047857',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #0B996E 0%, #34d399 50%, #0B996E 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(11, 153, 110, 0.25), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(11, 153, 110, 0.2);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(11, 153, 110, 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(11, 153, 110, 0.4); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(11, 153, 110, 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, #0B996E, #34d399, #0B996E);
|
||||||
|
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(11, 153, 110, 0.4), 0 0 40px 0 rgba(11, 153, 110, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(11, 153, 110, 0.6), 0 0 60px 10px rgba(11, 153, 110, 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;
|
||||||
|
}
|
||||||
|
.brevo-gradient {
|
||||||
|
background: linear-gradient(135deg, rgba(11, 153, 110, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(11, 153, 110, 0.5), rgba(52, 211, 153, 0.2));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: rgb(24 24 27);
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
</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-emerald-400/20 top-1/2 -right-32 animate-float-delayed"></div>
|
||||||
|
<div class="orb w-72 h-72 bg-teal-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-emerald-400 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="send" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Brevo 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="#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-emerald-500 hover:from-brand-600 hover:to-emerald-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">Brevo</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 Brevo MCP server. <strong class="text-white">82 tools</strong> for email, SMS, and automation.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</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-emerald-500 hover:from-brand-600 hover:to-emerald-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>
|
||||||
|
|
||||||
|
<!-- 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=31" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=35" 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> marketing teams
|
||||||
|
</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 Brevo campaigns</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/brevo.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="mail" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Email</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="smartphone" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">SMS</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="zap" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Automation</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">
|
||||||
|
Setting up Brevo + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</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">Disconnected channels</p>
|
||||||
|
<p class="text-zinc-500">Email here, SMS there, no unified view of engagement.</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">Low engagement rates</p>
|
||||||
|
<p class="text-zinc-500">Generic blasts that land in spam or get ignored.</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 campaign setup</p>
|
||||||
|
<p class="text-zinc-500">Hours spent building what AI could do in minutes.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="brevo-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-emerald-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 Brevo 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>
|
||||||
|
Unified email + SMS from AI
|
||||||
|
</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 optimizes content and timing
|
||||||
|
</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>
|
||||||
|
Build campaigns from simple briefs
|
||||||
|
</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>
|
||||||
|
Connect in 2 clicks via OAuth
|
||||||
|
</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">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Brevo API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<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-emerald-500/20 flex items-center justify-center mb-5 border border-brand-500/20">
|
||||||
|
<i data-lucide="mail" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Email Campaigns</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Create, send, and track email marketing at scale. AI writes, you approve.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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="smartphone" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">SMS Marketing</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Send texts, manage opt-ins, track deliverability. Reach customers instantly.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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="users" class="w-7 h-7 text-blue-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Contact Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Sync lists, manage attributes, segment audiences. AI keeps it organized.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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="zap" class="w-7 h-7 text-amber-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Transactional</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Trigger order confirmations, receipts, notifications. Automated and reliable.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-16 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">Full API 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">Email Templates</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">Lists</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">Segments</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">Workflows</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">Analytics</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">Senders</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">Domains</span>
|
||||||
|
</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="brevo-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@company.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-emerald-500 hover:from-brand-600 hover:to-emerald-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="brevo-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="#" 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 github.com/brevo-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">✓ Brevo MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 82 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-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">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 Brevo account via OAuth 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">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 use OAuth 2.0 and never store your Brevo API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Brevo settings.
|
||||||
|
</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 send emails on my behalf?</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, with your approval. AI can draft campaigns, schedule sends, and trigger transactional emails.
|
||||||
|
You control the permissions and can require confirmation for any action.
|
||||||
|
</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 Brevo?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 500+ marketing teams already automating with Brevo 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-emerald-500 hover:from-brand-600 hover:to-emerald-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-emerald-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="send" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Brevo 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="#" 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 Brevo Connect. Not affiliated with Brevo (Sendinblue).</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-emerald-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>
|
||||||
610
calendly/index.html
Normal file
610
calendly/index.html
Normal file
@ -0,0 +1,610 @@
|
|||||||
|
<!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>Calendly Connect — AI-Power Your Scheduling 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: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#006BFF',
|
||||||
|
600: '#0055cc',
|
||||||
|
700: '#004299',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #006BFF 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(0, 107, 255, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 40px rgba(0, 107, 255, 0.15);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(0, 107, 255, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-delayed {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
animation-delay: -3s;
|
||||||
|
}
|
||||||
|
.animate-pulse-glow {
|
||||||
|
animation: pulse-glow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||||
|
50% { transform: translateY(-20px) rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes pulse-glow {
|
||||||
|
0%, 100% { opacity: 0.5; transform: scale(1); }
|
||||||
|
50% { opacity: 0.8; transform: scale(1.05); }
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 107, 255, 0.4), 0 0 40px 0 rgba(0, 107, 255, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(0, 107, 255, 0.6), 0 0 60px 10px rgba(0, 107, 255, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sticky-btn:hover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, #006BFF, #8b5cf6, #ec4899);
|
||||||
|
padding: 2px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: #09090b;
|
||||||
|
border-radius: calc(1rem - 2px);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
background: linear-gradient(135deg, rgba(0, 107, 255, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
|
||||||
|
}
|
||||||
|
.bg-grid {
|
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
|
||||||
|
|
||||||
|
<!-- Floating decorative elements -->
|
||||||
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-10 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float"></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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="calendar" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Calendly 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="#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-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105 transform">
|
||||||
|
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">
|
||||||
|
<div class="flex flex-col items-center text-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-green-400 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
||||||
|
Connect <span class="gradient-text">Calendly</span><br>
|
||||||
|
to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
|
||||||
|
The complete Calendly MCP server. <strong class="text-white">47 tools</strong> covering events, availability, and bookings.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
||||||
|
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 flex items-center justify-center gap-2">
|
||||||
|
<span>Join the Waitlist</span>
|
||||||
|
<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 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-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" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">2,500+</strong> scheduling pros
|
||||||
|
</p>
|
||||||
|
</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 scheduling workflow</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/calendly.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="calendar-check" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Events</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="clock" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Availability</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">Bookings</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-4">
|
||||||
|
Setting up Calendly + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Pain Point 1 -->
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-medium text-zinc-400">Manual calendar juggling</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-semibold text-white">AI books optimal slots for you</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 2 -->
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-medium text-zinc-400">Copy-pasting meeting details</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-semibold text-white">Auto-extract and act on booking data</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 3 -->
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-medium text-zinc-400">Missed follow-ups</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-semibold text-white">Instant post-meeting actions triggered</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
|
||||||
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
||||||
|
Full API Coverage
|
||||||
|
</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Calendly API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="calendar-check" class="w-7 h-7 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Event Management</h3>
|
||||||
|
<p class="text-zinc-400">Create, update, cancel events. Full control over your calendar.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="clock" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Availability</h3>
|
||||||
|
<p class="text-zinc-400">Check slots, set buffers, manage scheduling rules automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Invitee Data</h3>
|
||||||
|
<p class="text-zinc-400">Access booking details, custom questions, and attendee info.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="webhook" class="w-7 h-7 text-orange-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Webhooks</h3>
|
||||||
|
<p class="text-zinc-400">React to bookings in real-time. Trigger automations instantly.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ More endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Event Types</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Routing Forms</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Organizations</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">User Management</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Scheduling Links</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">One-off Meetings</span>
|
||||||
|
</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">
|
||||||
|
<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="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8">
|
||||||
|
<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 bg-zinc-800 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="(555) 123-4567"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 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@company.com"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 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-purple-500 hover:from-brand-600 hover:to-purple-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>
|
||||||
|
|
||||||
|
<div id="success-message" class="hidden text-center py-8">
|
||||||
|
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const form = this;
|
||||||
|
const successMsg = document.getElementById('success-message');
|
||||||
|
form.classList.add('hidden');
|
||||||
|
successMsg.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- 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 overflow-hidden relative">
|
||||||
|
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
||||||
|
<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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
||||||
|
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 shadow-2xl">
|
||||||
|
<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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/calendly-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-green-400">✓ Calendly MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 47 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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">
|
||||||
|
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-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">
|
||||||
|
For the hosted version, no. Just connect your Calendly account via OAuth 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Calendly API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Calendly settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</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">
|
||||||
|
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your Calendly?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join thousands of scheduling pros already automating with Calendly 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-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="calendar" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Calendly 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Calendly Connect. Not affiliated with Calendly.</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-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
651
clickup/index.html
Normal file
651
clickup/index.html
Normal file
@ -0,0 +1,651 @@
|
|||||||
|
<!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>ClickUp Connect — AI-Power Your Projects 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: '#7B68EE',
|
||||||
|
600: '#7c3aed',
|
||||||
|
700: '#6d28d9',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #7B68EE 0%, #a855f7 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(123, 104, 238, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(123, 104, 238, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(123, 104, 238, 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;
|
||||||
|
}
|
||||||
|
.animate-spin-slow {
|
||||||
|
animation: spin 20s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(123, 104, 238, 0.4), 0 0 40px 0 rgba(123, 104, 238, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(123, 104, 238, 0.6), 0 0 60px 10px rgba(123, 104, 238, 0.3); }
|
||||||
|
}
|
||||||
|
@keyframes gradient-shift {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
100% { background-position: 0% 50%; }
|
||||||
|
}
|
||||||
|
.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.05);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(123, 104, 238, 0.2), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
.nav-blur {
|
||||||
|
backdrop-filter: blur(20px) saturate(180%);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.gradient-border::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
padding: 1px;
|
||||||
|
background: linear-gradient(135deg, rgba(123, 104, 238, 0.5), transparent, rgba(168, 85, 247, 0.3));
|
||||||
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||||
|
-webkit-mask-composite: xor;
|
||||||
|
mask-composite: exclude;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.animated-gradient {
|
||||||
|
background: linear-gradient(135deg, #7B68EE, #a855f7, #ec4899, #7B68EE);
|
||||||
|
background-size: 300% 300%;
|
||||||
|
animation: gradient-shift 5s ease infinite;
|
||||||
|
}
|
||||||
|
.glow-ring {
|
||||||
|
position: absolute;
|
||||||
|
inset: -2px;
|
||||||
|
border-radius: inherit;
|
||||||
|
background: conic-gradient(from 0deg, transparent, #7B68EE, transparent, #a855f7, transparent);
|
||||||
|
animation: spin 4s linear infinite;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
.card-glow:hover .glow-ring {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Floating Background Elements -->
|
||||||
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-pink-500/5 rounded-full blur-3xl animate-float-slow"></div>
|
||||||
|
<!-- Decorative spinning gradient ring -->
|
||||||
|
<div class="absolute top-1/3 right-10 w-32 h-32 rounded-full animate-spin-slow opacity-10" style="background: conic-gradient(from 0deg, #7B68EE, #a855f7, #ec4899, #7B68EE);"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-zinc-800/50 bg-zinc-950/70 nav-blur">
|
||||||
|
<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-purple-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl tracking-tight">ClickUp 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="#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="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-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-lg font-medium transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 py-20">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="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-500 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</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">ClickUp</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed">
|
||||||
|
The complete ClickUp MCP server. Tasks, docs, and goals — AI-managed. <strong class="text-white">134 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||||||
|
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg text-center transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg text-center transition-all flex items-center justify-center gap-2">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center gap-4 justify-center">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-zinc-400 text-sm">
|
||||||
|
Trusted by <strong class="text-white">450+</strong> teams
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</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 project management workflow</p>
|
||||||
|
</div>
|
||||||
|
<div class="gradient-border">
|
||||||
|
<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/clickup.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="check-square" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Tasks</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="folder-tree" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Projects</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="timer" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Time</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<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-4">
|
||||||
|
Setting up ClickUp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 text-lg max-w-2xl mx-auto">Stop wrestling with APIs. Start automating.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
||||||
|
<div class="glow-ring rounded-2xl"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="flex items-center gap-4 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 mb-2 line-through">Task overload paralysis</p>
|
||||||
|
<p class="text-white font-semibold text-lg">AI prioritizes your day</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
||||||
|
<div class="glow-ring rounded-2xl"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="flex items-center gap-4 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 mb-2 line-through">Status update meetings</p>
|
||||||
|
<p class="text-white font-semibold text-lg">AI generates progress reports</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
||||||
|
<div class="glow-ring rounded-2xl"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="flex items-center gap-4 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 mb-2 line-through">Scattered project info</p>
|
||||||
|
<p class="text-white font-semibold text-lg">AI finds anything instantly</p>
|
||||||
|
</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">
|
||||||
|
<span class="inline-block px-4 py-1.5 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-4">Features</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-lg">Full ClickUp API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
||||||
|
<div class="glow-ring rounded-2xl"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="check-square" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Task Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Create, update, assign tasks. Full project control.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
||||||
|
<div class="glow-ring rounded-2xl"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="folder-tree" class="w-7 h-7 text-pink-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Space & Folder Ops</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Organize workspaces, manage hierarchies automatically.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
||||||
|
<div class="glow-ring rounded-2xl"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="timer" class="w-7 h-7 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Time Tracking</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Log time, generate reports, track productivity.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow relative overflow-hidden">
|
||||||
|
<div class="glow-ring rounded-2xl"></div>
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="settings-2" class="w-7 h-7 text-blue-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Custom Fields</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Access and update any custom data on tasks.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 120 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-3">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Goals</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Docs</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Comments</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Checklists</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Views</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Webhooks</span>
|
||||||
|
</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">
|
||||||
|
<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 gradient-border">
|
||||||
|
<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-5 py-4 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-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/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-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/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-all"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg transition-all 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>
|
||||||
|
|
||||||
|
<div id="success-message" class="hidden text-center py-8">
|
||||||
|
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 gradient-border">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<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-6 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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-950 rounded-2xl 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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/clickup-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-green-400">✓ ClickUp MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 134 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
</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">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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
For the hosted version, no. Just connect your ClickUp account via OAuth 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-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 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">
|
||||||
|
Yes. We use OAuth 2.0 and never store your ClickUp API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your ClickUp settings.
|
||||||
|
</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 I use this with GPT or other AI models?</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 is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your ClickUp?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join hundreds of teams already automating with ClickUp Connect.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-400 hover:to-purple-500 rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
|
||||||
|
Book a 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-purple-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">ClickUp 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 ClickUp Connect. Not affiliated with ClickUp.</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-purple-600 rounded-full font-semibold transition-all transform hover:scale-110 shadow-lg"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
781
closecrm/index.html
Normal file
781
closecrm/index.html
Normal file
@ -0,0 +1,781 @@
|
|||||||
|
<!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>
|
||||||
649
clover/index.html
Normal file
649
clover/index.html
Normal file
@ -0,0 +1,649 @@
|
|||||||
|
<!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>Clover Connect — AI-Power Your POS 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: '#f0fdf4',
|
||||||
|
100: '#dcfce7',
|
||||||
|
200: '#bbf7d0',
|
||||||
|
300: '#86efac',
|
||||||
|
400: '#4ade80',
|
||||||
|
500: '#43B02A',
|
||||||
|
600: '#3a9d25',
|
||||||
|
700: '#2d7a1c',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #43B02A 0%, #22c55e 50%, #10b981 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(67, 176, 42, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(67, 176, 42, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(67, 176, 42, 0.3);
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-delayed {
|
||||||
|
animation: float 6s ease-in-out infinite 2s;
|
||||||
|
}
|
||||||
|
.animate-float-slow {
|
||||||
|
animation: float 8s ease-in-out infinite 1s;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
@keyframes pulse-glow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(67, 176, 42, 0.4); }
|
||||||
|
50% { box-shadow: 0 0 40px 10px rgba(67, 176, 42, 0.6); }
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(67, 176, 42, 0.2), 0 25px 80px -20px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.btn-glow {
|
||||||
|
box-shadow: 0 0 30px rgba(67, 176, 42, 0.4);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.btn-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(67, 176, 42, 0.6);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(67, 176, 42, 0.2), rgba(34, 197, 94, 0.1));
|
||||||
|
border: 1px solid rgba(67, 176, 42, 0.2);
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(67, 176, 42, 0.4), 0 0 40px 0 rgba(67, 176, 42, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(67, 176, 42, 0.6), 0 0 60px 10px rgba(67, 176, 42, 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);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Ambient Background Elements -->
|
||||||
|
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
||||||
|
<div class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 -right-32 w-80 h-80 bg-emerald-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-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-500 to-emerald-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="shopping-cart" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Clover 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="#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="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
|
||||||
|
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 rounded-lg 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">
|
||||||
|
<div class="max-w-3xl mx-auto text-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-500 animate-pulse"></span>
|
||||||
|
<span>Open Source + Hosted</span>
|
||||||
|
<span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 rounded-full text-xs font-medium ml-1">NEW</span>
|
||||||
|
</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">Clover</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
|
||||||
|
The complete Clover MCP server. <strong class="text-white">78 tools</strong> for orders, inventory, and payments.
|
||||||
|
No OAuth headaches. Just connect and automate your POS.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||||||
|
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-center">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
|
||||||
|
<i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center gap-4 justify-center">
|
||||||
|
<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="">
|
||||||
|
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold shadow-lg">
|
||||||
|
+50
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<div class="flex items-center gap-1 text-amber-400 text-sm">
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">200+</strong> retail businesses</p>
|
||||||
|
</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 POS operations</p>
|
||||||
|
</div>
|
||||||
|
<div class="gradient-border rounded-2xl p-2">
|
||||||
|
<div class="rounded-xl overflow-hidden video-glow">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../../output/clover.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</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="receipt" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Orders</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="package" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Inventory</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="credit-card" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Payments</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points / 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-4">
|
||||||
|
Setting up Clover + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="x" class="w-7 h-7 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2 text-red-400">End-of-day reconciliation</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Hours spent balancing registers, matching transactions, fixing discrepancies.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI balances automatically</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="alert-triangle" class="w-7 h-7 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2 text-red-400">Stockout surprises</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Bestsellers run out. Customers leave. Revenue lost. Every. Single. Time.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Proactive inventory alerts</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2 text-red-400">No customer insights</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Your best customers are anonymous. No way to reward loyalty or spot trends.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI identifies your VIPs</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<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/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</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Clover API access through one simple connection. 78 tools at your AI's 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 bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="receipt" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Order Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Access transactions, process refunds, view complete order history with AI.</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 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="package" class="w-7 h-7 text-blue-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Inventory Control</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Track stock levels, set reorder alerts, manage items automatically.</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 bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="user-circle" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Customer Data</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Build customer profiles, track purchases, manage loyalty programs.</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 bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="bar-chart-3" class="w-7 h-7 text-amber-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Reporting</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Sales trends, peak hours analysis, product performance insights.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 60 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-3">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Payments</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Employees</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Discounts</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Tax Rates</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Modifiers</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Shifts</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Cash Drawers</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Webhooks</span>
|
||||||
|
</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">
|
||||||
|
<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="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
|
||||||
|
<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="(555) 123-4567"
|
||||||
|
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@business.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-brand-500 hover:bg-brand-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 -->
|
||||||
|
<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="shield-check" 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 successMsg = document.getElementById('success-message');
|
||||||
|
form.classList.add('hidden');
|
||||||
|
successMsg.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
|
||||||
|
<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">
|
||||||
|
<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-6 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 OAuth and token management.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/clover-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">✓ Clover MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 78 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
<p class="text-zinc-400">Everything you need to know about Clover 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">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">What is MCP?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
For the hosted version, no. Just connect your Clover account via OAuth 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-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Is my data secure?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Clover API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Clover settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Which Clover devices are supported?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
Clover Connect works with all Clover devices — Station, Mini, Flex, and Go. The API is device-agnostic,
|
||||||
|
so your AI automations work across your entire setup.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Final CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative">
|
||||||
|
<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 Clover?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
||||||
|
Join 200+ retail businesses already automating with Clover Connect. Be first in line when we launch.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
|
||||||
|
<i data-lucide="calendar" class="w-5 h-5"></i>
|
||||||
|
Book a 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-emerald-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="shopping-cart" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Clover 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="#" class="hover:text-white transition flex items-center gap-2">
|
||||||
|
<i data-lucide="github" class="w-4 h-4"></i>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
||||||
|
<i data-lucide="twitter" class="w-4 h-4"></i>
|
||||||
|
Twitter
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Clover Connect. Not affiliated with Clover Network, Inc.</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-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all 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 > 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>
|
||||||
662
constantcontact/index.html
Normal file
662
constantcontact/index.html
Normal file
@ -0,0 +1,662 @@
|
|||||||
|
<!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>Constant Contact Connect — AI-Power Your Email Lists 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: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#1856A8',
|
||||||
|
600: '#1d4ed8',
|
||||||
|
700: '#1e40af',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #1856A8 0%, #3b82f6 50%, #8b5cf6 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(24, 86, 168, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 40px rgba(24, 86, 168, 0.2);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
.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(24, 86, 168, 0.3); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(24, 86, 168, 0.5); }
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(24, 86, 168, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.video-gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(24, 86, 168, 0.5), rgba(139, 92, 246, 0.2));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.video-gradient-border-inner {
|
||||||
|
background: rgb(24 24 27);
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(24, 86, 168, 0.4), 0 0 40px 0 rgba(24, 86, 168, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(24, 86, 168, 0.6), 0 0 60px 10px rgba(24, 86, 168, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sticky-btn:hover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(135deg, rgba(24, 86, 168, 0.1), rgba(139, 92, 246, 0.1));
|
||||||
|
}
|
||||||
|
.gradient-border::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
padding: 1px;
|
||||||
|
background: linear-gradient(135deg, #1856A8, #8b5cf6);
|
||||||
|
-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-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
@keyframes email-fly {
|
||||||
|
0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
|
||||||
|
100% { transform: translateY(-100px) translateX(50px) rotate(15deg); opacity: 0; }
|
||||||
|
}
|
||||||
|
.email-particle {
|
||||||
|
animation: email-fly 2s ease-out infinite;
|
||||||
|
}
|
||||||
|
.metric-ring {
|
||||||
|
background: conic-gradient(#1856A8 0deg, #1856A8 270deg, transparent 270deg);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</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-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-blue-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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="mail" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Constant Contact 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="#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-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
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">
|
||||||
|
<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-500 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Constant Contact</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">
|
||||||
|
The most comprehensive Constant Contact MCP server. <strong class="text-white">58 tools</strong> covering
|
||||||
|
lists, campaigns, events & reporting. No setup. Just connect.
|
||||||
|
</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-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</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=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">250+</strong> marketers
|
||||||
|
</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 AI create campaigns, segment lists, and optimize your email marketing</p>
|
||||||
|
</div>
|
||||||
|
<div class="video-gradient-border">
|
||||||
|
<div class="video-gradient-border-inner p-2">
|
||||||
|
<div class="rounded-xl overflow-hidden video-glow">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../../output/constantcontact.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="list" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Lists</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="mail" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Campaigns</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Problem/Solution -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
Setting up Constant Contact + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">List growth has plateaued</p>
|
||||||
|
<p class="text-zinc-500">Same signup forms, same results. Stuck at the same number.</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-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">Low open rates killing engagement</p>
|
||||||
|
<p class="text-zinc-500">Subject lines that don't resonate. Emails that get ignored.</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-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">Event no-shows wasting resources</p>
|
||||||
|
<p class="text-zinc-500">People register but don't show up. Reminder fatigue is real.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-900 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold">With Constant Contact Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4 text-zinc-300">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="trending-up" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>AI optimizes signup flows for conversion</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="sparkles" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>AI writes subject lines that get opened</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="bell" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>Smart reminder sequences reduce no-shows</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>Works with Claude, GPT, any MCP client</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="bar-chart-3" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>Real-time analytics and optimization</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<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">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Constant Contact API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="list" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">List Management</h3>
|
||||||
|
<p class="text-zinc-400">Create, segment, clean lists automatically. Full control over your audience.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="mail" class="w-6 h-6 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Email Campaigns</h3>
|
||||||
|
<p class="text-zinc-400">Design, send, track email marketing at scale with AI assistance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-pink-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="calendar" class="w-6 h-6 text-pink-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Event Marketing</h3>
|
||||||
|
<p class="text-zinc-400">Promote events, manage RSVPs, send smart reminders automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="bar-chart-3" class="w-6 h-6 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Reporting</h3>
|
||||||
|
<p class="text-zinc-400">Track opens, clicks, bounces, and conversions with AI insights.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ 40 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Contact Tags</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Custom Fields</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Segments</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Landing Pages</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Social Posts</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Signup Forms</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Automations</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">A/B Testing</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Email Marketing Stats -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl font-bold mb-4">Why email marketing still wins</h2>
|
||||||
|
<p class="text-zinc-400">AI makes the best channel even better</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="text-center p-8 bg-zinc-900/50 rounded-2xl border border-zinc-800">
|
||||||
|
<div class="text-5xl font-bold gradient-text mb-2">$36</div>
|
||||||
|
<p class="text-zinc-400">ROI per $1 spent on email</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-8 bg-zinc-900/50 rounded-2xl border border-zinc-800">
|
||||||
|
<div class="text-5xl font-bold gradient-text mb-2">4.2B</div>
|
||||||
|
<p class="text-zinc-400">Daily email users worldwide</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-8 bg-zinc-900/50 rounded-2xl border border-zinc-800">
|
||||||
|
<div class="text-5xl font-bold gradient-text mb-2">77%</div>
|
||||||
|
<p class="text-zinc-400">Prefer email for brand comms</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 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">
|
||||||
|
<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="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
||||||
|
<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 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 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="Your phone number"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 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@company.com"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="submit-btn"
|
||||||
|
class="w-full py-4 bg-brand-500 hover:bg-brand-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 -->
|
||||||
|
<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">
|
||||||
|
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
||||||
|
We respect your privacy. No spam, ever.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="bg-zinc-900 rounded-3xl border border-zinc-800 p-8 md:p-12">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
||||||
|
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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mcp/constantcontact
|
||||||
|
<span class="text-zinc-500">$</span> cd constantcontact && 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">✓ Constant Contact MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 58 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-20 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
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-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
For the hosted version, no. Just connect your Constant Contact account via OAuth 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Constant Contact API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Constant Contact settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">Can AI actually improve my email metrics?</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">
|
||||||
|
Absolutely. AI can analyze your past campaigns, identify patterns in what works, write better subject lines,
|
||||||
|
segment your audience more intelligently, and optimize send times — all automatically.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your email marketing?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 250+ marketers already on the waitlist for Constant Contact 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-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="mail" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Constant Contact 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Constant Contact Connect. Not affiliated with Constant Contact.</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-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
643
fieldedge/index.html
Normal file
643
fieldedge/index.html
Normal file
@ -0,0 +1,643 @@
|
|||||||
|
<!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>FieldEdge Connect — AI-Power Your Field Ops 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: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#0066B2',
|
||||||
|
600: '#0052a0',
|
||||||
|
700: '#003d7a',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #0066B2 0%, #00a0dc 50%, #00d4ff 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(0, 102, 178, 0.25), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 60px rgba(0, 102, 178, 0.2);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(0, 102, 178, 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-glow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(0, 102, 178, 0.3); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(0, 102, 178, 0.5); }
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
animation: pulse-glow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes gradient-shift {
|
||||||
|
0%, 100% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
}
|
||||||
|
.animated-gradient {
|
||||||
|
background: linear-gradient(-45deg, #0066B2, #00a0dc, #0066B2, #003d7a);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
animation: gradient-shift 8s ease infinite;
|
||||||
|
}
|
||||||
|
.glow-orb {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(60px);
|
||||||
|
opacity: 0.3;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse-btn {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 102, 178, 0.4), 0 0 40px 0 rgba(0, 102, 178, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(0, 102, 178, 0.6), 0 0 60px 10px rgba(0, 102, 178, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse-btn 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);
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: linear-gradient(135deg, rgba(0, 102, 178, 0.1) 0%, transparent 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Floating Orbs -->
|
||||||
|
<div class="glow-orb w-96 h-96 bg-blue-500 top-20 -left-48 fixed animate-float-slow"></div>
|
||||||
|
<div class="glow-orb w-72 h-72 bg-cyan-500 top-1/2 -right-36 fixed animate-float-delayed"></div>
|
||||||
|
<div class="glow-orb w-64 h-64 bg-blue-600 bottom-20 left-1/4 fixed animate-float"></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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/20">
|
||||||
|
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">FieldEdge 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="#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-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/20 hover:shadow-brand-500/40">
|
||||||
|
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">
|
||||||
|
<div class="flex flex-col items-center text-center">
|
||||||
|
<div class="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-green-400 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</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">FieldEdge</span> to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed max-w-3xl mx-auto">
|
||||||
|
The complete FieldEdge MCP server. <strong class="text-white">68 tools</strong> for work orders, dispatch, and service.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
||||||
|
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-xl shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats Row -->
|
||||||
|
<div class="grid grid-cols-3 gap-4 max-w-md mx-auto">
|
||||||
|
<div class="stat-card rounded-xl p-4 border border-zinc-800/50">
|
||||||
|
<div class="text-3xl font-bold text-brand-400">68</div>
|
||||||
|
<div class="text-sm text-zinc-500">API Tools</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card rounded-xl p-4 border border-zinc-800/50">
|
||||||
|
<div class="text-3xl font-bold text-cyan-400">2</div>
|
||||||
|
<div class="text-sm text-zinc-500">Clicks to Connect</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card rounded-xl p-4 border border-zinc-800/50">
|
||||||
|
<div class="text-3xl font-bold text-green-400">24/7</div>
|
||||||
|
<div class="text-sm text-zinc-500">AI Automation</div>
|
||||||
|
</div>
|
||||||
|
</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 field service management</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-r from-brand-500/50 to-cyan-500/20 p-[1px] rounded-2xl">
|
||||||
|
<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/fieldedge.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="clipboard-list" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Work Orders</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="layout-grid" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Dispatch</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="file-badge" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Agreements</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="grid md:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">The Problem</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-8 leading-tight">
|
||||||
|
Setting up FieldEdge + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</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 hover:border-red-500/20 transition">
|
||||||
|
<div class="w-10 h-10 rounded-full 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">Missed service renewals</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Memberships expire and you don't even notice until they call to cancel.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
||||||
|
<div class="w-10 h-10 rounded-full 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">Inefficient dispatch</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Techs driving across town when there's a job next door.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
||||||
|
<div class="w-10 h-10 rounded-full 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">Paper work orders</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Lost tickets, illegible notes, no accountability.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-xl relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl"></div>
|
||||||
|
<div class="relative">
|
||||||
|
<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-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/30">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold">With FieldEdge Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4 text-lg">
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>AI tracks and reminds on renewals</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>AI-optimized routing & dispatch</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>Fully digital job tracking</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>Works with Claude, GPT, any MCP client</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>Full API access — 68 tools ready</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">Features</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full FieldEdge API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5 border border-brand-500/20">
|
||||||
|
<i data-lucide="clipboard-list" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Work Order Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Create, assign, and track service calls with full visibility.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-cyan-500/5 flex items-center justify-center mb-5 border border-cyan-500/20">
|
||||||
|
<i data-lucide="layout-grid" class="w-7 h-7 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Dispatch Board</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Optimize tech schedules, manage capacity, reduce drive time.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5 border border-green-500/20">
|
||||||
|
<i data-lucide="file-badge" class="w-7 h-7 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Service Agreements</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Track memberships, renewals, and maintenance schedules.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5 border border-purple-500/20">
|
||||||
|
<i data-lucide="credit-card" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Invoicing</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Generate invoices, process payments on-site, sync to accounting.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-16 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 50 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-3">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Customer History</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Equipment Tracking</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Technician GPS</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Price Book</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Reporting</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Inventory</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Quotes</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Webhooks</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-24 border-t border-zinc-800/50 relative">
|
||||||
|
<div class="absolute inset-0 hero-glow"></div>
|
||||||
|
<div class="max-w-2xl mx-auto px-6 relative">
|
||||||
|
<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-semibold 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-6">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-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 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-4 bg-zinc-800/50 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-4 bg-zinc-800/50 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 <span class="text-zinc-500">(optional)</span></label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="you@company.com"
|
||||||
|
class="w-full px-4 py-4 bg-zinc-800/50 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 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
|
||||||
|
>
|
||||||
|
<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-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i data-lucide="check" class="w-10 h-10 text-green-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>
|
||||||
|
|
||||||
|
<div id="error-message" class="hidden mt-4 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-center">
|
||||||
|
Something went wrong. Please try again.
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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>';
|
||||||
|
|
||||||
|
await new Promise(r => setTimeout(r, 1000));
|
||||||
|
form.classList.add('hidden');
|
||||||
|
successMsg.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- 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 shadow-xl">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<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-6 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 text-lg 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.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold text-lg group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-inner">
|
||||||
|
<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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/fieldedge-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-green-400">✓ FieldEdge MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 68 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">
|
||||||
|
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">FAQ</span>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold">Frequently asked questions</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<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 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<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 FieldEdge account via OAuth 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 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<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 use OAuth 2.0 and never store your FieldEdge API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your FieldEdge settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</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 is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative">
|
||||||
|
<div class="absolute inset-0 hero-glow"></div>
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your FieldEdge?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join service pros already automating with FieldEdge 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 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">FieldEdge 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 FieldEdge Connect. Not affiliated with FieldEdge.</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-brand-500 hover:bg-brand-600 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>
|
||||||
692
freshbooks/index.html
Normal file
692
freshbooks/index.html
Normal file
@ -0,0 +1,692 @@
|
|||||||
|
<!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>FreshBooks Connect — AI-Power Your Invoicing 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: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#0075DD',
|
||||||
|
600: '#2563eb',
|
||||||
|
700: '#1d4ed8',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #0075DD 0%, #3b82f6 50%, #6366f1 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(0, 117, 221, 0.25), transparent);
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 60px rgba(0, 117, 221, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(0, 117, 221, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-delayed {
|
||||||
|
animation: float 6s ease-in-out infinite 2s;
|
||||||
|
}
|
||||||
|
.animate-float-slow {
|
||||||
|
animation: float 8s ease-in-out infinite 1s;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 117, 221, 0.4), 0 0 40px 0 rgba(0, 117, 221, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(0, 117, 221, 0.6), 0 0 60px 10px rgba(0, 117, 221, 0.3); }
|
||||||
|
}
|
||||||
|
@keyframes money-float {
|
||||||
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||||
|
25% { transform: translateY(-10px) rotate(5deg); }
|
||||||
|
75% { transform: translateY(-5px) rotate(-5deg); }
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.feature-card:hover .feature-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(0, 117, 221, 0.5), rgba(99, 102, 241, 0.2));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: rgb(24 24 27);
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
.text-shadow {
|
||||||
|
text-shadow: 0 0 40px rgba(0, 117, 221, 0.5);
|
||||||
|
}
|
||||||
|
.bg-grid {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(0, 117, 221, 0.03) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(0, 117, 221, 0.03) 1px, transparent 1px);
|
||||||
|
background-size: 50px 50px;
|
||||||
|
}
|
||||||
|
.money-icon {
|
||||||
|
animation: money-float 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.invoice-preview {
|
||||||
|
background: linear-gradient(135deg, rgba(0, 117, 221, 0.1) 0%, rgba(0, 117, 221, 0.02) 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Floating Background Elements -->
|
||||||
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-indigo-400/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-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="receipt" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">FreshBooks 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="#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-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20 bg-grid">
|
||||||
|
<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-500 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text text-shadow">FreshBooks</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">
|
||||||
|
The most comprehensive FreshBooks MCP server. <strong class="text-white">64 tools</strong> for invoices, expenses, and clients.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</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-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
||||||
|
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 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</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=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">400+</strong> small businesses
|
||||||
|
</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 transforms your invoicing workflow</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/freshbooks.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="file-text" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Invoices</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="receipt" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Expenses</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">Reports</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Problem/Solution -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
Invoicing + AI shouldn't<br>
|
||||||
|
<span class="text-zinc-500">mean hiring a dev</span>
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-5">
|
||||||
|
<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-full 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-medium text-white">Chasing late payments</p>
|
||||||
|
<p class="text-zinc-500 text-sm mt-1">Manual follow-ups. Awkward emails. Cash flow chaos.</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-full 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-medium text-white">Manual expense entry</p>
|
||||||
|
<p class="text-zinc-500 text-sm mt-1">Receipts pile up. Categories forgotten. Tax time nightmare.</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-full 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-medium text-white">Tax season panic</p>
|
||||||
|
<p class="text-zinc-500 text-sm mt-1">Scrambling for reports. Missing deductions. Accountant stress.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-8 shadow-2xl">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold">With FreshBooks Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>AI sends perfect follow-ups</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>Auto-categorize expenses</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>Reports ready year-round</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>Works with Claude, GPT, any MCP client</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>Automatic token refresh forever</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<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">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full FreshBooks API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:bg-brand-500/20 transition-all">
|
||||||
|
<i data-lucide="file-text" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Invoice Management</h3>
|
||||||
|
<p class="text-zinc-400">Create, send, track invoices automatically. Recurring billing built-in.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:bg-purple-500/20 transition-all">
|
||||||
|
<i data-lucide="wallet" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Expense Tracking</h3>
|
||||||
|
<p class="text-zinc-400">Log expenses, attach receipts, categorize spending. Tax-ready.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-5 group-hover:bg-cyan-500/20 transition-all">
|
||||||
|
<i data-lucide="users-round" class="w-7 h-7 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Client Portal</h3>
|
||||||
|
<p class="text-zinc-400">Manage client info, payment methods, and history. Complete CRM.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center mb-5 group-hover:bg-amber-500/20 transition-all">
|
||||||
|
<i data-lucide="pie-chart" class="w-7 h-7 text-amber-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Reports</h3>
|
||||||
|
<p class="text-zinc-400">Generate P&L, tax summaries, and cash flow reports on demand.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ 60 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Estimates</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Payments</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Time Tracking</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Projects</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Taxes</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Retainers</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Credits</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Webhooks</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Use Cases -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">What you can automate</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Real invoicing workflows, powered by AI</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid md:grid-cols-3 gap-6">
|
||||||
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-brand-500/10 to-transparent border border-brand-500/20 hover:border-brand-500/40 transition">
|
||||||
|
<div class="text-4xl mb-4">📧</div>
|
||||||
|
<h3 class="text-lg font-semibold mb-2">Payment Reminders</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">"Send friendly reminders to all clients with invoices overdue by 7+ days."</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 hover:border-purple-500/40 transition">
|
||||||
|
<div class="text-4xl mb-4">🧾</div>
|
||||||
|
<h3 class="text-lg font-semibold mb-2">Expense Bot</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">"Log this Uber receipt as a business travel expense for Project Alpha."</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 hover:border-cyan-500/40 transition">
|
||||||
|
<div class="text-4xl mb-4">📊</div>
|
||||||
|
<h3 class="text-lg font-semibold mb-2">Financial Reports</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">"Generate a P&L report for Q4 and highlight my biggest expense categories."</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pricing Comparison -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Time is money</h2>
|
||||||
|
<p class="text-xl text-zinc-400">See how much you'll save with AI-powered invoicing</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<div class="p-6 rounded-2xl bg-red-500/5 border border-red-500/20">
|
||||||
|
<h3 class="text-lg font-semibold mb-4 text-red-400">❌ Manual Process</h3>
|
||||||
|
<ul class="space-y-3 text-zinc-400 text-sm">
|
||||||
|
<li class="flex items-center gap-2"><span class="text-red-400">•</span> 2 hours/week chasing payments</li>
|
||||||
|
<li class="flex items-center gap-2"><span class="text-red-400">•</span> 30 min/day on expense entry</li>
|
||||||
|
<li class="flex items-center gap-2"><span class="text-red-400">•</span> 8+ hours quarterly on reports</li>
|
||||||
|
<li class="flex items-center gap-2"><span class="text-red-400">•</span> Missed deductions & errors</li>
|
||||||
|
</ul>
|
||||||
|
<div class="mt-6 pt-4 border-t border-red-500/20">
|
||||||
|
<div class="text-2xl font-bold text-red-400">~15 hrs/month</div>
|
||||||
|
<div class="text-zinc-500 text-sm">wasted on admin</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 rounded-2xl bg-brand-500/5 border border-brand-500/20">
|
||||||
|
<h3 class="text-lg font-semibold mb-4 text-brand-400">✅ With FreshBooks Connect</h3>
|
||||||
|
<ul class="space-y-3 text-zinc-400 text-sm">
|
||||||
|
<li class="flex items-center gap-2"><span class="text-brand-400">•</span> Auto payment reminders</li>
|
||||||
|
<li class="flex items-center gap-2"><span class="text-brand-400">•</span> AI categorizes expenses</li>
|
||||||
|
<li class="flex items-center gap-2"><span class="text-brand-400">•</span> Instant report generation</li>
|
||||||
|
<li class="flex items-center gap-2"><span class="text-brand-400">•</span> Smart tax optimization</li>
|
||||||
|
</ul>
|
||||||
|
<div class="mt-6 pt-4 border-t border-brand-500/20">
|
||||||
|
<div class="text-2xl font-bold text-brand-400">~1 hr/month</div>
|
||||||
|
<div class="text-zinc-500 text-sm">just oversight</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 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">
|
||||||
|
<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="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8">
|
||||||
|
<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 bg-zinc-800/50 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="Your phone number"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800/50 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@business.com"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800/50 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-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
|
||||||
|
>
|
||||||
|
<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-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">
|
||||||
|
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
||||||
|
We respect your privacy. No spam, ever.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 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 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 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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4 transition group-hover:translate-x-1"></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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/freshbooks-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">✓ FreshBooks MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 64 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-20 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 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
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 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">Is my financial 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">
|
||||||
|
Absolutely. We use OAuth 2.0 and never store your FreshBooks API keys. All financial data is encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your FreshBooks settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">Can AI send invoices on my behalf?</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">
|
||||||
|
Yes! With the right permissions, AI can create, customize, and send invoices. You can set up approval workflows
|
||||||
|
or let AI handle routine invoices automatically while you review larger ones.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">Will this work with my accountant?</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">
|
||||||
|
Definitely. AI can generate accountant-ready reports, export data in standard formats, and ensure your
|
||||||
|
books are clean year-round. Your accountant will love you.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your invoicing?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 400+ small businesses already automating with FreshBooks 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-blue-600 hover:from-brand-600 hover:to-blue-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="receipt" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">FreshBooks 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="#" class="hover:text-white transition flex items-center gap-1">
|
||||||
|
<i data-lucide="github" class="w-4 h-4"></i>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 FreshBooks Connect. Not affiliated with FreshBooks.</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-blue-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
627
freshdesk/index.html
Normal file
627
freshdesk/index.html
Normal file
@ -0,0 +1,627 @@
|
|||||||
|
<!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>Freshdesk Connect — AI-Power Your Helpdesk 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: '#f0fdf4',
|
||||||
|
100: '#dcfce7',
|
||||||
|
200: '#bbf7d0',
|
||||||
|
300: '#86efac',
|
||||||
|
400: '#4ade80',
|
||||||
|
500: '#25C16F',
|
||||||
|
600: '#16a34a',
|
||||||
|
700: '#15803d',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #25C16F 0%, #06b6d4 50%, #8b5cf6 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(37, 193, 111, 0.15), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 40px rgba(37, 193, 111, 0.15);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
.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(37, 193, 111, 0.3); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(37, 193, 111, 0.5); }
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(37, 193, 111, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.video-gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(37, 193, 111, 0.5), rgba(139, 92, 246, 0.2));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.video-gradient-border-inner {
|
||||||
|
background: rgb(24 24 27);
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(37, 193, 111, 0.4), 0 0 40px 0 rgba(37, 193, 111, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(37, 193, 111, 0.6), 0 0 60px 10px rgba(37, 193, 111, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sticky-btn:hover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(135deg, rgba(37, 193, 111, 0.1), rgba(139, 92, 246, 0.1));
|
||||||
|
}
|
||||||
|
.gradient-border::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
padding: 1px;
|
||||||
|
background: linear-gradient(135deg, #25C16F, #8b5cf6);
|
||||||
|
-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-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
</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-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-cyan-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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Freshdesk 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="#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-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
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">
|
||||||
|
<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-500 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Freshdesk</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">
|
||||||
|
The most comprehensive Freshdesk MCP server. <strong class="text-white">92 tools</strong> covering
|
||||||
|
tickets, agents, knowledge base & automations. No setup. Just connect.
|
||||||
|
</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-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</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" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">300+</strong> support teams
|
||||||
|
</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 AI resolve tickets, update knowledge base, and automate support</p>
|
||||||
|
</div>
|
||||||
|
<div class="video-gradient-border">
|
||||||
|
<div class="video-gradient-border-inner p-2">
|
||||||
|
<div class="rounded-xl overflow-hidden video-glow">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../../output/freshdesk.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="ticket" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Tickets</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">Agents</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Knowledge Base</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Problem/Solution -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
Setting up Freshdesk + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">Repetitive ticket responses</p>
|
||||||
|
<p class="text-zinc-500">Copy-pasting the same answers 50 times a day.</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-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">SLA breaches piling up</p>
|
||||||
|
<p class="text-zinc-500">No proactive alerts. Tickets slip through the cracks.</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-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">Knowledge silos everywhere</p>
|
||||||
|
<p class="text-zinc-500">Agents can't find the right articles fast enough.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-900 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold">With Freshdesk Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4 text-zinc-300">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="sparkles" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>AI drafts perfect replies instantly</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="bell" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>Proactive escalation alerts before SLA breach</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="book-open" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>AI surfaces relevant articles automatically</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>Works with Claude, GPT, any MCP client</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="users" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>Multi-agent workspace support built-in</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<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">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Freshdesk API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="ticket" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Ticket Management</h3>
|
||||||
|
<p class="text-zinc-400">Create, update, resolve tickets with AI assistance. Full CRUD on your queue.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="users" class="w-6 h-6 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Agent Workspace</h3>
|
||||||
|
<p class="text-zinc-400">Manage assignments, workload, and performance metrics automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="book-open" class="w-6 h-6 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Knowledge Base</h3>
|
||||||
|
<p class="text-zinc-400">Search articles, suggest solutions, update docs programmatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-orange-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="workflow" class="w-6 h-6 text-orange-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Automations</h3>
|
||||||
|
<p class="text-zinc-400">Trigger scenarios, dispatch rules, SLA management — all AI-controlled.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ 80 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Canned Responses</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Contact Management</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Groups</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Companies</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Time Entries</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Satisfaction Ratings</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Forums</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Products</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 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">
|
||||||
|
<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="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
||||||
|
<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 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 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="Your phone number"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 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@company.com"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="submit-btn"
|
||||||
|
class="w-full py-4 bg-brand-500 hover:bg-brand-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 -->
|
||||||
|
<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">
|
||||||
|
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
||||||
|
We respect your privacy. No spam, ever.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="bg-zinc-900 rounded-3xl border border-zinc-800 p-8 md:p-12">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
||||||
|
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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mcp/freshdesk
|
||||||
|
<span class="text-zinc-500">$</span> cd freshdesk && 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">✓ Freshdesk MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 92 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-20 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
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-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
For the hosted version, no. Just connect your Freshdesk account via OAuth 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Freshdesk API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Freshdesk settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">Can I use this with GPT or other AI models?</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">
|
||||||
|
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your support?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 300+ support teams already automating with Freshdesk 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-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-cyan-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Freshdesk 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Freshdesk Connect. Not affiliated with Freshdesk.</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-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
603
gusto/index.html
Normal file
603
gusto/index.html
Normal file
@ -0,0 +1,603 @@
|
|||||||
|
<!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>Gusto Connect — AI-Power Your Payroll 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: '#fef2f2',
|
||||||
|
100: '#fee2e2',
|
||||||
|
200: '#fecaca',
|
||||||
|
300: '#fca5a5',
|
||||||
|
400: '#F45D48',
|
||||||
|
500: '#F45D48',
|
||||||
|
600: '#dc2626',
|
||||||
|
700: '#b91c1c',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #F45D48 0%, #ff8a65 50%, #ffab91 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(244, 93, 72, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(244, 93, 72, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(244, 93, 72, 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-glow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(244, 93, 72, 0.4); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(244, 93, 72, 0.6); }
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(244, 93, 72, 0.4), 0 0 40px 0 rgba(244, 93, 72, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(244, 93, 72, 0.6), 0 0 60px 10px rgba(244, 93, 72, 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.05);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(244, 93, 72, 0.2), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
.nav-blur {
|
||||||
|
backdrop-filter: blur(20px) saturate(180%);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.gradient-border::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
padding: 1px;
|
||||||
|
background: linear-gradient(135deg, rgba(244, 93, 72, 0.5), transparent, rgba(244, 93, 72, 0.3));
|
||||||
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||||
|
-webkit-mask-composite: xor;
|
||||||
|
mask-composite: exclude;
|
||||||
|
pointer-events: 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 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-orange-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-red-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/70 nav-blur">
|
||||||
|
<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-orange-400 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="wallet" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl tracking-tight">Gusto 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="#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="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-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-lg font-medium transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 py-20">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="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-500 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</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">Gusto</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed">
|
||||||
|
The complete Gusto MCP server. Payroll, benefits, and HR — AI-automated. <strong class="text-white">72 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||||||
|
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg text-center transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg text-center transition-all flex items-center justify-center gap-2">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center gap-4 justify-center">
|
||||||
|
<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 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-zinc-400 text-sm">
|
||||||
|
Trusted by <strong class="text-white">200+</strong> HR teams
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</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 payroll workflow</p>
|
||||||
|
</div>
|
||||||
|
<div class="gradient-border">
|
||||||
|
<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/gusto.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="banknote" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Payroll</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">Employees</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="heart-pulse" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Benefits</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<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-4">
|
||||||
|
Setting up Gusto + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 text-lg max-w-2xl mx-auto">Stop wrestling with APIs. Start automating.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="flex items-center gap-4 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 mb-2 line-through">Payroll deadline stress</p>
|
||||||
|
<p class="text-white font-semibold text-lg">AI reminds and preps everything</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="flex items-center gap-4 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 mb-2 line-through">Manual onboarding tasks</p>
|
||||||
|
<p class="text-white font-semibold text-lg">Automated new hire workflows</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="flex items-center gap-4 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 mb-2 line-through">Scattered employee requests</p>
|
||||||
|
<p class="text-white font-semibold text-lg">AI handles common HR queries</p>
|
||||||
|
</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">
|
||||||
|
<span class="inline-block px-4 py-1.5 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-4">Features</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-lg">Full Gusto API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-orange-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="banknote" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Payroll Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Run payroll, check statuses, manage pay schedules.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Employee Data</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Access profiles, compensation, and employment details.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="heart-pulse" class="w-7 h-7 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Benefits Admin</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Manage enrollments, deductions, and plan information.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="shield-check" class="w-7 h-7 text-blue-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Compliance</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Track tax filings, W-2s, and regulatory requirements.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 60 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-3">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Time Tracking</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">PTO Management</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Tax Forms</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Direct Deposit</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Contractors</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Reports</span>
|
||||||
|
</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">
|
||||||
|
<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 gradient-border">
|
||||||
|
<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-5 py-4 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-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/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-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/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-all"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg transition-all 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>
|
||||||
|
|
||||||
|
<div id="success-message" class="hidden text-center py-8">
|
||||||
|
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 gradient-border">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<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-6 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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition-colors">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-950 rounded-2xl 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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/gusto-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-green-400">✓ Gusto MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 72 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
</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">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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
For the hosted version, no. Just connect your Gusto account via OAuth 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-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 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">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Gusto API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Gusto settings.
|
||||||
|
</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 I use this with GPT or other AI models?</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 is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your Gusto?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join hundreds of HR teams already automating with Gusto Connect.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a href="#pricing" class="px-8 py-4 bg-gradient-to-r from-brand-500 to-orange-500 hover:from-brand-400 hover:to-orange-400 rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
|
||||||
|
Book a 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-orange-400 flex items-center justify-center">
|
||||||
|
<i data-lucide="wallet" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Gusto 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Gusto Connect. Not affiliated with Gusto.</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-orange-500 rounded-full font-semibold transition-all transform hover:scale-110 shadow-lg"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
637
helpscout/index.html
Normal file
637
helpscout/index.html
Normal file
@ -0,0 +1,637 @@
|
|||||||
|
<!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>Help Scout Connect — AI-Power Your Support 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: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#1292EE',
|
||||||
|
600: '#0f7cd6',
|
||||||
|
700: '#0c66be',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #1292EE 0%, #60a5fa 50%, #a78bfa 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(18, 146, 238, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(18, 146, 238, 0.2);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(18, 146, 238, 0.4);
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-delayed {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
animation-delay: -3s;
|
||||||
|
}
|
||||||
|
.animate-pulse-glow {
|
||||||
|
animation: pulseGlow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
@keyframes pulseGlow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(18, 146, 238, 0.3); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(18, 146, 238, 0.5); }
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(18, 146, 238, 0.4), 0 0 40px 0 rgba(18, 146, 238, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(18, 146, 238, 0.6), 0 0 60px 10px rgba(18, 146, 238, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sticky-btn:hover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(18, 146, 238, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(18, 146, 238, 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);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
@keyframes typing {
|
||||||
|
from { width: 0 }
|
||||||
|
to { width: 100% }
|
||||||
|
}
|
||||||
|
.typing-effect {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
animation: typing 2s steps(30, end);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center">
|
||||||
|
<i data-lucide="life-buoy" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Help Scout 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="#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-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition transform hover:scale-105">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
|
||||||
|
<!-- Floating background elements -->
|
||||||
|
<div class="absolute top-40 left-10 w-72 h-72 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="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-blue-400 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</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">Help Scout</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">
|
||||||
|
The complete Help Scout MCP server. <strong class="text-white">54 tools</strong> for conversations, docs, and workflows.
|
||||||
|
No setup. No OAuth headaches. Just connect and support.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
||||||
|
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center gap-4 justify-center">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold">+50</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">200+</strong> support teams
|
||||||
|
</p>
|
||||||
|
</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 support workflow</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/helpscout.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="message-circle" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Conversations</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Docs</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="git-merge" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Workflows</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="text-center mb-16">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
||||||
|
Setting up Help Scout + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Pain Point 1 -->
|
||||||
|
<div class="relative group">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
||||||
|
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Repetitive support queries</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Same questions, every day. Copy-paste answers get stale fast.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI drafts from your docs</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 2 -->
|
||||||
|
<div class="relative group">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
||||||
|
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-zinc-300 mb-3">No customer context</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Who is this person? What happened before? Time wasted searching.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Full history at a glance</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 3 -->
|
||||||
|
<div class="relative group">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
||||||
|
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Manual ticket routing</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Tickets land in the wrong queue. Customers wait. CSAT drops.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI assigns intelligently</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<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/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</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Help Scout API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-blue-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="message-circle" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Conversation Management</h3>
|
||||||
|
<p class="text-zinc-400">Handle emails, chats, and messages — all unified in one place.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="book-open" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Docs</h3>
|
||||||
|
<p class="text-zinc-400">Search and surface knowledge base articles automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-yellow-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="user-circle" class="w-7 h-7 text-orange-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Customer Profiles</h3>
|
||||||
|
<p class="text-zinc-400">Access history, properties, and context for every customer.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="git-merge" class="w-7 h-7 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Workflows</h3>
|
||||||
|
<p class="text-zinc-400">Automate tagging, assignment, and responses effortlessly.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ 50 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Mailboxes</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tags</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Saved Replies</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Teams</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Users</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Reports</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Beacons</span>
|
||||||
|
</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">
|
||||||
|
<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="relative">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/10 to-purple-500/10 rounded-3xl blur-xl"></div>
|
||||||
|
<div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
|
||||||
|
<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="Your phone number"
|
||||||
|
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@company.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-purple-500 hover:from-brand-600 hover:to-purple-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-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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>
|
||||||
|
</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="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-500/5 rounded-full blur-3xl"></div>
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
||||||
|
<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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
||||||
|
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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/helpscout-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-green-400">✓ Help Scout MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 54 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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 Help Scout account via OAuth 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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 use OAuth 2.0 and never store your Help Scout API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Help Scout settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</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 is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your Help Scout?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 200+ support teams already automating with Help Scout 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-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center">
|
||||||
|
<i data-lucide="life-buoy" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Help Scout 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Help Scout Connect. Not affiliated with Help Scout.</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-purple-500 rounded-full font-semibold transition-all transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
640
housecallpro/index.html
Normal file
640
housecallpro/index.html
Normal file
@ -0,0 +1,640 @@
|
|||||||
|
<!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>Housecall Pro Connect — AI-Power Your Home Services 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: '#fff7ed',
|
||||||
|
100: '#ffedd5',
|
||||||
|
200: '#fed7aa',
|
||||||
|
300: '#fdba74',
|
||||||
|
400: '#fb923c',
|
||||||
|
500: '#FF5722',
|
||||||
|
600: '#ea580c',
|
||||||
|
700: '#c2410c',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #FF5722 0%, #ff9800 50%, #ffeb3b 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(255, 87, 34, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 60px rgba(255, 87, 34, 0.2);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(255, 87, 34, 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-glow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(255, 87, 34, 0.3); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(255, 87, 34, 0.5); }
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
animation: pulse-glow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes gradient-shift {
|
||||||
|
0%, 100% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
}
|
||||||
|
.animated-gradient {
|
||||||
|
background: linear-gradient(-45deg, #FF5722, #ff9800, #FF5722, #c2410c);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
animation: gradient-shift 8s ease infinite;
|
||||||
|
}
|
||||||
|
.glow-orb {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(60px);
|
||||||
|
opacity: 0.4;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 87, 34, 0.4), 0 0 40px 0 rgba(255, 87, 34, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(255, 87, 34, 0.6), 0 0 60px 10px rgba(255, 87, 34, 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);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Floating Orbs -->
|
||||||
|
<div class="glow-orb w-96 h-96 bg-orange-500 top-20 -left-48 fixed animate-float-slow"></div>
|
||||||
|
<div class="glow-orb w-72 h-72 bg-amber-500 top-1/2 -right-36 fixed animate-float-delayed"></div>
|
||||||
|
<div class="glow-orb w-64 h-64 bg-orange-600 bottom-20 left-1/4 fixed animate-float"></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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/20">
|
||||||
|
<i data-lucide="home" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Housecall Pro 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="#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-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/20 hover:shadow-brand-500/40">
|
||||||
|
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">
|
||||||
|
<div class="flex flex-col items-center text-center">
|
||||||
|
<div class="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-green-400 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</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">Housecall Pro</span> to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed max-w-3xl mx-auto">
|
||||||
|
The complete Housecall Pro MCP server. <strong class="text-white">72 tools</strong> for jobs, dispatch, and payments.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
||||||
|
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-xl shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-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 hover:scale-110 transition" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950 hover:scale-110 transition" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">300+</strong> home service pros
|
||||||
|
</p>
|
||||||
|
</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 field service operations</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-r from-brand-500/50 to-amber-500/20 p-[1px] rounded-2xl">
|
||||||
|
<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/housecallpro.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="calendar-check" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Jobs</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="truck" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Dispatch</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="credit-card" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Payments</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="grid md:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">The Problem</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-8 leading-tight">
|
||||||
|
Setting up Housecall Pro + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</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 hover:border-red-500/20 transition">
|
||||||
|
<div class="w-10 h-10 rounded-full 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">Dispatch chaos every morning</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Phone calls, texts, schedule changes — it never stops.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
||||||
|
<div class="w-10 h-10 rounded-full 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">Slow estimate turnaround</p>
|
||||||
|
<p class="text-zinc-500 mt-1">By the time you quote, they've called your competitor.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
||||||
|
<div class="w-10 h-10 rounded-full 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 online reviews</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Happy customers forget. You need to ask at the right time.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-xl relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl"></div>
|
||||||
|
<div class="relative">
|
||||||
|
<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-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/30">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold">With Housecall Pro Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4 text-lg">
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>AI optimizes routes automatically</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>Instant AI-generated quotes</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>Automated review requests</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>Works with Claude, GPT, any MCP client</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>Full API access — 72 tools ready</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">Features</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Housecall Pro API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5 border border-brand-500/20">
|
||||||
|
<i data-lucide="calendar-check" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Job Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Schedule, dispatch, track jobs end-to-end. Full control over your operations.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center mb-5 border border-amber-500/20">
|
||||||
|
<i data-lucide="file-text" class="w-7 h-7 text-amber-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Estimates & Invoicing</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Generate quotes, convert to jobs, and collect payment automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5 border border-green-500/20">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Customer Portal</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Manage profiles, property info, service history, and preferences.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5 border border-purple-500/20">
|
||||||
|
<i data-lucide="megaphone" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Marketing</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Send postcards, emails, and review requests. Grow your reputation.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-16 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 60 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-3">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Payments</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Scheduling</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Dispatch</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Price Book</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Reporting</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Notifications</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Reviews</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">GPS Tracking</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-24 border-t border-zinc-800/50 relative">
|
||||||
|
<div class="absolute inset-0 hero-glow"></div>
|
||||||
|
<div class="max-w-2xl mx-auto px-6 relative">
|
||||||
|
<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-semibold 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-6">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-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 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-4 bg-zinc-800/50 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-4 bg-zinc-800/50 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 <span class="text-zinc-500">(optional)</span></label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="you@company.com"
|
||||||
|
class="w-full px-4 py-4 bg-zinc-800/50 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 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
|
||||||
|
>
|
||||||
|
<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-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i data-lucide="check" class="w-10 h-10 text-green-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>
|
||||||
|
|
||||||
|
<div id="error-message" class="hidden mt-4 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-center">
|
||||||
|
Something went wrong. Please try again.
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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');
|
||||||
|
const errorMsg = document.getElementById('error-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>';
|
||||||
|
|
||||||
|
// Simulate submission
|
||||||
|
await new Promise(r => setTimeout(r, 1000));
|
||||||
|
form.classList.add('hidden');
|
||||||
|
successMsg.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- 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 shadow-xl">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<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-6 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 text-lg 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.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold text-lg group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-inner">
|
||||||
|
<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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/housecallpro-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-green-400">✓ Housecall Pro MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 72 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">
|
||||||
|
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">FAQ</span>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold">Frequently asked questions</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<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 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<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 Housecall Pro account via OAuth 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 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<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 use OAuth 2.0 and never store your Housecall Pro API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Housecall Pro settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</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 is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative">
|
||||||
|
<div class="absolute inset-0 hero-glow"></div>
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your Housecall Pro?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 300+ home service pros already automating with Housecall Pro 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 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-amber-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="home" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Housecall Pro 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Housecall Pro Connect. Not affiliated with Housecall Pro.</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-brand-500 hover:bg-brand-600 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>
|
||||||
636
index.html
Normal file
636
index.html
Normal file
@ -0,0 +1,636 @@
|
|||||||
|
<!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>MCPEngine — AI Infrastructure for Business Software</title>
|
||||||
|
<meta name="description" content="Connect AI assistants to 30+ business platforms in one click. Managed MCP servers for ServiceTitan, Mailchimp, Calendly, Zendesk, and more.">
|
||||||
|
<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>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
||||||
|
colors: {
|
||||||
|
engine: {
|
||||||
|
50: '#f0f9ff',
|
||||||
|
100: '#e0f2fe',
|
||||||
|
200: '#bae6fd',
|
||||||
|
300: '#7dd3fc',
|
||||||
|
400: '#38bdf8',
|
||||||
|
500: '#0ea5e9',
|
||||||
|
600: '#0284c7',
|
||||||
|
700: '#0369a1',
|
||||||
|
800: '#075985',
|
||||||
|
900: '#0c4a6e',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #8b5cf6 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.hero-glow {
|
||||||
|
background: radial-gradient(ellipse 100% 60% at 50% -20%, rgba(14, 165, 233, 0.15), transparent);
|
||||||
|
}
|
||||||
|
.platform-card {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||||
|
}
|
||||||
|
.platform-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 20px 40px -12px rgba(14, 165, 233, 0.25);
|
||||||
|
border-color: rgba(14, 165, 233, 0.4);
|
||||||
|
}
|
||||||
|
.stat-number {
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-slate-950 text-slate-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 border-b border-slate-800/50 bg-slate-950/80 backdrop-blur-xl">
|
||||||
|
<div class="max-w-7xl 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-engine-500 to-purple-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="zap" class="w-6 h-6 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-xl font-bold">MCPEngine</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a href="#platforms" class="text-slate-400 hover:text-white transition">Platforms</a>
|
||||||
|
<a href="#pricing" class="text-slate-400 hover:text-white transition">Pricing</a>
|
||||||
|
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="text-slate-400 hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#contact" class="px-5 py-2.5 rounded-lg bg-engine-500 hover:bg-engine-600 text-white font-medium transition">Get Started</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative pt-32 pb-24 px-6 hero-glow">
|
||||||
|
<div class="max-w-6xl mx-auto text-center">
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700/50 text-sm text-slate-300 mb-8">
|
||||||
|
<span class="flex w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
|
||||||
|
30 platforms, 240+ tools, production-ready
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-6xl md:text-7xl lg:text-8xl font-black mb-8 leading-tight">
|
||||||
|
AI Infrastructure<br>
|
||||||
|
<span class="gradient-text">for Business Software</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-slate-400 mb-12 max-w-3xl mx-auto leading-relaxed">
|
||||||
|
Connect Claude, ChatGPT, and other AI assistants to your business tools in one click. Managed MCP servers for 30+ platforms.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a href="#platforms" class="px-8 py-4 rounded-xl bg-engine-500 hover:bg-engine-600 text-white font-semibold text-lg transition shadow-2xl shadow-engine-500/50">
|
||||||
|
Browse Platforms
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="px-8 py-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-semibold text-lg transition border border-slate-700">
|
||||||
|
View on GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats -->
|
||||||
|
<div class="mt-20 grid grid-cols-3 gap-8 max-w-3xl mx-auto">
|
||||||
|
<div>
|
||||||
|
<div class="text-5xl font-black gradient-text stat-number mb-2">30</div>
|
||||||
|
<div class="text-slate-500 font-medium">Platforms</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-5xl font-black gradient-text stat-number mb-2">240+</div>
|
||||||
|
<div class="text-slate-500 font-medium">Tools</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-5xl font-black gradient-text stat-number mb-2">100%</div>
|
||||||
|
<div class="text-slate-500 font-medium">Open Source</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- What is MCPEngine -->
|
||||||
|
<section class="py-24 px-6 border-t border-slate-800/50">
|
||||||
|
<div class="max-w-5xl mx-auto">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-4xl md:text-5xl font-black mb-6">What is MCPEngine?</h2>
|
||||||
|
<p class="text-xl text-slate-400 max-w-3xl mx-auto">
|
||||||
|
The infrastructure layer that connects AI assistants to business software through the Model Context Protocol.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="p-8 rounded-2xl bg-slate-900/50 border border-slate-800/50">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-engine-500 to-purple-600 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="plug" class="w-7 h-7 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold mb-4">One-Click Connect</h3>
|
||||||
|
<p class="text-slate-400 leading-relaxed">
|
||||||
|
No API wrappers to write. Deploy a server, add credentials, and your AI can instantly use ServiceTitan, Mailchimp, or any of 30+ platforms.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 rounded-2xl bg-slate-900/50 border border-slate-800/50">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="shield-check" class="w-7 h-7 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold mb-4">Production-Ready</h3>
|
||||||
|
<p class="text-slate-400 leading-relaxed">
|
||||||
|
Built with TypeScript, comprehensive error handling, and battle-tested with real customer data. Not toy demos.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 rounded-2xl bg-slate-900/50 border border-slate-800/50">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500 to-orange-600 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="rocket" class="w-7 h-7 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold mb-4">Managed Hosting</h3>
|
||||||
|
<p class="text-slate-400 leading-relaxed">
|
||||||
|
Self-host from our GitHub repo or use our managed service. Auto-updates, monitoring, and 99.9% uptime SLA.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Platforms Grid -->
|
||||||
|
<section id="platforms" class="py-24 px-6 border-t border-slate-800/50">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<div class="text-center mb-20">
|
||||||
|
<h2 class="text-4xl md:text-5xl font-black mb-6">30 Platforms. One Engine.</h2>
|
||||||
|
<p class="text-xl text-slate-400 max-w-3xl mx-auto">
|
||||||
|
From field service to e-commerce, we've built MCP servers for the tools your business actually uses.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Categories -->
|
||||||
|
<div class="space-y-16">
|
||||||
|
|
||||||
|
<!-- Field Service -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
||||||
|
<i data-lucide="wrench" class="w-6 h-6 text-orange-500"></i>
|
||||||
|
Field Service
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<a href="servicetitan.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="wrench" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">ServiceTitan</div>
|
||||||
|
</a>
|
||||||
|
<a href="jobber.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="briefcase" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Jobber</div>
|
||||||
|
</a>
|
||||||
|
<a href="housecallpro.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="home" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Housecall Pro</div>
|
||||||
|
</a>
|
||||||
|
<a href="fieldedge.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="tool" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">FieldEdge</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- HR & Payroll -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
||||||
|
<i data-lucide="users" class="w-6 h-6 text-pink-500"></i>
|
||||||
|
HR & Payroll
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<a href="gusto.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="users" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Gusto</div>
|
||||||
|
</a>
|
||||||
|
<a href="bamboohr.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="user-check" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">BambooHR</div>
|
||||||
|
</a>
|
||||||
|
<a href="rippling.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="building-2" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Rippling</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scheduling -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
||||||
|
<i data-lucide="calendar" class="w-6 h-6 text-blue-500"></i>
|
||||||
|
Scheduling
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<a href="calendly.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="calendar" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Calendly</div>
|
||||||
|
</a>
|
||||||
|
<a href="acuity.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-pink-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="clock" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Acuity</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Restaurant & POS -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
||||||
|
<i data-lucide="utensils" class="w-6 h-6 text-red-500"></i>
|
||||||
|
Restaurant & POS
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<a href="toast.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-red-500 to-orange-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="utensils" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Toast</div>
|
||||||
|
</a>
|
||||||
|
<a href="touchbistro.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="smartphone" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">TouchBistro</div>
|
||||||
|
</a>
|
||||||
|
<a href="clover.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-lime-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="credit-card" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Clover</div>
|
||||||
|
</a>
|
||||||
|
<a href="lightspeed.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-amber-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="zap" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Lightspeed</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Email Marketing -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
||||||
|
<i data-lucide="mail" class="w-6 h-6 text-yellow-500"></i>
|
||||||
|
Email Marketing
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<a href="mailchimp.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="mail" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Mailchimp</div>
|
||||||
|
</a>
|
||||||
|
<a href="brevo.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="send" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Brevo</div>
|
||||||
|
</a>
|
||||||
|
<a href="constantcontact.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="megaphone" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Constant Contact</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CRM -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
||||||
|
<i data-lucide="target" class="w-6 h-6 text-purple-500"></i>
|
||||||
|
CRM
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<a href="closecrm.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="target" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Close</div>
|
||||||
|
</a>
|
||||||
|
<a href="pipedrive.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="trending-up" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Pipedrive</div>
|
||||||
|
</a>
|
||||||
|
<a href="keap.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="sparkles" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Keap</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Project Management -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
||||||
|
<i data-lucide="layout-grid" class="w-6 h-6 text-blue-500"></i>
|
||||||
|
Project Management
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<a href="trello.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="layout-grid" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Trello</div>
|
||||||
|
</a>
|
||||||
|
<a href="clickup.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="check-circle" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">ClickUp</div>
|
||||||
|
</a>
|
||||||
|
<a href="basecamp.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="mountain" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Basecamp</div>
|
||||||
|
</a>
|
||||||
|
<a href="wrike.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="layers" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Wrike</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Customer Support -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
||||||
|
<i data-lucide="headphones" class="w-6 h-6 text-green-500"></i>
|
||||||
|
Customer Support
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<a href="zendesk.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="headphones" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Zendesk</div>
|
||||||
|
</a>
|
||||||
|
<a href="freshdesk.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="message-circle" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Freshdesk</div>
|
||||||
|
</a>
|
||||||
|
<a href="helpscout.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="life-buoy" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Help Scout</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- E-commerce -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
||||||
|
<i data-lucide="shopping-bag" class="w-6 h-6 text-purple-500"></i>
|
||||||
|
E-commerce
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<a href="squarespace.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="square" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Squarespace</div>
|
||||||
|
</a>
|
||||||
|
<a href="bigcommerce.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="shopping-bag" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">BigCommerce</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Accounting -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold mb-8 text-slate-300 flex items-center gap-3">
|
||||||
|
<i data-lucide="receipt" class="w-6 h-6 text-green-500"></i>
|
||||||
|
Accounting
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<a href="freshbooks.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="receipt" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">FreshBooks</div>
|
||||||
|
</a>
|
||||||
|
<a href="wave.html" class="platform-card p-8 rounded-2xl bg-slate-900/30 hover:bg-slate-900/60 text-center group">
|
||||||
|
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="wallet" class="w-8 h-8 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div class="font-bold">Wave</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pricing -->
|
||||||
|
<section id="pricing" class="py-24 px-6 border-t border-slate-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-4xl md:text-5xl font-black mb-6">Simple, Transparent Pricing</h2>
|
||||||
|
<p class="text-xl text-slate-400 max-w-3xl mx-auto">
|
||||||
|
Self-host for free, use our managed service, or become a provider.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Open Source -->
|
||||||
|
<div class="p-8 rounded-2xl bg-slate-900/30 border border-slate-800/50">
|
||||||
|
<div class="text-lg font-semibold text-slate-400 mb-2">Open Source</div>
|
||||||
|
<div class="text-5xl font-black mb-6">
|
||||||
|
$0
|
||||||
|
<span class="text-xl text-slate-500 font-normal">/forever</span>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-3 mb-8">
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">All 30 MCP servers</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">Full source code access</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">Self-host anywhere</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">MIT license</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">Community support</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="block w-full py-3 px-6 rounded-lg bg-slate-800 hover:bg-slate-700 text-center font-semibold transition">
|
||||||
|
Get Started
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Per-Platform Managed -->
|
||||||
|
<div class="p-8 rounded-2xl bg-gradient-to-br from-engine-500/10 to-purple-600/10 border-2 border-engine-500/50 relative">
|
||||||
|
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-gradient-to-r from-engine-500 to-purple-600 text-sm font-bold text-white">
|
||||||
|
Most Popular
|
||||||
|
</div>
|
||||||
|
<div class="text-lg font-semibold text-engine-400 mb-2">Select Your Apps</div>
|
||||||
|
<div class="text-5xl font-black mb-6">
|
||||||
|
$49
|
||||||
|
<span class="text-xl text-slate-500 font-normal">/app/mo</span>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-3 mb-8">
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">Choose any platforms</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">Fully managed hosting</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">Auto-updates</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">99.9% uptime SLA</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-engine-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">Email support</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="block w-full py-3 px-6 rounded-lg bg-engine-500 hover:bg-engine-600 text-center font-semibold transition text-white">
|
||||||
|
Coming Q2 2026
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enterprise / Reseller -->
|
||||||
|
<div class="p-8 rounded-2xl bg-slate-900/30 border border-slate-800/50">
|
||||||
|
<div class="text-lg font-semibold text-slate-400 mb-2">Become a Provider</div>
|
||||||
|
<div class="text-5xl font-black mb-6">
|
||||||
|
Partner
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-3 mb-8">
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">White-label deployment</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">Offer managed services</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">Revenue sharing model</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">Dedicated support</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||||
|
<span class="text-slate-300">Custom SLA</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="mailto:partners@mcpengine.com" class="block w-full py-3 px-6 rounded-lg bg-slate-800 hover:bg-slate-700 text-center font-semibold transition">
|
||||||
|
Become a Partner
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section id="contact" class="py-24 px-6 border-t border-slate-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto text-center">
|
||||||
|
<h2 class="text-4xl md:text-5xl font-black mb-6">Ready to Power Your AI?</h2>
|
||||||
|
<p class="text-xl text-slate-400 mb-12 max-w-2xl mx-auto">
|
||||||
|
Join early adopters building the future of AI-powered business automation.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="px-8 py-4 rounded-xl bg-engine-500 hover:bg-engine-600 text-white font-semibold text-lg transition shadow-2xl shadow-engine-500/50">
|
||||||
|
Explore on GitHub
|
||||||
|
</a>
|
||||||
|
<a href="mailto:hello@mcpengine.com" class="px-8 py-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-semibold text-lg transition border border-slate-700">
|
||||||
|
Get in Touch
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="border-t border-slate-800/50 py-12 px-6">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<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-engine-500 to-purple-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="zap" class="w-6 h-6 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-lg font-bold">MCPEngine</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-6 text-slate-400 text-sm">
|
||||||
|
<a href="https://github.com/BusyBee3333/mcpengine" target="_blank" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="mailto:hello@mcpengine.com" class="hover:text-white transition">Contact</a>
|
||||||
|
<span>© 2026 MCPEngine</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Initialize Lucide icons
|
||||||
|
lucide.createIcons();
|
||||||
|
|
||||||
|
// Smooth scroll
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
762
jobber/index.html
Normal file
762
jobber/index.html
Normal file
@ -0,0 +1,762 @@
|
|||||||
|
<!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>Jobber Connect — AI-Power Your Service Business 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: '#f2fde8',
|
||||||
|
100: '#e2faca',
|
||||||
|
200: '#c6f49a',
|
||||||
|
300: '#a1ea5f',
|
||||||
|
400: '#7ac143',
|
||||||
|
500: '#5da52a',
|
||||||
|
600: '#47831d',
|
||||||
|
700: '#38641b',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #7AC143 0%, #47831d 50%, #2d5a10 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.gradient-text-hero {
|
||||||
|
background: linear-gradient(135deg, #7AC143 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(122, 193, 67, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(122, 193, 67, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(122, 193, 67, 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-glow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(122, 193, 67, 0.4); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(122, 193, 67, 0.6); }
|
||||||
|
}
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: -200% 0; }
|
||||||
|
100% { background-position: 200% 0; }
|
||||||
|
}
|
||||||
|
.shimmer-border {
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(122, 193, 67, 0.3), transparent);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 3s infinite;
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(122, 193, 67, 0.2), 0 0 120px rgba(122, 193, 67, 0.1);
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, #7AC143 0%, #5da52a 100%);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 0 30px rgba(122, 193, 67, 0.5);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
background: linear-gradient(135deg, rgba(122, 193, 67, 0.2) 0%, rgba(122, 193, 67, 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(122, 193, 67, 0.4), 0 0 40px 0 rgba(122, 193, 67, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(122, 193, 67, 0.6), 0 0 60px 10px rgba(122, 193, 67, 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);
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: linear-gradient(135deg, rgba(122, 193, 67, 0.1) 0%, transparent 100%);
|
||||||
|
}
|
||||||
|
</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="wrench" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Jobber 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>
|
||||||
|
Open Source + Hosted
|
||||||
|
</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">Jobber</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 Jobber MCP server. <strong class="text-white">68 tools</strong> for quotes, jobs, and invoicing.
|
||||||
|
No setup. No API hassles. Just connect and automate.
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-6">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=11" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=12" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=13" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=14" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=15" class="w-11 h-11 rounded-full border-2 border-zinc-950 ring-2 ring-brand-400/20" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="text-center sm:text-left">
|
||||||
|
<p class="text-zinc-300 font-medium">Trusted by <strong class="text-white">200+</strong> service businesses</p>
|
||||||
|
<div class="flex items-center justify-center sm:justify-start gap-1 mt-1">
|
||||||
|
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i>
|
||||||
|
<span class="text-zinc-500 text-sm ml-2">5.0 average</span>
|
||||||
|
</div>
|
||||||
|
</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 service business 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/jobber.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="file-text" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Quotes</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="calendar-check" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Jobs</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="receipt" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Invoices</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">
|
||||||
|
Setting up Jobber + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">
|
||||||
|
Stop wrestling with APIs and authentication. Start automating your service business.
|
||||||
|
</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">Quote follow-up gaps</p>
|
||||||
|
<p class="text-zinc-500">Leads go cold because nobody followed up in time. Money left on the table.</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">Scheduling conflicts</p>
|
||||||
|
<p class="text-zinc-500">Double-bookings, missed appointments, frustrated customers and crews.</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">Late invoice payments</p>
|
||||||
|
<p class="text-zinc-500">Chasing payments manually eats into your profit margins and sanity.</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 Jobber 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 chases every lead</p>
|
||||||
|
<p class="text-zinc-400">Automatic follow-ups at the perfect time. Never miss another opportunity.</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 optimizes crew allocation</p>
|
||||||
|
<p class="text-zinc-400">Smart scheduling that maximizes efficiency and minimizes drive time.</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">Automated payment reminders</p>
|
||||||
|
<p class="text-zinc-400">Polite, persistent follow-ups that get you paid faster without the awkwardness.</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</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Jobber API access through one simple connection. 68 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="file-text" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Quote Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Create, send, track quotes automatically. Convert more leads to paying customers.</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="calendar-check" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Job Scheduling</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Assign work, optimize routes, track progress. Keep your crews productive.</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="receipt" class="w-7 h-7 text-pink-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Invoicing</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Generate invoices, collect payments, send reminders. Get paid faster.</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="users" class="w-7 h-7 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Client Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Track properties, service history, and preferences. Know your customers.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 60 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">Team Management</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">Route Optimization</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">Payment Processing</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">Expense 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">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">Time Tracking</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 complex interfaces. Just describe what you need in plain English and Claude handles
|
||||||
|
the rest through your Jobber account.
|
||||||
|
</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">Natural language commands</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">Real-time data sync</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">Secure OAuth connection</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 + Jobber</span>
|
||||||
|
</div>
|
||||||
|
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">You:</span> Create a quote for lawn care
|
||||||
|
at 123 Main St, $150
|
||||||
|
|
||||||
|
<span class="text-brand-400">Claude:</span> I'll create that quote now...
|
||||||
|
|
||||||
|
<span class="text-zinc-500">→ Using:</span> jobber_create_quote
|
||||||
|
<span class="text-zinc-500">→ Client:</span> 123 Main St
|
||||||
|
<span class="text-zinc-500">→ Amount:</span> $150.00
|
||||||
|
|
||||||
|
<span class="text-green-400">✓ Quote #1847 created</span>
|
||||||
|
<span class="text-green-400">✓ Email sent to client</span>
|
||||||
|
|
||||||
|
<span class="text-brand-400">Claude:</span> Done! Quote sent to the
|
||||||
|
client. Would you like me to
|
||||||
|
schedule a follow-up?</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/jobber-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">✓ Jobber MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 68 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 Jobber 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.
|
||||||
|
Think of it as giving Claude hands to work with your business tools.
|
||||||
|
</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">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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
For the hosted version, no. Just connect your Jobber account via OAuth and add the MCP endpoint to your AI client (Claude Desktop, etc.).
|
||||||
|
If you self-host, you'll need Node.js — but we provide clear documentation.
|
||||||
|
</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 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">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Jobber API keys directly. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Jobber settings. Your customer data never touches our servers — it flows directly between Claude and Jobber.
|
||||||
|
</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">Which AI assistants work with this?</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 is currently best supported by Claude (Anthropic). You can use it with Claude Desktop, Claude.ai, and any MCP-compatible client.
|
||||||
|
As MCP adoption grows, more AI assistants will support it natively.
|
||||||
|
</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 is this different from Zapier?</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">
|
||||||
|
Zapier triggers pre-defined automations. Jobber Connect lets you have a conversation with AI that can take any action in Jobber on demand.
|
||||||
|
Ask Claude to "create a quote for the Johnson's lawn care" and it just does it — no workflow setup required.
|
||||||
|
</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 Jobber?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
||||||
|
Join 200+ service businesses already automating with Jobber 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="wrench" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Jobber 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 Jobber Connect. Not affiliated with Jobber.</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>
|
||||||
661
keap/index.html
Normal file
661
keap/index.html
Normal file
@ -0,0 +1,661 @@
|
|||||||
|
<!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>Keap Connect — AI-Power Your CRM 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: '#f0fdf4',
|
||||||
|
100: '#dcfce7',
|
||||||
|
200: '#bbf7d0',
|
||||||
|
300: '#86efac',
|
||||||
|
400: '#4ade80',
|
||||||
|
500: '#2D9F2D',
|
||||||
|
600: '#16a34a',
|
||||||
|
700: '#15803d',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #2D9F2D 0%, #10b981 50%, #06b6d4 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(45, 159, 45, 0.15), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 40px rgba(45, 159, 45, 0.15);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
.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(45, 159, 45, 0.3); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(45, 159, 45, 0.5); }
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(45, 159, 45, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.video-gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(45, 159, 45, 0.5), rgba(6, 182, 212, 0.2));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.video-gradient-border-inner {
|
||||||
|
background: rgb(24 24 27);
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(45, 159, 45, 0.4), 0 0 40px 0 rgba(45, 159, 45, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(45, 159, 45, 0.6), 0 0 60px 10px rgba(45, 159, 45, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sticky-btn:hover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(135deg, rgba(45, 159, 45, 0.1), rgba(6, 182, 212, 0.1));
|
||||||
|
}
|
||||||
|
.gradient-border::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
padding: 1px;
|
||||||
|
background: linear-gradient(135deg, #2D9F2D, #06b6d4);
|
||||||
|
-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-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: linear-gradient(135deg, rgba(45, 159, 45, 0.05), rgba(6, 182, 212, 0.05));
|
||||||
|
border: 1px solid rgba(45, 159, 45, 0.2);
|
||||||
|
}
|
||||||
|
</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-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-emerald-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-cyan-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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="target" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Keap 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="#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-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
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">
|
||||||
|
<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-500 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text">Keap</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">
|
||||||
|
The most comprehensive Keap MCP server. <strong class="text-white">76 tools</strong> covering
|
||||||
|
contacts, campaigns, pipeline & commerce. No setup. Just connect.
|
||||||
|
</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-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats -->
|
||||||
|
<div class="grid grid-cols-3 gap-4 max-w-xl mx-auto">
|
||||||
|
<div class="stat-card rounded-xl p-4 text-center">
|
||||||
|
<div class="text-2xl font-bold text-white">76</div>
|
||||||
|
<div class="text-sm text-zinc-400">API Tools</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card rounded-xl p-4 text-center">
|
||||||
|
<div class="text-2xl font-bold text-white">2 min</div>
|
||||||
|
<div class="text-sm text-zinc-400">Setup Time</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card rounded-xl p-4 text-center">
|
||||||
|
<div class="text-2xl font-bold text-white">24/7</div>
|
||||||
|
<div class="text-sm text-zinc-400">AI Automation</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 AI nurture leads, update pipelines, and automate your sales</p>
|
||||||
|
</div>
|
||||||
|
<div class="video-gradient-border">
|
||||||
|
<div class="video-gradient-border-inner p-2">
|
||||||
|
<div class="rounded-xl overflow-hidden video-glow">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../../output/keap.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-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Contacts</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="trending-up" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Pipeline</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="mail" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Campaigns</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Problem/Solution -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
Setting up Keap + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">Cold leads going stale</p>
|
||||||
|
<p class="text-zinc-500">No time to follow up with everyone in your pipeline.</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-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">Manual pipeline updates</p>
|
||||||
|
<p class="text-zinc-500">Dragging deals around when you should be closing them.</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-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">Missed sales opportunities</p>
|
||||||
|
<p class="text-zinc-500">Hot leads slip through because nobody noticed the signal.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-900 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold">With Keap Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4 text-zinc-300">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="mail" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>AI nurtures leads automatically with smart sequences</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="git-branch" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>AI moves deals through stages on buying signals</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="bell" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>Instant alerts when leads are ready to buy</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="zap" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>Works with Claude, GPT, any MCP client</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<i data-lucide="store" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<p>E-commerce and subscription management included</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<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">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Keap API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="users" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Contact Management</h3>
|
||||||
|
<p class="text-zinc-400">Create, tag, segment contacts automatically. Full CRM control.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="trending-up" class="w-6 h-6 text-emerald-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Sales Pipeline</h3>
|
||||||
|
<p class="text-zinc-400">Track deals, move stages, forecast revenue with AI assistance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="mail" class="w-6 h-6 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Campaign Automation</h3>
|
||||||
|
<p class="text-zinc-400">Trigger sequences, send emails, track engagement automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="feature-icon w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="shopping-cart" class="w-6 h-6 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">E-commerce</h3>
|
||||||
|
<p class="text-zinc-400">Manage products, orders, and subscriptions programmatically.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ 60 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tags</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Notes</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Tasks</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Appointments</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Opportunities</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Invoices</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Payments</span>
|
||||||
|
<span class="px-3 py-1 bg-zinc-800 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Affiliates</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl font-bold mb-4">Trusted by small businesses everywhere</h2>
|
||||||
|
<p class="text-zinc-400">Join hundreds of entrepreneurs automating their sales with AI</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center gap-6">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=21" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=22" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=23" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=24" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=25" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=26" class="w-12 h-12 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
|
||||||
|
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
|
||||||
|
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
|
||||||
|
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
|
||||||
|
<i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i>
|
||||||
|
<span class="ml-2 text-zinc-400">from 200+ businesses</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 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">
|
||||||
|
<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="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 gradient-border">
|
||||||
|
<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 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 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="Your phone number"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 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@company.com"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="submit-btn"
|
||||||
|
class="w-full py-4 bg-brand-500 hover:bg-brand-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 -->
|
||||||
|
<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">
|
||||||
|
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
||||||
|
We respect your privacy. No spam, ever.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="bg-zinc-900 rounded-3xl border border-zinc-800 p-8 md:p-12">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
||||||
|
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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mcp/keap
|
||||||
|
<span class="text-zinc-500">$</span> cd keap && 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">✓ Keap MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 76 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-20 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
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-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
For the hosted version, no. Just connect your Keap account via OAuth 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Keap API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Keap settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">Will this work with Keap Pro and Max?</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">
|
||||||
|
Yes! Keap Connect works with all Keap plans that have API access — Pro, Max, and Max Classic.
|
||||||
|
The same 76 tools work across all versions.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your CRM?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 200+ small businesses already automating with Keap 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-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="target" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Keap 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Keap Connect. Not affiliated with Keap.</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-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
647
lightspeed/index.html
Normal file
647
lightspeed/index.html
Normal file
@ -0,0 +1,647 @@
|
|||||||
|
<!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>Lightspeed Connect — AI-Power Your Retail 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;900&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: '#fef2f2',
|
||||||
|
100: '#fee2e2',
|
||||||
|
200: '#fecaca',
|
||||||
|
300: '#fca5a5',
|
||||||
|
400: '#f87171',
|
||||||
|
500: '#E4002B',
|
||||||
|
600: '#cc0026',
|
||||||
|
700: '#b30021',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #E4002B 0%, #ff6b6b 30%, #8b5cf6 70%, #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(228, 0, 43, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(228, 0, 43, 0.2);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(228, 0, 43, 0.4);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 25px 80px rgba(228, 0, 43, 0.25), 0 10px 40px rgba(0, 0, 0, 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% { opacity: 0.5; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
}
|
||||||
|
.pulse-glow {
|
||||||
|
animation: pulse-glow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: -200% 0; }
|
||||||
|
100% { background-position: 200% 0; }
|
||||||
|
}
|
||||||
|
.shimmer {
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 3s infinite;
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 0 30px rgba(228, 0, 43, 0.4);
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(228, 0, 43, 0.4), 0 0 40px 0 rgba(228, 0, 43, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(228, 0, 43, 0.6), 0 0 60px 10px rgba(228, 0, 43, 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);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(228, 0, 43, 0.5), rgba(139, 92, 246, 0.5));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: #18181b;
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
.text-glow {
|
||||||
|
text-shadow: 0 0 40px rgba(228, 0, 43, 0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Floating Background Elements -->
|
||||||
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-80 h-80 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-500 to-pink-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="shopping-bag" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl tracking-tight">Lightspeed 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="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-lg font-semibold transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
|
||||||
|
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-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="max-w-4xl mx-auto text-center">
|
||||||
|
<div class="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="relative flex h-2 w-2">
|
||||||
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-500 opacity-75"></span>
|
||||||
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500"></span>
|
||||||
|
</span>
|
||||||
|
Open Source + Hosted Cloud
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
|
||||||
|
Connect <span class="gradient-text text-glow">Lightspeed</span><br>
|
||||||
|
to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
|
||||||
|
The complete Lightspeed MCP server. <strong class="text-white">86 tools</strong> for sales, inventory, and analytics.
|
||||||
|
No setup headaches. Just connect and automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
||||||
|
<a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 flex items-center justify-center gap-2">
|
||||||
|
Join the Waitlist
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></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 backdrop-blur-sm">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center justify-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="">
|
||||||
|
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-zinc-800 flex items-center justify-center text-xs font-semibold shadow-lg">+99</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400 text-sm">
|
||||||
|
Trusted by <strong class="text-white">500+</strong> retail businesses
|
||||||
|
</p>
|
||||||
|
</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 retail operations</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/lightspeed.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="shopping-bag" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Sales</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="package" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Inventory</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>
|
||||||
|
</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="grid md:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">The Problem</span>
|
||||||
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
|
||||||
|
Setting up Lightspeed + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-start gap-4 group">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-lg">Stockouts on bestsellers</p>
|
||||||
|
<p class="text-zinc-500 mt-1">You find out something sold out when a customer complains.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 group">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-lg">No cross-location visibility</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Your stores are islands. Inventory data is scattered.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 group">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-lg">Generic customer service</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Staff can't see purchase history. Every customer is a stranger.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8 md:p-10">
|
||||||
|
<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-pink-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 Lightspeed Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-5">
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
||||||
|
<span>AI predicts demand and auto-reorders</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
||||||
|
<span>Unified inventory across all locations</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
||||||
|
<span>AI personalizes every interaction</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
||||||
|
<span>Works with Claude, GPT, any MCP client</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
||||||
|
<span>2-click OAuth — no API key headaches</span>
|
||||||
|
</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">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full bg-purple-500/10 text-purple-400 text-sm font-medium mb-4">Features</span>
|
||||||
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Lightspeed API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="receipt" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Sales Management</h3>
|
||||||
|
<p class="text-zinc-400">Access transactions, refunds, and real-time sales data across all registers.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="package" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Inventory Control</h3>
|
||||||
|
<p class="text-zinc-400">Track stock levels, manage vendors, and automate reorders intelligently.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-pink-500/20 to-pink-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-pink-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Customer Profiles</h3>
|
||||||
|
<p class="text-zinc-400">Build loyalty programs and track complete purchase history.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-orange-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="building-2" class="w-7 h-7 text-orange-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Multi-Location</h3>
|
||||||
|
<p class="text-zinc-400">Manage inventory and sales across all stores from one AI.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 70 more endpoints 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-zinc-600 transition-colors">Purchase Orders</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Vendors</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Categories</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Discounts</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Gift Cards</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Reports</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Employees</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition-colors">Registers</span>
|
||||||
|
</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">
|
||||||
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
||||||
|
Coming Soon
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl lg: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="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8">
|
||||||
|
<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-500">*</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/50 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-all"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-500">*</span></label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="phone"
|
||||||
|
name="phone"
|
||||||
|
required
|
||||||
|
placeholder="(555) 123-4567"
|
||||||
|
class="w-full px-4 py-3.5 bg-zinc-800/50 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-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-4 py-3.5 bg-zinc-800/50 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-all"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="submit-btn"
|
||||||
|
class="w-full py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all 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>
|
||||||
|
|
||||||
|
<div id="success-message" class="hidden text-center py-8">
|
||||||
|
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
|
||||||
|
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
||||||
|
<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 lg:text-5xl 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 text-lg mb-6">
|
||||||
|
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" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold transition-colors group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
|
||||||
|
<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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/lightspeed-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-green-400">✓ Lightspeed MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 86 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-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
<p class="text-zinc-400">Everything you need to know about Lightspeed 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" open>
|
||||||
|
<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">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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
For the hosted version, no. Just connect your Lightspeed account via OAuth 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-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 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">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Lightspeed API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Lightspeed settings.
|
||||||
|
</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 I use this with GPT or other AI models?</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 is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
||||||
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your <span class="gradient-text">Lightspeed?</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 500+ retail businesses already automating with Lightspeed 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-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
|
||||||
|
Book a 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-pink-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="shopping-bag" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Lightspeed 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="https://github.com" 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 Lightspeed Connect. Not affiliated with Lightspeed.</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-brand-600 rounded-full font-semibold transition-all"
|
||||||
|
>
|
||||||
|
<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 > 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>
|
||||||
620
mailchimp/index.html
Normal file
620
mailchimp/index.html
Normal file
@ -0,0 +1,620 @@
|
|||||||
|
<!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>Mailchimp Connect — AI-Power Your Email Marketing 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: '#fefce8',
|
||||||
|
100: '#fef9c3',
|
||||||
|
200: '#fef08a',
|
||||||
|
300: '#fde047',
|
||||||
|
400: '#FFE01B',
|
||||||
|
500: '#FFE01B',
|
||||||
|
600: '#ca8a04',
|
||||||
|
700: '#a16207',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #FFE01B 0%, #fbbf24 50%, #f59e0b 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(255, 224, 27, 0.15), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(255, 224, 27, 0.12), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(255, 224, 27, 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;
|
||||||
|
}
|
||||||
|
.animate-bounce-subtle {
|
||||||
|
animation: bounce-subtle 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
@keyframes bounce-subtle {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-5px); }
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 224, 27, 0.4), 0 0 40px 0 rgba(255, 224, 27, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(255, 224, 27, 0.6), 0 0 60px 10px rgba(255, 224, 27, 0.3); }
|
||||||
|
}
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: -200% 0; }
|
||||||
|
100% { background-position: 200% 0; }
|
||||||
|
}
|
||||||
|
.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.05);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(255, 224, 27, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
.nav-blur {
|
||||||
|
backdrop-filter: blur(20px) saturate(180%);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.gradient-border::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
padding: 1px;
|
||||||
|
background: linear-gradient(135deg, rgba(255, 224, 27, 0.5), transparent, rgba(255, 224, 27, 0.3));
|
||||||
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||||
|
-webkit-mask-composite: xor;
|
||||||
|
mask-composite: exclude;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.shimmer-text {
|
||||||
|
background: linear-gradient(90deg, #FFE01B 0%, #fff 50%, #FFE01B 100%);
|
||||||
|
background-size: 200% auto;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
animation: shimmer 3s linear infinite;
|
||||||
|
}
|
||||||
|
.monkey-bounce {
|
||||||
|
animation: bounce-subtle 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Floating Background Elements -->
|
||||||
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-yellow-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-amber-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/70 nav-blur">
|
||||||
|
<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-brand-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="mail" class="w-5 h-5 text-black"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl tracking-tight">Mailchimp 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="#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="text-zinc-400 hover:text-white transition hidden sm:block">Sign In</a>
|
||||||
|
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-yellow-400 text-black rounded-lg font-medium transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 py-20">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="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-500 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</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">Mailchimp</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed">
|
||||||
|
The complete Mailchimp MCP server. Campaigns, audiences, and automations. <strong class="text-white">94 tools</strong> ready to automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||||||
|
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-yellow-400 text-black rounded-xl font-semibold text-lg text-center transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg text-center transition-all flex items-center justify-center gap-2">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center gap-4 justify-center">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950 ring-2 ring-brand-500/20" alt="">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-zinc-400 text-sm">
|
||||||
|
Trusted by <strong class="text-white">350+</strong> marketers
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</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 email marketing workflow</p>
|
||||||
|
</div>
|
||||||
|
<div class="gradient-border">
|
||||||
|
<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/mailchimp.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="send" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Campaigns</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="users-round" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Audiences</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points -->
|
||||||
|
<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-4">
|
||||||
|
Setting up Mailchimp + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-zinc-400 text-lg max-w-2xl mx-auto">Stop wrestling with APIs. Start automating.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="flex items-center gap-4 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 mb-2 line-through">Writer's block on emails</p>
|
||||||
|
<p class="text-white font-semibold text-lg">AI drafts high-converting copy</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="flex items-center gap-4 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 mb-2 line-through">Guessing send times</p>
|
||||||
|
<p class="text-white font-semibold text-lg">AI optimizes for engagement</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="flex items-center gap-4 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 text-zinc-600"></i>
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 mb-2 line-through">Manual list hygiene</p>
|
||||||
|
<p class="text-white font-semibold text-lg">Auto-clean and segment lists</p>
|
||||||
|
</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">
|
||||||
|
<span class="inline-block px-4 py-1.5 rounded-full bg-brand-500/10 text-brand-500 text-sm font-medium mb-4">Features</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-zinc-400 text-lg">Full Mailchimp API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-yellow-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="send" class="w-7 h-7 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Campaign Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Create, send, schedule campaigns. Full email control.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="users-round" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Audience Data</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Manage subscribers, segments, and tags intelligently.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="workflow" class="w-7 h-7 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Automations</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Trigger journeys, manage workflows, optimize timing.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-6 feature-icon">
|
||||||
|
<i data-lucide="bar-chart-3" class="w-7 h-7 text-blue-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-bold text-xl mb-3">Analytics</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Track opens, clicks, revenue. AI-powered insights.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 80 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-3">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">A/B Testing</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Templates</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Landing Pages</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">E-commerce</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Reports</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition-colors cursor-default">Content</span>
|
||||||
|
</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-500 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 gradient-border">
|
||||||
|
<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-500">*</span></label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
required
|
||||||
|
placeholder="Your full name"
|
||||||
|
class="w-full px-5 py-4 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-all"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-500">*</span></label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="phone"
|
||||||
|
name="phone"
|
||||||
|
required
|
||||||
|
placeholder="(555) 123-4567"
|
||||||
|
class="w-full px-5 py-4 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-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/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-all"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full py-4 bg-brand-500 hover:bg-yellow-400 text-black rounded-xl font-semibold text-lg transition-all 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>
|
||||||
|
|
||||||
|
<div id="success-message" class="hidden text-center py-8">
|
||||||
|
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 gradient-border">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<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-6 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="#" class="inline-flex items-center gap-2 text-brand-500 hover:text-yellow-400 font-medium transition-colors">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-950 rounded-2xl 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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/mailchimp-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-green-400">✓ Mailchimp MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 94 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
</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">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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
For the hosted version, no. Just connect your Mailchimp account via OAuth 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-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 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">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Mailchimp API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Mailchimp settings.
|
||||||
|
</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 I use this with GPT or other AI models?</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 is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your Mailchimp?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join hundreds of marketers already automating with Mailchimp Connect.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-yellow-400 text-black rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 transform hover:scale-105">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition-all">
|
||||||
|
Book a 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-brand-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="mail" class="w-5 h-5 text-black"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Mailchimp 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Mailchimp Connect. Not affiliated with Mailchimp.</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-brand-500 text-black rounded-full font-semibold transition-all transform hover:scale-110 shadow-lg"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
637
pipedrive/index.html
Normal file
637
pipedrive/index.html
Normal file
@ -0,0 +1,637 @@
|
|||||||
|
<!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>Pipedrive Connect — AI-Power Your Pipeline 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: '#f0fdf4',
|
||||||
|
100: '#dcfce7',
|
||||||
|
200: '#bbf7d0',
|
||||||
|
300: '#86efac',
|
||||||
|
400: '#4ade80',
|
||||||
|
500: '#017737',
|
||||||
|
600: '#015f2d',
|
||||||
|
700: '#014724',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #017737 0%, #4ade80 50%, #22d3ee 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(1, 119, 55, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(1, 119, 55, 0.2);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(1, 119, 55, 0.4);
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-delayed {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
animation-delay: -3s;
|
||||||
|
}
|
||||||
|
.animate-pulse-glow {
|
||||||
|
animation: pulseGlow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
@keyframes pulseGlow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(1, 119, 55, 0.3); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(1, 119, 55, 0.5); }
|
||||||
|
}
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: -200% 0; }
|
||||||
|
100% { background-position: 200% 0; }
|
||||||
|
}
|
||||||
|
.shimmer {
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 3s infinite;
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(1, 119, 55, 0.4), 0 0 40px 0 rgba(1, 119, 55, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(1, 119, 55, 0.6), 0 0 60px 10px rgba(1, 119, 55, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sticky-btn:hover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(1, 119, 55, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(1, 119, 55, 0.5), rgba(74, 222, 128, 0.2));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: rgb(24 24 27);
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center">
|
||||||
|
<i data-lucide="git-branch" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Pipedrive 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="#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-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition transform hover:scale-105">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20 overflow-hidden">
|
||||||
|
<!-- Floating background elements -->
|
||||||
|
<div class="absolute top-40 left-10 w-72 h-72 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute bottom-20 right-10 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
|
||||||
|
<div class="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="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-green-400 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</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">Pipedrive</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">
|
||||||
|
The complete Pipedrive MCP server. <strong class="text-white">76 tools</strong> for deals, contacts, and activities.
|
||||||
|
No setup. No OAuth headaches. Just connect and sell.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
||||||
|
<a href="#pricing" class="px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-lg shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center gap-4 justify-center">
|
||||||
|
<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" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold">+99</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">300+</strong> sales teams
|
||||||
|
</p>
|
||||||
|
</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 pipeline</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/pipedrive.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="target" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Deals</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">Contacts</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="activity" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Activities</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="text-center mb-16">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">
|
||||||
|
Setting up Pipedrive + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Pain Point 1 -->
|
||||||
|
<div class="relative group">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
||||||
|
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Stale deals in pipeline</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Deals sit untouched. You forget to follow up. Revenue slips away.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI nudges on inactivity</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 2 -->
|
||||||
|
<div class="relative group">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
||||||
|
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Missed follow-up tasks</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Tasks pile up. You're always playing catch-up with your CRM.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Automated activity reminders</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 3 -->
|
||||||
|
<div class="relative group">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent rounded-2xl"></div>
|
||||||
|
<div class="relative p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 h-full">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-6">
|
||||||
|
<i data-lucide="x" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-zinc-300 mb-3">Inaccurate forecasts</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Pipeline value means nothing when you can't trust the numbers.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI-powered predictions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<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/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</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Pipedrive API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="target" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Deal Management</h3>
|
||||||
|
<p class="text-zinc-400">Create, move, track deals through your pipeline automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Contact Sync</h3>
|
||||||
|
<p class="text-zinc-400">Manage people, organizations, and relationships effortlessly.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-yellow-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="activity" class="w-7 h-7 text-orange-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Activity Tracking</h3>
|
||||||
|
<p class="text-zinc-400">Log calls, meetings, tasks — stay organized automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-5 feature-icon">
|
||||||
|
<i data-lucide="bar-chart-3" class="w-7 h-7 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Insights</h3>
|
||||||
|
<p class="text-zinc-400">Win rates, velocity, forecast accuracy — all AI-analyzed.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ 70 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Products</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Notes</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Files</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Webhooks</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Goals</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Filters</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Stages</span>
|
||||||
|
<span class="px-3 py-1.5 bg-zinc-800/80 rounded-full text-sm hover:bg-zinc-700 transition cursor-default">Email Sync</span>
|
||||||
|
</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">
|
||||||
|
<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="relative">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/10 to-emerald-500/10 rounded-3xl blur-xl"></div>
|
||||||
|
<div class="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-8 backdrop-blur-sm">
|
||||||
|
<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="Your phone number"
|
||||||
|
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@company.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-emerald-500 hover:from-brand-600 hover:to-emerald-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-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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>
|
||||||
|
</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="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-500/5 rounded-full blur-3xl"></div>
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
||||||
|
<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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
||||||
|
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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/pipedrive-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-green-400">✓ Pipedrive MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 76 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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 Pipedrive account via OAuth 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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 use OAuth 2.0 and never store your Pipedrive API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Pipedrive settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</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 is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your Pipedrive?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 300+ sales teams already automating with Pipedrive 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-emerald-500 hover:from-brand-600 hover:to-emerald-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center">
|
||||||
|
<i data-lucide="git-branch" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Pipedrive 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Pipedrive Connect. Not affiliated with Pipedrive.</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-emerald-500 rounded-full font-semibold transition-all transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
763
rippling/index.html
Normal file
763
rippling/index.html
Normal file
@ -0,0 +1,763 @@
|
|||||||
|
<!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>Rippling Connect — AI-Power Your Workforce 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: '#fefce8',
|
||||||
|
100: '#fef9c3',
|
||||||
|
200: '#fef08a',
|
||||||
|
300: '#fde047',
|
||||||
|
400: '#FEC400',
|
||||||
|
500: '#FEC400',
|
||||||
|
600: '#d4a500',
|
||||||
|
700: '#a16207',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #FEC400 0%, #fbbf24 50%, #f59e0b 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(254, 196, 0, 0.15), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(254, 196, 0, 0.12), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(254, 196, 0, 0.3);
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-delayed {
|
||||||
|
animation: float 6s ease-in-out infinite 2s;
|
||||||
|
}
|
||||||
|
.animate-float-slow {
|
||||||
|
animation: float 8s ease-in-out infinite 1s;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(254, 196, 0, 0.15), 0 25px 80px -20px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.btn-glow {
|
||||||
|
box-shadow: 0 0 30px rgba(254, 196, 0, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.btn-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(254, 196, 0, 0.5);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(254, 196, 0, 0.15), rgba(251, 191, 36, 0.08));
|
||||||
|
border: 1px solid rgba(254, 196, 0, 0.2);
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(254, 196, 0, 0.4), 0 0 40px 0 rgba(254, 196, 0, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(254, 196, 0, 0.5), 0 0 60px 10px rgba(254, 196, 0, 0.25); }
|
||||||
|
}
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
.pillar-card {
|
||||||
|
background: linear-gradient(180deg, rgba(254, 196, 0, 0.08) 0%, transparent 100%);
|
||||||
|
}
|
||||||
|
.pillar-card:hover {
|
||||||
|
background: linear-gradient(180deg, rgba(254, 196, 0, 0.12) 0%, transparent 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Ambient Background Elements -->
|
||||||
|
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
||||||
|
<div class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 -right-32 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-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-brand-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5 text-zinc-900"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Rippling 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="#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="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
|
||||||
|
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 text-zinc-900">
|
||||||
|
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">
|
||||||
|
<div class="max-w-3xl mx-auto text-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-500 animate-pulse"></span>
|
||||||
|
<span>Open Source + Hosted</span>
|
||||||
|
<span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 rounded-full text-xs font-medium ml-1">NEW</span>
|
||||||
|
</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">Rippling</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
|
||||||
|
The complete Rippling MCP server. <strong class="text-white">89 tools</strong> for HR, IT, and Finance — unified.
|
||||||
|
No OAuth headaches. Just connect and automate your workforce management.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||||||
|
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-center text-zinc-900">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
|
||||||
|
<i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center gap-4 justify-center">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold shadow-lg text-zinc-900">
|
||||||
|
+65
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<div class="flex items-center gap-1 text-brand-400 text-sm">
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">280+</strong> growing companies</p>
|
||||||
|
</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 workforce management</p>
|
||||||
|
</div>
|
||||||
|
<div class="gradient-border rounded-2xl p-2">
|
||||||
|
<div class="rounded-xl overflow-hidden video-glow">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../../output/rippling.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</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-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">HR</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="laptop" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">IT</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="wallet" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Finance</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Three Pillars -->
|
||||||
|
<section class="py-16 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<p class="text-brand-400 font-medium mb-2">One Platform. Three Pillars.</p>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold">HR + IT + Finance, Unified</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-6">
|
||||||
|
<div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
|
||||||
|
<div class="w-16 h-16 rounded-2xl bg-purple-500/20 flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="users" class="w-8 h-8 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">HR</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Onboarding, offboarding, PTO, performance — all automated with AI.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
|
||||||
|
<div class="w-16 h-16 rounded-2xl bg-blue-500/20 flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="laptop" class="w-8 h-8 text-blue-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">IT</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Device provisioning, app access, security policies — zero-touch setup.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pillar-card rounded-2xl border border-zinc-800 p-8 text-center transition-all">
|
||||||
|
<div class="w-16 h-16 rounded-2xl bg-green-500/20 flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="wallet" class="w-8 h-8 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Finance</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Payroll, benefits, expenses, compliance — handled automatically.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points / 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-4">
|
||||||
|
Setting up Rippling + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="clock" class="w-7 h-7 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2 text-red-400">Onboarding takes days</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">New hire starts Monday. Laptop arrives Thursday. Apps access by next week.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI sets up in minutes</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="shield-alert" class="w-7 h-7 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2 text-red-400">Offboarding security gaps</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Employee leaves. Still has Slack access. GitHub? Who knows.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Instant access revocation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="settings" class="w-7 h-7 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2 text-red-400">Manual app provisioning</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">IT tickets for every new app. Each role needs different access. It's endless.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Role-based auto-setup</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<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/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</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Rippling API access through one simple connection. 89 tools at your AI's 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 bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="user-plus" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Employee Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Onboard, offboard, manage the full employee lifecycle with AI.</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 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="monitor" class="w-7 h-7 text-blue-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Device Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Provision laptops, manage software, track assets automatically.</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 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="banknote" class="w-7 h-7 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Payroll & Benefits</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Run payroll, manage benefits, handle compliance seamlessly.</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 bg-gradient-to-br from-brand-500/20 to-amber-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="key" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">App Provisioning</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Auto-provision SaaS access based on role and department.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 70 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-3">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Time & Attendance</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Org Chart</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Compensation</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Custom Fields</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Documents</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Groups</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Workflows</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Webhooks</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Automation Examples -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<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">AI-Powered Workflows</h2>
|
||||||
|
<p class="text-zinc-400 text-lg">Real automations you can build in minutes</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
||||||
|
<i data-lucide="user-check" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Zero-Touch Onboarding</h3>
|
||||||
|
<p class="text-zinc-400 text-sm mb-3">"When new hire added → order laptop, provision apps, send welcome email, schedule orientation"</p>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">HR</span>
|
||||||
|
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">IT</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-red-500/20 flex items-center justify-center flex-shrink-0">
|
||||||
|
<i data-lucide="user-minus" class="w-6 h-6 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Secure Offboarding</h3>
|
||||||
|
<p class="text-zinc-400 text-sm mb-3">"When employee terminated → revoke all apps, wipe device, transfer files, update payroll"</p>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Security</span>
|
||||||
|
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Compliance</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center flex-shrink-0">
|
||||||
|
<i data-lucide="arrow-up-circle" class="w-6 h-6 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Role Change Automation</h3>
|
||||||
|
<p class="text-zinc-400 text-sm mb-3">"When promoted to manager → add to Slack channels, grant HR access, update comp band"</p>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">HR</span>
|
||||||
|
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Finance</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-brand-500/30 transition">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center flex-shrink-0">
|
||||||
|
<i data-lucide="calendar-check" class="w-6 h-6 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">PTO Intelligence</h3>
|
||||||
|
<p class="text-zinc-400 text-sm mb-3">"When PTO requested → check team coverage, auto-approve if ok, notify manager if conflict"</p>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">Scheduling</span>
|
||||||
|
<span class="px-2 py-1 bg-zinc-800 rounded text-xs text-zinc-400">AI</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<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="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
|
||||||
|
<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="(555) 123-4567"
|
||||||
|
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@company.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-brand-500 hover:bg-brand-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 text-zinc-900"
|
||||||
|
>
|
||||||
|
<span>Join the Waitlist</span>
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5"></i>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Success Message -->
|
||||||
|
<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="shield-check" 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 successMsg = document.getElementById('success-message');
|
||||||
|
form.classList.add('hidden');
|
||||||
|
successMsg.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
|
||||||
|
<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">
|
||||||
|
<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-6 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 OAuth and token management.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/rippling-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">✓ Rippling MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 89 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
<p class="text-zinc-400">Everything you need to know about Rippling 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">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">What is MCP?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
For the hosted version, no. Just connect your Rippling account via OAuth 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-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Is my employee data secure?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
Absolutely. We use OAuth 2.0 and never store your Rippling API keys. All tokens are encrypted at rest and in transit.
|
||||||
|
We're SOC 2 compliant and you can revoke access anytime from your Rippling admin console.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Which Rippling modules are supported?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
Rippling Connect supports all core modules — HR Cloud, IT Cloud, and Finance Cloud.
|
||||||
|
The available API endpoints depend on which modules you have enabled in your Rippling subscription.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Final CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative">
|
||||||
|
<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 Rippling?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
||||||
|
Join 280+ growing companies already automating with Rippling Connect. Be first in line when we launch.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-zinc-900">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
|
||||||
|
<i data-lucide="calendar" class="w-5 h-5"></i>
|
||||||
|
Book a 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-brand-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="layers" class="w-5 h-5 text-zinc-900"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Rippling 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="#" class="hover:text-white transition flex items-center gap-2">
|
||||||
|
<i data-lucide="github" class="w-4 h-4"></i>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
||||||
|
<i data-lucide="twitter" class="w-4 h-4"></i>
|
||||||
|
Twitter
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Rippling Connect. Not affiliated with Rippling.</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-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all shadow-xl text-zinc-900"
|
||||||
|
>
|
||||||
|
<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 > 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>
|
||||||
708
servicetitan/index.html
Normal file
708
servicetitan/index.html
Normal file
@ -0,0 +1,708 @@
|
|||||||
|
<!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>ServiceTitan Connect — AI-Power Your Field Service 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: '#fff7ed',
|
||||||
|
100: '#ffedd5',
|
||||||
|
200: '#fed7aa',
|
||||||
|
300: '#fdba74',
|
||||||
|
400: '#fb923c',
|
||||||
|
500: '#FF6B00',
|
||||||
|
600: '#ea580c',
|
||||||
|
700: '#c2410c',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #FF6B00 0%, #f97316 50%, #fbbf24 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(255, 107, 0, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(255, 107, 0, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(255, 107, 0, 0.3);
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-delayed {
|
||||||
|
animation: float 6s ease-in-out infinite 2s;
|
||||||
|
}
|
||||||
|
.animate-float-slow {
|
||||||
|
animation: float 8s ease-in-out infinite 1s;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(255, 107, 0, 0.2), 0 25px 80px -20px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.btn-glow {
|
||||||
|
box-shadow: 0 0 30px rgba(255, 107, 0, 0.4);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.btn-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(255, 107, 0, 0.6);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(249, 115, 22, 0.1));
|
||||||
|
border: 1px solid rgba(255, 107, 0, 0.2);
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 107, 0, 0.4), 0 0 40px 0 rgba(255, 107, 0, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(255, 107, 0, 0.6), 0 0 60px 10px rgba(255, 107, 0, 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);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), transparent);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Ambient Background Elements -->
|
||||||
|
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
||||||
|
<div class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 -right-32 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-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-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">ServiceTitan 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="#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="hidden sm:block text-zinc-400 hover:text-white transition">Sign In</a>
|
||||||
|
<a href="#pricing" class="px-5 py-2.5 bg-brand-500 hover:bg-brand-600 rounded-lg 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">
|
||||||
|
<div class="max-w-3xl mx-auto text-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-500 animate-pulse"></span>
|
||||||
|
<span>Open Source + Hosted</span>
|
||||||
|
<span class="px-2 py-0.5 bg-brand-500/20 text-brand-400 rounded-full text-xs font-medium ml-1">NEW</span>
|
||||||
|
</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">ServiceTitan</span><br>to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl text-zinc-400 mb-10 leading-relaxed max-w-xl mx-auto">
|
||||||
|
The complete ServiceTitan MCP server. <strong class="text-white">124 tools</strong> for jobs, dispatch, and invoicing.
|
||||||
|
No OAuth headaches. Just connect and automate your field operations.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||||||
|
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg text-center">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="group px-8 py-4 bg-zinc-800/80 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg flex items-center justify-center gap-2 transition">
|
||||||
|
<i data-lucide="play-circle" class="w-5 h-5 group-hover:scale-110 transition"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center gap-4 justify-center">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<div class="w-10 h-10 rounded-full border-2 border-zinc-950 bg-brand-500 flex items-center justify-center text-xs font-bold shadow-lg">
|
||||||
|
+80
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<div class="flex items-center gap-1 text-amber-400 text-sm">
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
<i data-lucide="star" class="w-4 h-4 fill-current"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400 text-sm">Trusted by <strong class="text-white">350+</strong> field service companies</p>
|
||||||
|
</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 field service operations</p>
|
||||||
|
</div>
|
||||||
|
<div class="gradient-border rounded-2xl p-2">
|
||||||
|
<div class="rounded-xl overflow-hidden video-glow">
|
||||||
|
<video autoplay loop muted playsinline class="w-full">
|
||||||
|
<source src="../../output/servicetitan.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</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="briefcase" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Jobs</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="truck" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Dispatch</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="file-text" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Invoicing</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Stats Banner -->
|
||||||
|
<section class="py-12 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
|
||||||
|
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">124</div>
|
||||||
|
<div class="text-zinc-400 text-sm">API Tools</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
|
||||||
|
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">2 min</div>
|
||||||
|
<div class="text-zinc-400 text-sm">Setup Time</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
|
||||||
|
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">350+</div>
|
||||||
|
<div class="text-zinc-400 text-sm">Companies</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card rounded-2xl p-6 text-center border border-zinc-800/50">
|
||||||
|
<div class="text-3xl md:text-4xl font-bold text-brand-400 mb-1">99.9%</div>
|
||||||
|
<div class="text-zinc-400 text-sm">Uptime</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pain Points / 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-4">
|
||||||
|
Setting up ServiceTitan + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="phone-call" class="w-7 h-7 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2 text-red-400">Dispatch phone chaos</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Constant calls, manual scheduling, techs waiting. Inefficiency everywhere.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI optimizes routes instantly</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="dollar-sign" class="w-7 h-7 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2 text-red-400">Missed upsell opportunities</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Techs on-site don't know customer history. Revenue left on the table.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">AI suggests relevant services</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-red-500/30 transition-all duration-300">
|
||||||
|
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="clipboard" class="w-7 h-7 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2 text-red-400">Paper-based job tracking</h3>
|
||||||
|
<p class="text-zinc-500 mb-6">Lost work orders, illegible notes, no real-time visibility.</p>
|
||||||
|
<div class="pt-6 border-t border-zinc-800">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-white font-medium">Real-time digital updates</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<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/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</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full ServiceTitan API access through one simple connection. 124 tools at your AI's 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 bg-gradient-to-br from-brand-500/20 to-amber-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="briefcase" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Job Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Create, schedule, and track jobs end-to-end with AI assistance.</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 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="truck" class="w-7 h-7 text-blue-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Dispatch</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Optimize routes, assign techs, manage capacity automatically.</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 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="file-text" class="w-7 h-7 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Estimates & Invoices</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Generate quotes, convert to invoices, collect payments fast.</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 bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Customer Management</h3>
|
||||||
|
<p class="text-zinc-400 text-sm leading-relaxed">Track equipment, history, and service agreements in one place.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 100 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-3">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Technicians</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Inventory</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Memberships</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Marketing</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Reporting</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Pricebook</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Tags</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:border-brand-500/50 transition cursor-default">Webhooks</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Use Cases -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<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">Built for Field Service</h2>
|
||||||
|
<p class="text-zinc-400 text-lg">Whether you're HVAC, plumbing, or electrical — we've got you covered</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-cyan-500/5 border border-blue-500/20">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="thermometer-snowflake" class="w-6 h-6 text-blue-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">HVAC</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Seasonal demand, maintenance agreements, equipment tracking — all automated.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-teal-500/5 border border-cyan-500/20">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="droplets" class="w-6 h-6 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Plumbing</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Emergency dispatch, flat-rate pricing, drain camera integrations.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-amber-500/10 to-yellow-500/5 border border-amber-500/20">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center mb-4">
|
||||||
|
<i data-lucide="zap" class="w-6 h-6 text-amber-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-lg mb-2">Electrical</h3>
|
||||||
|
<p class="text-zinc-400 text-sm">Permit tracking, safety compliance, panel upgrade workflows.</p>
|
||||||
|
</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">
|
||||||
|
<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="gradient-border rounded-2xl p-8 bg-zinc-900/80 backdrop-blur-sm">
|
||||||
|
<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="(555) 123-4567"
|
||||||
|
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@company.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-brand-500 hover:bg-brand-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 -->
|
||||||
|
<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="shield-check" 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 successMsg = document.getElementById('success-message');
|
||||||
|
form.classList.add('hidden');
|
||||||
|
successMsg.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="gradient-border rounded-3xl p-8 md:p-12 bg-zinc-900/80">
|
||||||
|
<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">
|
||||||
|
<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-6 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 OAuth and token management.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition"></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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/st-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">✓ ServiceTitan MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 124 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
<p class="text-zinc-400">Everything you need to know about ServiceTitan 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">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">What is MCP?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Do I need to install anything?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
For the hosted version, no. Just connect your ServiceTitan account via OAuth 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-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Is my data secure?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
Yes. We use OAuth 2.0 and never store your ServiceTitan API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your ServiceTitan settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Does this work with Pro and Titan plans?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
Yes! ServiceTitan Connect works with all ServiceTitan plans that have API access enabled.
|
||||||
|
The available endpoints may vary based on your plan's features.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Can I use this with GPT or other AI models?</span>
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center group-open:bg-brand-500/20 transition">
|
||||||
|
<i data-lucide="chevron-down" class="w-5 h-5 text-zinc-400 group-open:text-brand-400 group-open:rotate-180 transition"></i>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Final CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative">
|
||||||
|
<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 ServiceTitan?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
||||||
|
Join 350+ field service companies already automating with ServiceTitan Connect. Be first in line when we launch.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a href="#pricing" class="btn-glow px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition flex items-center gap-2">
|
||||||
|
<i data-lucide="calendar" class="w-5 h-5"></i>
|
||||||
|
Book a 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-amber-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="wrench" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">ServiceTitan 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="#" class="hover:text-white transition flex items-center gap-2">
|
||||||
|
<i data-lucide="github" class="w-4 h-4"></i>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="hover:text-white transition flex items-center gap-2">
|
||||||
|
<i data-lucide="twitter" class="w-4 h-4"></i>
|
||||||
|
Twitter
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-8 pt-8 border-t border-zinc-800/50 text-center">
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 ServiceTitan Connect. Not affiliated with ServiceTitan, Inc.</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-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all 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 > 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>
|
||||||
652
squarespace/index.html
Normal file
652
squarespace/index.html
Normal file
@ -0,0 +1,652 @@
|
|||||||
|
<!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>Squarespace Connect — AI-Power Your Website 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: '#fafafa',
|
||||||
|
100: '#f5f5f5',
|
||||||
|
200: '#e5e5e5',
|
||||||
|
300: '#d4d4d4',
|
||||||
|
400: '#a3a3a3',
|
||||||
|
500: '#171717',
|
||||||
|
600: '#0a0a0a',
|
||||||
|
700: '#000000',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #ffffff 0%, #a3a3a3 50%, #ffffff 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(255, 255, 255, 0.08), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
.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(255, 255, 255, 0.15); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.25); }
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
animation: pulse-glow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: -200% 0; }
|
||||||
|
100% { background-position: 200% 0; }
|
||||||
|
}
|
||||||
|
.shimmer-border {
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 3s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.2), 0 0 40px 0 rgba(255, 255, 255, 0.1); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(255, 255, 255, 0.3), 0 0 60px 10px rgba(255, 255, 255, 0.15); }
|
||||||
|
}
|
||||||
|
.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(100px);
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
.sq-gradient {
|
||||||
|
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: rgb(24 24 27);
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
</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-zinc-400/20 top-1/4 -left-48 animate-float"></div>
|
||||||
|
<div class="orb w-64 h-64 bg-zinc-300/10 top-1/2 -right-32 animate-float-delayed"></div>
|
||||||
|
<div class="orb w-72 h-72 bg-zinc-500/10 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-white flex items-center justify-center shadow-lg shadow-white/10">
|
||||||
|
<i data-lucide="layout" class="w-5 h-5 text-black"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Squarespace 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="#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-white text-black hover:bg-zinc-200 rounded-xl font-medium transition shadow-lg shadow-white/10">
|
||||||
|
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-white 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">Squarespace</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 Squarespace MCP server. <strong class="text-white">67 tools</strong> for pages, products, and analytics.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</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-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-white/20">
|
||||||
|
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>
|
||||||
|
|
||||||
|
<!-- 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=21" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=25" 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">400+</strong> website owners & creators
|
||||||
|
</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 Squarespace site</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/squarespace.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="file-text" class="w-4 h-4 text-white"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Pages</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="shopping-bag" class="w-4 h-4 text-white"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Products</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-white"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Analytics</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">
|
||||||
|
Setting up Squarespace + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</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">Manual content updates</p>
|
||||||
|
<p class="text-zinc-500">Updating pages, products, and blogs takes forever.</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">Inventory headaches</p>
|
||||||
|
<p class="text-zinc-500">Stock levels out of sync, overselling nightmares.</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">Missed form leads</p>
|
||||||
|
<p class="text-zinc-500">Contact submissions sit unread for days.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sq-gradient rounded-3xl border border-zinc-700/50 p-8 shadow-2xl">
|
||||||
|
<div class="flex items-center gap-3 mb-8">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-lg">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-black"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold">With Squarespace 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-white/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-white"></i>
|
||||||
|
</div>
|
||||||
|
AI keeps your site fresh automatically
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-zinc-300">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-white"></i>
|
||||||
|
</div>
|
||||||
|
Auto-sync stock levels across channels
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-zinc-300">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-white"></i>
|
||||||
|
</div>
|
||||||
|
Instant AI follow-up on form submissions
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-zinc-300">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-white"></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-white/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-4 h-4 text-white"></i>
|
||||||
|
</div>
|
||||||
|
Connect in 2 clicks via OAuth
|
||||||
|
</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">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Squarespace API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<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-white/10 flex items-center justify-center mb-5 border border-white/10">
|
||||||
|
<i data-lucide="file-text" class="w-7 h-7 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Content Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Update pages, blogs, and galleries programmatically. Keep content fresh with AI.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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-white/10 flex items-center justify-center mb-5 border border-white/10">
|
||||||
|
<i data-lucide="shopping-bag" class="w-7 h-7 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Commerce</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Manage products, inventory, orders, and fulfillment. Complete e-commerce control.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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-white/10 flex items-center justify-center mb-5 border border-white/10">
|
||||||
|
<i data-lucide="inbox" class="w-7 h-7 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Form Submissions</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Access and process contact form data automatically. Never miss a lead again.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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-white/10 flex items-center justify-center mb-5 border border-white/10">
|
||||||
|
<i data-lucide="bar-chart-3" class="w-7 h-7 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Analytics</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Pull traffic, sales, and engagement metrics. AI-powered insights on demand.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-16 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">Full API 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-white/20 transition cursor-default">Pages</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Products</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Orders</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Inventory</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Blogs</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Forms</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Members</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-white/20 transition cursor-default">Profiles</span>
|
||||||
|
</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-white/10 text-white text-sm font-medium mb-6 border border-white/20">
|
||||||
|
<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="sq-gradient rounded-3xl border border-zinc-700/50 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-white">*</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-white/50 focus:ring-2 focus:ring-white/10 transition"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-white">*</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-white/50 focus:ring-2 focus:ring-white/10 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@company.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-white/50 focus:ring-2 focus:ring-white/10 transition"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="submit-btn"
|
||||||
|
class="w-full py-4 bg-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-white/10"
|
||||||
|
>
|
||||||
|
<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-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-white"></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="sq-gradient rounded-3xl border border-zinc-700/50 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="#" class="inline-flex items-center gap-2 text-white hover:text-zinc-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 github.com/squarespace-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-white">✓ Squarespace MCP Server running</span>
|
||||||
|
<span class="text-white">✓ 67 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-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">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 Squarespace account via OAuth 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">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 use OAuth 2.0 and never store your Squarespace API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Squarespace settings.
|
||||||
|
</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 I use this with GPT or other AI models?</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 is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</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 Squarespace?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 400+ website owners already automating with Squarespace 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-white text-black hover:bg-zinc-200 rounded-xl font-semibold text-lg transition shadow-xl shadow-white/20">
|
||||||
|
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-white flex items-center justify-center">
|
||||||
|
<i data-lucide="layout" class="w-5 h-5 text-black"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Squarespace 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="#" 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 Squarespace Connect. Not affiliated with Squarespace.</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-white text-black 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>
|
||||||
648
toast/index.html
Normal file
648
toast/index.html
Normal file
@ -0,0 +1,648 @@
|
|||||||
|
<!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>Toast Connect — AI-Power Your Restaurant 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;900&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: '#fff7ed',
|
||||||
|
100: '#ffedd5',
|
||||||
|
200: '#fed7aa',
|
||||||
|
300: '#fdba74',
|
||||||
|
400: '#fb923c',
|
||||||
|
500: '#FF4C00',
|
||||||
|
600: '#e64500',
|
||||||
|
700: '#c73d00',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #FF4C00 0%, #ff8c42 30%, #f97316 60%, #fbbf24 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(255, 76, 0, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(255, 76, 0, 0.2);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(255, 76, 0, 0.4);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 25px 80px rgba(255, 76, 0, 0.25), 0 10px 40px rgba(0, 0, 0, 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% { opacity: 0.5; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
}
|
||||||
|
.pulse-glow {
|
||||||
|
animation: pulse-glow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover .feature-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 0 30px rgba(255, 76, 0, 0.4);
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(255, 76, 0, 0.4), 0 0 40px 0 rgba(255, 76, 0, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(255, 76, 0, 0.6), 0 0 60px 10px rgba(255, 76, 0, 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);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 76, 0, 0.5), rgba(251, 191, 36, 0.5));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: #18181b;
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
.text-glow {
|
||||||
|
text-shadow: 0 0 40px rgba(255, 76, 0, 0.5);
|
||||||
|
}
|
||||||
|
@keyframes sizzle {
|
||||||
|
0%, 100% { transform: scale(1); }
|
||||||
|
50% { transform: scale(1.05); }
|
||||||
|
}
|
||||||
|
.sizzle:hover {
|
||||||
|
animation: sizzle 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
.fire-gradient {
|
||||||
|
background: linear-gradient(180deg, rgba(255, 76, 0, 0.1) 0%, transparent 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Floating Background Elements -->
|
||||||
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-80 h-80 bg-red-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-500 to-amber-500 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl tracking-tight">Toast 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="px-5 py-2.5 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-lg font-semibold transition-all shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105">
|
||||||
|
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-6xl mx-auto px-6 py-20">
|
||||||
|
<div class="max-w-4xl mx-auto text-center">
|
||||||
|
<div class="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="relative flex h-2 w-2">
|
||||||
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-500 opacity-75"></span>
|
||||||
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-brand-500"></span>
|
||||||
|
</span>
|
||||||
|
Open Source + Hosted Cloud
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight mb-6 leading-[1.1]">
|
||||||
|
Connect <span class="gradient-text text-glow">Toast</span><br>
|
||||||
|
to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10 leading-relaxed">
|
||||||
|
The complete Toast MCP server. <strong class="text-white">94 tools</strong> for orders, menus, and operations.
|
||||||
|
No tech headaches. Just connect and serve.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
||||||
|
<a href="#pricing" class="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 flex items-center justify-center gap-2 sizzle">
|
||||||
|
Join the Waitlist
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 transition-transform group-hover:translate-x-1"></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 backdrop-blur-sm">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex items-center justify-center gap-4">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=41" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=42" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=43" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=44" class="w-10 h-10 rounded-full border-2 border-zinc-950 shadow-lg" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400 text-sm">
|
||||||
|
Trusted by <strong class="text-white">500+</strong> restaurants
|
||||||
|
</p>
|
||||||
|
</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 restaurant operations</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/toast.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="clipboard-list" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Orders</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="book-open" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Menus</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">Reports</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="grid md:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">The Problem</span>
|
||||||
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 leading-tight">
|
||||||
|
Running a restaurant + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't be this hard</span>
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-start gap-4 group">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-lg">86'd item confusion</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Servers keep selling items you ran out of 20 minutes ago.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 group">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-lg">Labor cost overruns</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Overstaffed on slow nights, understaffed during rush.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 group">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-red-500/20 transition-colors">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-lg">No actionable sales insights</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Data exists but nobody has time to analyze it.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8 md:p-10">
|
||||||
|
<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-amber-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 Toast Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-5">
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
||||||
|
<span>AI updates menu instantly when items run out</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
||||||
|
<span>Smart scheduling based on predicted demand</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
||||||
|
<span>AI identifies your profit drivers daily</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
||||||
|
<span>Works with Claude, GPT, any MCP client</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-lg">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-500 flex-shrink-0"></i>
|
||||||
|
<span>2-click OAuth — no API key headaches</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50 relative">
|
||||||
|
<div class="absolute inset-0 fire-gradient pointer-events-none"></div>
|
||||||
|
<div class="max-w-6xl mx-auto px-6 relative">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<span class="inline-block px-3 py-1 rounded-full bg-amber-500/10 text-amber-400 text-sm font-medium mb-4">Features</span>
|
||||||
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Toast API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="clipboard-list" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Order Management</h3>
|
||||||
|
<p class="text-zinc-400">Access tickets, modifiers, and real-time order flow from every station.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="book-open" class="w-7 h-7 text-amber-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Menu Control</h3>
|
||||||
|
<p class="text-zinc-400">Update items, prices, and availability in real-time across all locations.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Labor Management</h3>
|
||||||
|
<p class="text-zinc-400">Track shifts, manage schedules, and monitor labor costs intelligently.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="bar-chart-3" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Reporting</h3>
|
||||||
|
<p class="text-zinc-400">Sales mix, peak hours, server performance — all AI-analyzed.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 80 more endpoints 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-500/50 transition-colors">Guests</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Payments</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Discounts</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Tables</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Inventory</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Modifiers</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Revenue Centers</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 rounded-full text-sm border border-zinc-700/50 hover:border-brand-500/50 transition-colors">Tips</span>
|
||||||
|
</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">
|
||||||
|
<i data-lucide="flame" class="w-4 h-4"></i>
|
||||||
|
Coming Soon
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl md:text-4xl lg: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="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8">
|
||||||
|
<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-500">*</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/50 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-all"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="text-brand-500">*</span></label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="phone"
|
||||||
|
name="phone"
|
||||||
|
required
|
||||||
|
placeholder="(555) 123-4567"
|
||||||
|
class="w-full px-4 py-3.5 bg-zinc-800/50 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-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@restaurant.com"
|
||||||
|
class="w-full px-4 py-3.5 bg-zinc-800/50 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-all"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="submit-btn"
|
||||||
|
class="w-full py-4 bg-gradient-to-r from-brand-500 to-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25 sizzle"
|
||||||
|
>
|
||||||
|
<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-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-3xl border border-zinc-800 p-8 md:p-12 overflow-hidden relative">
|
||||||
|
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
||||||
|
<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 lg:text-5xl 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 text-lg mb-6">
|
||||||
|
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" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold transition-colors group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-2xl">
|
||||||
|
<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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/toast-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-green-400">✓ Toast MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 94 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-4xl lg:text-5xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
<p class="text-zinc-400">Everything you need to know about Toast 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" open>
|
||||||
|
<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">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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400 leading-relaxed">
|
||||||
|
For the hosted version, no. Just connect your Toast account via OAuth 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-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 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">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Toast API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Toast settings.
|
||||||
|
</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">Does it work with multiple restaurant locations?</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. Toast Connect is designed for multi-location restaurant groups. Manage all your locations from a single AI interface,
|
||||||
|
with location-specific commands and reporting.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
||||||
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your <span class="gradient-text">restaurant?</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 500+ restaurants already automating with Toast 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-amber-500 hover:from-brand-600 hover:to-amber-600 rounded-xl font-semibold text-lg transition-all transform hover:scale-105 shadow-xl shadow-brand-500/25 sizzle">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition-all border border-zinc-700">
|
||||||
|
Book a 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-amber-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Toast 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="https://github.com" 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 Toast Connect. Not affiliated with Toast, Inc.</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-amber-500 rounded-full font-semibold transition-all"
|
||||||
|
>
|
||||||
|
<i data-lucide="flame" 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 > 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>
|
||||||
672
touchbistro/index.html
Normal file
672
touchbistro/index.html
Normal file
@ -0,0 +1,672 @@
|
|||||||
|
<!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>TouchBistro Connect — AI-Power Your Restaurant POS 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: '#fff7ed',
|
||||||
|
100: '#ffedd5',
|
||||||
|
200: '#fed7aa',
|
||||||
|
300: '#fdba74',
|
||||||
|
400: '#fb923c',
|
||||||
|
500: '#F26522',
|
||||||
|
600: '#ea580c',
|
||||||
|
700: '#c2410c',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #F26522 0%, #ff8c00 50%, #ffc107 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(242, 101, 34, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 60px rgba(242, 101, 34, 0.2);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(242, 101, 34, 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-glow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(242, 101, 34, 0.3); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(242, 101, 34, 0.5); }
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
animation: pulse-glow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes gradient-shift {
|
||||||
|
0%, 100% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
}
|
||||||
|
.animated-gradient {
|
||||||
|
background: linear-gradient(-45deg, #F26522, #ff8c00, #F26522, #c2410c);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
animation: gradient-shift 8s ease infinite;
|
||||||
|
}
|
||||||
|
.glow-orb {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(60px);
|
||||||
|
opacity: 0.35;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse-btn {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(242, 101, 34, 0.4), 0 0 40px 0 rgba(242, 101, 34, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(242, 101, 34, 0.6), 0 0 60px 10px rgba(242, 101, 34, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse-btn 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);
|
||||||
|
}
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: -200% 0; }
|
||||||
|
100% { background-position: 200% 0; }
|
||||||
|
}
|
||||||
|
.shimmer {
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 2s infinite;
|
||||||
|
}
|
||||||
|
.restaurant-pattern {
|
||||||
|
background-image: radial-gradient(circle at 1px 1px, rgba(242, 101, 34, 0.1) 1px, transparent 0);
|
||||||
|
background-size: 40px 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Floating Orbs -->
|
||||||
|
<div class="glow-orb w-96 h-96 bg-orange-500 top-20 -left-48 fixed animate-float-slow"></div>
|
||||||
|
<div class="glow-orb w-72 h-72 bg-yellow-500 top-1/2 -right-36 fixed animate-float-delayed"></div>
|
||||||
|
<div class="glow-orb w-64 h-64 bg-orange-600 bottom-20 left-1/4 fixed animate-float"></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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-yellow-500 flex items-center justify-center shadow-lg shadow-brand-500/20">
|
||||||
|
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">TouchBistro 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="#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-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/20 hover:shadow-brand-500/40">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center justify-center hero-glow pt-20">
|
||||||
|
<div class="absolute inset-0 restaurant-pattern opacity-30"></div>
|
||||||
|
<div class="max-w-4xl mx-auto px-6 py-20 relative">
|
||||||
|
<div class="flex flex-col items-center text-center">
|
||||||
|
<div class="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-green-400 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</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">TouchBistro</span> to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 mb-10 leading-relaxed max-w-3xl mx-auto">
|
||||||
|
The complete TouchBistro MCP server. <strong class="text-white">58 tools</strong> for orders, reservations, and reports.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
||||||
|
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 text-center shadow-xl shadow-brand-500/25 relative overflow-hidden">
|
||||||
|
<span class="relative z-10">Join the Waitlist</span>
|
||||||
|
<div class="absolute inset-0 shimmer"></div>
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Restaurant Stats -->
|
||||||
|
<div class="flex flex-wrap justify-center gap-6">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center border border-brand-500/20">
|
||||||
|
<i data-lucide="receipt" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<div class="text-2xl font-bold">58</div>
|
||||||
|
<div class="text-sm text-zinc-500">API Tools</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-yellow-500/10 flex items-center justify-center border border-yellow-500/20">
|
||||||
|
<i data-lucide="clock" class="w-6 h-6 text-yellow-400"></i>
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<div class="text-2xl font-bold">2 min</div>
|
||||||
|
<div class="text-sm text-zinc-500">Setup Time</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center border border-green-500/20">
|
||||||
|
<i data-lucide="trending-up" class="w-6 h-6 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<div class="text-2xl font-bold">24/7</div>
|
||||||
|
<div class="text-sm text-zinc-500">AI Uptime</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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 restaurant operations</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-r from-brand-500/50 to-yellow-500/20 p-[1px] rounded-2xl">
|
||||||
|
<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/touchbistro.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="shopping-cart" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Orders</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="calendar-days" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Reservations</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">Reports</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="grid md:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">The Problem</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-8 leading-tight">
|
||||||
|
Setting up TouchBistro + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</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 hover:border-red-500/20 transition">
|
||||||
|
<div class="w-10 h-10 rounded-full 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">Reservation no-shows</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Empty tables at prime time because guests forgot or ghosted.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
||||||
|
<div class="w-10 h-10 rounded-full 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">Menu update delays</p>
|
||||||
|
<p class="text-zinc-500 mt-1">86'd items still showing. Guests order, kitchen can't deliver.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 p-4 rounded-xl bg-red-500/5 border border-red-500/10 hover:border-red-500/20 transition">
|
||||||
|
<div class="w-10 h-10 rounded-full 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">End-of-day reporting chaos</p>
|
||||||
|
<p class="text-zinc-500 mt-1">Hours spent reconciling sales, tips, and inventory.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 p-8 shadow-xl relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl"></div>
|
||||||
|
<div class="relative">
|
||||||
|
<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-yellow-500 flex items-center justify-center shadow-lg shadow-brand-500/30">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold">With TouchBistro Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4 text-lg">
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>AI confirms and reminds guests</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>Instant 86 management</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>Real-time dashboards</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>Works with Claude, GPT, any MCP client</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition">
|
||||||
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-400"></i>
|
||||||
|
<p>Full API access — 58 tools ready</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">Features</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full TouchBistro API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center mb-5 border border-brand-500/20">
|
||||||
|
<i data-lucide="shopping-cart" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Order Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Access tickets, mods, and transaction data in real-time.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-yellow-500/20 to-yellow-500/5 flex items-center justify-center mb-5 border border-yellow-500/20">
|
||||||
|
<i data-lucide="calendar-days" class="w-7 h-7 text-yellow-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Reservations</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Manage bookings, waitlists, and table turns automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-green-500/5 flex items-center justify-center mb-5 border border-green-500/20">
|
||||||
|
<i data-lucide="book-open" class="w-7 h-7 text-green-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Menu Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Update items, prices, and availability instantly.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow group">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 flex items-center justify-center mb-5 border border-purple-500/20">
|
||||||
|
<i data-lucide="bar-chart-3" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-3">Reporting</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Sales, labor, and inventory analytics on demand.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-16 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 40 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-3">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Table Management</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Staff Scheduling</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Inventory Tracking</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Payments</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Tips & Gratuity</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Kitchen Display</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Customer Profiles</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-800 hover:border-zinc-600 transition cursor-default">Loyalty Programs</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-24 border-t border-zinc-800/50 relative">
|
||||||
|
<div class="absolute inset-0 hero-glow"></div>
|
||||||
|
<div class="max-w-2xl mx-auto px-6 relative">
|
||||||
|
<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-semibold 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-6">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-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-3xl border border-zinc-800 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-4 bg-zinc-800/50 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-4 bg-zinc-800/50 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 <span class="text-zinc-500">(optional)</span></label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="you@company.com"
|
||||||
|
class="w-full px-4 py-4 bg-zinc-800/50 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 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25 relative overflow-hidden"
|
||||||
|
>
|
||||||
|
<span class="relative z-10">Join the Waitlist</span>
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 relative z-10"></i>
|
||||||
|
<div class="absolute inset-0 shimmer"></div>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div id="success-message" class="hidden text-center py-8">
|
||||||
|
<div class="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i data-lucide="check" class="w-10 h-10 text-green-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>
|
||||||
|
|
||||||
|
<div id="error-message" class="hidden mt-4 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-center">
|
||||||
|
Something went wrong. Please try again.
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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>';
|
||||||
|
|
||||||
|
await new Promise(r => setTimeout(r, 1000));
|
||||||
|
form.classList.add('hidden');
|
||||||
|
successMsg.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- 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 shadow-xl">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<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-6 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 text-lg 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.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-semibold text-lg group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-zinc-950 rounded-xl p-6 font-mono text-sm border border-zinc-800 shadow-inner">
|
||||||
|
<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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/touchbistro-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-green-400">✓ TouchBistro MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 58 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">
|
||||||
|
<span class="text-brand-500 font-semibold tracking-wide uppercase text-sm mb-4 block">FAQ</span>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold">Frequently asked questions</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<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 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<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 TouchBistro account via OAuth 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 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<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 use OAuth 2.0 and never store your TouchBistro API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your TouchBistro settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-semibold text-lg">Can my kitchen staff use this?</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">
|
||||||
|
Absolutely! AI can help with menu updates, 86 management, and answering questions about orders.
|
||||||
|
Train it once on your menu and processes, and it works 24/7.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative">
|
||||||
|
<div class="absolute inset-0 hero-glow"></div>
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your TouchBistro?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join restaurants already automating with TouchBistro 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 animated-gradient rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25 relative overflow-hidden">
|
||||||
|
<span class="relative z-10">Join the Waitlist</span>
|
||||||
|
<div class="absolute inset-0 shimmer"></div>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-yellow-500 flex items-center justify-center">
|
||||||
|
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">TouchBistro 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 TouchBistro Connect. Not affiliated with TouchBistro.</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-brand-500 hover:bg-brand-600 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>
|
||||||
624
trello/index.html
Normal file
624
trello/index.html
Normal file
@ -0,0 +1,624 @@
|
|||||||
|
<!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>Trello Connect — AI-Power Your Boards 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: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#0079BF',
|
||||||
|
600: '#0067a3',
|
||||||
|
700: '#005587',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #0079BF 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(0, 121, 191, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 40px rgba(0, 121, 191, 0.15);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(0, 121, 191, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
animation-delay: -1.5s;
|
||||||
|
}
|
||||||
|
.animate-pulse-glow {
|
||||||
|
animation: pulse-glow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||||
|
50% { transform: translateY(-20px) rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes pulse-glow {
|
||||||
|
0%, 100% { opacity: 0.5; transform: scale(1); }
|
||||||
|
50% { opacity: 0.8; transform: scale(1.05); }
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(0, 121, 191, 0.4), 0 0 40px 0 rgba(0, 121, 191, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(0, 121, 191, 0.6), 0 0 60px 10px rgba(0, 121, 191, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sticky-btn:hover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, #0079BF, #8b5cf6, #ec4899);
|
||||||
|
padding: 2px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: #09090b;
|
||||||
|
border-radius: calc(1rem - 2px);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
background: linear-gradient(135deg, rgba(0, 121, 191, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
|
||||||
|
}
|
||||||
|
.bg-grid {
|
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
/* Floating Trello cards */
|
||||||
|
.floating-card {
|
||||||
|
background: linear-gradient(135deg, rgba(0, 121, 191, 0.1), rgba(139, 92, 246, 0.05));
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
|
||||||
|
|
||||||
|
<!-- Floating decorative elements -->
|
||||||
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-10 w-64 h-64 bg-brand-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float-slow"></div>
|
||||||
|
|
||||||
|
<!-- Decorative floating cards (Trello-themed) -->
|
||||||
|
<div class="absolute top-1/3 right-1/4 floating-card w-32 h-20 rounded-lg animate-float opacity-30"></div>
|
||||||
|
<div class="absolute bottom-1/3 left-1/5 floating-card w-28 h-16 rounded-lg animate-float-delayed opacity-20"></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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Trello 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="#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-4 py-2 bg-brand-500 hover:bg-brand-600 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 hover:scale-105 transform">
|
||||||
|
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">
|
||||||
|
<div class="flex flex-col items-center text-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-green-400 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
||||||
|
Connect <span class="gradient-text">Trello</span><br>
|
||||||
|
to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
|
||||||
|
The complete Trello MCP server. <strong class="text-white">89 tools</strong> covering boards, cards, and lists.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
||||||
|
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40 flex items-center justify-center gap-2">
|
||||||
|
<span>Join the Waitlist</span>
|
||||||
|
<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 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=31" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=32" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=33" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=34" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=35" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">10,000+</strong> project managers
|
||||||
|
</p>
|
||||||
|
</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 project workflow</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/trello.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="sticky-note" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Cards</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="layout-dashboard" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Boards</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="check-square" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Checklists</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-4">
|
||||||
|
Setting up Trello + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Pain Point 1 -->
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-medium text-zinc-400">Manual card shuffling</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-semibold text-white">AI moves cards based on status</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 2 -->
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-medium text-zinc-400">Forgetting due dates</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-semibold text-white">Proactive deadline reminders</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 3 -->
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition group">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-medium text-zinc-400">Scattered project updates</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-brand-500/10 flex items-center justify-center group-hover:scale-110 transition">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-semibold text-white">AI summarizes board activity</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-500/10 text-brand-400 text-sm font-medium mb-6">
|
||||||
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
||||||
|
Full API Coverage
|
||||||
|
</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Trello API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="sticky-note" class="w-7 h-7 text-brand-500"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Card Management</h3>
|
||||||
|
<p class="text-zinc-400">Create, move, update cards. Full control over your workflow.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="layout-dashboard" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Board Operations</h3>
|
||||||
|
<p class="text-zinc-400">Manage lists, labels, and board settings programmatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="check-square" class="w-7 h-7 text-pink-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Checklists & Dates</h3>
|
||||||
|
<p class="text-zinc-400">Track progress, set deadlines, manage subtasks.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-orange-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Member Actions</h3>
|
||||||
|
<p class="text-zinc-400">Assign cards, manage permissions, coordinate teams.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ 80 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Labels</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Attachments</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Comments</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Power-Ups</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 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-zinc-600 transition cursor-default">Custom Fields</span>
|
||||||
|
</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">
|
||||||
|
<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="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8">
|
||||||
|
<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 bg-zinc-800 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="(555) 123-4567"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 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@company.com"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 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-purple-500 hover:from-brand-600 hover:to-purple-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>
|
||||||
|
|
||||||
|
<div id="success-message" class="hidden text-center py-8">
|
||||||
|
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const form = this;
|
||||||
|
const successMsg = document.getElementById('success-message');
|
||||||
|
form.classList.add('hidden');
|
||||||
|
successMsg.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- 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 overflow-hidden relative">
|
||||||
|
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl"></div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
||||||
|
<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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium transition">
|
||||||
|
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 shadow-2xl">
|
||||||
|
<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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/trello-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-green-400">✓ Trello MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 89 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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">
|
||||||
|
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-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">
|
||||||
|
For the hosted version, no. Just connect your Trello account via OAuth 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Trello API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Trello settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</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">
|
||||||
|
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent"></div>
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your Trello?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join thousands of project managers already automating with Trello 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-purple-500 hover:from-brand-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="layout-grid" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Trello 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Trello Connect. Not affiliated with Trello.</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-brand-500 hover:bg-brand-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
769
wave/index.html
Normal file
769
wave/index.html
Normal file
@ -0,0 +1,769 @@
|
|||||||
|
<!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>Wave Connect — AI-Power Your Accounting 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: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#165DFF',
|
||||||
|
500: '#1447cc',
|
||||||
|
600: '#1036a3',
|
||||||
|
700: '#0c2a7a',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #165DFF 0%, #0c2a7a 50%, #1e1b4b 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
.gradient-text-hero {
|
||||||
|
background: linear-gradient(135deg, #165DFF 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(22, 93, 255, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 50px rgba(22, 93, 255, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(22, 93, 255, 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-glow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(22, 93, 255, 0.4); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(22, 93, 255, 0.6); }
|
||||||
|
}
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: -200% 0; }
|
||||||
|
100% { background-position: 200% 0; }
|
||||||
|
}
|
||||||
|
.shimmer-border {
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(22, 93, 255, 0.3), transparent);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 3s infinite;
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(22, 93, 255, 0.2), 0 0 120px rgba(22, 93, 255, 0.1);
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, #165DFF 0%, #1447cc 100%);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 0 30px rgba(22, 93, 255, 0.5);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
background: linear-gradient(135deg, rgba(22, 93, 255, 0.2) 0%, rgba(22, 93, 255, 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(22, 93, 255, 0.4), 0 0 40px 0 rgba(22, 93, 255, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(22, 93, 255, 0.6), 0 0 60px 10px rgba(22, 93, 255, 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);
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: linear-gradient(135deg, rgba(22, 93, 255, 0.1) 0%, transparent 100%);
|
||||||
|
}
|
||||||
|
@keyframes count-up {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.number-highlight {
|
||||||
|
background: linear-gradient(135deg, #165DFF 0%, #8b5cf6 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
</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-cyan-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="bar-chart-3" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Wave 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>
|
||||||
|
Free for Small Businesses
|
||||||
|
</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">Wave</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 Wave MCP server. <strong class="text-white">42 tools</strong> for invoices, receipts, and reports.
|
||||||
|
Simplify your accounting with AI.
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- Stats Row -->
|
||||||
|
<div class="grid grid-cols-3 gap-8 max-w-md mx-auto">
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-3xl font-bold number-highlight">42</p>
|
||||||
|
<p class="text-sm text-zinc-500">API Tools</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-3xl font-bold number-highlight">2 min</p>
|
||||||
|
<p class="text-sm text-zinc-500">Setup Time</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-3xl font-bold number-highlight">100%</p>
|
||||||
|
<p class="text-sm text-zinc-500">API Coverage</p>
|
||||||
|
</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 accounting 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/wave.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="file-text" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Invoices</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="receipt" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Expenses</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="pie-chart" class="w-4 h-4 text-brand-400"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Reports</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">
|
||||||
|
Accounting + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't be complicated</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">
|
||||||
|
Stop dreading your bookkeeping. Let AI handle the tedious work while you focus on your business.
|
||||||
|
</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">Shoebox of receipts</p>
|
||||||
|
<p class="text-zinc-500">Piles of paper receipts waiting to be entered. Tax season panic mode.</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 invoicing</p>
|
||||||
|
<p class="text-zinc-500">Some months you invoice on time. Others... not so much.</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">Accounting anxiety</p>
|
||||||
|
<p class="text-zinc-500">Always worried if your books are right. Afraid of what you'll find.</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 Wave 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 categorizes everything</p>
|
||||||
|
<p class="text-zinc-400">Snap a photo, AI does the rest. Perfectly categorized, every time.</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">Automated billing cycles</p>
|
||||||
|
<p class="text-zinc-400">Set it and forget it. Invoices go out on time, every time.</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 keeps books clean</p>
|
||||||
|
<p class="text-zinc-400">Always know where you stand. Real-time financial clarity.</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</h2>
|
||||||
|
<p class="text-xl text-zinc-400 max-w-2xl mx-auto">Full Wave API access through one simple connection. 42 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="file-text" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Invoice Management</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Create, send, track invoices automatically. Get paid faster.</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="scan" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Receipt Scanning</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Capture expenses, categorize, attach to records instantly.</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="landmark" class="w-7 h-7 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Banking</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">Connect accounts, categorize transactions, reconcile effortlessly.</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="pie-chart" class="w-7 h-7 text-pink-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Reports</h3>
|
||||||
|
<p class="text-zinc-400 leading-relaxed">P&L, balance sheet, cash flow — on demand, anytime.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-6">+ 38 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">Customer Management</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">Vendor Payments</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">Tax Prep</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">Multi-Currency</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">Estimates</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">Recurring Billing</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 accounting jargon required. Just describe what you need in plain English and Claude handles
|
||||||
|
the bookkeeping through your Wave account.
|
||||||
|
</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">"Create an invoice for Acme Corp, $500"</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">"Categorize last week's expenses"</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">"Show me my P&L for Q4"</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 + Wave</span>
|
||||||
|
</div>
|
||||||
|
<pre class="text-zinc-300 overflow-x-auto"><code><span class="text-zinc-500">You:</span> How much did I spend on
|
||||||
|
software this month?
|
||||||
|
|
||||||
|
<span class="text-brand-400">Claude:</span> Let me check your expenses...
|
||||||
|
|
||||||
|
<span class="text-zinc-500">→ Using:</span> wave_get_expenses
|
||||||
|
<span class="text-zinc-500">→ Category:</span> Software
|
||||||
|
<span class="text-zinc-500">→ Period:</span> This month
|
||||||
|
|
||||||
|
<span class="text-green-400">✓ Found 8 transactions</span>
|
||||||
|
|
||||||
|
<span class="text-brand-400">Claude:</span> You spent <span class="text-white">$847.32</span> on
|
||||||
|
software this month:
|
||||||
|
|
||||||
|
• Figma: $45
|
||||||
|
• AWS: $312.32
|
||||||
|
• Notion: $96
|
||||||
|
• GitHub: $44
|
||||||
|
...</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/wave-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">✓ Wave MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 42 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 Wave 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">Is Wave really free?</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">
|
||||||
|
Wave's accounting software is free. Wave Connect (this integration) will have a free tier for basic usage,
|
||||||
|
with paid tiers for higher volume. We believe every small business should have access to AI-powered accounting.
|
||||||
|
</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 financial 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 Wave credentials. Data flows directly between Claude and Wave —
|
||||||
|
we don't store your financial information. All connections are encrypted with bank-level security.
|
||||||
|
</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 accounting?</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 always confirms before taking important actions. For sensitive operations like deleting transactions or sending invoices,
|
||||||
|
you'll see a preview and confirm. Think of it as a very smart assistant that always double-checks with you.
|
||||||
|
</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">Do I need accounting experience?</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 at all! That's the beauty of AI. Just describe what you need in plain English: "Send an invoice to John for last week's work"
|
||||||
|
or "How much did I spend on marketing?" Claude handles the accounting complexity.
|
||||||
|
</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 Wave?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
|
||||||
|
Join small businesses already automating their accounting with Wave 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="bar-chart-3" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Wave 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 Wave Connect. Not affiliated with Wave Financial.</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>
|
||||||
620
wrike/index.html
Normal file
620
wrike/index.html
Normal file
@ -0,0 +1,620 @@
|
|||||||
|
<!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>Wrike Connect — AI-Power Your Workflows 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: '#ecfdf5',
|
||||||
|
100: '#d1fae5',
|
||||||
|
200: '#a7f3d0',
|
||||||
|
300: '#6ee7b7',
|
||||||
|
400: '#34d399',
|
||||||
|
500: '#08CF65',
|
||||||
|
600: '#059669',
|
||||||
|
700: '#047857',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #08CF65 0%, #06b557 50%, #059669 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(8, 207, 101, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 60px rgba(8, 207, 101, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(8, 207, 101, 0.3), 0 25px 80px -12px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-delayed {
|
||||||
|
animation: float 6s ease-in-out infinite 2s;
|
||||||
|
}
|
||||||
|
.animate-float-slow {
|
||||||
|
animation: float 8s ease-in-out infinite 1s;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
@keyframes pulse-glow {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(8, 207, 101, 0.4); }
|
||||||
|
50% { box-shadow: 0 0 40px rgba(8, 207, 101, 0.6); }
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(8, 207, 101, 0.4), 0 0 40px 0 rgba(8, 207, 101, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(8, 207, 101, 0.6), 0 0 60px 10px rgba(8, 207, 101, 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;
|
||||||
|
}
|
||||||
|
.feature-card:hover .feature-icon {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, rgba(8, 207, 101, 0.5), rgba(6, 181, 87, 0.2));
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: rgb(24 24 27);
|
||||||
|
border-radius: calc(1rem - 1px);
|
||||||
|
}
|
||||||
|
.text-shadow {
|
||||||
|
text-shadow: 0 0 40px rgba(8, 207, 101, 0.5);
|
||||||
|
}
|
||||||
|
.bg-grid {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(8, 207, 101, 0.03) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(8, 207, 101, 0.03) 1px, transparent 1px);
|
||||||
|
background-size: 50px 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
|
||||||
|
|
||||||
|
<!-- Floating Background Elements -->
|
||||||
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/5 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-3/4 right-1/4 w-64 h-64 bg-emerald-500/5 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/3 w-48 h-48 bg-green-400/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-2">
|
||||||
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-600 flex items-center justify-center shadow-lg shadow-brand-500/25">
|
||||||
|
<i data-lucide="workflow" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Wrike 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="#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-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-lg font-medium transition shadow-lg shadow-brand-500/25 hover:shadow-brand-500/40">
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="relative min-h-screen flex items-center hero-glow pt-20 bg-grid">
|
||||||
|
<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-500 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
|
||||||
|
Connect <span class="gradient-text text-shadow">Wrike</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">
|
||||||
|
The most comprehensive Wrike MCP server. <strong class="text-white">98 tools</strong> covering projects, tasks, and collaboration.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</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-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-xl shadow-brand-500/25">
|
||||||
|
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 border border-zinc-700 hover:border-zinc-600 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 backdrop-blur-sm">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</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" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=12" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=13" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=14" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=15" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">300+</strong> project teams worldwide
|
||||||
|
</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 transforms your Wrike workflows</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/wrike.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="zap" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">98 API Tools</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="clock" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">2-Click Setup</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-zinc-700"></div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<i data-lucide="shield-check" class="w-4 h-4 text-brand-500"></i>
|
||||||
|
<span class="text-sm text-zinc-300">OAuth 2.0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Problem/Solution -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
Managing Wrike + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't be a full-time job</span>
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-5">
|
||||||
|
<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-full 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-medium text-white">Project status chaos</p>
|
||||||
|
<p class="text-zinc-500 text-sm mt-1">Constantly switching between tools to track progress across teams.</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-full 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-medium text-white">Approval bottlenecks</p>
|
||||||
|
<p class="text-zinc-500 text-sm mt-1">Reviews get stuck. Deadlines slip. Everyone's frustrated.</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-full 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-medium text-white">Resource conflicts</p>
|
||||||
|
<p class="text-zinc-500 text-sm mt-1">Team members overbooked. Projects understaffed. No visibility.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-zinc-900 to-zinc-900/50 rounded-2xl border border-zinc-800 p-8 shadow-2xl">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-12 h-12 rounded-xl bg-brand-500/20 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-6 h-6 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold">With Wrike Connect</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>AI dashboards everything automatically</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>Smart routing & reviewer reminders</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>AI optimizes team allocation</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>Works with Claude, GPT, any MCP client</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-brand-500/5 border border-brand-500/10">
|
||||||
|
<i data-lucide="check-circle" class="w-5 h-5 text-brand-400"></i>
|
||||||
|
<span>Automatic token refresh forever</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-20 border-t border-zinc-800/50">
|
||||||
|
<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">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Wrike API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-brand-500/10 flex items-center justify-center mb-5 group-hover:bg-brand-500/20 transition-all">
|
||||||
|
<i data-lucide="check-square" class="w-7 h-7 text-brand-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Task Management</h3>
|
||||||
|
<p class="text-zinc-400">Create, assign, track tasks across projects. Full CRUD with dependencies.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center mb-5 group-hover:bg-purple-500/20 transition-all">
|
||||||
|
<i data-lucide="folder-kanban" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Project Ops</h3>
|
||||||
|
<p class="text-zinc-400">Manage folders, timelines, and dependencies. Full project lifecycle control.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center mb-5 group-hover:bg-cyan-500/20 transition-all">
|
||||||
|
<i data-lucide="clock" class="w-7 h-7 text-cyan-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Time & Budget</h3>
|
||||||
|
<p class="text-zinc-400">Track hours, expenses, and project budgets. Real-time cost visibility.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-2xl border border-zinc-800 p-6 card-glow transition-all duration-300">
|
||||||
|
<div class="feature-icon w-14 h-14 rounded-xl bg-amber-500/10 flex items-center justify-center mb-5 group-hover:bg-amber-500/20 transition-all">
|
||||||
|
<i data-lucide="badge-check" class="w-7 h-7 text-amber-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Approvals</h3>
|
||||||
|
<p class="text-zinc-400">Route reviews, collect feedback, manage sign-offs. Never miss a deadline.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ 90 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Comments</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Attachments</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Custom Fields</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Workflows</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Teams</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Reports</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Timelogs</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-sm hover:bg-zinc-700/50 transition cursor-default">Webhooks</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section id="pricing" class="py-20 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">
|
||||||
|
<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="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8">
|
||||||
|
<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 bg-zinc-800/50 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="Your phone number"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800/50 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@company.com"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800/50 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-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-xl shadow-brand-500/25"
|
||||||
|
>
|
||||||
|
<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-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">
|
||||||
|
<i data-lucide="lock" class="w-4 h-4 inline mr-1"></i>
|
||||||
|
We respect your privacy. No spam, ever.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add('hidden');
|
||||||
|
document.getElementById('success-message').classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Open Source -->
|
||||||
|
<section class="py-20 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 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 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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 text-brand-400 hover:text-brand-300 font-medium group">
|
||||||
|
View on GitHub
|
||||||
|
<i data-lucide="arrow-right" class="w-4 h-4 transition group-hover:translate-x-1"></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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/wrike-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">✓ Wrike MCP Server running</span>
|
||||||
|
<span class="text-brand-400">✓ 98 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-20 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 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
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 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
For the hosted version, no. Just connect your Wrike account via OAuth 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 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">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">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Wrike API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Wrike settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-gradient-to-br from-zinc-900 to-zinc-900/30 rounded-xl border border-zinc-800 p-6 transition hover:border-zinc-700">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium">Can I use this with other AI models?</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">
|
||||||
|
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your Wrike?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join 300+ project teams already automating with Wrike 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-emerald-600 hover:from-brand-600 hover:to-emerald-700 rounded-xl font-semibold text-lg transition shadow-xl shadow-brand-500/25">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-emerald-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="workflow" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Wrike 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="#" class="hover:text-white transition flex items-center gap-1">
|
||||||
|
<i data-lucide="github" class="w-4 h-4"></i>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Wrike Connect. Not affiliated with Wrike.</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-emerald-600 rounded-full font-semibold transition-all transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
620
zendesk/index.html
Normal file
620
zendesk/index.html
Normal file
@ -0,0 +1,620 @@
|
|||||||
|
<!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>Zendesk Connect — AI-Power Your Support 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: '#f0fdfa',
|
||||||
|
100: '#ccfbf1',
|
||||||
|
200: '#99f6e4',
|
||||||
|
300: '#5eead4',
|
||||||
|
400: '#17c3b2',
|
||||||
|
500: '#03363D',
|
||||||
|
600: '#024850',
|
||||||
|
700: '#014451',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #17c3b2 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(23, 195, 178, 0.2), transparent);
|
||||||
|
}
|
||||||
|
.card-glow {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-glow:hover {
|
||||||
|
box-shadow: 0 0 40px rgba(23, 195, 178, 0.15);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
.video-glow {
|
||||||
|
box-shadow: 0 0 80px rgba(23, 195, 178, 0.3), 0 0 120px rgba(139, 92, 246, 0.15);
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-delayed {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
animation-delay: -3s;
|
||||||
|
}
|
||||||
|
.animate-pulse-glow {
|
||||||
|
animation: pulse-glow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||||
|
50% { transform: translateY(-20px) rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes pulse-glow {
|
||||||
|
0%, 100% { opacity: 0.5; transform: scale(1); }
|
||||||
|
50% { opacity: 0.8; transform: scale(1.05); }
|
||||||
|
}
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px 0 rgba(23, 195, 178, 0.4), 0 0 40px 0 rgba(23, 195, 178, 0.2); }
|
||||||
|
50% { box-shadow: 0 0 30px 5px rgba(23, 195, 178, 0.6), 0 0 60px 10px rgba(23, 195, 178, 0.3); }
|
||||||
|
}
|
||||||
|
.sticky-btn {
|
||||||
|
animation: wiggle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sticky-btn:hover {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.gradient-border {
|
||||||
|
background: linear-gradient(135deg, #17c3b2, #8b5cf6, #ec4899);
|
||||||
|
padding: 2px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.gradient-border-inner {
|
||||||
|
background: #09090b;
|
||||||
|
border-radius: calc(1rem - 2px);
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
background: linear-gradient(135deg, rgba(23, 195, 178, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
|
||||||
|
}
|
||||||
|
.bg-grid {
|
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.02)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
.teal-accent {
|
||||||
|
color: #17c3b2;
|
||||||
|
}
|
||||||
|
.teal-bg {
|
||||||
|
background-color: #17c3b2;
|
||||||
|
}
|
||||||
|
.teal-glow {
|
||||||
|
box-shadow: 0 0 20px rgba(23, 195, 178, 0.4);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-zinc-950 text-zinc-100 font-sans antialiased bg-grid">
|
||||||
|
|
||||||
|
<!-- Floating decorative elements -->
|
||||||
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/4 left-10 w-64 h-64 bg-teal-500/10 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div class="absolute top-1/2 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float-delayed"></div>
|
||||||
|
<div class="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500/10 rounded-full blur-3xl animate-float"></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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-teal-400 to-teal-600 flex items-center justify-center shadow-lg shadow-teal-500/25">
|
||||||
|
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Zendesk 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="#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-4 py-2 teal-bg hover:opacity-90 rounded-lg font-medium transition shadow-lg shadow-teal-500/25 hover:shadow-teal-500/40 hover:scale-105 transform 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">
|
||||||
|
<div class="flex flex-col items-center text-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-green-400 animate-pulse"></span>
|
||||||
|
Open Source + Hosted
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
|
||||||
|
Connect <span class="gradient-text">Zendesk</span><br>
|
||||||
|
to AI in 2 Clicks
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-xl mx-auto mb-10">
|
||||||
|
The complete Zendesk MCP server. <strong class="text-white">156 tools</strong> covering tickets, users, and automations.
|
||||||
|
No setup. No OAuth headaches. Just connect and automate.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
||||||
|
<a href="#pricing" class="w-full sm:w-auto px-8 py-4 teal-bg hover:opacity-90 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-teal-500/25 hover:shadow-teal-500/40 flex items-center justify-center gap-2 text-white">
|
||||||
|
<span>Join the Waitlist</span>
|
||||||
|
<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 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition flex items-center justify-center gap-2 hover:border-zinc-500">
|
||||||
|
<i data-lucide="play" class="w-5 h-5"></i>
|
||||||
|
Watch Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Proof -->
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<div class="flex -space-x-3">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=21" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=22" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=23" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=24" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
<img src="https://i.pravatar.cc/100?img=25" class="w-10 h-10 rounded-full border-2 border-zinc-950" alt="">
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-400">
|
||||||
|
Trusted by <strong class="text-white">5,000+</strong> support teams
|
||||||
|
</p>
|
||||||
|
</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 support workflow</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/zendesk.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="ticket" class="w-4 h-4 teal-accent"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Tickets</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 teal-accent"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Users</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 teal-accent"></i>
|
||||||
|
<span class="text-sm text-zinc-300">Analytics</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-4">
|
||||||
|
Setting up Zendesk + AI<br>
|
||||||
|
<span class="text-zinc-500">shouldn't take a week</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Pain Point 1 -->
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-medium text-zinc-400">Drowning in ticket queues</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 teal-accent"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-semibold text-white">AI triages and prioritizes automatically</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 2 -->
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-medium text-zinc-400">Slow first response times</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 teal-accent"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-semibold text-white">Instant AI-drafted replies</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain Point 3 -->
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-8 hover:border-zinc-700 transition">
|
||||||
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="x" class="w-5 h-5 text-red-400"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-medium text-zinc-400">Context switching constantly</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-teal-500/10 flex items-center justify-center">
|
||||||
|
<i data-lucide="check" class="w-5 h-5 teal-accent"></i>
|
||||||
|
</div>
|
||||||
|
<p class="font-semibold text-white">AI surfaces relevant ticket history</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section id="features" class="py-24 border-t border-zinc-800/50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-teal-500/10 teal-accent text-sm font-medium mb-6">
|
||||||
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
||||||
|
Full API Coverage
|
||||||
|
</span>
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-4">Everything you need</h2>
|
||||||
|
<p class="text-xl text-zinc-400">Full Zendesk API access through one simple connection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="ticket" class="w-7 h-7 teal-accent"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Ticket Management</h3>
|
||||||
|
<p class="text-zinc-400">Create, update, resolve tickets. Full CRUD on your queue.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="users" class="w-7 h-7 text-purple-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">User & Org Data</h3>
|
||||||
|
<p class="text-zinc-400">Access customer history, tags, and organization details.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="workflow" class="w-7 h-7 text-pink-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Automations</h3>
|
||||||
|
<p class="text-zinc-400">Trigger macros, update fields, route tickets intelligently.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-zinc-900/50 rounded-2xl border border-zinc-800 p-6 card-glow">
|
||||||
|
<div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-5">
|
||||||
|
<i data-lucide="bar-chart-3" class="w-7 h-7 text-orange-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">Analytics</h3>
|
||||||
|
<p class="text-zinc-400">Pull satisfaction scores, response times, agent performance.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<p class="text-zinc-400 mb-4">+ 150 more endpoints including:</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-2">
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Views</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Macros</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Groups</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">SLAs</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Triggers</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Brands</span>
|
||||||
|
<span class="px-4 py-2 bg-zinc-800/80 rounded-full text-sm border border-zinc-700/50 hover:border-zinc-600 transition cursor-default">Help Center</span>
|
||||||
|
</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-teal-500/20 teal-accent 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="gradient-border">
|
||||||
|
<div class="gradient-border-inner p-8">
|
||||||
|
<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="teal-accent">*</span></label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
required
|
||||||
|
placeholder="Your full name"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="phone" class="block text-sm font-medium text-zinc-300 mb-2">Phone <span class="teal-accent">*</span></label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="phone"
|
||||||
|
name="phone"
|
||||||
|
required
|
||||||
|
placeholder="(555) 123-4567"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-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@company.com"
|
||||||
|
class="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="submit-btn"
|
||||||
|
class="w-full py-4 bg-gradient-to-r from-teal-500 to-purple-500 hover:from-teal-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-teal-500/25 text-white"
|
||||||
|
>
|
||||||
|
<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-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="check" class="w-8 h-8 text-green-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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('waitlist-form').addEventListener('submit', async function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const form = this;
|
||||||
|
const successMsg = document.getElementById('success-message');
|
||||||
|
form.classList.add('hidden');
|
||||||
|
successMsg.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- 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 overflow-hidden relative">
|
||||||
|
<div class="absolute top-0 right-0 w-96 h-96 bg-teal-500/5 rounded-full blur-3xl"></div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center relative">
|
||||||
|
<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-6">
|
||||||
|
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="#" class="inline-flex items-center gap-2 teal-accent hover:text-teal-300 font-medium transition">
|
||||||
|
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 shadow-2xl">
|
||||||
|
<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 overflow-x-auto"><code><span class="text-zinc-500">$</span> git clone github.com/zendesk-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-green-400">✓ Zendesk MCP Server running</span>
|
||||||
|
<span class="text-green-400">✓ 156 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-4xl font-bold mb-4">Frequently asked questions</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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">
|
||||||
|
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-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">
|
||||||
|
For the hosted version, no. Just connect your Zendesk account via OAuth 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-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium 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-transform"></i>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-4 text-zinc-400">
|
||||||
|
Yes. We use OAuth 2.0 and never store your Zendesk API keys. Tokens are encrypted at rest and in transit.
|
||||||
|
You can revoke access anytime from your Zendesk settings.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group bg-zinc-900/50 rounded-xl border border-zinc-800 p-6 hover:border-zinc-700 transition">
|
||||||
|
<summary class="flex items-center justify-between cursor-pointer list-none">
|
||||||
|
<span class="font-medium text-lg">Can I use this with GPT or other AI models?</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">
|
||||||
|
MCP is currently best supported by Claude (Anthropic). GPT can use it via custom implementations.
|
||||||
|
As MCP adoption grows, more clients will support it natively.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-24 border-t border-zinc-800/50 relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-teal-500/5 to-transparent"></div>
|
||||||
|
<div class="max-w-4xl mx-auto px-6 text-center relative">
|
||||||
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">
|
||||||
|
Ready to AI-power your Zendesk?
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-zinc-400 mb-10">
|
||||||
|
Join thousands of support teams already automating with Zendesk 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-teal-500 to-purple-500 hover:from-teal-600 hover:to-purple-600 rounded-xl font-semibold text-lg transition transform hover:scale-105 shadow-lg shadow-teal-500/25 text-white">
|
||||||
|
Join the Waitlist
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-full sm:w-auto px-8 py-4 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-xl font-semibold text-lg transition">
|
||||||
|
Book a 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-2">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-teal-400 to-teal-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="headphones" class="w-5 h-5 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-xl">Zendesk 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="#" class="hover:text-white transition">GitHub</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Twitter</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-zinc-500 text-sm">© 2026 Zendesk Connect. Not affiliated with Zendesk.</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 teal-bg hover:opacity-90 rounded-full font-semibold transition-all transform hover:scale-110 text-white"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
Loading…
x
Reference in New Issue
Block a user