Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Marketing Services Pricing</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .pricing-card { | |
| transition: all 0.3s ease; | |
| } | |
| .pricing-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .feature-row:hover { | |
| background-color: #f8fafc; | |
| } | |
| .highlight-card { | |
| border: 2px solid #3b82f6; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .highlight-badge { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| background-color: #3b82f6; | |
| color: white; | |
| padding: 0.25rem 1rem; | |
| font-size: 0.75rem; | |
| font-weight: bold; | |
| transform: rotate(45deg) translate(30%, -50%); | |
| transform-origin: bottom left; | |
| width: 120px; | |
| text-align: center; | |
| } | |
| @media (max-width: 768px) { | |
| .mobile-scroll { | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| display: block; | |
| } | |
| .pricing-table { | |
| width: 1200px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="text-center mb-16"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">Marketing Services Pricing</h1> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Choose the perfect plan for your business growth. All plans include expert management and optimization.</p> | |
| </div> | |
| <div class="mobile-scroll"> | |
| <div class="pricing-table inline-block min-w-full"> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-6"> | |
| <!-- Header Row --> | |
| <div class="bg-white rounded-lg shadow-md p-6 flex flex-col"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Service Level</h3> | |
| </div> | |
| <div class="space-y-8 flex-grow"> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm font-medium text-gray-500">Ideal Monthly Ad Spend</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm font-medium text-gray-500">Campaign Types</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm font-medium text-gray-500">Keyword Optimization</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm font-medium text-gray-500">Ad Copy Refreshes</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm font-medium text-gray-500">Landing Page Optimization</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm font-medium text-gray-500">Reporting Frequency</p> | |
| </div> | |
| <div class="feature-row py-3"> | |
| <p class="text-sm font-medium text-gray-500">Strategy Calls</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-4 border-t border-gray-200"> | |
| <p class="text-sm font-medium text-gray-500"> </p> | |
| </div> | |
| </div> | |
| <!-- Starter Plan --> | |
| <div class="pricing-card bg-white rounded-lg shadow-md p-6 flex flex-col"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-1">Starter</h3> | |
| <p class="text-3xl font-bold text-blue-600 mb-2">$497<span class="text-sm font-normal text-gray-500">/month</span></p> | |
| <p class="text-xs text-gray-500">Perfect for small businesses</p> | |
| </div> | |
| <div class="space-y-8 flex-grow"> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">$7,000 - $1,500</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Search</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Weekly</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Monthly</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Basic</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Monthly</p> | |
| </div> | |
| <div class="feature-row py-3"> | |
| <p class="text-sm text-gray-700">Monthly</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-4 border-t border-gray-200"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-300"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Growth Plan --> | |
| <div class="pricing-card bg-white rounded-lg shadow-md p-6 flex flex-col"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-1">Growth</h3> | |
| <p class="text-3xl font-bold text-blue-600 mb-2">$997<span class="text-sm font-normal text-gray-500">/month</span></p> | |
| <p class="text-xs text-gray-500">For scaling businesses</p> | |
| </div> | |
| <div class="space-y-8 flex-grow"> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">$2,500 - $5,000</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Search, Remarketing</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">2x Weekly</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Bi-Weekly</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Standard</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Bi-Weekly</p> | |
| </div> | |
| <div class="feature-row py-3"> | |
| <p class="text-sm text-gray-700">Bi-Weekly</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-4 border-t border-gray-200"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-300"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Advanced Plan (Highlighted) --> | |
| <div class="pricing-card highlight-card bg-white rounded-lg shadow-md p-6 flex flex-col relative"> | |
| <div class="highlight-badge">POPULAR</div> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-1">Advanced</h3> | |
| <p class="text-3xl font-bold text-blue-600 mb-2">$1997<span class="text-sm font-normal text-gray-500">/month</span></p> | |
| <p class="text-xs text-gray-500">For established businesses</p> | |
| </div> | |
| <div class="space-y-8 flex-grow"> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">$10,000 - $16,500</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Search, Remarketing, Display, Shopping</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">3x Weekly</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Weekly</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Advanced</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Weekly</p> | |
| </div> | |
| <div class="feature-row py-3"> | |
| <p class="text-sm text-gray-700">Weekly</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-4 border-t border-gray-200"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-300"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="pricing-card bg-white rounded-lg shadow-md p-6 flex flex-col"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-1">Enterprise</h3> | |
| <p class="text-3xl font-bold text-blue-600 mb-2">Custom</p> | |
| <p class="text-xs text-gray-500">For large organizations</p> | |
| </div> | |
| <div class="space-y-8 flex-grow"> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">$25,000+</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">All Campaign Types + YouTube</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Daily</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Continuous</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Comprehensive</p> | |
| </div> | |
| <div class="feature-row py-3 border-b border-gray-200"> | |
| <p class="text-sm text-gray-700">Custom Dashboard</p> | |
| </div> | |
| <div class="feature-row py-3"> | |
| <p class="text-sm text-gray-700">On-Demand</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-4 border-t border-gray-200"> | |
| <button class="w-full bg-gray-800 hover:bg-gray-900 text-white font-medium py-2 px-4 rounded-md transition duration-300"> | |
| Contact Us | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-blue-50 rounded-lg p-8 text-center"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Not sure which plan is right for you?</h2> | |
| <p class="text-gray-600 mb-6">Our experts can help you choose the perfect plan based on your business needs and goals.</p> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md transition duration-300 inline-flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> Schedule a Free Consultation | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Add any interactive functionality here if needed | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Highlight feature rows on hover for better UX | |
| const featureRows = document.querySelectorAll('.feature-row'); | |
| featureRows.forEach(row => { | |
| row.addEventListener('mouseenter', function() { | |
| const cards = document.querySelectorAll('.pricing-card'); | |
| const index = Array.from(row.parentNode.children).indexOf(row); | |
| cards.forEach(card => { | |
| const feature = card.querySelectorAll('.feature-row')[index]; | |
| if (feature) { | |
| feature.classList.add('bg-blue-50'); | |
| } | |
| }); | |
| }); | |
| row.addEventListener('mouseleave', function() { | |
| const cards = document.querySelectorAll('.pricing-card'); | |
| const index = Array.from(row.parentNode.children).indexOf(row); | |
| cards.forEach(card => { | |
| const feature = card.querySelectorAll('.feature-row')[index]; | |
| if (feature) { | |
| feature.classList.remove('bg-blue-50'); | |
| } | |
| }); | |
| }); | |
| }); | |
| }); | |
| </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/pricing-table" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |