Hugging Face's logo

Spaces:
JacobPerera
/
website
Running

App Files Community
website / index.html
JacobPerera's picture
JacobPerera
Add 2 files
c29df9f verified
raw
history blame contribute delete
77.7 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Central Cleaning Suppliers - Professional Cleaning 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>
/* Custom CSS */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-size: cover;
background-position: center;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.testimonial-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
}
.mobile-menu {
transition: all 0.3s ease;
}
.page-transition {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-lg sticky top-0 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">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-broom text-green-600 text-2xl mr-2"></i>
<span class="text-xl font-bold text-gray-800">Central Cleaning Suppliers</span>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" onclick="showPage('home')" class="text-green-600 font-medium px-3 py-2 rounded-md text-sm">Home</a>
<a href="#" onclick="showPage('about')" class="text-gray-700 hover:text-green-600 px-3 py-2 rounded-md text-sm">About</a>
<a href="#" onclick="showPage('products')" class="text-gray-700 hover:text-green-600 px-3 py-2 rounded-md text-sm">Products</a>
<a href="#" onclick="showPage('services')" class="text-gray-700 hover:text-green-600 px-3 py-2 rounded-md text-sm">Services</a>
<a href="#" onclick="showPage('contact')" class="text-gray-700 hover:text-green-600 px-3 py-2 rounded-md text-sm">Contact</a>
<button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
Get a Quote
</button>
</div>
<div class="md:hidden flex items-center">
<button onclick="toggleMobileMenu()" class="text-gray-700 hover:text-green-600 focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobileMenu" class="mobile-menu hidden md:hidden bg-white shadow-lg">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" onclick="showPage('home')" class="text-green-600 block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#" onclick="showPage('about')" class="text-gray-700 hover:text-green-600 block px-3 py-2 rounded-md text-base font-medium">About</a>
<a href="#" onclick="showPage('products')" class="text-gray-700 hover:text-green-600 block px-3 py-2 rounded-md text-base font-medium">Products</a>
<a href="#" onclick="showPage('services')" class="text-gray-700 hover:text-green-600 block px-3 py-2 rounded-md text-base font-medium">Services</a>
<a href="#" onclick="showPage('contact')" class="text-gray-700 hover:text-green-600 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
<button class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-base font-medium mt-2 transition duration-300">
Get a Quote
</button>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="pageContent" class="page-transition">
<!-- Home Page -->
<div id="home" class="page">
<!-- Hero Section -->
<section class="hero text-white py-20 md:py-32">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Professional Cleaning Solutions</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Supplying high-quality cleaning products and services for homes and businesses since 2005</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-md text-lg font-medium transition duration-300">
Our Products
</button>
<button class="bg-white hover:bg-gray-100 text-green-600 px-8 py-3 rounded-md text-lg font-medium transition duration-300">
Contact Us
</button>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Why Choose Central Cleaning Suppliers?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-award text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800">Premium Quality</h3>
<p class="text-gray-600">We source only the highest quality cleaning products from trusted manufacturers worldwide.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-truck text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800">Fast Delivery</h3>
<p class="text-gray-600">Get your cleaning supplies delivered quickly with our efficient logistics network.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-headset text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800">Expert Support</h3>
<p class="text-gray-600">Our team of cleaning experts is always ready to provide advice and recommendations.</p>
</div>
</div>
</div>
</section>
<!-- Popular Products Section -->
<section class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center mb-12">
<h2 class="text-3xl font-bold text-gray-800">Popular Products</h2>
<a href="#" onclick="showPage('products')" class="text-green-600 hover:text-green-700 font-medium">View All Products →</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Product 1 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Floor Cleaner" class="h-full object-contain">
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Professional Floor Cleaner</h3>
<p class="text-gray-600 text-sm mb-3">5L concentrated formula for all floor types</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$24.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Disinfectant Spray" class="h-full object-contain">
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Hospital-Grade Disinfectant</h3>
<p class="text-gray-600 text-sm mb-3">1L spray kills 99.9% of bacteria & viruses</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$12.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Microfiber Cloths" class="h-full object-contain">
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Premium Microfiber Cloths</h3>
<p class="text-gray-600 text-sm mb-3">Pack of 12 ultra-absorbent cloths</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$18.50</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Window Cleaner" class="h-full object-contain">
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Streak-Free Window Cleaner</h3>
<p class="text-gray-600 text-sm mb-3">750ml professional formula</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$9.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">What Our Clients Say</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="testimonial-card p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold">Sarah Johnson</h4>
<p class="text-gray-500 text-sm">Hotel Manager</p>
</div>
</div>
<p class="text-gray-700">"Central Cleaning Suppliers has transformed our housekeeping operations. Their products are effective and long-lasting, and their customer service is exceptional."</p>
<div class="flex mt-3 text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="testimonial-card p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold">Michael Chen</h4>
<p class="text-gray-500 text-sm">Office Facility Manager</p>
</div>
</div>
<p class="text-gray-700">"We've been using Central Cleaning for 5 years now. Their products help us maintain a spotless office environment while being environmentally friendly."</p>
<div class="flex mt-3 text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="testimonial-card p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold">Emily Rodriguez</h4>
<p class="text-gray-500 text-sm">Homeowner</p>
</div>
</div>
<p class="text-gray-700">"As a busy mom, I appreciate how effective their products are. A little goes a long way, and I love that they're safe for my kids and pets."</p>
<div class="flex mt-3 text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-green-600 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold mb-6">Ready to Transform Your Cleaning Routine?</h2>
<p class="text-xl mb-8 max-w-3xl mx-auto">Join thousands of satisfied customers who trust Central Cleaning Suppliers for their cleaning needs.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-white hover:bg-gray-100 text-green-600 px-8 py-3 rounded-md text-lg font-medium transition duration-300">
Shop Now
</button>
<button class="bg-green-700 hover:bg-green-800 text-white px-8 py-3 rounded-md text-lg font-medium transition duration-300">
Contact Our Team
</button>
</div>
</div>
</section>
</div>
<!-- About Page -->
<div id="about" class="page hidden">
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="md:w-1/2">
<img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Team" class="rounded-lg shadow-lg w-full">
</div>
<div class="md:w-1/2">
<h2 class="text-3xl font-bold text-gray-800 mb-6">About Central Cleaning Suppliers</h2>
<p class="text-gray-600 mb-4">Founded in 2005, Central Cleaning Suppliers has grown from a small local distributor to a leading provider of professional cleaning products and services across the region.</p>
<p class="text-gray-600 mb-4">Our mission is to provide businesses and homeowners with the highest quality cleaning solutions that are effective, safe, and environmentally responsible.</p>
<p class="text-gray-600 mb-6">We work directly with manufacturers to ensure we offer the best products at competitive prices, backed by our knowledgeable team's expertise.</p>
<div class="grid grid-cols-2 gap-4">
<div class="bg-green-50 p-4 rounded-lg">
<h3 class="font-semibold text-green-600 mb-1">15+ Years</h3>
<p class="text-gray-600 text-sm">Industry Experience</p>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<h3 class="font-semibold text-green-600 mb-1">500+</h3>
<p class="text-gray-600 text-sm">Products Available</p>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<h3 class="font-semibold text-green-600 mb-1">24/7</h3>
<p class="text-gray-600 text-sm">Customer Support</p>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<h3 class="font-semibold text-green-600 mb-1">1000+</h3>
<p class="text-gray-600 text-sm">Satisfied Clients</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our Core Values</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i class="fas fa-leaf text-green-600"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800">Sustainability</h3>
<p class="text-gray-600">We prioritize eco-friendly products and responsible business practices to minimize environmental impact.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i class="fas fa-medal text-green-600"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800">Quality</h3>
<p class="text-gray-600">Every product we carry meets rigorous standards for performance, safety, and durability.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i class="fas fa-hands-helping text-green-600"></i>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800">Customer Focus</h3>
<p class="text-gray-600">We build lasting relationships by understanding our customers' needs and delivering exceptional service.</p>
</div>
</div>
</div>
</section>
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Meet Our Leadership Team</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="text-center">
<div class="w-32 h-32 rounded-full overflow-hidden mx-auto mb-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="CEO" class="w-full h-full object-cover">
</div>
<h3 class="font-semibold text-lg">David Thompson</h3>
<p class="text-green-600 mb-2">Founder & CEO</p>
<p class="text-gray-600 text-sm">With 25 years in the cleaning industry, David leads our strategic vision.</p>
</div>
<div class="text-center">
<div class="w-32 h-32 rounded-full overflow-hidden mx-auto mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Operations" class="w-full h-full object-cover">
</div>
<h3 class="font-semibold text-lg">Lisa Park</h3>
<p class="text-green-600 mb-2">Operations Director</p>
<p class="text-gray-600 text-sm">Lisa ensures our supply chain and logistics run smoothly.</p>
</div>
<div class="text-center">
<div class="w-32 h-32 rounded-full overflow-hidden mx-auto mb-4">
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Sales" class="w-full h-full object-cover">
</div>
<h3 class="font-semibold text-lg">Robert Garcia</h3>
<p class="text-green-600 mb-2">Sales Director</p>
<p class="text-gray-600 text-sm">Robert leads our customer relationships and business development.</p>
</div>
<div class="text-center">
<div class="w-32 h-32 rounded-full overflow-hidden mx-auto mb-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Product" class="w-full h-full object-cover">
</div>
<h3 class="font-semibold text-lg">Sarah Williams</h3>
<p class="text-green-600 mb-2">Product Manager</p>
<p class="text-gray-600 text-sm">Sarah researches and tests all products before we offer them.</p>
</div>
</div>
</div>
</section>
</div>
<!-- Products Page -->
<div id="products" class="page hidden">
<section class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
<h2 class="text-3xl font-bold text-gray-800 mb-4 md:mb-0">Our Cleaning Products</h2>
<div class="flex items-center space-x-4">
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
<option>All Categories</option>
<option>Floor Care</option>
<option>Disinfectants</option>
<option>Window Cleaners</option>
<option>Equipment</option>
<option>Eco-Friendly</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="fas fa-chevron-down text-gray-400"></i>
</div>
</div>
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
<option>Sort By</option>
<option>Price: Low to High</option>
<option>Price: High to Low</option>
<option>Most Popular</option>
<option>Newest</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="fas fa-chevron-down text-gray-400"></i>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Product 1 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="relative">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Floor Cleaner" class="h-full object-contain">
</div>
<div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">BESTSELLER</div>
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Professional Floor Cleaner</h3>
<p class="text-gray-600 text-sm mb-3">5L concentrated formula for all floor types</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$24.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Disinfectant Spray" class="h-full object-contain">
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Hospital-Grade Disinfectant</h3>
<p class="text-gray-600 text-sm mb-3">1L spray kills 99.9% of bacteria & viruses</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$12.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="relative">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Microfiber Cloths" class="h-full object-contain">
</div>
<div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">ECO</div>
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Premium Microfiber Cloths</h3>
<p class="text-gray-600 text-sm mb-3">Pack of 12 ultra-absorbent cloths</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$18.50</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Window Cleaner" class="h-full object-contain">
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Streak-Free Window Cleaner</h3>
<p class="text-gray-600 text-sm mb-3">750ml professional formula</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$9.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 5 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Carpet Cleaner" class="h-full object-contain">
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Deep Carpet Cleaner</h3>
<p class="text-gray-600 text-sm mb-3">2L powerful formula for all carpets</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$19.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 6 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="relative">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Bathroom Cleaner" class="h-full object-contain">
</div>
<div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">NEW</div>
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Bathroom & Tile Cleaner</h3>
<p class="text-gray-600 text-sm mb-3">1L removes soap scum & hard water stains</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$14.50</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 7 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Mop System" class="h-full object-contain">
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Professional Mop System</h3>
<p class="text-gray-600 text-sm mb-3">Includes mop, bucket, and wringer</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$49.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product 8 -->
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gray-100 flex items-center justify-center">
<img src="https://m.media-amazon.com/images/I/71Q4hO3GzVL._AC_UF1000,1000_QL80_.jpg" alt="Degreaser" class="h-full object-contain">
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1 text-gray-800">Heavy-Duty Degreaser</h3>
<p class="text-gray-600 text-sm mb-3">4L industrial strength for kitchens</p>
<div class="flex justify-between items-center">
<span class="font-bold text-green-600">$27.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<div class="flex justify-center mt-12">
<nav class="flex items-center space-x-2">
<button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">
<i class="fas fa-chevron-left"></i>
</button>
<button class="px-3 py-1 rounded bg-green-600 text-white">1</button>
<button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">2</button>
<button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">3</button>
<button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">
<i class="fas fa-chevron-right"></i>
</button>
</nav>
</div>
</div>
</section>
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Product Categories</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="#" class="bg-gray-50 hover:bg-green-50 p-6 rounded-lg text-center transition duration-300">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-broom text-green-600 text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">Floor Care</h3>
<p class="text-gray-500 text-sm mt-1">32 products</p>
</a>
<a href="#" class="bg-gray-50 hover:bg-green-50 p-6 rounded-lg text-center transition duration-300">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-spray-can text-green-600 text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">Disinfectants</h3>
<p class="text-gray-500 text-sm mt-1">18 products</p>
</a>
<a href="#" class="bg-gray-50 hover:bg-green-50 p-6 rounded-lg text-center transition duration-300">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-window-restore text-green-600 text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">Window Cleaners</h3>
<p class="text-gray-500 text-sm mt-1">12 products</p>
</a>
<a href="#" class="bg-gray-50 hover:bg-green-50 p-6 rounded-lg text-center transition duration-300">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-tools text-green-600 text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">Equipment</h3>
<p class="text-gray-500 text-sm mt-1">25 products</p>
</a>
<a href="#" class="bg-gray-50 hover:bg-green-50 p-6 rounded-lg text-center transition duration-300">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-leaf text-green-600 text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">Eco-Friendly</h3>
<p class="text-gray-500 text-sm mt-1">28 products</p>
</a>
<a href="#" class="bg-gray-50 hover:bg-green-50 p-6 rounded-lg text-center transition duration-300">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-toilet text-green-600 text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">Bathroom Cleaners</h3>
<p class="text-gray-500 text-sm mt-1">15 products</p>
</a>
<a href="#" class="bg-gray-50 hover:bg-green-50 p-6 rounded-lg text-center transition duration-300">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-utensils text-green-600 text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">Kitchen Cleaners</h3>
<p class="text-gray-500 text-sm mt-1">20 products</p>
</a>
<a href="#" class="bg-gray-50 hover:bg-green-50 p-6 rounded-lg text-center transition duration-300">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-boxes text-green-600 text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">Bulk Supplies</h3>
<p class="text-gray-500 text-sm mt-1">42 products</p>
</a>
</div>
</div>
</section>
</div>
<!-- Services Page -->
<div id="services" class="page hidden">
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Our Professional Cleaning Services</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Beyond supplying products, we offer comprehensive cleaning services tailored to your specific needs.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm">
<div class="h-48 bg-gray-200 flex items-center justify-center">
<i class="fas fa-building text-5xl text-green-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-3 text-gray-800">Commercial Cleaning</h3>
<p class="text-gray-600 mb-4">Professional cleaning services for offices, retail spaces, and commercial properties.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Daily, weekly, or monthly schedules</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Customized cleaning plans</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Green cleaning options available</span>
</li>
</ul>
<button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-md transition duration-300">
Learn More
</button>
</div>
</div>
<!-- Service 2 -->
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm">
<div class="h-48 bg-gray-200 flex items-center justify-center">
<i class="fas fa-home text-5xl text-green-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-3 text-gray-800">Residential Cleaning</h3>
<p class="text-gray-600 mb-4">Thorough cleaning services for homes, apartments, and residential properties.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">One-time deep cleaning</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Recurring maintenance cleaning</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Move-in/move-out services</span>
</li>
</ul>
<button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-md transition duration-300">
Learn More
</button>
</div>
</div>
<!-- Service 3 -->
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm">
<div class="h-48 bg-gray-200 flex items-center justify-center">
<i class="fas fa-industry text-5xl text-green-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-3 text-gray-800">Industrial Cleaning</h3>
<p class="text-gray-600 mb-4">Specialized cleaning for factories, warehouses, and industrial facilities.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">High-pressure washing</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Equipment degreasing</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Floor maintenance programs</span>
</li>
</ul>
<button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-md transition duration-300">
Learn More
</button>
</div>
</div>
<!-- Service 4 -->
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm">
<div class="h-48 bg-gray-200 flex items-center justify-center">
<i class="fas fa-rug text-5xl text-green-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-3 text-gray-800">Carpet & Upholstery</h3>
<p class="text-gray-600 mb-4">Professional deep cleaning for carpets, rugs, and furniture.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Hot water extraction</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Stain removal treatments</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Odor elimination</span>
</li>
</ul>
<button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-md transition duration-300">
Learn More
</button>
</div>
</div>
<!-- Service 5 -->
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm">
<div class="h-48 bg-gray-200 flex items-center justify-center">
<i class="fas fa-window-maximize text-5xl text-green-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-3 text-gray-800">Window Cleaning</h3>
<p class="text-gray-600 mb-4">Interior and exterior window cleaning for all property types.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">High-rise window cleaning</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Solar panel cleaning</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Screen and track cleaning</span>
</li>
</ul>
<button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-md transition duration-300">
Learn More
</button>
</div>
</div>
<!-- Service 6 -->
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm">
<div class="h-48 bg-gray-200 flex items-center justify-center">
<i class="fas fa-hand-sparkles text-5xl text-green-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-3 text-gray-800">Specialty Services</h3>
<p class="text-gray-600 mb-4">Custom cleaning solutions for unique needs and situations.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Post-construction cleanup</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Biohazard remediation</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-600">Pressure washing</span>
</li>
</ul>
<button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-md transition duration-300">
Learn More
</button>
</div>
</div>
</div>
</div>
</section>
<section class="py-16 bg-green-600 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex items-center justify-between">
<div class="md:w-1/2 mb-8 md:mb-0">
<h2 class="text-3xl font-bold mb-4">Request a Free Service Quote</h2>
<p class="text-lg">Get a customized cleaning plan and pricing for your specific needs.</p>
</div>
<div class="md:w-1/2">
<form class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-md bg-white bg-opacity-20 placeholder-white focus:outline-none focus:ring-2 focus:ring-white">
<input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-md bg-white bg-opacity-20 placeholder-white focus:outline-none focus:ring-2 focus:ring-white">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 rounded-md bg-white bg-opacity-20 placeholder-white focus:outline-none focus:ring-2 focus:ring-white">
<select class="w-full px-4 py-3 rounded-md bg-white bg-opacity-20 text-white focus:outline-none focus:ring-2 focus:ring-white">
<option value="" disabled selected>Service Needed</option>
<option>Commercial Cleaning</option>
<option>Residential Cleaning</option>
<option>Industrial Cleaning</option>
<option>Carpet & Upholstery</option>
<option>Window Cleaning</option>
<option>Specialty Services</option>
</select>
</div>
<textarea placeholder="Tell us about your cleaning needs" rows="3" class="w-full px-4 py-3 rounded-md bg-white bg-opacity-20 placeholder-white focus:outline-none focus:ring-2 focus:ring-white"></textarea>
<button type="submit" class="w-full bg-white hover:bg-gray-100 text-green-600 font-bold py-3 px-6 rounded-md transition duration-300">
Get Your Free Quote
</button>
</form>
</div>
</div>
</div>
</section>
</div>
<!-- Contact Page -->
<div id="contact" class="page hidden">
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Contact Central Cleaning Suppliers</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">We're here to help with all your cleaning product and service needs.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Get in Touch</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-map-marker-alt text-green-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">Our Location</h4>
<p class="text-gray-600">123 Cleaning Street, Suite 100<br>San Francisco, CA 94107</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-phone-alt text-green-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">Phone Numbers</h4>
<p class="text-gray-600">
Sales: (415) 555-1234<br>
Support: (415) 555-5678<br>
Fax: (415) 555-9012
</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-envelope text-green-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">Email Addresses</h4>
<p class="text-gray-600">
General: info@centralcleaningsuppliers.com<br>
Sales: sales@centralcleaningsuppliers.com<br>
Support: support@centralcleaningsuppliers.com
</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-clock text-green-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">Business Hours</h4>
<p class="text-gray-600">
Monday - Friday: 8:00 AM - 6:00 PM<br>
Saturday: 9:00 AM - 4:00 PM<br>
Sunday: Closed
</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-medium text-gray-800 mb-4">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-gray-100 hover:bg-green-100 flex items-center justify-center transition duration-300">
<i class="fab fa-facebook-f text-gray-600 hover:text-green-600"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-100 hover:bg-green-100 flex items-center justify-center transition duration-300">
<i class="fab fa-twitter text-gray-600 hover:text-green-600"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-100 hover:bg-green-100 flex items-center justify-center transition duration-300">
<i class="fab fa-instagram text-gray-600 hover:text-green-600"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-100 hover:bg-green-100 flex items-center justify-center transition duration-300">
<i class="fab fa-linkedin-in text-gray-600 hover:text-green-600"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-100 hover:bg-green-100 flex items-center justify-center transition duration-300">
<i class="fab fa-youtube text-gray-600 hover:text-green-600"></i>
</a>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Send Us a Message</h3>
<form class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="text" placeholder="First Name" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
<input type="text" placeholder="Last Name" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
</div>
<input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
<input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
<select class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
<option value="" disabled selected>Subject</option>
<option>Product Inquiry</option>
<option>Service Inquiry</option>
<option>Bulk Order</option>
<option>Partnership</option>
<option>Feedback</option>
<option>Other</option>
</select>
<textarea placeholder="Your Message" rows="5" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"></textarea>
<button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-md transition duration-300">
Send Message
</button>
</form>
</div>
</div>
</div>
</section>
<div class="h-96 w-full">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.046112599888!2d-122.4036649241764!3d37.78799937188996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085807d10af6e51%3A0x1122879c36e6d3aa!2s123%20Main%20St%2C%20San%20Francisco%2C%20CA%2094107%2C%20USA!5e0!3m2!1sen!2s!4v1689876543210!5m2!1sen!2s"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white pt-12 pb-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="text-lg font-semibold mb-4">Central Cleaning Suppliers</h3>
<p class="text-gray-400">Providing premium cleaning products and services since 2005. Your trusted partner for all cleaning needs.</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" onclick="showPage('home')" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
<li><a href="#" onclick="showPage('about')" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
<li><a href="#" onclick="showPage('products')" class="text-gray-400 hover:text-white transition duration-300">Products</a></li>
<li><a href="#" onclick="showPage('services')" class="text-gray-400 hover:text-white transition duration-300">Services</a></li>
<li><a href="#" onclick="showPage('contact')" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Products</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Floor Care</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Disinfectants</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Window Cleaners</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Equipment</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Eco-Friendly</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Newsletter</h3>
<p class="text-gray-400 mb-4">Subscribe to get updates on new products and special offers.</p>
<form class="flex">
<input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-md focus:outline-none text-gray-800">
<button type="submit" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-r-md transition duration-300">
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Central Cleaning Suppliers. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Sitemap</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
function toggleMobileMenu() {
const mobileMenu = document.getElementById('mobileMenu');
mobileMenu.classList.toggle('hidden');
}
// Page navigation system
function showPage(pageId) {
// Hide all pages
const pages = document.querySelectorAll('.page');
pages.forEach(page => {
page.classList.add('hidden');
});
// Show selected page
document.getElementById(pageId).classList.remove('hidden');
// Close mobile menu if open
document.getElementById('mobileMenu').classList.add('hidden');
// Add page transition effect
const pageContent = document.getElementById('pageContent');
pageContent.classList.remove('page-transition');
void pageContent.offsetWidth; // Trigger reflow
pageContent.classList.add('page-transition');
// Scroll to top
window.scrollTo(0, 0);
}
// Initialize the home page
document.addEventListener('DOMContentLoaded', function() {
showPage('home');
});
// Simple cart functionality
document.querySelectorAll('.product-card button').forEach(button => {
button.addEventListener('click', function() {
const productCard = this.closest('.product-card');
const productName = productCard.querySelector('h3').textContent;
const productPrice = productCard.querySelector('span').textContent;
alert(`Added to cart: ${productName} - ${productPrice}`);
// Here you would typically add to a cart array or send to server
// For this demo, we'll just show an alert
});
});
</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=JacobPerera/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>