| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Website Maintenance Plans</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| :root { |
| --primary-color: #010d72; |
| --primary-hover: #020a5a; |
| --highlight-color: rgba(1, 13, 114, 0.05); |
| } |
| |
| body { |
| font-family: system-ui, -apple-system, Arial, sans-serif; |
| color: var(--primary-color); |
| background-color: #f9fafb; |
| } |
| |
| .pricing-table { |
| width: 100%; |
| overflow-x: auto; |
| -webkit-overflow-scrolling: touch; |
| scrollbar-width: thin; |
| scrollbar-color: var(--primary-color) #f1f1f1; |
| } |
| |
| .pricing-table::-webkit-scrollbar { |
| height: 8px; |
| } |
| |
| .pricing-table::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| border-radius: 10px; |
| } |
| |
| .pricing-table::-webkit-scrollbar-thumb { |
| background-color: var(--primary-color); |
| border-radius: 10px; |
| } |
| |
| .popular-plan { |
| position: relative; |
| box-shadow: 0 0 0 2px var(--primary-color); |
| } |
| |
| .popular-badge { |
| position: absolute; |
| top: -12px; |
| right: 20px; |
| background-color: var(--primary-color); |
| color: white; |
| padding: 2px 12px; |
| border-radius: 20px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| animation: pulse 2s infinite; |
| } |
| |
| .btn-primary { |
| background-color: var(--primary-color); |
| transition: all 0.3s ease; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| } |
| |
| .btn-primary:hover { |
| background-color: var(--primary-hover); |
| transform: translateY(-2px); |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
| } |
| |
| .plan-header { |
| transition: transform 0.3s ease; |
| } |
| |
| .plan-header:hover { |
| transform: scale(1.02); |
| } |
| |
| .highlight-row { |
| background-color: var(--highlight-color); |
| } |
| |
| @keyframes pulse { |
| 0% { |
| box-shadow: 0 0 0 0 rgba(1, 13, 114, 0.4); |
| } |
| 70% { |
| box-shadow: 0 0 0 8px rgba(1, 13, 114, 0); |
| } |
| 100% { |
| box-shadow: 0 0 0 0 rgba(1, 13, 114, 0); |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .pricing-table { |
| display: block; |
| width: 100%; |
| overflow-x: auto; |
| } |
| |
| .plan-header { |
| min-width: 200px; |
| } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen 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 sm:text-4xl font-bold mb-4">Website Maintenance Plans</h1> |
| <p class="text-lg max-w-3xl mx-auto">Choose the perfect plan to keep your website secure, updated, and running smoothly</p> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
| <div class="pricing-table"> |
| <table class="w-full" role="table" aria-label="Website maintenance pricing plans"> |
| <thead> |
| <tr role="row"> |
| <th scope="col" role="columnheader" class="p-6 text-left border-b border-gray-200"></th> |
| <th scope="col" role="columnheader" class="p-6 text-left border-b border-gray-200"> |
| <div class="plan-header"> |
| <h2 class="text-xl font-bold">Basic</h2> |
| </div> |
| </th> |
| <th scope="col" role="columnheader" class="p-6 text-left border-b border-gray-200 relative popular-plan"> |
| <div class="popular-badge">Most Popular</div> |
| <div class="plan-header"> |
| <h2 class="text-xl font-bold">Standard</h2> |
| </div> |
| </th> |
| <th scope="col" role="columnheader" class="p-6 text-left border-b border-gray-200"> |
| <div class="plan-header"> |
| <h2 class="text-xl font-bold">Premium</h2> |
| </div> |
| </th> |
| <th scope="col" role="columnheader" class="p-6 text-left border-b border-gray-200"> |
| <div class="plan-header"> |
| <h2 class="text-xl font-bold">Go Bazinga</h2> |
| </div> |
| </th> |
| </tr> |
| </thead> |
| <tbody> |
| |
| <tr role="row" class="border-b border-gray-100 highlight-row"> |
| <td role="cell" class="p-4 font-medium">Price (USD/month)</td> |
| <td role="cell" class="p-4"> |
| <div class="text-2xl font-bold">$67</div> |
| </td> |
| <td role="cell" class="p-4"> |
| <div class="text-2xl font-bold">$137</div> |
| </td> |
| <td role="cell" class="p-4"> |
| <div class="text-2xl font-bold">$287</div> |
| </td> |
| <td role="cell" class="p-4"> |
| <div class="text-2xl font-bold">$637–$787</div> |
| </td> |
| </tr> |
| |
| |
| <tr role="row" class="border-b border-gray-100"> |
| <td role="cell" class="p-4 font-medium">CMS Updates</td> |
| <td role="cell" class="p-4">Core CMS & plugin updates (monthly)</td> |
| <td role="cell" class="p-4">CMS/plugin updates biweekly</td> |
| <td role="cell" class="p-4">Weekly CMS/plugin updates with advanced testing</td> |
| <td role="cell" class="p-4">All-inclusive real-time updates</td> |
| </tr> |
| |
| <tr role="row" class="border-b border-gray-100 highlight-row"> |
| <td role="cell" class="p-4 font-medium">Security</td> |
| <td role="cell" class="p-4">Security monitoring & basic malware scans</td> |
| <td role="cell" class="p-4">24/7 security monitoring with quicker response</td> |
| <td role="cell" class="p-4">Advanced security (firewall, intrusion prevention)</td> |
| <td role="cell" class="p-4">Enterprise-grade security (WAF, DDoS protection)</td> |
| </tr> |
| |
| <tr role="row" class="border-b border-gray-100"> |
| <td role="cell" class="p-4 font-medium">Backups</td> |
| <td role="cell" class="p-4">Weekly backups (automated)</td> |
| <td role="cell" class="p-4">Daily backups (off-site)</td> |
| <td role="cell" class="p-4">Daily off-site backups + rapid recovery</td> |
| <td role="cell" class="p-4">Real-time/cloud backups with instant restore</td> |
| </tr> |
| |
| <tr role="row" class="border-b border-gray-100 highlight-row"> |
| <td role="cell" class="p-4 font-medium">Monitoring</td> |
| <td role="cell" class="p-4">Basic uptime monitoring and alerts</td> |
| <td role="cell" class="p-4">Uptime monitoring with email/SMS alerts</td> |
| <td role="cell" class="p-4">Continuous uptime monitoring (24/7) with priority SLA</td> |
| <td role="cell" class="p-4">Custom monitoring, technical SEO upkeep</td> |
| </tr> |
| |
| <tr role="row" class="border-b border-gray-100"> |
| <td role="cell" class="p-4 font-medium">Content Updates</td> |
| <td role="cell" class="p-4">Up to 3-4 hours/month</td> |
| <td role="cell" class="p-4">Up to 6-8 hours/month</td> |
| <td role="cell" class="p-4">Up to 10-14 hours/month + E-commerce support</td> |
| <td role="cell" class="p-4">Up to 20-30 hours/month</td> |
| </tr> |
| |
| <tr role="row" class="border-b border-gray-100 highlight-row"> |
| <td role="cell" class="p-4 font-medium">Design Support</td> |
| <td role="cell" class="p-4">Basic Graphic Design Support</td> |
| <td role="cell" class="p-4">Couple of hours of Graphic Design Support</td> |
| <td role="cell" class="p-4">Extended Graphic Design Support</td> |
| <td role="cell" class="p-4">Extensive Design Support with dedicated designer</td> |
| </tr> |
| |
| <tr role="row" class="border-b border-gray-100"> |
| <td role="cell" class="p-4 font-medium">Additional Features</td> |
| <td role="cell" class="p-4">-</td> |
| <td role="cell" class="p-4">Monthly speed optimization reports</td> |
| <td role="cell" class="p-4">Monthly performance tuning</td> |
| <td role="cell" class="p-4">Dedicated 24/7 priority support team, tailored services</td> |
| </tr> |
| |
| |
| <tr role="row"> |
| <td role="cell" class="p-4"></td> |
| <td role="cell" class="p-4"> |
| <button class="btn-primary w-full py-3 px-6 rounded-lg text-white font-semibold"> |
| Get Started Now |
| </button> |
| </td> |
| <td role="cell" class="p-4"> |
| <button class="btn-primary w-full py-3 px-6 rounded-lg text-white font-semibold"> |
| Get Started Now |
| </button> |
| </td> |
| <td role="cell" class="p-4"> |
| <button class="btn-primary w-full py-3 px-6 rounded-lg text-white font-semibold"> |
| Get Started Now |
| </button> |
| </td> |
| <td role="cell" class="p-4"> |
| <button class="btn-primary w-full py-3 px-6 rounded-lg text-white font-semibold"> |
| Get Started Now |
| </button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center text-sm text-gray-500"> |
| <p>All plans come with a 30-day money-back guarantee. Contact us for enterprise solutions.</p> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.querySelectorAll('tbody tr').forEach(row => { |
| row.addEventListener('mouseenter', function() { |
| this.classList.add('bg-gray-50'); |
| }); |
| |
| row.addEventListener('mouseleave', function() { |
| this.classList.remove('bg-gray-50'); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.btn-primary').forEach(button => { |
| button.addEventListener('mousedown', function() { |
| this.style.transform = 'translateY(0)'; |
| this.style.boxShadow = '0 1px 2px rgba(0, 0, 0, 0.1)'; |
| }); |
| |
| button.addEventListener('mouseup', function() { |
| this.style.transform = 'translateY(-2px)'; |
| this.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.15)'; |
| }); |
| |
| button.addEventListener('mouseleave', function() { |
| this.style.transform = ''; |
| this.style.boxShadow = ''; |
| }); |
| }); |
| </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/website-maintenance-services-table" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
