Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Our Services | BusinessHub - Digital Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .service-card { transition: all 0.3s ease; } | |
| .service-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } | |
| .price-card { transition: all 0.3s ease; } | |
| .price-card:hover { transform: scale(1.02); } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="index.html" class="flex items-center gap-2"> | |
| <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"> | |
| <i data-lucide="building-2" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <span class="font-bold text-xl text-gray-900">BusinessHub</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="index.html" class="text-gray-600 hover:text-blue-600 font-medium transition">Home</a> | |
| <a href="about.html" class="text-gray-600 hover:text-blue-600 font-medium transition">About</a> | |
| <a href="services.html" class="text-blue-600 font-medium">Services</a> | |
| <a href="portfolio.html" class="text-gray-600 hover:text-blue-600 font-medium transition">Results</a> | |
| <a href="contact.html" class="bg-blue-600 text-white px-5 py-2 rounded-lg font-medium hover:bg-blue-700 transition">Contact Us</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button onclick="toggleMenu()" class="text-gray-600 hover:text-gray-900 focus:outline-none"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="index.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Home</a> | |
| <a href="about.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">About</a> | |
| <a href="services.html" class="block px-3 py-2 text-blue-600 font-medium bg-blue-50 rounded-md">Services</a> | |
| <a href="portfolio.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Results</a> | |
| <a href="contact.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Page Header --> | |
| <section class="bg-gradient-to-r from-blue-600 to-cyan-500 text-white pt-32 pb-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Complete Digital Solutions</h1> | |
| <p class="text-xl text-blue-100 max-w-3xl mx-auto">From getting your first website to implementing AI automation—we provide everything your business needs to succeed online.</p> | |
| </div> | |
| </section> | |
| <!-- Main Services Grid --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1: Online Migration --> | |
| <div class="service-card bg-white border border-gray-200 rounded-2xl p-8"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="globe" class="w-8 h-8 text-blue-600"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Business Online Setup</h3> | |
| <p class="text-gray-600 mb-6 leading-relaxed">Take your brick-and-mortar business digital. We handle everything from domain registration to launch.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-blue-600"></i> | |
| <span>Professional Website Design</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-blue-600"></i> | |
| <span>Domain & Hosting Setup</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-blue-600"></i> | |
| <span>Google Business Profile</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-blue-600"></i> | |
| <span>Email Setup (G Suite/Office 365)</span> | |
| </li> | |
| </ul> | |
| <a href="contact.html" class="inline-flex items-center text-blue-600 font-semibold hover:text-blue-700"> | |
| Get Started <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 2: E-commerce --> | |
| <div class="service-card bg-white border border-gray-200 rounded-2xl p-8"> | |
| <div class="w-16 h-16 bg-cyan-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="shopping-cart" class="w-8 h-8 text-cyan-600"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">E-commerce Solutions</h3> | |
| <p class="text-gray-600 mb-6 leading-relaxed">Sell products online with a store that converts visitors into customers. Shopify, WooCommerce, or custom solutions.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-cyan-600"></i> | |
| <span>Store Setup & Design</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-cyan-600"></i> | |
| <span>Payment Gateway Integration</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-cyan-600"></i> | |
| <span>Inventory Management</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-cyan-600"></i> | |
| <span>Shipping & Tax Configuration</span> | |
| </li> | |
| </ul> | |
| <a href="contact.html" class="inline-flex items-center text-cyan-600 font-semibold hover:text-cyan-700"> | |
| Learn More <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 3: AI Integration --> | |
| <div class="service-card bg-white border border-gray-200 rounded-2xl p-8"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="brain" class="w-8 h-8 text-purple-600"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">AI Integration</h3> | |
| <p class="text-gray-600 mb-6 leading-relaxed">Leverage artificial intelligence to automate tasks, improve customer service, and gain competitive advantage.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-purple-600"></i> | |
| <span>AI Chatbots & Customer Service</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-purple-600"></i> | |
| <span>Content Generation Tools</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-purple-600"></i> | |
| <span>Data Analysis & Insights</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-purple-600"></i> | |
| <span>Workflow Automation</span> | |
| </li> | |
| </ul> | |
| <a href="contact.html" class="inline-flex items-center text-purple-600 font-semibold hover:text-purple-700"> | |
| Explore AI <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 4: Digital Marketing --> | |
| <div class="service-card bg-white border border-gray-200 rounded-2xl p-8"> | |
| <div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="trending-up" class="w-8 h-8 text-green-600"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Digital Marketing</h3> | |
| <p class="text-gray-600 mb-6 leading-relaxed">Get found online and convert visitors into customers with data-driven marketing strategies.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i> | |
| <span>SEO & Local Search Optimization</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i> | |
| <span>Social Media Management</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i> | |
| <span>Google & Facebook Ads</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i> | |
| <span>Email Marketing Automation</span> | |
| </li> | |
| </ul> | |
| <a href="contact.html" class="inline-flex items-center text-green-600 font-semibold hover:text-green-700"> | |
| Grow Your Reach <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 5: Business Consulting --> | |
| <div class="service-card bg-white border border-gray-200 rounded-2xl p-8"> | |
| <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="users" class="w-8 h-8 text-orange-600"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Business Consulting</h3> | |
| <p class="text-gray-600 mb-6 leading-relaxed">Strategic guidance to optimize your operations, reduce costs, and identify new revenue streams.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-orange-600"></i> | |
| <span>Digital Transformation Roadmap</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-orange-600"></i> | |
| <span>Process Optimization</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-orange-600"></i> | |
| <span>Tech Stack Recommendations</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-orange-600"></i> | |
| <span>ROI Analysis & Reporting</span> | |
| </li> | |
| </ul> | |
| <a href="contact.html" class="inline-flex items-center text-orange-600 font-semibold hover:text-orange-700"> | |
| Book Consultation <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 6: Tools & Training --> | |
| <div class="service-card bg-white border border-gray-200 rounded-2xl p-8"> | |
| <div class="w-16 h-16 bg-pink-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="graduation-cap" class="w-8 h-8 text-pink-600"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Tools & Training</h3> | |
| <p class="text-gray-600 mb-6 leading-relaxed">Empower your team with the knowledge and tools to manage your digital presence confidently.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-pink-600"></i> | |
| <span>Software Training Sessions</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-pink-600"></i> | |
| <span>CRM Setup & Management</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-pink-600"></i> | |
| <span>Video Tutorial Library</span> | |
| </li> | |
| <li class="flex items-center gap-2 text-gray-600"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-pink-600"></i> | |
| <span>Documentation & SOPs</span> | |
| </li> | |
| </ul> | |
| <a href="contact.html" class="inline-flex items-center text-pink-600 font-semibold hover:text-pink-700"> | |
| Learn More <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Packages Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Business Starter Packages</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Everything you need to get online, bundled for convenience and savings.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Basic Package --> | |
| <div class="price-card bg-white rounded-2xl p-8 border border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Starter</h3> | |
| <div class="text-4xl font-bold text-blue-600 mb-4">$2,499</div> | |
| <p class="text-gray-600 mb-6">Perfect for small businesses just getting started.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start gap-2 text-gray-600"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i> | |
| <span>5-Page Professional Website</span> | |
| </li> | |
| <li class="flex items-start gap-2 text-gray-600"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i> | |
| <span>Mobile Responsive Design</span> | |
| </li> | |
| <li class="flex items-start gap-2 text-gray-600"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i> | |
| <span>Google Business Setup</span> | |
| </li> | |
| <li class="flex items-start gap-2 text-gray-600"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i> | |
| <span>Basic SEO Optimization</span> | |
| </li> | |
| <li class="flex items-start gap-2 text-gray-600"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i> | |
| <span>30 Days Support</span> | |
| </li> | |
| </ul> | |
| <a href="contact.html" class="block text-center border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 hover:text-white transition"> | |
| Get Started | |
| </a> | |
| </div> | |
| <!-- Professional Package --> | |
| <div class="price-card bg-blue-600 rounded-2xl p-8 text-white relative transform scale-105 shadow-xl"> | |
| <div class="absolute top-0 right-0 bg-yellow-400 text-gray-900 text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div> | |
| <h3 class="text-xl font-bold mb-2">Professional</h3> | |
| <div class="text-4xl font-bold mb-4">$4,999</div> | |
| <p class="text-blue-100 mb-6">For businesses ready to sell online and automate.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i> | |
| <span>Everything in Starter, plus:</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i> | |
| <span>E-commerce Store Setup</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i> | |
| <span>Payment Gateway Integration</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i> | |
| <span>AI Chatbot Setup</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i> | |
| <span>Email Marketing Setup</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i> | |
| <span>90 Days Support</span> | |
| </li> | |
| </ul> | |
| <a href="contact.html" class="block text-center bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition"> | |
| Get Started | |
| </a> | |
| </div> | |
| <!-- Enterprise Package --> | |
| <div class="price-card bg-white rounded-2xl p-8 border border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise</h3> | |
| <div class="text-4xl font-bold text-blue-600 mb-4">Custom</div> | |
| <p class="text-gray-600 mb-6">Tailored solutions for complex requirements.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start gap-2 text-gray-600"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i> | |
| <span>Everything in Professional</span> | |
| </li> | |
| <li class="flex items-start gap-2 text-gray-600"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i> | |
| <span>Custom Software Development</span> | |
| </li> | |
| <li class="flex items-start gap-2 text-gray-600"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i> | |
| <span>Advanced AI Integration</span> | |
| </li> | |
| <li class="flex items-start gap-2 text-gray-600"> | |
| <i data-lucide="check" class="w-5 h- |