oliverwahl/undefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Our Services - OpSurge</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 'opsurge-orange': '#FF6B35',17 'opsurge-dark': '#2E2E2E',18 'opsurge-blue': '#3A86FF',19 'opsurge-teal': '#00C9B1',20 'opsurge-yellow': '#FFD166',21 'opsurge-light': '#F5F5F5',22 }23 }24 }25 }26 </script>27 <style>28 .nav-link:hover {29 color: #FF6B35 !important;30 }31 .gradient-text {32 background: linear-gradient(90deg, #FF6B35, #3A86FF);33 -webkit-background-clip: text;34 background-clip: text;35 color: transparent;36 }37 .service-card:hover {38 transform: translateY(-10px);39 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);40 }41 .tab-content {42 display: none;43 }44 .tab-content.active {45 display: block;46 animation: fadeIn 0.5s ease-in-out;47 }48 @keyframes fadeIn {49 from { opacity: 0; }50 to { opacity: 1; }51 }52 </style>53</head>54<body class="bg-opsurge-light font-sans">55 <!-- Navigation -->56 <nav class="bg-opsurge-dark text-white py-6 fixed w-full z-50">57 <div class="container mx-auto px-6 flex justify-between items-center">58 <a href="index.html" class="text-2xl font-bold gradient-text">OpSurge</a>59 <div class="hidden md:flex space-x-8">60 <a href="index.html" class="nav-link text-white hover:text-opsurge-orange transition">Home</a>61 <a href="about.html" class="nav-link text-white hover:text-opsurge-orange transition">About</a>62 <a href="services.html" class="nav-link text-white hover:text-opsurge-orange transition">Services</a>63 <a href="case-studies.html" class="nav-link text-white hover:text-opsurge-orange transition">Case Studies</a>64 <a href="book-call.html" class="bg-opsurge-orange px-6 py-2 rounded-full hover:bg-opacity-90 transition">Book a Call</a>65 </div>66 <button class="md:hidden focus:outline-none" id="menu-toggle">67 <i data-feather="menu" class="text-white"></i>68 </button>69 </div>70 <!-- Mobile Menu -->71 <div class="md:hidden hidden bg-opsurge-dark w-full py-4 px-6" id="mobile-menu">72 <div class="flex flex-col space-y-4">73 <a href="index.html" class="text-white hover:text-opsurge-orange transition">Home</a>74 <a href="about.html" class="text-white hover:text-opsurge-orange transition">About</a>75 <a href="services.html" class="text-white hover:text-opsurge-orange transition">Services</a>76 <a href="case-studies.html" class="text-white hover:text-opsurge-orange transition">Case Studies</a>77 <a href="book-call.html" class="bg-opsurge-orange px-6 py-2 rounded-full text-center hover:bg-opacity-90 transition w-40">Book a Call</a>78 </div>79 </div>80 </nav>81 82 <!-- Hero Section -->83 <section class="pt-32 pb-20 bg-gradient-to-r from-opsurge-dark to-opsurge-blue text-white">84 <div class="container mx-auto px-6">85 <div class="max-w-3xl">86 <h1 class="text-4xl md:text-6xl font-bold mb-6">Our Services</h1>87 <p class="text-xl md:text-2xl opacity-90">Comprehensive digital growth solutions tailored to your business needs.</p>88 </div>89 </div>90 </section>91 92 <!-- Services Tabs -->93 <section class="py-20 bg-white">94 <div class="container mx-auto px-6">95 <div class="flex flex-col md:flex-row mb-16">96 <div class="md:w-1/3 mb-10 md:mb-0">97 <h2 class="text-3xl md:text-4xl font-bold mb-6 text-opsurge-dark">How We Help You Grow</h2>98 <p class="text-gray-600">Our suite of services is designed to address every aspect of digital growth, from customer acquisition to operational efficiency.</p>99 </div>100 <div class="md:w-2/3">101 <div class="flex flex-wrap border-b border-gray-200">102 <button class="tab-btn px-6 py-3 font-medium text-gray-600 hover:text-opsurge-orange transition border-b-2 border-transparent hover:border-opsurge-orange" data-tab="marketing">Growth Marketing</button>103 <button class="tab-btn px-6 py-3 font-medium text-gray-600 hover:text-opsurge-orange transition border-b-2 border-transparent hover:border-opsurge-orange" data-tab="tech">Tech Solutions</button>104 <button class="tab-btn px-6 py-3 font-medium text-gray-600 hover:text-opsurge-orange transition border-b-2 border-transparent hover:border-opsurge-orange" data-tab="analytics">Data & Analytics</button>105 </div>106 </div>107 </div>108 109 <!-- Marketing Tab -->110 <div id="marketing" class="tab-content active">111 <div class="grid md:grid-cols-2 gap-12 mb-16">112 <div>113 <h3 class="text-2xl font-bold mb-6 text-opsurge-dark">Accelerate Your Customer Acquisition</h3>114 <p class="text-gray-600 mb-6">Our data-driven marketing strategies are designed to identify and exploit your most profitable growth channels, scaling your customer base while optimizing acquisition costs.</p>115 <p class="text-gray-600 mb-8">We combine cutting-edge tools with creative campaign strategies to drive qualified traffic, boost conversions, and maximize your marketing ROI.</p>116 <a href="book-call.html" class="inline-flex items-center bg-opsurge-orange text-white px-8 py-3 rounded-full hover:bg-opacity-90 transition font-medium">117 Get Marketing Consultation118 <i data-feather="arrow-right" class="ml-2"></i>119 </a>120 </div>121 <div>122 <img src="http://static.photos/technology/1024x576/5" alt="Growth Marketing" class="rounded-xl shadow-xl">123 </div>124 </div>125 <div class="grid md:grid-cols-3 gap-8">126 <div class="service-card bg-opsurge-light p-8 rounded-xl transition duration-300">127 <div class="bg-opsurge-yellow bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">128 <i data-feather="dollar-sign" class="text-opsurge-yellow w-8 h-8"></i>129 </div>130 <h4 class="text-xl font-bold mb-4 text-opsurge-dark">Paid Advertising</h4>131 <p class="text-gray-600">Precision-targeted campaigns across Google, Facebook, LinkedIn, and emerging platforms.</p>132 </div>133 <div class="service-card bg-opsurge-light p-8 rounded-xl transition duration-300">134 <div class="bg-opsurge-blue bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">135 <i data-feather="search" class="text-opsurge-blue w-8 h-8"></i>136 </div>137 <h4 class="text-xl font-bold mb-4 text-opsurge-dark">SEO & Content</h4>138 <p class="text-gray-600">Sustainable organic growth through technical optimization and strategic content.</p>139 </div>140 <div class="service-card bg-opsurge-light p-8 rounded-xl transition duration-300">141 <div class="bg-opsurge-teal bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">142 <i data-feather="mail" class="text-opsurge-teal w-8 h-8"></i>143 </div>144 <h4 class="text-xl font-bold mb-4 text-opsurge-dark">Email Automation</h4>145 <p class="text-gray-600">Convert more leads with personalized, behavior-triggered email sequences.</p>146 </div>147 </div>148 </div>149 150 <!-- Tech Solutions Tab -->151 <div id="tech" class="tab-content">152 <div class="grid md:grid-cols-2 gap-12 mb-16">153 <div>154 <h3 class="text-2xl font-bold mb-6 text-opsurge-dark">Build Scalable Digital Infrastructure</h3>155 <p class="text-gray-600 mb-6">Our technical solutions eliminate growth bottlenecks by automating workflows, integrating systems, and building custom software tailored to your business needs.</p>156 <p class="text-gray-600 mb-8">We architect technology stacks that scale with your business, reducing operational costs while improving efficiency and customer experience.</p>157 <a href="book-call.html" class="inline-flex items-center bg-opsurge-orange text-white px-8 py-3 rounded-full hover:bg-opacity-90 transition font-medium">158 Discuss Your Tech Needs159 <i data-feather="arrow-right" class="ml-2"></i>160 </a>161 </div>162 <div>163 <img src="http://static.photos/technology/1024x576/6" alt="Tech Solutions" class="rounded-xl shadow-xl">164 </div>165 </div>166 <div class="grid md:grid-cols-3 gap-8">167 <div class="service-card bg-opsurge-light p-8 rounded-xl transition duration-300">168 <div class="bg-opsurge-blue bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">169 <i data-feather="cpu" class="text-opsurge-blue w-8 h-8"></i>170 </div>171 <h4 class="text-xl font-bold mb-4 text-opsurge-dark">Custom Software</h4>172 <p class="text-gray-600">Tailored applications that solve your unique business challenges and scale with your growth.</p>173 </div>174 <div class="service-card bg-opsurge-light p-8 rounded-xl transition duration-300">175 <div class="bg-opsurge-teal bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">176 <i data-feather="git-merge" class="text-opsurge-teal w-8 h-8"></i>177 </div>178 <h4 class="text-xl font-bold mb-4 text-opsurge-dark">System Integration</h4>179 <p class="text-gray-600">Seamlessly connect your existing tools and platforms for streamlined operations.</p>180 </div>181 <div class="service-card bg-opsurge-light p-8 rounded-xl transition duration-300">182 <div class="bg-opsurge-yellow bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">183 <i data-feather="repeat" class="text-opsurge-yellow w-8 h-8"></i>184 </div>185 <h4 class="text-xl font-bold mb-4 text-opsurge-dark">Process Automation</h4>186 <p class="text-gray-600">Eliminate manual tasks with smart automation that saves time and reduces errors.</p>187 </div>188 </div>189 </div>190 191 <!-- Data & Analytics Tab -->192 <div id="analytics" class="tab-content">193 <div class="grid md:grid-cols-2 gap-12 mb-16">194 <div>195 <h3 class="text-2xl font-bold mb-6 text-opsurge-dark">Data-Driven Decision Making</h3>196 <p class="text-gray-600 mb-6">We transform your raw data into actionable intelligence, providing the insights you need to make better business decisions and identify new growth opportunities.</p>197 <p class="text-gray-600 mb-8">Our analytics solutions give you real-time visibility into performance metrics across all channels and departments.</p>198 <a href="book-call.html" class="inline-flex items-center bg-opsurge-orange text-white px-8 py-3 rounded-full hover:bg-opacity-90 transition font-medium">199 Unlock Your Data Potential200 <i data-feather="arrow-right" class="ml-2"></i>201 </a>202 </div>203 <div>204 <img src="http://static.photos/technology/1024x576/7" alt="Data & Analytics" class="rounded-xl shadow-xl">205 </div>206 </div>207 <div class="grid md:grid-cols-3 gap-8">208 <div class="service-card bg-opsurge-light p-8 rounded-xl transition duration-300">209 <div class="bg-opsurge-teal bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">210 <i data-feather="bar-chart-2" class="text-opsurge-teal w-8 h-8"></i>211 </div>212 <h4 class="text-xl font-bold mb-4 text-opsurge-dark">Performance Dashboards</h4>213 <p class="text-gray-600">Customized data visualizations that highlight your most important KPIs.</p>214 </div>215 <div class="service-card bg-opsurge-light p-8 rounded-xl transition duration-300">216 <div class="bg-opsurge-blue bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">217 <i data-feather="target" class="text-opsurge-blue w-8 h-8"></i>218 </div>219 <h4 class="text-xl font-bold mb-4 text-opsurge-dark">Predictive Analytics</h4>220 <p class="text-gray-600">AI-powered forecasting models to anticipate trends and customer behavior.</p>221 </div>222 <div class="service-card bg-opsurge-light p-8 rounded-xl transition duration-300">223 <div class="bg-opsurge-yellow bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">224 <i data-feather="users" class="text-opsurge-yellow w-8 h-8"></i>225 </div>226 <h4 class="text-xl font-bold mb-4 text-opsurge-dark">Customer Insights</h4>227 <p class="text-gray-600">Deep analysis of customer segments, behavior patterns, and lifetime value.</p>228 </div>229 </div>230 </div>231 </div>232 </section>233 234 <!-- Process Section -->235 <section class="py-20 bg-opsurge-light">236 <div class="container mx-auto px-6">237 <div class="text-center mb-16">238 <h2 class="text-3xl md:text-4xl font-bold mb-4 text-opsurge-dark">Our Process</h2>239 <p class="text-xl text-gray-600 max-w-2xl mx-auto">A proven framework for delivering exceptional results</p>240 </div>241 <div class="grid md:grid-cols-4 gap-8">242 <div class="text-center">243 <div class="bg-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-md border-4 border-opsurge-orange">244 <span class="text-2xl font-bold text-opsurge-dark">1</span>245 </div>246 <h3 class="text-xl font-bold mb-3 text-opsurge-dark">Discover</h3>247 <p class="text-gray-600">In-depth analysis of your business, goals, and challenges.</p>248 </div>249 <div class="text-center">250 <div class="bg-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-md border-4 border-opsurge-blue">251 <span class="text-2xl font-bold text-opsurge-dark">2</span>252 </div>253 <h3 class="text-xl font-bold mb-3 text-opsurge-dark">Strategize</h3>254 <p class="text-gray-600">Custom growth roadmap with clear objectives and KPIs.</p>255 </div>256 <div class="text-center">257 <div class="bg-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-md border-4 border-opsurge-teal">258 <span class="text-2xl font-bold text-opsurge-dark">3</span>259 </div>260 <h3 class="text-xl font-bold mb-3 text-opsurge-dark">Execute</h3>261 <p class="text-gray-600">Implementation with agile methodologies for rapid iteration.</p>262 </div>263 <div class="text-center">264 <div class="bg-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-md border-4 border-opsurge-yellow">265 <span class="text-2xl font-bold text-opsurge-dark">4</span>266 </div>267 <h3 class="text-xl font-bold mb-3 text-opsurge-dark">Optimize</h3>268 <p class="text-gray-600">Continuous testing and refinement for maximum performance.</p>269 </div>270 </div>271 </div>272 </section>273 274 <!-- Testimonials Section -->275 <section class="py-20 bg-white">276 <div class="container mx-auto px-6">277 <div class="text-center mb-16">278 <h2 class="text-3xl md:text-4xl font-bold mb-4 text-opsurge-dark">Client Success Stories</h2>279 <p class="text-xl text-gray-600 max-w-2xl mx-auto">Don't just take our word for it</p>280 </div>281 <div class="grid md:grid-cols-2 gap-8">282 <div class="bg-opsurge-light p-8 rounded-xl">283 <div class="flex items-center mb-6">284 <div class="w-16 h-16 rounded-full overflow-hidden mr-4">285 <img src="http://static.photos/people/200x200/4" alt="Client" class="w-full h-full object-cover">286 </div>287 <div>288 <h4 class="font-bold text-opsurge-dark">Sarah Johnson</h4>289 <p class="text-opsurge-blue">CEO, TechStart Inc.</p>290 </div>291 </div>292 <p class="text-gray-600 italic mb-6">"OpSurge transformed our customer acquisition strategy, delivering a 3X increase in qualified leads while reducing our CAC by 40%. Their growth marketing expertise is unmatched."</p>293 <div class="flex text-opsurge-yellow">294 <i data-feather="star" class="w-5 h-5 fill-current"></i>295 <i data-feather="star" class="w-5 h-5 fill-current"></i>296 <i data-feather="star" class="w-5 h-5 fill-current"></i>297 <i data-feather="star" class="w-5 h-5 fill-current"></i>298 <i data-feather="star" class="w-5 h-5 fill-current"></i>299 </div>300 </div>301 <div class="bg-opsurge-light p-8 rounded-xl">302 <div class="flex items-center mb-6">303 <div class="w-16 h-16 rounded-full overflow-hidden mr-4">304 <img src="http://static.photos/people/200x200/5" alt="Client" class="w-full h-full object-cover">305 </div>306 <div>307 <h4 class="font-bold text-opsurge-dark">Michael Chen</h4>308 <p class="text-opsurge-blue">COO, GrowthLabs</p>309 </div>310 </div>311 <p class="text-gray-600 italic mb-6">"The custom CRM system OpSurge built for us automated 80% of our manual processes, saving us hundreds of hours per month and improving our team's productivity dramatically."</p>312 <div class="flex text-opsurge-yellow">313 <i data-feather="star" class="w-5 h-5 fill-current"></i>314 <i data-feather="star" class="w-5 h-5 fill-current"></i>315 <i data-feather="star" class="w-5 h-5 fill-current"></i>316 <i data-feather="star" class="w-5 h-5 fill-current"></i>317 <i data-feather="star" class="w-5 h-5 fill-current"></i>318 </div>319 </div>320 </div>321 <div class="text-center mt-12">322 <a href="case-studies.html" class="inline-flex items-center bg-opsurge-dark text-white px-8 py-3 rounded-full hover:bg-opacity-90 transition font-medium">323 Read more case studies324 <i data-feather="chevron-right" class="ml-2"></i>325 </a>326 </div>327 </div>328 </section>329 330 <!-- CTA Section -->331 <section class="py-20 bg-gradient-to-r from-opsurge-orange to-opsurge-blue text-white">332 <div class="container mx-auto px-6 text-center">333 <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Accelerate Your Growth?</h2>334 <p class="text-xl mb-10 max-w-2xl mx-auto">Let's discuss how we can help you achieve your business objectives with our comprehensive services.</p>335 <a href="book-call.html" class="inline-flex items-center bg-white text-opsurge-dark px-8 py-4 rounded-full hover:bg-opacity-90 transition font-medium">336 Book a Free Consultation337 <i data-feather="calendar" class="ml-2"></i>338 </a>339 </div>340 </section>341 342 <!-- Footer -->343 <footer class="bg-opsurge-dark text-white py-16">344 <div class="container mx-auto px-6">345 <div class="grid md:grid-cols-4 gap-8 mb-12">346 <div>347 <h3 class="text-xl font-bold mb-6">OpSurge</h3>348 <p class="text-gray-400 mb-6">Digital growth solutions for ambitious businesses.</p>349 <div class="flex space-x-4">350 <a href="#" class="text-gray-400 hover:text-white transition">351 <i data-feather="twitter"></i>352 </a>353 <a href="#" class="text-gray-400 hover:text-white transition">354 <i data-feather="linkedin"></i>355 </a>356 <a href="#" class="text-gray-400 hover:text-white transition">357 <i data-feather="facebook"></i>358 </a>359 <a href="#" class="text-gray-400 hover:text-white transition">360 <i data-feather="instagram"></i>361 </a>362 </div>363 </div>364 <div>365 <h3 class="text-lg font-semibold mb-6">Company</h3>366 <ul class="space-y-3">367 <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>368 <li><a href="case-studies.html" class="text-gray-400 hover:text-white transition">Case Studies</a></li>369 <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>370 <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>371 </ul>372 </div>373 <div>374 <h3 class="text-lg font-semibold mb-6">Services</h3>375 <ul class="space-y-3">376 <li><a href="services.html#marketing" class="text-gray-400 hover:text-white transition">Growth Marketing</a></li>377 <li><a href="services.html#tech" class="text-gray-400 hover:text-white transition">Tech Solutions</a></li>378 <li><a href="services.html#analytics" class="text-gray-400 hover:text-white transition">Data & Analytics</a></li>379 <li><a href="services.html" class="text-gray-400 hover:text-white transition">All Services</a></li>380 </ul>381 </div>382 <div>383 <h3 class="text-lg font-semibold mb-6">Contact</h3>384 <ul class="space-y-3">385 <li class="flex items-center text-gray-400">386 <i data-feather="mail" class="mr-2"></i>387 hello@opsurge.com388 </li>389 <li class="flex items-center text-gray-400">390 <i data-feather="phone" class="mr-2"></i>391 (555) 123-4567392 </li>393 <li class="flex items-center text-gray-400">394 <i data-feather="map-pin" class="mr-2"></i>395 123 Growth St, San Francisco396 </li>397 </ul>398 </div>399 </div>400 <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">401 <p class="text-gray-400 mb-4 md:mb-0">© 2023 OpSurge. All rights reserved.</p>402 <div class="flex space-x-6">403 <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>404 <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>405 </div>406 </div>407 </div>408 </footer>409 410 <script>411 // Tab Functionality412 const tabBtns = document.querySelectorAll('.tab-btn');413 const tabContents = document.querySelectorAll('.tab-content');414 415 tabBtns.forEach(btn => {416 btn.addEventListener('click', () => {417 // Remove active class from all buttons and contents418 tabBtns.forEach(btn => btn.classList.remove('border-opsurge-orange', 'text-opsurge-orange'));419 tabContents.forEach(content => content.classList.remove('active'));420 421 // Add active class to clicked button422 btn.classList.add('border-opsurge-orange', 'text-opsurge-orange');423 424 // Show corresponding content425 const tabId = btn.getAttribute('data-tab');426 document.getElementById(tabId).classList.add('active');427 });428 });429 430 // Set first tab as active by default431 if (tabBtns.length > 0) {432 tabBtns[0].classList.add('border-opsurge-orange', 'text-opsurge-orange');433 }434 435 // Mobile Menu Toggle436 document.getElementById('menu-toggle').addEventListener('click', function() {437 const menu = document.getElementById('mobile-menu');438 menu.classList.toggle('hidden');439 });440 441 // Close mobile menu when clicking a link442 document.querySelectorAll('#mobile-menu a').forEach(link => {443 link.addEventListener('click', function() {444 document.getElementById('mobile-menu').classList.add('hidden');445 });446 });447 448 // Initialize Feather Icons449 feather.replace();450 </script>451</body>452</html>453