SpectrumInfinite's picture
Add 3 files
af7d3e6 verified
Raw History Blame Contribute Delete
31.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spectrum Infinite - Website Design Service Tiers</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6366f1',
secondary: '#8b5cf6',
accent: '#ec4899',
dark: '#1e293b',
light: '#f8fafc'
},
boxShadow: {
'glow': '0 0 15px rgba(99, 102, 241, 0.3)',
'glow-lg': '0 0 25px rgba(99, 102, 241, 0.5)'
}
}
}
}
</script>
<style>
.feature-row:hover {
background-color: rgba(248, 250, 252, 0.05);
}
.popular-badge {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #1e293b;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -100px;
opacity: 0;
transition: opacity 0.3s;
font-size: 0.8rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.sticky-header {
position: sticky;
top: 0;
z-index: 10;
}
</style>
</head>
<body class="bg-dark text-gray-200 font-sans">
<div class="container mx-auto px-4 py-12 max-w-7xl">
<div class="text-center mb-16">
<h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-primary via-accent to-secondary bg-clip-text text-transparent mb-4">
Spectrum Infinite
</h1>
<h2 class="text-2xl md:text-3xl font-semibold text-light mb-6">Website Design Service Tiers</h2>
<p class="text-lg max-w-3xl mx-auto text-gray-300">
All prices start at the amounts shown; final quotes depend on exact scope & integrations.
<br>Choose the perfect package for your digital growth journey.
</p>
</div>
<div class="overflow-x-auto rounded-xl border border-gray-700 shadow-2xl">
<table class="w-full">
<thead class="bg-gray-800 sticky-header">
<tr>
<th class="py-6 px-4 text-left w-1/4 font-semibold text-gray-300 border-b border-gray-700">
Service Features
</th>
<th class="py-6 px-4 text-center w-1/5 border-b border-gray-700">
<div class="flex flex-col items-center">
<span class="text-xl font-bold text-primary">Go Dynamic</span>
<span class="text-2xl font-extrabold my-2">$987</span>
<span class="text-xs text-gray-400">Launch-ready for lean teams</span>
</div>
</th>
<th class="py-6 px-4 text-center w-1/5 border-b border-gray-700">
<div class="flex flex-col items-center">
<span class="text-xl font-bold text-secondary">Go Bazinga</span>
<span class="text-2xl font-extrabold my-2">$1,367</span>
<span class="text-xs text-gray-400">Smart growth for bold brands</span>
</div>
</th>
<th class="py-6 px-4 text-center w-1/5 border-b border-gray-700 relative">
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span class="popular-badge bg-gradient-to-r from-accent to-primary text-white text-xs font-bold px-3 py-1 rounded-full">
MOST POPULAR
</span>
</div>
<div class="flex flex-col items-center pt-2">
<span class="text-xl font-bold text-accent">Go Marathon</span>
<span class="text-2xl font-extrabold my-2">$1,997</span>
<span class="text-xs text-gray-400">Built to scale & convert</span>
</div>
</th>
<th class="py-6 px-4 text-center w-1/5 border-b border-gray-700">
<div class="flex flex-col items-center">
<span class="text-xl font-bold text-purple-400">Go Extreme</span>
<span class="text-2xl font-extrabold my-2">$2,997</span>
<span class="text-xs text-gray-400">Enterprise-grade performance</span>
</div>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
<!-- Core Features -->
<tr class="bg-gray-900">
<td colspan="5" class="py-3 px-4 font-bold text-gray-300">
<i class="fas fa-cube mr-2 text-primary"></i> Core Website Features
</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Pages included
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Number of designed and developed pages included in package</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">Up to <span class="font-bold">5</span> core pages</td>
<td class="py-4 px-4 text-center">Up to <span class="font-bold">8</span> pages</td>
<td class="py-4 px-4 text-center bg-gray-800">Up to <span class="font-bold text-accent">15</span> pages</td>
<td class="py-4 px-4 text-center">Up to <span class="font-bold">25</span> pages</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Custom UI/UX design
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Level of customization in the visual design and user experience</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">Semi-custom theme styling</td>
<td class="py-4 px-4 text-center">Fully custom homepage</td>
<td class="py-4 px-4 text-center bg-gray-800">Full-site custom UI kit & micro-interactions</td>
<td class="py-4 px-4 text-center">Bespoke design system + motion graphics</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Responsive build
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Device compatibility and testing procedures</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center"><i class="fas fa-check text-green-500"></i> Mobile & tablet</td>
<td class="py-4 px-4 text-center"><i class="fas fa-check text-green-500"></i> + device-lab testing</td>
<td class="py-4 px-4 text-center bg-gray-800"><i class="fas fa-check text-green-500"></i> + cross-browser QA</td>
<td class="py-4 px-4 text-center"><i class="fas fa-check text-green-500"></i> Pixel-perfect on 20+ break-points</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
CMS
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Content Management System options and features</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">WordPress / Webflow (pick one)</td>
<td class="py-4 px-4 text-center">Same + onboarding tutorial video</td>
<td class="py-4 px-4 text-center bg-gray-800">Same + custom content types</td>
<td class="py-4 px-4 text-center">Headless option (Next.js/Strapi)</td>
</tr>
<!-- Performance -->
<tr class="bg-gray-900">
<td colspan="5" class="py-3 px-4 font-bold text-gray-300">
<i class="fas fa-tachometer-alt mr-2 text-primary"></i> Performance & SEO
</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Speed optimisation
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Techniques used to improve website loading speed</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">Basic image compression</td>
<td class="py-4 px-4 text-center">+ Lazy-loading & code minify</td>
<td class="py-4 px-4 text-center bg-gray-800">+ CDN setup (Cloudflare)</td>
<td class="py-4 px-4 text-center">+ Core Web Vitals < 90th percentile</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Baseline SEO
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Search Engine Optimization features included</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">Meta tags & alt text</td>
<td class="py-4 px-4 text-center">+ Schema markup</td>
<td class="py-4 px-4 text-center bg-gray-800">+ Keyword mapping per page</td>
<td class="py-4 px-4 text-center">+ Technical audit & fixes</td>
</tr>
<!-- Content -->
<tr class="bg-gray-900">
<td colspan="5" class="py-3 px-4 font-bold text-gray-300">
<i class="fas fa-pen-fancy mr-2 text-primary"></i> Content & Media
</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Copywriting
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Professional writing and editing services included</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">2 pages light edit</td>
<td class="py-4 px-4 text-center">+ 5 pages copy polish</td>
<td class="py-4 px-4 text-center bg-gray-800">+ Persuasive rewrite all pages</td>
<td class="py-4 px-4 text-center">+ Conversion copy + micro-copy</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Stock imagery
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Premium stock photos included in package</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">Up to 5 premium images</td>
<td class="py-4 px-4 text-center">Up to 15</td>
<td class="py-4 px-4 text-center bg-gray-800">Up to 30 + light retouch</td>
<td class="py-4 px-4 text-center">Unlimited premium stock & custom icons</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Custom graphics
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Custom designed visual elements</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center"><i class="fas fa-times text-gray-500"></i></td>
<td class="py-4 px-4 text-center">2 hero banners</td>
<td class="py-4 px-4 text-center bg-gray-800">5 branded illustrations</td>
<td class="py-4 px-4 text-center">Full icon set & 3 explainer infographics</td>
</tr>
<!-- E-commerce -->
<tr class="bg-gray-900">
<td colspan="5" class="py-3 px-4 font-bold text-gray-300">
<i class="fas fa-shopping-cart mr-2 text-primary"></i> E-commerce & Functionality
</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
E-commerce setup
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Online store features and product capacity</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center"><i class="fas fa-times text-gray-500"></i></td>
<td class="py-4 px-4 text-center"><i class="fas fa-times text-gray-500"></i></td>
<td class="py-4 px-4 text-center bg-gray-800">Up to 50 skus, Stripe/PayPal</td>
<td class="py-4 px-4 text-center">Unlimited skus, advanced filters, POS sync</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Booking / calendar
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Scheduling and appointment features</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center"><i class="fas fa-times text-gray-500"></i></td>
<td class="py-4 px-4 text-center"><i class="fas fa-times text-gray-500"></i></td>
<td class="py-4 px-4 text-center bg-gray-800">1 booking flow</td>
<td class="py-4 px-4 text-center">Multi-calendar + timezone logic</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
CRM / email capture
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Customer relationship management tools</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">Embedded form</td>
<td class="py-4 px-4 text-center">+ Auto-mailer welcome</td>
<td class="py-4 px-4 text-center bg-gray-800">+ HubSpot / Zoho integration</td>
<td class="py-4 px-4 text-center">Bespoke CRM workflow automation</td>
</tr>
<!-- Analytics -->
<tr class="bg-gray-900">
<td colspan="5" class="py-3 px-4 font-bold text-gray-300">
<i class="fas fa-chart-line mr-2 text-primary"></i> Analytics & Testing
</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Analytics
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Visitor tracking and data analysis tools</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">Google Analytics setup</td>
<td class="py-4 px-4 text-center">+ GA4 event tracking</td>
<td class="py-4 px-4 text-center bg-gray-800">+ Hotjar heat-maps</td>
<td class="py-4 px-4 text-center">+ Looker Studio dashboard</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
A/B test framework
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Conversion rate optimization tools</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center"><i class="fas fa-times text-gray-500"></i></td>
<td class="py-4 px-4 text-center"><i class="fas fa-times text-gray-500"></i></td>
<td class="py-4 px-4 text-center bg-gray-800">Basic split-test ready</td>
<td class="py-4 px-4 text-center">3 live A/B tests + reporting</td>
</tr>
<!-- Security & Compliance -->
<tr class="bg-gray-900">
<td colspan="5" class="py-3 px-4 font-bold text-gray-300">
<i class="fas fa-shield-alt mr-2 text-primary"></i> Security & Compliance
</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Accessibility
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">ADA/WCAG compliance features</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">WCAG 2.0 AA basics</td>
<td class="py-4 px-4 text-center">Contrast & alt audits</td>
<td class="py-4 px-4 text-center bg-gray-800">Keyboard nav + ARIA</td>
<td class="py-4 px-4 text-center">WCAG 2.1 AAA & legal statement</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Security
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Website protection measures</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">SSL + daily backup</td>
<td class="py-4 px-4 text-center">+ Firewall hardening</td>
<td class="py-4 px-4 text-center bg-gray-800">+ 2-factor admin</td>
<td class="py-4 px-4 text-center">+ Pen-test & 24/7 monitoring</td>
</tr>
<!-- Support & Services -->
<tr class="bg-gray-900">
<td colspan="5" class="py-3 px-4 font-bold text-gray-300">
<i class="fas fa-headset mr-2 text-primary"></i> Support & Services
</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Revision rounds
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Number of design/development revision cycles included</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">2</td>
<td class="py-4 px-4 text-center">3</td>
<td class="py-4 px-4 text-center bg-gray-800">4</td>
<td class="py-4 px-4 text-center">Unlimited within 30 days</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Launch support
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Post-launch bug fixing period</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">7-day bug fix window</td>
<td class="py-4 px-4 text-center">14-day</td>
<td class="py-4 px-4 text-center bg-gray-800">30-day</td>
<td class="py-4 px-4 text-center">60-day concierge launch</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Maintenance add-on
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Ongoing website maintenance options</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">Optional, monthly</td>
<td class="py-4 px-4 text-center">1 month free</td>
<td class="py-4 px-4 text-center bg-gray-800">3 months free</td>
<td class="py-4 px-4 text-center">6 months free + priority queue</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Training
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Client education and onboarding resources</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">PDF quick-start</td>
<td class="py-4 px-4 text-center">60-min Zoom walkthrough</td>
<td class="py-4 px-4 text-center bg-gray-800">Recorded team workshop</td>
<td class="py-4 px-4 text-center">On-site or extended virtual training</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Dedicated manager
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Project management and strategic support</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">Shared account rep</td>
<td class="py-4 px-4 text-center">Priority email replies</td>
<td class="py-4 px-4 text-center bg-gray-800">Dedicated PM + monthly strategy call</td>
<td class="py-4 px-4 text-center">Senior strategist + fortnightly growth call</td>
</tr>
<tr class="feature-row">
<td class="py-4 px-4 font-medium">
<div class="flex items-center">
Turnaround (avg)
<div class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-500 text-xs"></i>
<span class="tooltiptext">Estimated project completion timeline</span>
</div>
</div>
</td>
<td class="py-4 px-4 text-center">2–3 weeks</td>
<td class="py-4 px-4 text-center">3–4 weeks</td>
<td class="py-4 px-4 text-center bg-gray-800">4–6 weeks</td>
<td class="py-4 px-4 text-center">6–8 weeks</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-16 text-center">
<h3 class="text-2xl font-bold text-light mb-6">Ready to Elevate Your Digital Presence?</h3>
<div class="flex flex-wrap justify-center gap-4">
<button class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full transition-all shadow-lg hover:shadow-glow">
Get a Custom Quote
</button>
<button class="border border-primary text-primary hover:bg-primary/10 font-bold py-3 px-8 rounded-full transition-all">
Schedule Consultation
</button>
</div>
</div>
</div>
<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-development-services-table" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>