288 lines
14 KiB
HTML
288 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Meta Ads Connect — AI-Power Your Facebook & Instagram Ads 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: {
|
|
500: '#1877F2',
|
|
600: '#1877F2dd',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #1877F2 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%, #1877F225, transparent); }
|
|
.card-glow:hover { box-shadow: 0 0 40px #1877F220; }
|
|
</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 flex items-center justify-center" style="background: #1877F2">
|
|
<i data-lucide="zap" class="w-5 h-5" style="color: #fff"></i>
|
|
</div>
|
|
<span class="font-bold text-xl">Meta Ads 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="#pricing" class="px-4 py-2 rounded-lg font-medium transition" style="background: #1877F2; color: #fff">
|
|
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="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<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">
|
|
<span class="w-2 h-2 rounded-full animate-pulse" style="background: #1877F2"></span>
|
|
Open Source + Hosted
|
|
</div>
|
|
|
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
|
|
Connect <span class="gradient-text">Meta Ads</span><br>to AI in 2 Clicks
|
|
</h1>
|
|
|
|
<p class="text-xl text-zinc-400 mb-8">
|
|
The complete Meta Ads MCP server. Campaigns, ad sets, creatives, and analytics. <strong class="text-white">98 tools</strong> ready to automate.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="#pricing" class="px-6 py-3 rounded-lg font-semibold text-center transition" style="background: #1877F2; color: #fff">
|
|
Join the Waitlist
|
|
</a>
|
|
<a href="#features" class="px-6 py-3 rounded-lg font-semibold text-center border border-zinc-700 hover:border-zinc-500 transition">
|
|
See Features
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="rounded-2xl overflow-hidden border border-zinc-800 shadow-2xl">
|
|
<video autoplay loop muted playsinline class="w-full">
|
|
<source src="../output/meta-ads.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<div class="absolute -bottom-4 -right-4 px-4 py-2 rounded-lg text-sm font-medium" style="background: #1877F2; color: #fff">
|
|
98 API Tools
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pain Points -->
|
|
<section class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
|
Setting up Meta Ads + AI<br><span class="text-zinc-500">shouldn't take a week</span>
|
|
</h2>
|
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
|
|
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
<div class="flex items-start gap-3 mb-4">
|
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
</div>
|
|
<p class="text-zinc-400">Budget waste on bad ads</p>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1877F230">
|
|
<i data-lucide="check" class="w-4 h-4" style="color: #1877F2"></i>
|
|
</div>
|
|
<p class="text-white font-medium">AI pauses underperformers instantly</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
<div class="flex items-start gap-3 mb-4">
|
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
</div>
|
|
<p class="text-zinc-400">Manual A/B test analysis</p>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1877F230">
|
|
<i data-lucide="check" class="w-4 h-4" style="color: #1877F2"></i>
|
|
</div>
|
|
<p class="text-white font-medium">Auto-declare winners and scale</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
<div class="flex items-start gap-3 mb-4">
|
|
<div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i data-lucide="x" class="w-4 h-4 text-red-400"></i>
|
|
</div>
|
|
<p class="text-zinc-400">Audience fatigue</p>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1" style="background: #1877F230">
|
|
<i data-lucide="check" class="w-4 h-4" style="color: #1877F2"></i>
|
|
</div>
|
|
<p class="text-white font-medium">Smart creative rotation</p>
|
|
</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">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Everything you need</h2>
|
|
<p class="text-zinc-400 text-center mb-12">Full Meta Ads API access through one simple connection</p>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
|
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1877F220">
|
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
|
|
</div>
|
|
<h3 class="font-semibold text-lg mb-2">Campaign Management</h3>
|
|
<p class="text-zinc-400 text-sm">Create, launch, and optimize ad campaigns programmatically.</p>
|
|
</div>
|
|
|
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1877F220">
|
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
|
|
</div>
|
|
<h3 class="font-semibold text-lg mb-2">Audience Targeting</h3>
|
|
<p class="text-zinc-400 text-sm">Build custom and lookalike audiences, manage exclusions.</p>
|
|
</div>
|
|
|
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1877F220">
|
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
|
|
</div>
|
|
<h3 class="font-semibold text-lg mb-2">Creative Testing</h3>
|
|
<p class="text-zinc-400 text-sm">A/B test ads, manage assets, and rotate creatives.</p>
|
|
</div>
|
|
|
|
<div class="p-6 rounded-xl bg-zinc-900/50 border border-zinc-800 card-glow transition">
|
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center mb-4" style="background: #1877F220">
|
|
<i data-lucide="layers" class="w-5 h-5" style="color: #1877F2"></i>
|
|
</div>
|
|
<h3 class="font-semibold text-lg mb-2">Performance Analytics</h3>
|
|
<p class="text-zinc-400 text-sm">Track ROAS, CPA, conversions, and attribution data.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Waitlist -->
|
|
<section id="pricing" class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-xl mx-auto px-6 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Waitlist</h2>
|
|
<p class="text-zinc-400 mb-8">Be the first to know when we launch. Early access + exclusive perks.</p>
|
|
<form class="flex flex-col sm:flex-row gap-3" onsubmit="event.preventDefault(); this.innerHTML = '<p class=\'text-green-400 py-4\'>You\'re on the list! We\'ll reach out soon.</p>'">
|
|
<input type="email" placeholder="you@company.com" required class="flex-1 px-4 py-3 rounded-lg bg-zinc-900 border border-zinc-700 focus:border-zinc-500 focus:outline-none">
|
|
<button type="submit" class="px-6 py-3 rounded-lg font-semibold transition" style="background: #1877F2; color: #fff">
|
|
Get Early Access
|
|
</button>
|
|
</form>
|
|
<p class="text-zinc-500 text-sm mt-4">We respect your privacy. No spam, ever.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Open Source -->
|
|
<section class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-4xl mx-auto px-6">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium bg-zinc-800 text-zinc-300">Open Source</span>
|
|
</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-zinc-300 hover:text-white transition">
|
|
<i data-lucide="github" class="w-5 h-5"></i>
|
|
View on GitHub
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section id="faq" class="py-20 border-t border-zinc-800/50">
|
|
<div class="max-w-3xl mx-auto px-6">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Frequently asked questions</h2>
|
|
<div class="space-y-6">
|
|
<details class="group p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
|
What is MCP?
|
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></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 p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
|
Do I need to install anything?
|
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400">For the hosted version, no. Just connect your Meta Ads 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 p-6 rounded-xl bg-zinc-900/50 border border-zinc-800">
|
|
<summary class="font-semibold cursor-pointer list-none flex justify-between items-center">
|
|
Is my data secure?
|
|
<i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i>
|
|
</summary>
|
|
<p class="mt-4 text-zinc-400">Yes. We use OAuth 2.0 and never store your Meta Ads API keys. Tokens are encrypted at rest and in transit. You can revoke access anytime from your Meta Ads settings.</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-4xl font-bold mb-4">Ready to AI-power your Meta Ads?</h2>
|
|
<p class="text-zinc-400 mb-8">Join hundreds of businesses already automating with Meta Ads Connect.</p>
|
|
<a href="#pricing" class="inline-block px-8 py-4 rounded-lg font-semibold text-lg transition" style="background: #1877F2; color: #fff">
|
|
Join the Waitlist →
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="py-8 border-t border-zinc-800/50">
|
|
<div class="max-w-6xl mx-auto px-6 text-center text-zinc-500 text-sm">
|
|
© 2026 Meta Ads Connect. Not affiliated with Meta Ads.
|
|
</div>
|
|
</footer>
|
|
|
|
<script>lucide.createIcons();</script>
|
|
</body>
|
|
</html> |