Spaces:

SpectrumInfinite
/

facebook-ads-pricing-table

Running

App Files Files Community

SpectrumInfinite commited on May 25, 2025

Commit

d054600

verified ·

1 Parent(s): d81a365

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +245 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Facebook Ads Pricing Table
-emoji: ⚡
-colorFrom: pink
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: facebook-ads-pricing-table
+emoji: 🐳
+colorFrom: red
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,245 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Certainly! Here’s a comprehensive prompt you can give to an AI tool to generate a responsive, dynamic HTML + CSS pricing table that includes the detailed Facebook Ads service tiers based on your specified pricing and campaign budgets. It uses your hex color #010d72 for headers and CTAs, includes subtle animations, and ensures the table is accessible and user-friendly. AI Prompt: Create a responsive HTML table with four columns representing Facebook Ads management service tiers: Starter ($597/month) — Campaign budget up to $1,800 Growth ($897/month) — Campaign budget up to $3,000 Advanced ($1,997/month) — Campaign budget up to $8,000 Enterprise (Custom pricing) — Campaign budget $8,000 to $40,000+ Include the following detailed services for each tier: Starter Campaign setup with 1–2 campaigns focused on primary objectives Basic Facebook Pixel installation and standard conversion tracking Core audience targeting (demographics, interests) Basic retargeting setup with limited budget allocation Single or few static image ads with basic copywriting Minimal A/B testing (2 ad variations) Monthly performance reporting Basic onboarding and email support Growth Setup and management of 3–5 campaigns, including prospecting and retargeting Enhanced Pixel setup with custom events and conversion tracking Advanced targeting with Custom and Lookalike Audiences Comprehensive retargeting campaigns (multi-duration segments) Multiple ad creatives including images, video, and carousel ads Ongoing A/B testing and bi-weekly optimization Bi-weekly or monthly detailed reports with actionable insights Monthly strategy calls and dedicated account management Advanced Complex campaign architecture managing 5–10+ campaigns covering full funnel stages Pixel + Conversions API setup with granular event tracking Highly segmented audiences with advanced exclusion and layered targeting Full-funnel retargeting strategy including dynamic product ads and ad sequencing Large volume of ad creatives (images, videos, carousels, stories, reels) High-volume multivariate A/B testing and daily optimization Weekly detailed reports and live dashboard access Weekly strategy meetings and senior-level account support Enterprise Custom campaign structure across multiple ad accounts and business units Advanced data integrations including server-side tracking, CRM syncing, offline conversions Global, granular audience segmentation and extensive lookalike and custom audience sets Extensive full-funnel retargeting and post-conversion nurturing campaigns Large-scale creative production: dozens of image/video ads, commercials, interactive formats Continuous multivariate testing, algorithmic budget optimization, and lift studies Real-time custom dashboards, executive reporting, and unlimited analytics consultations Dedicated multi-disciplinary team with frequent strategic meetings and premium support Design requirements: Use semantic HTML table tags: <table>, <thead>, <tbody>, <tr>, <th>, <td> Display all four columns side-by-side horizontally on desktop/tablet Enable horizontal scrolling on small screens without stacking columns vertically Use hex color #010d72 for all table headers and CTA buttons The Growth plan column should be visually highlighted as the "Most Popular" plan (distinct background or border plus a badge) Each column should end with a CTA button: Starter, Growth, Advanced: button text “Get Started” Enterprise: button text “Contact Us” CTA buttons should have #010d72 background, white text, rounded corners, and subtle hover animations (darken color and scale-up) The table background should be white or very light with subtle borders separating cells Use a clean modern font (system-ui, Arial, Helvetica) with consistent padding and spacing for readability Include ARIA roles and labels for accessibility Add a heading above the table: “📊 Facebook Ads Management Plans” in #010d72, bold Add a subheading below the table: “Choose the right Facebook Ads management plan tailored to your business growth and campaign budget.”