Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>About Us | BusinessHub - Digital Transformation Experts</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; } | |
| .team-card { transition: all 0.3s ease; } | |
| .team-card:hover { transform: translateY(-5px); } | |
| </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-blue-600 font-medium">About</a> | |
| <a href="services.html" class="text-gray-600 hover:text-blue-600 font-medium transition">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-blue-600 font-medium bg-blue-50 rounded-md">About</a> | |
| <a href="services.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-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-gray-900 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">About BusinessHub</h1> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto">We're on a mission to democratize digital transformation for businesses of all sizes. From local shops to enterprise companies, we make going online simple, affordable, and profitable.</p> | |
| </div> | |
| </section> | |
| <!-- Our Story --> | |
| <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 gap-12 items-center"> | |
| <div> | |
| <img src="http://static.photos/office/800x600/42" alt="BusinessHub Team" class="rounded-2xl shadow-2xl w-full object-cover"> | |
| </div> | |
| <div> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Our Story</h2> | |
| <p class="text-gray-600 mb-4 text-lg leading-relaxed"> | |
| BusinessHub was founded in 2018 when we noticed a troubling gap: while large corporations could afford expensive digital agencies, small and medium businesses were being left behind in the digital revolution. | |
| </p> | |
| <p class="text-gray-600 mb-4 text-lg leading-relaxed"> | |
| We started with a simple belief: every business deserves access to world-class digital tools and expertise. What began as a small consulting firm has grown into a comprehensive digital transformation platform serving over 500 businesses across 20 countries. | |
| </p> | |
| <p class="text-gray-600 mb-6 text-lg leading-relaxed"> | |
| Today, we combine cutting-edge AI technology with hands-on human expertise to deliver solutions that are both powerful and practical. | |
| </p> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="border-l-4 border-blue-600 pl-4"> | |
| <div class="text-3xl font-bold text-blue-600">2018</div> | |
| <div class="text-gray-600">Year Founded</div> | |
| </div> | |
| <div class="border-l-4 border-blue-600 pl-4"> | |
| <div class="text-3xl font-bold text-blue-600">75+</div> | |
| <div class="text-gray-600">Expert Consultants</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- What Makes Us Different --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-blue-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">Why Businesses Choose Us</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">We don't just build websites or run ads—we become your long-term digital partner.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-lucide="handshake" class="w-6 h-6 text-blue-600"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-900 mb-2">Partnership Approach</h3> | |
| <p class="text-gray-600 text-sm">We work alongside you, not just for you. Your success is our success.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="w-12 h-12 bg-cyan-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-lucide="zap" class="w-6 h-6 text-cyan-600"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-900 mb-2">AI-Powered Tools</h3> | |
| <p class="text-gray-600 text-sm">Early access to AI solutions that automate tasks and unlock growth.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-lucide="users" class="w-6 h-6 text-purple-600"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-900 mb-2">Industry Expertise</h3> | |
| <p class="text-gray-600 text-sm">Specialized knowledge across retail, hospitality, professional services, and more.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-lucide="shield-check" class="w-6 h-6 text-green-600"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-900 mb-2">Results Guaranteed</h3> | |
| <p class="text-gray-600 text-sm">We measure success by your ROI. No fluff, just measurable outcomes.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Our Expertise Areas --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <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">Industries We Serve</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Tailored solutions for every sector</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-lucide="shopping-bag" class="w-8 h-8 text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Retail & E-commerce</h3> | |
| <p class="text-gray-600">Online stores, inventory management, and omnichannel retail solutions.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center"> | |
| <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-lucide="utensils" class="w-8 h-8 text-orange-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Restaurants & Hospitality</h3> | |
| <p class="text-gray-600">Online ordering, reservation systems, and delivery integration.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-lucide="briefcase" class="w-8 h-8 text-purple-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Professional Services</h3> | |
| <p class="text-gray-600">Booking systems, client portals, and credibility-building websites.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-lucide="factory" class="w-8 h-8 text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Manufacturing</h3> | |
| <p class="text-gray-600">B2B portals, supply chain digitization, and wholesale platforms.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center"> | |
| <div class="w-16 h-16 bg-cyan-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-lucide="heart-pulse" class="w-8 h-8 text-cyan-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Healthcare</h3> | |
| <p class="text-gray-600">HIPAA-compliant telehealth, scheduling, and patient management.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center"> | |
| <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-lucide="graduation-cap" class="w-8 h-8 text-pink-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Education & Training</h3> | |
| <p class="text-gray-600">LMS platforms, course selling, and virtual classroom setup.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team 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">Meet Our Leadership</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Experienced professionals dedicated to your success</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="team-card bg-white rounded-2xl overflow-hidden shadow-md"> | |
| <img src="http://static.photos/people/400x400/101" alt="CEO" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-900">Michael Torres</h3> | |
| <p class="text-blue-600 font-medium mb-3">CEO & Founder</p> | |
| <p class="text-gray-600 text-sm mb-4">Former digital strategist for Fortune 500 companies, now focused on helping SMBs compete in the digital age.</p> | |
| <div class="flex gap-3"> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="linkedin" class="w-5 h-5"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="twitter" class="w-5 h-5"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="team-card bg-white rounded-2xl overflow-hidden shadow-md"> | |
| <img src="http://static.photos/people/400x400/102" alt="COO" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-900">Sarah Chen</h3> | |
| <p class="text-blue-600 font-medium mb-3">Chief Operating Officer</p> | |
| <p class="text-gray-600 text-sm mb-4">Operations expert with 15 years scaling e-commerce platforms and digital service delivery.</p> | |
| <div class="flex gap-3"> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="linkedin" class="w-5 h-5"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="twitter" class="w-5 h-5"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="team-card bg-white rounded-2xl overflow-hidden shadow-md"> | |
| <img src="http://static.photos/people/400x400/103" alt="CTO" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-900">David Okonkwo</h3> | |
| <p class="text-blue-600 font-medium mb-3">Chief Technology Officer</p> | |
| <p class="text-gray-600 text-sm mb-4">AI researcher and full-stack architect passionate about making advanced tech accessible to all businesses.</p> | |
| <div class="flex gap-3"> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="linkedin" class="w-5 h-5"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="github" class="w-5 h-5"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-300 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <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-white">BusinessHub</span> | |
| </div> | |
| <p class="text-gray-400 mb-4 max-w-sm">Empowering businesses with digital transformation, e-commerce solutions, AI integration, and expert consulting services.</p> | |
| <div class="flex gap-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i data-lucide="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i data-lucide="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i data-lucide="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="hover:text-white transition">Home</a></li> | |
| <li><a href="about.html" class="hover:text-white transition">About Us</a></li> | |
| <li><a href="services.html" class="hover:text-white transition">Services</a></li> | |
| <li><a href="portfolio.html" class="hover:text-white transition">Results</a></li> | |
| <li><a href="contact.html" class="hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="privacy-policy.html" class="hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="terms-of-service.html" class="hover:text-white transition">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 text-center"> | |
| <p class="text-gray-500">© 2024 BusinessHub. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| lucide.createIcons(); | |
| function toggleMenu() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| } | |
| </script> | |
| </body> | |
| </html> |