Spaces:
Running
Running
Got it ✅ You want me to **take your flyer prompt style** and then **convert it into a professional landing page prompt** for a **BPO company website** (with all services) in a **modern tech startup branding style**. Here’s a polished **prompt** you can directly use for generating/designing the landing page 👇 --- ### **Landing Page Prompt for BPO Company** "Minimalist modern tech landing page design for a BPO company. Sleek and futuristic layout with gradient background (blue, purple, black). Bold, clean typography with professional startup branding style. Eye-catching hero section with headline: 'Empowering Businesses with Next-Gen BPO Solutions'. Subheadline: 'Your Trusted Partner in Customer Support, Back-Office, and Business Process Outsourcing'. Sections to include: * **Hero Banner:** Big headline + call-to-action button (Get Started). * **About Us:** Short company intro with AI-driven and tech-powered BPO vision. * **Services Section:** Modern grid/cards layout showcasing services like Customer Support, Technical Support, Data Entry, Virtual Assistance, HR Outsourcing, Finance & Accounting, IT Support, Sales & Lead Generation. * **Why Choose Us:** Futuristic icons + points (24/7 Support, AI-Powered Solutions, Cost-Effective, Scalable Teams). * **Case Studies / Testimonials:** Client success stories in sleek card style. * **CTA Section:** Gradient background with bold text – 'Scale Smarter with Our BPO Expertise – Get in Touch Today'. * **Footer:** Contact info, social media links, email subscription. Style: Futuristic, abstract gradients, AI/startup theme, professional and eye-catching, optimized for LinkedIn and social media branding. Responsive design for desktop and mobile." --- 👉 Do you want me to also **write the real landing page content** (headings + service descriptions) for your BPO company so you can directly use it on your site? - Initial Deployment
7628dbe
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NexusBPO | Next-Gen Business Process Outsourcing</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: '#2563eb', | |
| secondary: '#7c3aed', | |
| dark: '#0f172a', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #0f172a 100%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #2563eb; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm fixed w-full z-10"> | |
| <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"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-2xl font-bold text-primary">Nexus<span class="text-secondary">BPO</span></span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#home" class="nav-link text-gray-900 px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="#about" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">About</a> | |
| <a href="#services" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Services</a> | |
| <a href="#why-us" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Why Us</a> | |
| <a href="#testimonials" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Success Stories</a> | |
| <a href="#contact" class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-50">Home</a> | |
| <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">About</a> | |
| <a href="#services" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Services</a> | |
| <a href="#why-us" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Why Us</a> | |
| <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Success Stories</a> | |
| <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Contact</a> | |
| <div class="mt-4 px-3"> | |
| <a href="#contact" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-blue-700"> | |
| Get Started | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="gradient-bg pt-32 pb-20 px-4 sm:px-6 lg:px-8 text-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="md:grid md:grid-cols-2 md:gap-8 items-center"> | |
| <div class="mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">Empowering Businesses with Next-Gen BPO Solutions</h1> | |
| <p class="text-xl md:text-2xl text-blue-100 mb-8">Your Trusted Partner in Customer Support, Back-Office, and Business Process Outsourcing</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="px-8 py-3 bg-white text-primary font-semibold rounded-lg hover:bg-gray-100 transition duration-300 text-center">Get Started</a> | |
| <a href="#services" class="px-8 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-primary transition duration-300 text-center">Our Services</a> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="BPO Team" class="rounded-xl shadow-2xl transform rotate-1 hover:rotate-0 transition duration-500"> | |
| <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg hidden md:block"> | |
| <div class="flex items-center"> | |
| <div class="p-3 bg-blue-50 rounded-full mr-3"> | |
| <i class="fas fa-headset text-primary text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">24/7 Support</p> | |
| <p class="font-bold text-dark">98% Satisfaction</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clients Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <p class="text-center text-gray-500 mb-8">Trusted by leading companies worldwide</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 items-center justify-center"> | |
| <img src="https://via.placeholder.com/150x60?text=Client+1" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300 mx-auto"> | |
| <img src="https://via.placeholder.com/150x60?text=Client+2" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300 mx-auto"> | |
| <img src="https://via.placeholder.com/150x60?text=Client+3" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300 mx-auto"> | |
| <img src="https://via.placeholder.com/150x60?text=Client+4" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300 mx-auto"> | |
| <img src="https://via.placeholder.com/150x60?text=Client+5" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300 mx-auto"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div class="mb-12 lg:mb-0"> | |
| <h2 class="text-3xl font-bold text-dark mb-6">Redefining BPO with AI-Driven Excellence</h2> | |
| <p class="text-gray-600 mb-6">At NexusBPO, we combine cutting-edge technology with human expertise to deliver unparalleled business process outsourcing solutions. Our mission is to help businesses scale efficiently while maintaining exceptional quality standards.</p> | |
| <p class="text-gray-600 mb-8">Founded in 2015, we've grown into a global leader in BPO services, serving clients across 15 countries. Our team of 500+ professionals is dedicated to transforming your business operations through innovative solutions.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check text-primary"></i> | |
| </div> | |
| <span class="text-gray-700">ISO 27001 Certified</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check text-primary"></i> | |
| </div> | |
| <span class="text-gray-700">GDPR Compliant</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-xl font-semibold text-dark mb-4">Our Core Values</h3> | |
| <div class="space-y-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Innovation</h4> | |
| <p class="mt-1 text-gray-600">Continuously evolving our solutions with the latest technologies.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-handshake"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Integrity</h4> | |
| <p class="mt-1 text-gray-600">Building trust through transparency and ethical practices.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Excellence</h4> | |
| <p class="mt-1 text-gray-600">Delivering superior quality in every service we provide.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden lg:block absolute -bottom-8 -right-8 bg-primary text-white p-6 rounded-lg shadow-xl"> | |
| <div class="text-3xl font-bold">8+</div> | |
| <div class="text-sm">Years Experience</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <span class="text-primary font-semibold">OUR SERVICES</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mt-2 mb-4">Comprehensive BPO Solutions</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">We offer end-to-end business process outsourcing services tailored to your specific needs and industry requirements.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 hover:border-primary border border-gray-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-headset text-primary text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark">Customer Support</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">24/7 multilingual customer service with AI-powered chatbots and live agent support to enhance your customer experience.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Inbound/Outbound Support | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Omnichannel Solutions | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Customer Satisfaction Monitoring | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 hover:border-primary border border-gray-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-laptop-code text-secondary text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark">Technical Support</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Expert technical assistance for your products and services, reducing resolution times and improving customer satisfaction.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Tier 1-3 Support | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Remote Troubleshooting | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Knowledge Base Management | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 hover:border-primary border border-gray-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-database text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark">Data Processing</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Accurate and efficient data entry, processing, and management services to keep your business information organized.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Data Entry & Cleansing | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Database Management | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Data Analytics Reporting | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service Card 4 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 hover:border-primary border border-gray-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-user-tie text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark">Virtual Assistance</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Professional virtual assistants to handle your administrative tasks, scheduling, and communication needs.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Executive Assistance | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Calendar Management | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Email & Document Handling | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service Card 5 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 hover:border-primary border border-gray-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-users text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark">HR Outsourcing</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Comprehensive human resources services including recruitment, payroll processing, and employee management.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Talent Acquisition | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Payroll & Benefits Admin | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Performance Management | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service Card 6 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300 hover:border-primary border border-gray-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-yellow-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-chart-line text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark">Sales & Lead Generation</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Targeted sales support and lead generation services to expand your customer base and increase revenue.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Cold Calling & Prospecting | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| CRM Management | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| Sales Pipeline Development | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Choose Us Section --> | |
| <section id="why-us" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <span class="text-primary font-semibold">WHY CHOOSE US</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mt-2 mb-4">The NexusBPO Advantage</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">We go beyond traditional outsourcing to deliver measurable value and transformative results for your business.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center"> | |
| <div class="bg-blue-50 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-clock text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-2">24/7 Availability</h3> | |
| <p class="text-gray-600">Round-the-clock support ensuring your business never sleeps, with teams working across time zones.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center"> | |
| <div class="bg-purple-50 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-robot text-secondary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-2">AI-Powered Solutions</h3> | |
| <p class="text-gray-600">Leveraging artificial intelligence to enhance efficiency, accuracy, and customer experience.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center"> | |
| <div class="bg-green-50 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-money-bill-wave text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-2">Cost Efficiency</h3> | |
| <p class="text-gray-600">Reduce operational costs by up to 60% while maintaining or improving service quality.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center"> | |
| <div class="bg-indigo-50 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-expand text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-2">Scalable Teams</h3> | |
| <p class="text-gray-600">Flexible staffing solutions that grow with your business needs, from 5 to 500+ agents.</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-gradient-to-r from-primary to-secondary rounded-xl p-8 text-white"> | |
| <div class="md:flex items-center justify-between"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-2">Ready to Transform Your Business?</h3> | |
| <p class="opacity-90">Get a free consultation with our BPO experts today.</p> | |
| </div> | |
| <a href="#contact" class="px-8 py-3 bg-white text-primary font-semibold rounded-lg hover:bg-gray-100 transition duration-300 inline-block">Schedule a Call</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <span class="text-primary font-semibold">SUCCESS STORIES</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mt-2 mb-4">What Our Clients Say</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">Don't just take our word for it - hear from businesses that have transformed their operations with NexusBPO.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-gray-50 p-6 rounded-xl border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-dark">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">CEO, TechSolutions Inc.</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">"NexusBPO transformed our customer support operations. Their AI-powered solutions reduced our response times by 70% while maintaining 98% customer satisfaction."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-gray-50 p-6 rounded-xl border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-dark">Michael Chen</h4> | |
| <p class="text-sm text-gray-500">COO, GlobalRetail</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">"The scalability of NexusBPO's services allowed us to handle seasonal spikes effortlessly. Their multilingual support team was instrumental in our European expansion."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-gray-50 p-6 rounded-xl border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-dark">Emily Rodriguez</h4> | |
| <p class="text-sm text-gray-500">Director of Operations, HealthPlus</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">"Their data processing team helped us digitize and organize 10 years of patient records with 99.9% accuracy. The security protocols gave us complete peace of mind."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="inline-flex items-center text-primary font-semibold hover:text-blue-700"> | |
| View More Case Studies | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section id="contact" class="gradient-bg py-20 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:grid md:grid-cols-2 md:gap-12 items-center"> | |
| <div class="mb-12 md:mb-0"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Scale Smarter with Our BPO Expertise</h2> | |
| <p class="text-xl text-blue-100 mb-8">Get in touch today to discuss how we can optimize your business processes and drive growth.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="tel:+18005551234" class="flex items-center justify-center px-6 py-3 bg-white text-primary font-semibold rounded-lg hover:bg-gray-100 transition duration-300"> | |
| <i class="fas fa-phone-alt mr-2"></i> +1 (800) 555-1234 | |
| </a> | |
| <a href="mailto:info@nexusbpo.com" class="flex items-center justify-center px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-primary transition duration-300"> | |
| <i class="fas fa-envelope mr-2"></i> Email Us | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-xl p-8"> | |
| <h3 class="text-2xl font-bold text-dark mb-6">Get a Free Consultation</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 text-sm font-medium mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your name"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 text-sm font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your email"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="company" class="block text-gray-700 text-sm font-medium mb-2">Company</label> | |
| <input type="text" id="company" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your company"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="services" class="block text-gray-700 text-sm font-medium mb-2">Services Needed</label> | |
| <select id="services" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="">Select services</option> | |
| <option value="customer-support">Customer Support</option> | |
| <option value="technical-support">Technical Support</option> | |
| <option value="data-processing">Data Processing</option> | |
| <option value="virtual-assistance">Virtual Assistance</option> | |
| <option value="hr-outsourcing">HR Outsourcing</option> | |
| <option value="sales-lead-gen">Sales & Lead Generation</option> | |
| <option value="multiple">Multiple Services</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full bg-primary text-white py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 font-medium"> | |
| Request Consultation | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white 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"> | |
| <div class="mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-4">Nexus<span class="text-secondary">BPO</span></h3> | |
| <p class="text-gray-400 mb-4">Next-generation business process outsourcing solutions powered by technology and human expertise.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Customer Support</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Technical Support</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Data Processing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Virtual Assistance</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">HR Outsourcing</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Case Studies</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Contact Us</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3"></i> | |
| <span>123 Business Ave, Suite 500<br>San Francisco, CA 94107</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3"></i> | |
| <span>+1 (800) 555-1234</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3"></i> | |
| <span>info@nexusbpo.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 NexusBPO. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| // Scroll to target | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Add shadow to navbar on scroll | |
| window.addEventListener('scroll', function() { | |
| const nav = document.querySelector('nav'); | |
| if (window.scrollY > 10) { | |
| nav.classList.add('shadow-lg'); | |
| } else { | |
| nav.classList.remove('shadow-lg'); | |
| } | |
| }); | |
| </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=udhyojakman/bpod" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |