SpectrumInfinite's picture
Add 3 files
d054600 verified
Raw History Blame Contribute Delete
13.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook Ads Management Plans</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#010d72',
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.pricing-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pricing-table table {
min-width: 900px;
}
.plan-highlight {
position: relative;
border: 2px solid #010d72;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.popular-badge {
position: absolute;
top: -12px;
right: 20px;
background-color: #010d72;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.cta-button {
transition: all 0.3s ease;
}
.cta-button:hover {
background-color: #00085a;
transform: scale(1.05);
}
.feature-item {
position: relative;
padding-left: 20px;
}
.feature-item:before {
content: "✓";
position: absolute;
left: 0;
color: #010d72;
font-weight: bold;
}
@media (max-width: 768px) {
.pricing-table table {
min-width: 100%;
}
}
</style>
</head>
<body class="bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<h1 class="text-3xl md:text-4xl font-bold text-primary mb-4">📊 Facebook Ads Management Plans</h1>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Choose the right Facebook Ads management plan tailored to your business growth and campaign budget.</p>
</div>
<div class="pricing-table bg-white rounded-xl shadow-sm overflow-hidden">
<table class="w-full" aria-label="Facebook Ads Management Pricing Plans">
<thead>
<tr class="bg-primary text-white">
<th class="py-6 px-6 text-left font-semibold text-lg" scope="col">Starter</th>
<th class="py-6 px-6 text-left font-semibold text-lg relative plan-highlight" scope="col">
Growth
<span class="popular-badge">Most Popular</span>
</th>
<th class="py-6 px-6 text-left font-semibold text-lg" scope="col">Advanced</th>
<th class="py-6 px-6 text-left font-semibold text-lg" scope="col">Enterprise</th>
</tr>
<tr class="border-b border-gray-200">
<td class="py-6 px-6">
<div class="text-2xl font-bold text-gray-900">$597<span class="text-lg font-medium text-gray-500">/month</span></div>
<div class="text-sm text-gray-500 mt-1">Campaign budget up to $1,800</div>
</td>
<td class="py-6 px-6 bg-gray-50">
<div class="text-2xl font-bold text-gray-900">$897<span class="text-lg font-medium text-gray-500">/month</span></div>
<div class="text-sm text-gray-500 mt-1">Campaign budget up to $3,000</div>
</td>
<td class="py-6 px-6">
<div class="text-2xl font-bold text-gray-900">$1,997<span class="text-lg font-medium text-gray-500">/month</span></div>
<div class="text-sm text-gray-500 mt-1">Campaign budget up to $8,000</div>
</td>
<td class="py-6 px-6">
<div class="text-2xl font-bold text-gray-900">Custom</div>
<div class="text-sm text-gray-500 mt-1">Campaign budget $8,000 to $40,000+</div>
</td>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<!-- Campaign Setup -->
<tr>
<td class="py-4 px-6 feature-item">Campaign setup with 1–2 campaigns focused on primary objectives</td>
<td class="py-4 px-6 bg-gray-50 feature-item">Setup and management of 3–5 campaigns, including prospecting and retargeting</td>
<td class="py-4 px-6 feature-item">Complex campaign architecture managing 5–10+ campaigns covering full funnel stages</td>
<td class="py-4 px-6 feature-item">Custom campaign structure across multiple ad accounts and business units</td>
</tr>
<!-- Tracking -->
<tr>
<td class="py-4 px-6 feature-item">Basic Facebook Pixel installation and standard conversion tracking</td>
<td class="py-4 px-6 bg-gray-50 feature-item">Enhanced Pixel setup with custom events and conversion tracking</td>
<td class="py-4 px-6 feature-item">Pixel + Conversions API setup with granular event tracking</td>
<td class="py-4 px-6 feature-item">Advanced data integrations including server-side tracking, CRM syncing, offline conversions</td>
</tr>
<!-- Targeting -->
<tr>
<td class="py-4 px-6 feature-item">Core audience targeting (demographics, interests)</td>
<td class="py-4 px-6 bg-gray-50 feature-item">Advanced targeting with Custom and Lookalike Audiences</td>
<td class="py-4 px-6 feature-item">Highly segmented audiences with advanced exclusion and layered targeting</td>
<td class="py-4 px-6 feature-item">Global, granular audience segmentation and extensive lookalike and custom audience sets</td>
</tr>
<!-- Retargeting -->
<tr>
<td class="py-4 px-6 feature-item">Basic retargeting setup with limited budget allocation</td>
<td class="py-4 px-6 bg-gray-50 feature-item">Comprehensive retargeting campaigns (multi-duration segments)</td>
<td class="py-4 px-6 feature-item">Full-funnel retargeting strategy including dynamic product ads and ad sequencing</td>
<td class="py-4 px-6 feature-item">Extensive full-funnel retargeting and post-conversion nurturing campaigns</td>
</tr>
<!-- Creatives -->
<tr>
<td class="py-4 px-6 feature-item">Single or few static image ads with basic copywriting</td>
<td class="py-4 px-6 bg-gray-50 feature-item">Multiple ad creatives including images, video, and carousel ads</td>
<td class="py-4 px-6 feature-item">Large volume of ad creatives (images, videos, carousels, stories, reels)</td>
<td class="py-4 px-6 feature-item">Large-scale creative production: dozens of image/video ads, commercials, interactive formats</td>
</tr>
<!-- Testing -->
<tr>
<td class="py-4 px-6 feature-item">Minimal A/B testing (2 ad variations)</td>
<td class="py-4 px-6 bg-gray-50 feature-item">Ongoing A/B testing and bi-weekly optimization</td>
<td class="py-4 px-6 feature-item">High-volume multivariate A/B testing and daily optimization</td>
<td class="py-4 px-6 feature-item">Continuous multivariate testing, algorithmic budget optimization, and lift studies</td>
</tr>
<!-- Reporting -->
<tr>
<td class="py-4 px-6 feature-item">Monthly performance reporting</td>
<td class="py-4 px-6 bg-gray-50 feature-item">Bi-weekly or monthly detailed reports with actionable insights</td>
<td class="py-4 px-6 feature-item">Weekly detailed reports and live dashboard access</td>
<td class="py-4 px-6 feature-item">Real-time custom dashboards, executive reporting, and unlimited analytics consultations</td>
</tr>
<!-- Support -->
<tr>
<td class="py-4 px-6 feature-item">Basic onboarding and email support</td>
<td class="py-4 px-6 bg-gray-50 feature-item">Monthly strategy calls and dedicated account management</td>
<td class="py-4 px-6 feature-item">Weekly strategy meetings and senior-level account support</td>
<td class="py-4 px-6 feature-item">Dedicated multi-disciplinary team with frequent strategic meetings and premium support</td>
</tr>
<!-- CTA Row -->
<tr>
<td class="py-6 px-6">
<button class="cta-button w-full bg-primary text-white py-3 px-6 rounded-lg font-medium">Get Started</button>
</td>
<td class="py-6 px-6 bg-gray-50">
<button class="cta-button w-full bg-primary text-white py-3 px-6 rounded-lg font-medium">Get Started</button>
</td>
<td class="py-6 px-6">
<button class="cta-button w-full bg-primary text-white py-3 px-6 rounded-lg font-medium">Get Started</button>
</td>
<td class="py-6 px-6">
<button class="cta-button w-full bg-primary text-white py-3 px-6 rounded-lg font-medium">Contact Us</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-12 text-center text-gray-600">
<p>Need help deciding? <a href="#" class="text-primary font-medium hover:underline">Contact our team</a> for a free consultation.</p>
</div>
</div>
<script>
// Add animation to feature items on scroll
document.addEventListener('DOMContentLoaded', function() {
const featureItems = document.querySelectorAll('.feature-item');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
featureItems.forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateY(20px)';
item.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
observer.observe(item);
});
// Button hover effects
const buttons = document.querySelectorAll('.cta-button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)';
this.style.backgroundColor = '#00085a';
});
button.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
this.style.backgroundColor = '#010d72';
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SpectrumInfinite/facebook-ads-pricing-table" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>