Spaces:

docto41
/

hust-bee

Running

App Files Files Community

hust-bee / index.html

docto41

Add 3 files

894ae2a verified 10 months ago

raw

history blame contribute delete

39.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hustbee – Premium Hosting & WHMCS Solutions</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">
	<style>
	.gradient-bg {
	background: linear-gradient(135deg, #6e8efb, #a777e3);
	}
	.hosting-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);
	}
	.feature-icon {
	transition: all 0.3s ease;
	}
	.feature-card:hover .feature-icon {
	transform: scale(1.1);
	color: #6e8efb;
	}
	.pulse {
	animation: pulse 2s infinite;
	}
	@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(110, 142, 251, 0.7); }
	70% { box-shadow: 0 0 0 10px rgba(110, 142, 251, 0); }
	100% { box-shadow: 0 0 0 0 rgba(110, 142, 251, 0); }
	}
	</style>
	</head>
	<body class="font-sans antialiased text-gray-800">
	<!-- Navigation -->
	<nav class="bg-white shadow-lg">
	<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">
	<i class="fas fa-bolt text-purple-600 text-2xl mr-2"></i>
	<span class="text-xl font-bold text-gray-900">Hustbee</span>
	</div>
	<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
	<a href="#" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
	<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Hosting</a>
	<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">WHMCS</a>
	<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Domains</a>
	<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Support</a>
	</div>
	</div>
	<div class="hidden sm:ml-6 sm:flex sm:items-center">
	<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">
	<i class="fas fa-user-circle mr-1"></i> Login
	</a>
	<a href="#" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
	<i class="fas fa-cart-plus mr-2"></i> Order Now
	</a>
	</div>
	<div class="-mr-2 flex items-center sm:hidden">
	<button type="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-purple-500" aria-controls="mobile-menu" aria-expanded="false">
	<span class="sr-only">Open main menu</span>
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Mobile menu -->
	<div class="sm:hidden hidden" id="mobile-menu">
	<div class="pt-2 pb-3 space-y-1">
	<a href="#" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
	<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Hosting</a>
	<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">WHMCS</a>
	<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Domains</a>
	<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Support</a>
	<div class="pt-4 pb-3 border-t border-gray-200">
	<div class="flex items-center px-4">
	<div class="flex-shrink-0">
	<i class="fas fa-user-circle text-gray-400 text-2xl"></i>
	</div>
	<div class="ml-3">
	<div class="text-base font-medium text-gray-800">Welcome back!</div>
	<div class="text-sm font-medium text-gray-500">Sign in to your account</div>
	</div>
	</div>
	<div class="mt-3 space-y-1">
	<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign in</a>
	<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Register</a>
	</div>
	</div>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<div class="gradient-bg text-white">
	<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
	<div class="text-center">
	<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
	Premium Web Hosting & WHMCS Solutions
	</h1>
	<p class="mt-6 max-w-lg mx-auto text-xl">
	Lightning-fast hosting with automated WHMCS billing. Perfect for agencies and resellers.
	</p>
	<div class="mt-10 flex justify-center space-x-4">
	<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-purple-700 bg-white hover:bg-gray-50">
	<i class="fas fa-server mr-2"></i> Explore Plans
	</a>
	<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-800 hover:bg-purple-700">
	<i class="fas fa-play-circle mr-2"></i> Watch Demo
	</a>
	</div>
	</div>
	</div>
	</div>

	<!-- Stats Section -->
	<div class="bg-gray-50">
	<div class="max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8">
	<div class="max-w-4xl mx-auto text-center">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
	Trusted by thousands of businesses
	</h2>
	<p class="mt-3 text-xl text-gray-500">
	Our infrastructure powers websites and billing systems for clients worldwide.
	</p>
	</div>
	<div class="mt-10 grid grid-cols-2 gap-8 md:grid-cols-4">
	<div class="text-center">
	<div class="text-4xl font-extrabold text-purple-600">99.9%</div>
	<div class="mt-2 text-sm font-medium text-gray-500">Uptime</div>
	</div>
	<div class="text-center">
	<div class="text-4xl font-extrabold text-purple-600">10K+</div>
	<div class="mt-2 text-sm font-medium text-gray-500">Clients</div>
	</div>
	<div class="text-center">
	<div class="text-4xl font-extrabold text-purple-600">24/7</div>
	<div class="mt-2 text-sm font-medium text-gray-500">Support</div>
	</div>
	<div class="text-center">
	<div class="text-4xl font-extrabold text-purple-600">45s</div>
	<div class="mt-2 text-sm font-medium text-gray-500">Avg. Response</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Hosting Plans -->
	<div class="bg-white py-16 sm:py-24">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
	Flexible Hosting Plans
	</h2>
	<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
	Choose the perfect hosting solution for your needs
	</p>
	</div>

	<div class="mt-16 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
	<!-- Starter Plan -->
	<div class="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col hosting-card transition-all duration-300">
	<div class="flex-1">
	<h3 class="text-xl font-semibold text-gray-900">Starter</h3>
	<p class="mt-4 flex items-baseline text-gray-900">
	<span class="text-5xl font-extrabold tracking-tight">$4.99</span>
	<span class="ml-1 text-xl font-semibold">/month</span>
	</p>
	<p class="mt-6 text-gray-500">Perfect for small websites and blogs</p>
	<ul role="list" class="mt-6 space-y-4">
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">1 Website</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">10GB SSD Storage</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">Unmetered Bandwidth</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">Free SSL Certificate</span>
	</li>
	</ul>
	</div>
	<a href="#" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium bg-gray-100 text-purple-700 hover:bg-gray-200">
	Get started
	</a>
	</div>

	<!-- Business Plan (Featured) -->
	<div class="relative p-8 bg-white border-2 border-purple-500 rounded-2xl shadow-sm flex flex-col hosting-card transition-all duration-300">
	<div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
	<span class="inline-flex items-center px-4 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
	Most popular
	</span>
	</div>
	<div class="flex-1">
	<h3 class="text-xl font-semibold text-gray-900">Business</h3>
	<p class="mt-4 flex items-baseline text-gray-900">
	<span class="text-5xl font-extrabold tracking-tight">$9.99</span>
	<span class="ml-1 text-xl font-semibold">/month</span>
	</p>
	<p class="mt-6 text-gray-500">Ideal for growing businesses</p>
	<ul role="list" class="mt-6 space-y-4">
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">Unlimited Websites</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">50GB SSD Storage</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">Unmetered Bandwidth</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">Free SSL Certificate</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">Free Domain (1 year)</span>
	</li>
	</ul>
	</div>
	<a href="#" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium bg-purple-600 text-white hover:bg-purple-700">
	Get started
	</a>
	</div>

	<!-- Enterprise Plan -->
	<div class="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col hosting-card transition-all duration-300">
	<div class="flex-1">
	<h3 class="text-xl font-semibold text-gray-900">Enterprise</h3>
	<p class="mt-4 flex items-baseline text-gray-900">
	<span class="text-5xl font-extrabold tracking-tight">$19.99</span>
	<span class="ml-1 text-xl font-semibold">/month</span>
	</p>
	<p class="mt-6 text-gray-500">For high-traffic websites</p>
	<ul role="list" class="mt-6 space-y-4">
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">Unlimited Websites</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">100GB NVMe Storage</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">Unmetered Bandwidth</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">Free SSL Certificate</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">Free Domain (1 year)</span>
	</li>
	<li class="flex">
	<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
	<span class="text-gray-500">Priority Support</span>
	</li>
	</ul>
	</div>
	<a href="#" class="mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium bg-gray-100 text-purple-700 hover:bg-gray-200">
	Get started
	</a>
	</div>
	</div>
	</div>
	</div>

	<!-- WHMCS Section -->
	<div class="bg-gray-50 py-16 sm:py-24">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:text-center">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
	WHMCS Billing Automation
	</h2>
	<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
	Complete automation for your hosting business
	</p>
	</div>

	<div class="mt-20">
	<div class="space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:gap-y-12">
	<!-- Feature 1 -->
	<div class="feature-card group relative p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
	<div class="flex items-center">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 feature-icon">
	<i class="fas fa-robot text-xl"></i>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">Automated Billing</h3>
	</div>
	</div>
	<p class="mt-4 text-sm text-gray-500">
	Automatically invoice clients, process payments, and send reminders. Reduce manual work and get paid on time.
	</p>
	</div>

	<!-- Feature 2 -->
	<div class="feature-card group relative p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
	<div class="flex items-center">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 feature-icon">
	<i class="fas fa-server text-xl"></i>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">Server Integration</h3>
	</div>
	</div>
	<p class="mt-4 text-sm text-gray-500">
	Seamlessly integrate with cPanel, Plesk, and other control panels. Automate account provisioning and suspension.
	</p>
	</div>

	<!-- Feature 3 -->
	<div class="feature-card group relative p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
	<div class="flex items-center">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 feature-icon">
	<i class="fas fa-ticket-alt text-xl"></i>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">Support System</h3>
	</div>
	</div>
	<p class="mt-4 text-sm text-gray-500">
	Built-in helpdesk with ticket automation, knowledgebase, and live chat integration. Keep clients happy.
	</p>
	</div>

	<!-- Feature 4 -->
	<div class="feature-card group relative p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
	<div class="flex items-center">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 feature-icon">
	<i class="fas fa-chart-line text-xl"></i>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">Business Insights</h3>
	</div>
	</div>
	<p class="mt-4 text-sm text-gray-500">
	Powerful reporting and analytics to track revenue, client growth, and server performance.
	</p>
	</div>

	<!-- Feature 5 -->
	<div class="feature-card group relative p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
	<div class="flex items-center">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 feature-icon">
	<i class="fas fa-globe text-xl"></i>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">Multi-language</h3>
	</div>
	</div>
	<p class="mt-4 text-sm text-gray-500">
	Support clients worldwide with built-in multi-language support and currency conversion.
	</p>
	</div>

	<!-- Feature 6 -->
	<div class="feature-card group relative p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
	<div class="flex items-center">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 feature-icon">
	<i class="fas fa-plug text-xl"></i>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">API & Extensions</h3>
	</div>
	</div>
	<p class="mt-4 text-sm text-gray-500">
	Extensive API and marketplace with hundreds of extensions to customize your billing system.
	</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- CTA Section -->
	<div class="bg-white">
	<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
	<div class="bg-purple-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
	<div class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
	<div class="lg:self-center">
	<h2 class="text-3xl font-extrabold text-white sm:text-4xl">
	<span class="block">Ready to launch your hosting business?</span>
	</h2>
	<p class="mt-4 text-lg leading-6 text-purple-200">
	Get started with our complete hosting and WHMCS solution today. Everything you need in one package.
	</p>
	<a href="#" class="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-purple-600 hover:bg-purple-50">
	<i class="fas fa-rocket mr-2"></i> Get Started Now
	</a>
	</div>
	</div>
	<div class="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
	<img class="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20" src="https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="App screenshot">
	</div>
	</div>
	</div>
	</div>

	<!-- Testimonials -->
	<div class="bg-gray-50 py-16 sm:py-24">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:text-center">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
	What our customers say
	</h2>
	</div>

	<div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
	<!-- Testimonial 1 -->
	<div class="bg-white p-6 rounded-lg shadow">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson">
	</div>
	<div class="ml-4">
	<h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
	<p class="text-purple-600">Web Design Agency</p>
	</div>
	</div>
	<div class="mt-4">
	<p class="text-gray-600 italic">"Hustbee's WHMCS integration saved us hours of manual work each week. The automated billing and client management is a game-changer for our agency."</p>
	</div>
	<div class="mt-4 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="bg-white p-6 rounded-lg shadow">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
	</div>
	<div class="ml-4">
	<h4 class="text-lg font-medium text-gray-900">Michael Chen</h4>
	<p class="text-purple-600">E-commerce Store</p>
	</div>
	</div>
	<div class="mt-4">
	<p class="text-gray-600 italic">"Our website loads 3x faster after migrating to Hustbee. The support team helped us with every step of the migration process."</p>
	</div>
	<div class="mt-4 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="bg-white p-6 rounded-lg shadow">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez">
	</div>
	<div class="ml-4">
	<h4 class="text-lg font-medium text-gray-900">Emma Rodriguez</h4>
	<p class="text-purple-600">Hosting Reseller</p>
	</div>
	</div>
	<div class="mt-4">
	<p class="text-gray-600 italic">"As a hosting reseller, Hustbee's WHMCS solution has helped me scale my business effortlessly. The automation features are incredible."</p>
	</div>
	<div class="mt-4 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>
	</div>

	<!-- FAQ Section -->
	<div class="bg-white py-16 sm:py-24">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:text-center">
	<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
	Frequently asked questions
	</h2>
	</div>

	<div class="mt-12">
	<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3">
	<!-- FAQ 1 -->
	<div>
	<dt class="text-lg leading-6 font-medium text-gray-900">
	What is WHMCS?
	</dt>
	<dd class="mt-2 text-base text-gray-500">
	WHMCS is a complete client management and billing automation platform designed for web hosting businesses. It automates billing, provisioning, and support.
	</dd>
	</div>

	<!-- FAQ 2 -->
	<div>
	<dt class="text-lg leading-6 font-medium text-gray-900">
	Do you offer a free trial?
	</dt>
	<dd class="mt-2 text-base text-gray-500">
	Yes! We offer a 30-day money-back guarantee on all hosting plans. For WHMCS, we provide a 14-day free trial so you can test all features.
	</dd>
	</div>

	<!-- FAQ 3 -->
	<div>
	<dt class="text-lg leading-6 font-medium text-gray-900">
	Can I migrate my existing website?
	</dt>
	<dd class="mt-2 text-base text-gray-500">
	Absolutely! Our migration team will help transfer your website for free when you sign up for any Business or Enterprise plan.
	</dd>
	</div>

	<!-- FAQ 4 -->
	<div>
	<dt class="text-lg leading-6 font-medium text-gray-900">
	What payment methods do you accept?
	</dt>
	<dd class="mt-2 text-base text-gray-500">
	We accept all major credit cards, PayPal, bank transfers, and cryptocurrency. WHMCS supports over 20 payment gateways.
	</dd>
	</div>

	<!-- FAQ 5 -->
	<div>
	<dt class="text-lg leading-6 font-medium text-gray-900">
	How is your support?
	</dt>
	<dd class="mt-2 text-base text-gray-500">
	We provide 24/7 support via live chat, email, and phone. Our average response time is under 45 seconds for priority issues.
	</dd>
	</div>

	<!-- FAQ 6 -->
	<div>
	<dt class="text-lg leading-6 font-medium text-gray-900">
	Can I upgrade my plan later?
	</dt>
	<dd class="mt-2 text-base text-gray-500">
	Yes, you can upgrade or downgrade at any time with no downtime. We'll prorate the difference in cost.
	</dd>
	</div>
	</dl>
	</div>
	</div>
	</div>

	<!-- Footer -->
	<footer class="bg-gray-800">
	<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
	<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
	<div>
	<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Hosting</h3>
	<ul class="mt-4 space-y-4">
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Shared Hosting</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">VPS Hosting</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Dedicated Servers</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">WordPress Hosting</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">WHMCS</h3>
	<ul class="mt-4 space-y-4">
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Features</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Pricing</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Integrations</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Extensions</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3>
	<ul class="mt-4 space-y-4">
	<li><a href="#" class="text-base text-gray-400 hover:text-white">About Us</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Contact</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Legal</h3>
	<ul class="mt-4 space-y-4">
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Privacy</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Terms</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">SLA</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">DMCA</a></li>
	</ul>
	</div>
	</div>
	<div class="mt-12 border-t border-gray-700 pt-8">
	<div class="md:flex md:items-center md:justify-between">
	<div class="flex justify-center md:order-2 space-x-6">
	<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-instagram"></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-youtube"></i>
	</a>
	</div>
	<div class="mt-8 md:mt-0 md:order-1">
	<p class="text-center text-base text-gray-400">
	© 2023 Hustbee Hosting. All rights reserved.
	</p>
	</div>
	</div>
	</div>
	</div>
	</footer>

	<!-- Live Chat Button -->
	<div class="fixed bottom-6 right-6">
	<button class="p-4 bg-purple-600 text-white rounded-full shadow-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 pulse">
	<i class="fas fa-comment-dots text-xl"></i>
	</button>
	</div>

	<script>
	// Mobile menu toggle
	document.querySelector('nav 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();
	document.querySelector(this.getAttribute('href')).scrollIntoView({
	behavior: 'smooth'
	});
	});
	});

	// Add animation to pricing cards on scroll
	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('animate-fade-in-up');
	}
	});
	}, {threshold: 0.1});

	document.querySelectorAll('.hosting-card').forEach(card => {
	observer.observe(card);
	});
	</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=docto41/hust-bee" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>