Spaces:

Geoff391
/

zadok

Running

zadok / index.html

make this website a multipage and make sure all sections are fully fuctional with backend intergration. include more than 1000products,services,consultations and projects with their respective images and descriptions. make it more realistic and very proffesional <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Zadok Engineering | Industrial Solutions & Equipment</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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" /> <script> tailwind.config = { theme: { extend: { colors: { primary: '#D4AF37', // Gold secondary: '#000000', // Black accent: '#FFFFFF', // White dark: '#1a1a1a', light: '#f8f9fa', }, fontFamily: { sans: ['Inter', 'sans-serif'], }, animation: { 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', 'float': 'float 6s ease-in-out infinite', }, keyframes: { float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-10px)' }, } } } } } </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; scroll-behavior: smooth; } .hero-gradient { background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(212,175,55,0.6) 100%); } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .nav-link::after { content: ''; display: block; width: 0; height: 2px; background: #D4AF37; transition: width .3s; } .nav-link:hover::after { width: 100%; } .cart-item { transition: all 0.3s ease; } .cart-item:hover { background-color: rgba(212, 175, 55, 0.05); } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #D4AF37; border-radius: 4px; } /* Animation classes */ .fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .slide-up { animation: slideUp 0.5s ease-out; } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Project showcase overlay */ .project-overlay { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 100%); } /* Service icon hover effect */ .service-icon { transition: all 0.3s ease; } .service-card:hover .service-icon { transform: scale(1.1); color: #D4AF37; } /* Floating animation for featured products */ .featured-product { transition: all 0.3s ease; } .featured-product:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } /* Testimonial card */ .testimonial-card { position: relative; } .testimonial-card::before { content: '"'; position: absolute; top: -20px; left: 10px; font-size: 80px; color: rgba(212, 175, 55, 0.1); font-family: serif; z-index: 0; } /* Contact form input focus */ .contact-input:focus { border-color: #D4AF37; box-shadow: 0 0 0 1px #D4AF37; } /* Loading spinner */ .loader { border-top-color: #D4AF37; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Project timeline */ .timeline-item { position: relative; padding-left: 50px; } .timeline-item::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: #D4AF37; } .timeline-dot { position: absolute; left: -8px; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #D4AF37; border: 3px solid white; } </style> </head> <body class="bg-white text-gray-800">  <div class="bg-secondary text-accent py-2 px-4 flex justify-between items-center text-sm"> <div class="flex space-x-4"> <span><i class="fas fa-phone-alt mr-1"></i> +254 700 123456</span> <span><i class="fas fa-envelope mr-1"></i> info@zadokengineering.co.ke</span> <span><i class="fas fa-map-marker-alt mr-1"></i> Nairobi, Kenya</span> </div> <div class="flex space-x-4"> <span class="cursor-pointer hover:text-primary transition">KES</span> <span class="cursor-pointer hover:text-primary transition">USD</span> <span class="cursor-pointer hover:text-primary transition">Swahili</span> <span class="cursor-pointer hover:text-primary transition">English</span> </div> </div>  <nav class="bg-white shadow-md sticky top-0 z-50"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center"> <img src="https://via.placeholder.com/180x60?text=Zadok+Engineering" alt="Zadok Engineering Logo" class="h-12"> </div> <div class="hidden md:flex space-x-8"> <a href="#home" class="nav-link font-medium text-secondary hover:text-primary transition">Home</a> <a href="#products" class="nav-link font-medium text-secondary hover:text-primary transition">Products</a> <a href="#services" class="nav-link font-medium text-secondary hover:text-primary transition">Services</a> <a href="#projects" class="nav-link font-medium text-secondary hover:text-primary transition">Projects</a> <a href="#about" class="nav-link font-medium text-secondary hover:text-primary transition">About</a> <a href="#contact" class="nav-link font-medium text-secondary hover:text-primary transition">Contact</a> </div> <div class="flex items-center space-x-4"> <div class="relative group"> <i class="fas fa-search text-xl cursor-pointer hover:text-primary transition"></i> <div class="absolute right-0 mt-2 w-64 bg-white shadow-lg rounded-md p-2 hidden group-hover:block"> <input type="text" placeholder="Search products..." class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"> </div> </div> <div class="relative group" id="cart-icon"> <i class="fas fa-shopping-cart text-xl cursor-pointer hover:text-primary transition"></i> <span class="absolute -top-2 -right-2 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center" id="cart-count">0</span>  <div class="absolute right-0 mt-2 w-80 bg-white shadow-xl rounded-md p-4 hidden group-hover:block z-50" id="cart-dropdown"> <h3 class="font-bold text-lg border-b pb-2 mb-2">Your Cart</h3> <div class="max-h-60 overflow-y-auto" id="cart-items">  <p class="text-gray-500 text-center py-4">Your cart is empty</p> </div> <div class="border-t pt-3 mt-3"> <div class="flex justify-between font-semibold mb-3"> <span>Total:</span> <span id="cart-total">KES 0.00</span> </div> <button class="w-full bg-primary hover:bg-yellow-600 text-white py-2 rounded-md transition flex items-center justify-center"> <i class="fas fa-lock mr-2"></i> Secure Checkout </button> </div> </div> </div> <div class="relative group"> <button class="bg-primary hover:bg-yellow-600 text-white px-4 py-2 rounded-md hidden md:block transition"> <i class="fas fa-user mr-2"></i> Account </button> <div class="absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-md p-2 hidden group-hover:block z-50"> <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 rounded-md">My Account</a> <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 rounded-md">Order History</a> <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 rounded-md">Logout</a> </div> </div> <button class="md:hidden" id="mobile-menu-button"> <i class="fas fa-bars text-xl"></i> </button> </div> </div>  <div class="md:hidden hidden bg-white w-full absolute left-0 shadow-lg z-40" id="mobile-menu"> <div class="flex flex-col space-y-3 p-4"> <a href="#home" class="nav-link font-medium text-secondary hover:text-primary transition">Home</a> <a href="#products" class="nav-link font-medium text-secondary hover:text-primary transition">Products</a> <a href="#services" class="nav-link font-medium text-secondary hover:text-primary transition">Services</a> <a href="#projects" class="nav-link font-medium text-secondary hover:text-primary transition">Projects</a> <a href="#about" class="nav-link font-medium text-secondary hover:text-primary transition">About</a> <a href="#contact" class="nav-link font-medium text-secondary hover:text-primary transition">Contact</a> <button class="bg-primary hover:bg-yellow-600 text-white px-4 py-2 rounded-md transition">Login</button> </div> </div> </nav>  <section id="home" class="relative h-screen flex items-center justify-center bg-gray-900 overflow-hidden"> <div class="swiper hero-slider absolute inset-0 w-full h-full"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://images.unsplash.com/photo-1581093450021-0c8b94d3c535?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Industrial Engineering" class="w-full h-full object-cover"> </div> <div class="swiper-slide"> <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Mechanical Engineering" class="w-full h-full object-cover"> </div> <div class="swiper-slide"> <img src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Automation Systems" class="w-full h-full object-cover"> </div> </div> <div class="swiper-pagination"></div> </div> <div class="absolute inset-0 hero-gradient"></div> <div class="container mx-auto px-4 relative z-10 text-center text-white slide-up"> <h1 class="text-4xl md:text-6xl font-bold mb-6">Precision Engineering Solutions</h1> <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Providing high-quality industrial equipment and technical expertise across East Africa since 2005.</p> <div class="flex flex-col sm:flex-row justify-center gap-4"> <a href="#products" class="bg-primary hover:bg-yellow-600 text-white px-8 py-3 rounded-md font-semibold transition flex items-center justify-center"> <i class="fas fa-boxes mr-2"></i> Browse Products </a> <a href="#contact" class="bg-transparent hover:bg-white hover:text-secondary border-2 border-white text-white px-8 py-3 rounded-md font-semibold transition flex items-center justify-center"> <i class="fas fa-phone-alt mr-2"></i> Get a Quote </a> </div> </div> <div class="absolute bottom-10 left-0 right-0 flex justify-center"> <a href="#products" class="text-white animate-bounce"> <i class="fas fa-chevron-down text-3xl"></i> </a> </div> </section>  <div class="bg-primary text-white py-6"> <div class="container mx-auto px-4"> <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center"> <div class="p-2"> <div class="text-3xl font-bold mb-1" id="years-counter">0</div> <div class="text-sm uppercase tracking-wider">Years Experience</div> </div> <div class="p-2"> <div class="text-3xl font-bold mb-1" id="projects-counter">0</div> <div class="text-sm uppercase tracking-wider">Projects Completed</div> </div> <div class="p-2"> <div class="text-3xl font-bold mb-1" id="clients-counter">0</div> <div class="text-sm uppercase tracking-wider">Satisfied Clients</div> </div> <div class="p-2"> <div class="text-3xl font-bold mb-1" id="products-counter">0</div> <div class="text-sm uppercase tracking-wider">Products Available</div> </div> </div> </div> </div>  <section class="py-12 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <span class="text-primary font-semibold">Our Expertise</span> <h2 class="text-3xl font-bold mt-2">Product Categories</h2> <p class="text-gray-600 max-w-2xl mx-auto mt-3">We provide a comprehensive range of industrial equipment and solutions for all your engineering needs.</p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition cursor-pointer group relative"> <div class="h-40 overflow-hidden"> <img src="https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Electrical Equipment" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> </div> <div class="p-4"> <h3 class="font-semibold text-lg mb-2">Electrical Equipment</h3> <p class="text-gray-600 text-sm">Transformers, switchgears, cables and more</p> </div> <div class="absolute bottom-4 right-4 bg-primary text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition"> <i class="fas fa-arrow-right"></i> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition cursor-pointer group relative"> <div class="h-40 overflow-hidden"> <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Mechanical Tools" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> </div> <div class="p-4"> <h3 class="font-semibold text-lg mb-2">Mechanical Tools</h3> <p class="text-gray-600 text-sm">Power tools, hand tools, equipment</p> </div> <div class="absolute bottom-4 right-4 bg-primary text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition"> <i class="fas fa-arrow-right"></i> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition cursor-pointer group relative"> <div class="h-40 overflow-hidden"> <img src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Automation Systems" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> </div> <div class="p-4"> <h3 class="font-semibold text-lg mb-2">Automation Systems</h3> <p class="text-gray-600 text-sm">PLC, sensors, control panels</p> </div> <div class="absolute bottom-4 right-4 bg-primary text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition"> <i class="fas fa-arrow-right"></i> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition cursor-pointer group relative"> <div class="h-40 overflow-hidden"> <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Heavy Machinery" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> </div> <div class="p-4"> <h3 class="font-semibold text-lg mb-2">Heavy Machinery</h3> <p class="text-gray-600 text-sm">Excavators, loaders, cranes</p> </div> <div class="absolute bottom-4 right-4 bg-primary text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition"> <i class="fas fa-arrow-right"></i> </div> </div> </div> <div class="mt-10 text-center"> <a href="#products" class="inline-flex items-center bg-secondary hover:bg-gray-800 text-white px-6 py-3 rounded-md font-semibold transition"> View All Categories <i class="fas fa-chevron-right ml-2"></i> </a> </div> </div> </section>  <section class="py-12 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <span class="text-primary font-semibold">Premium Quality</span> <h2 class="text-3xl font-bold mt-2">Featured Products</h2> <p class="text-gray-600 max-w-2xl mx-auto mt-3">Discover our top-rated industrial equipment trusted by professionals across East Africa.</p> </div> <div class="swiper featured-products-slider"> <div class="swiper-wrapper pb-10">  </div> <div class="swiper-pagination"></div> </div> <div class="mt-8 text-center"> <a href="#products" class="inline-flex items-center bg-primary hover:bg-yellow-600 text-white px-6 py-3 rounded-md font-semibold transition"> Browse All Products <i class="fas fa-chevron-right ml-2"></i> </a> </div> </div> </section>  <section class="py-12 bg-gray-50 relative overflow-hidden"> <div class="absolute inset-0 z-0"> <img src="images/company/factory-floor.jpg" alt="Zadok Engineering Facility" class="w-full h-full object-cover opacity-10"> </div> <div class="container mx-auto px-4"> <div class="flex flex-col lg:flex-row items-center"> <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> <span class="text-primary font-semibold">Our Advantages</span> <h2 class="text-3xl font-bold mt-2 mb-6">Why Choose Zadok Engineering</h2> <div class="space-y-6"> <div class="flex"> <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-full mr-4 flex-shrink-0"> <i class="fas fa-check-circle text-xl"></i> </div> <div> <h3 class="font-semibold text-lg mb-1">Industry Expertise</h3> <p class="text-gray-600">With over 18 years in the industry, we bring unmatched technical knowledge and practical experience to every project.</p> </div> </div> <div class="flex"> <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-full mr-4 flex-shrink-0"> <i class="fas fa-certificate text-xl"></i> </div> <div> <h3 class="font-semibold text-lg mb-1">Quality Assurance</h3> <p class="text-gray-600">All our products undergo rigorous testing and meet international quality standards before reaching our customers.</p> </div> </div> <div class="flex"> <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-full mr-4 flex-shrink-0"> <i class="fas fa-headset text-xl"></i> </div> <div> <h3 class="font-semibold text-lg mb-1">24/7 Support</h3> <p class="text-gray-600">Our dedicated support team is available round the clock to assist with any technical queries or emergencies.</p> </div> </div> </div> <div class="mt-8 flex flex-wrap gap-4"> <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> <img src="https://via.placeholder.com/80x40?text=ISO+9001" alt="ISO 9001 Certified" class="h-8"> <span class="ml-2 text-sm font-medium">ISO Certified</span> </div> <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> <img src="https://via.placeholder.com/80x40?text=KEBS" alt="KEBS Approved" class="h-8"> <span class="ml-2 text-sm font-medium">KEBS Approved</span> </div> </div> </div> <div class="lg:w-1/2"> <div class="bg-primary bg-opacity-5 p-8 rounded-lg border border-primary border-opacity-20"> <div class="relative h-96"> <div class="absolute top-0 left-0 w-3/4 h-3/4 bg-primary bg-opacity-10 rounded-lg"></div> <div class="absolute bottom-0 right-0 w-3/4 h-3/4 bg-white rounded-lg shadow-md overflow-hidden"> <img src="https://images.unsplash.com/photo-1581093450021-0c8b94d3c535?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Our Team" class="w-full h-full object-cover"> </div> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-white rounded-full border-8 border-primary border-opacity-20 overflow-hidden"> <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Our Facility" class="w-full h-full object-cover"> </div> </div> </div> </div> </div> </div> </section>  <section id="products" class="py-12 bg-white"> <div class="container mx-auto px-4"> <div class="flex flex-col md:flex-row justify-between items-center mb-8"> <div> <h2 class="text-3xl font-bold">Our Products</h2> <p class="text-gray-600">Browse our extensive catalog of industrial equipment</p> </div> <div class="flex space-x-2 mt-4 md:mt-0"> <select class="border rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary text-sm"> <option>All Categories</option> <option>Electrical</option> <option>Mechanical</option> <option>Automation</option> <option>Heavy Machinery</option> </select> <select class="border rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary text-sm"> <option>Sort by: Featured</option> <option>Price: Low to High</option> <option>Price: High to Low</option> <option>Newest</option> </select> </div> </div> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" id="product-grid">  <div class="bg-white rounded-lg shadow-md overflow-hidden product-card"> <div class="h-48 overflow-hidden"> <img src="images/products/industrial-motor.jpg" alt="3-Phase Industrial Motor" class="w-full h-full object-cover"> <div class="absolute top-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded">New</div> </div> <div class="p-4"> <div class="flex justify-between items-start"> <div> <h3 class="font-semibold text-lg mb-1">3-Phase Industrial Motor</h3> <p class="text-gray-600 text-sm">15HP, 1800RPM, TEFC</p> </div> <span class="bg-primary bg-opacity-10 text-primary text-sm px-2 py-1 rounded">Electrical</span> </div> <div class="mt-3 flex justify-between items-center"> <span class="font-bold text-lg">KES 85,000</span> <button class="bg-primary hover:bg-yellow-600 text-white p-2 rounded-full transition"> <i class="fas fa-cart-plus"></i> </button> </div> </div> </div>  </div> <div class="mt-10 text-center"> <button class="bg-primary hover:bg-yellow-600 text-white px-6 py-3 rounded-md font-semibold transition inline-flex items-center"> <span id="load-more-text">Load More Products</span> <span id="load-more-spinner" class="hidden ml-2"> <svg class="animate-spin -ml-1 mr-1 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> </span> </button> </div> </div> </section>  <section id="projects" class="py-12 bg-gray-900 text-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <span class="text-primary font-semibold">Our Work</span> <h2 class="text-3xl font-bold mt-2">Project Showcase</h2> <p class="text-gray-300 max-w-2xl mx-auto mt-3">Explore some of our recent engineering projects and installations across various industries.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">  <div class="relative rounded-lg overflow-hidden h-96 group"> <img src="images/projects/nairobi-industrial-park.jpg" alt="Nairobi Industrial Park" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> <div class="absolute inset-0 project-overlay flex flex-col justify-end p-6"> <div class="flex items-center mb-2"> <div class="bg-yellow-400 text-black text-xs px-2 py-1 rounded mr-2">Best Industrial Project 2022</div> <div class="bg-blue-500 text-white text-xs px-2 py-1 rounded">KEBS Certified</div> </div> <h3 class="text-xl font-bold mb-2">Nairobi Industrial Park Automation</h3> <p class="text-gray-300 mb-4">Full automation system for manufacturing facility with 30% energy savings</p> <div class="flex items-center justify-between"> <a href="project-details.html" class="text-primary font-medium hover:underline inline-flex items-center"> View Details <i class="fas fa-arrow-right ml-2"></i> </a> <div class="flex -space-x-2"> <img src="images/team/engineer1.jpg" class="w-8 h-8 rounded-full border-2 border-white" alt="Lead Engineer"> <img src="images/team/engineer2.jpg" class="w-8 h-8 rounded-full border-2 border-white" alt="Project Manager"> </div> </div> </div> </div>  <div class="relative rounded-lg overflow-hidden h-80 group"> <img src="https://images.unsplash.com/photo-1581093450021-0c8b94d3c535?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Industrial Automation Project" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> <div class="absolute inset-0 project-overlay flex flex-col justify-end p-6"> <h3 class="text-xl font-bold mb-2">Nairobi Industrial Park Automation</h3> <p class="text-gray-300 mb-4">Full automation system installation for manufacturing facility</p> <a href="#" class="text-primary font-medium hover:underline inline-flex items-center"> View Project <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> <div class="relative rounded-lg overflow-hidden h-80 group"> <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Electrical Installation" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> <div class="absolute inset-0 project-overlay flex flex-col justify-end p-6"> <h3 class="text-xl font-bold mb-2">Mombasa Port Electrical Upgrade</h3> <p class="text-gray-300 mb-4">High voltage electrical system installation and upgrade</p> <a href="#" class="text-primary font-medium hover:underline inline-flex items-center"> View Project <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> <div class="relative rounded-lg overflow-hidden h-80 group"> <img src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Mechanical Installation" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> <div class="absolute inset-0 project-overlay flex flex-col justify-end p-6"> <h3 class="text-xl font-bold mb-2">Kisumu Water Treatment Plant</h3> <p class="text-gray-300 mb-4">Mechanical systems installation for water treatment facility</p> <a href="#" class="text-primary font-medium hover:underline inline-flex items-center"> View Project <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> </div> <div class="mt-10 text-center"> <a href="#" class="inline-flex items-center bg-primary hover:bg-yellow-600 text-white px-6 py-3 rounded-md font-semibold transition"> View All Projects <i class="fas fa-chevron-right ml-2"></i> </a> </div> </div> </section>  <section id="services" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <span class="text-primary font-semibold">Our Expertise</span> <h2 class="text-3xl font-bold mt-2">Engineering Services</h2> <p class="text-gray-600 max-w-2xl mx-auto mt-3">Comprehensive engineering solutions tailored to meet your specific industrial requirements.</p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">  <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition service-card"> <div class="h-48 overflow-hidden relative"> <img src="images/services/industrial-automation.jpg" alt="Industrial Automation" class="w-full h-full object-cover"> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> <span class="text-white text-sm font-medium">Most Popular Service</span> </div> </div> <div class="p-6"> <div class="flex items-center mb-3"> <div class="bg-primary rounded-full p-3 mr-4 service-icon"> <i class="fas fa-robot text-white text-xl"></i> </div> <h3 class="font-semibold text-xl">Industrial Automation</h3> </div> <p class="text-gray-600 mb-4">Complete automation solutions including PLC programming, SCADA systems, and robotics integration to optimize your production lines.</p> <div class="flex justify-between items-center"> <span class="text-primary font-medium">From KES 1.2M</span> <button class="bg-primary hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm transition"> Book Consultation </button> </div> </div> </div>  <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition service-card"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1581093057302-1af28b6ec8a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Industrial Automation" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <div class="bg-primary rounded-full p-3 mr-4 service-icon"> <i class="fas fa-robot text-white text-xl"></i> </div> <h3 class="font-semibold text-xl">Industrial Automation</h3> </div> <p class="text-gray-600 mb-4">Design and implementation of automated control systems for manufacturing and industrial processes to improve efficiency and productivity.</p> <div class="flex justify-between items-center"> <button class="text-primary font-medium hover:underline">Learn More</button> <button class="bg-primary hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm transition"> Book Service </button> </div> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition service-card"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1581093057923-ffd3a751ea3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Electrical Installations" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <div class="bg-primary rounded-full p-3 mr-4 service-icon"> <i class="fas fa-bolt text-white text-xl"></i> </div> <h3 class="font-semibold text-xl">Electrical Installations</h3> </div> <p class="text-gray-600 mb-4">Professional electrical wiring, panel installations, and maintenance for commercial and industrial facilities with safety compliance.</p> <div class="flex justify-between items-center"> <button class="text-primary font-medium hover:underline">Learn More</button> <button class="bg-primary hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm transition"> Book Service </button> </div> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition service-card"> <div class="h-48 overflow-hidden"> <img src="https://images.unsplash.com/photo-1581093057153-9ec7d1a5a6e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Mechanical Maintenance" class="w-full h-full object-cover"> </div> <div class="p-6"> <div class="flex items-center mb-3"> <div class="bg-primary rounded-full p-3 mr-4 service-icon"> <i class="fas fa-cogs text-white text-xl"></i> </div> <h3 class="font-semibold text-xl">Mechanical Maintenance</h3> </div> <p class="text-gray-600 mb-4">Preventive and corrective maintenance for industrial machinery and mechanical systems to ensure optimal performance and longevity.</p> <div class="flex justify-between items-center"> <button class="text-primary font-medium hover:underline">Learn More</button> <button class="bg-primary hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm transition"> Book Service </button> </div> </div> </div> </div> <div class="mt-12 text-center"> <a href="#contact" class="bg-secondary hover:bg-gray-800 text-white px-8 py-3 rounded-md font-semibold transition inline-flex items-center"> <i class="fas fa-tools mr-2"></i> Request Custom Service </a> </div> </div> </section>  <section class="py-12 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <span class="text-primary font-semibold">Our Approach</span> <h2 class="text-3xl font-bold mt-2">Project Process</h2> <p class="text-gray-600 max-w-2xl mx-auto mt-3">Our systematic approach ensures successful project delivery from conception to completion.</p> </div> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="bg-gray-50 p-6 rounded-lg h-full"> <div class="bg-primary bg-opacity-10 text-primary rounded-full w-12 h-12 flex items-center justify-center mb-4"> <i class="fas fa-lightbulb text-xl"></i> </div> <h3 class="font-semibold text-lg mb-2">Consultation</h3> <p class="text-gray-600">We begin with understanding your requirements through detailed discussions and site assessments.</p> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="bg-gray-50 p-6 rounded-lg h-full"> <div class="bg-primary bg-opacity-10 text-primary rounded-full w-12 h-12 flex items-center justify-center mb-4"> <i class="fas fa-pencil-ruler text-xl"></i> </div> <h3 class="font-semibold text-lg mb-2">Design</h3> <p class="text-gray-600">Our engineers create customized solutions with detailed technical specifications and drawings.</p> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="bg-gray-50 p-6 rounded-lg h-full"> <div class="bg-primary bg-opacity-10 text-primary rounded-full w-12 h-12 flex items-center justify-center mb-4"> <i class="fas fa-hammer text-xl"></i> </div> <h3 class="font-semibold text-lg mb-2">Implementation</h3> <p class="text-gray-600">Certified technicians execute the project with precision while adhering to safety standards.</p> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="bg-gray-50 p-6 rounded-lg h-full"> <div class="bg-primary bg-opacity-10 text-primary rounded-full w-12 h-12 flex items-center justify-center mb-4"> <i class="fas fa-check-circle text-xl"></i> </div> <h3 class="font-semibold text-lg mb-2">Support</h3> <p class="text-gray-600">We provide ongoing maintenance and support to ensure optimal system performance.</p> </div> </div> </div> </div> </section>  <section id="about" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="flex flex-col lg:flex-row items-center"> <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> <span class="text-primary font-semibold">Our Story</span> <h2 class="text-3xl font-bold mt-2 mb-6">About Zadok Engineering</h2> <p class="text-gray-600 mb-4">Founded in 2005, Zadok Engineering has grown to become a leading provider of industrial equipment and engineering services in East Africa. Our commitment to quality and customer satisfaction has earned us a reputation for excellence in the industry.</p> <p class="text-gray-600 mb-6">With a team of over 50 certified engineers and technicians, we deliver comprehensive solutions tailored to meet the specific needs of our clients across various sectors including manufacturing, construction, energy, and telecommunications.</p> <div class="grid grid-cols-2 gap-4 mb-8"> <div class="bg-white p-4 rounded-lg shadow-sm"> <h3 class="font-semibold text-primary mb-1">500+</h3> <p class="text-gray-600 text-sm">Products in Stock</p> </div> <div class="bg-white p-4 rounded-lg shadow-sm"> <h3 class="font-semibold text-primary mb-1">18 Years</h3> <p class="text-gray-600 text-sm">Industry Experience</p> </div> <div class="bg-white p-4 rounded-lg shadow-sm"> <h3 class="font-semibold text-primary mb-1">2000+</h3> <p class="text-gray-600 text-sm">Satisfied Clients</p> </div> <div class="bg-white p-4 rounded-lg shadow-sm"> <h3 class="font-semibold text-primary mb-1">50+</h3> <p class="text-gray-600 text-sm">Certified Engineers</p> </div> </div> <div class="flex flex-wrap gap-4"> <button class="bg-primary hover:bg-yellow-600 text-white px-6 py-2 rounded-md font-medium transition flex items-center"> <i class="fas fa-book-open mr-2"></i> Read Our Story </button> <button class="bg-white hover:bg-gray-100 border border-gray-300 text-gray-800 px-6 py-2 rounded-md font-medium transition flex items-center"> <i class="fas fa-download mr-2"></i> Company Profile </button> </div> </div> <div class="lg:w-1/2 relative"> <div class="grid grid-cols-2 gap-4"> <div class="h-64 overflow-hidden rounded-lg"> <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Our Team" class="w-full h-full object-cover"> </div> <div class="h-64 overflow-hidden rounded-lg"> <img src="https://images.unsplash.com/photo-1581093450021-0c8b94d3c535?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Our Facility" class="w-full h-full object-cover"> </div> <div class="h-64 overflow-hidden rounded-lg"> <img src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Our Projects" class="w-full h-full object-cover"> </div> <div class="h-64 overflow-hidden rounded-lg bg-primary flex items-center justify-center cursor-pointer group"> <div class="text-center text-white p-4"> <div class="bg-white bg-opacity-20 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition"> <i class="fas fa-play text-2xl"></i> </div> <p>Watch Our Company Video</p> </div> </div> </div> </div> </div>  <div class="mt-16"> <h3 class="text-xl font-semibold text-center mb-8">Trusted By Industry Leaders</h3> <div class="swiper clients-slider"> <div class="swiper-wrapper"> <div class="swiper-slide flex justify-center"> <img src="https://via.placeholder.com/150x60?text=Client+1" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> </div> <div class="swiper-slide flex justify-center"> <img src="https://via.placeholder.com/150x60?text=Client+2" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> </div> <div class="swiper-slide flex justify-center"> <img src="https://via.placeholder.com/150x60?text=Client+3" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> </div> <div class="swiper-slide flex justify-center"> <img src="https://via.placeholder.com/150x60?text=Client+4" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> </div> <div class="swiper-slide flex justify-center"> <img src="https://via.placeholder.com/150x60?text=Client+5" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> </div> <div class="swiper-slide flex justify-center"> <img src="https://via.placeholder.com/150x60?text=Client+6" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> </div> </div> </div> </div> </div> </section>  <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <span class="text-primary font-semibold">Client Feedback</span> <h2 class="text-3xl font-bold mt-2">What Our Clients Say</h2> <p class="text-gray-600 max-w-2xl mx-auto mt-3">Hear from our satisfied clients about their experience working with Zadok Engineering.</p> </div> <div class="swiper testimonials-slider"> <div class="swiper-wrapper pb-12"> <div class="swiper-slide"> <div class="bg-white p-6 rounded-lg shadow-md testimonial-card h-full"> <div class="flex items-center mb-4"> <div class="text-primary text-2xl mr-2"> <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> <p class="text-gray-600 mb-4">"Zadok Engineering provided exceptional service during our factory automation project. Their team was professional, knowledgeable, and delivered on time despite the tight deadline. The system has been running flawlessly for over a year now."</p> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-10 h-10 rounded-full mr-3"> <div> <h4 class="font-medium">James Kariuki</h4> <p class="text-gray-500 text-sm">Manufacturing Director, Nairobi Industrial Park</p> </div> </div> </div> </div> <div class="swiper-slide"> <div class="bg-white p-6 rounded-lg shadow-md testimonial-card h-full"> <div class="flex items-center mb-4"> <div class="text-primary text-2xl mr-2"> <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> <p class="text-gray-600 mb-4">"The electrical equipment we purchased has been running flawlessly for over two years now. Great quality and excellent after-sales support. Their technicians were always available when we needed maintenance or had questions about the system."</p> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-10 h-10 rounded-full mr-3"> <div> <h4 class="font-medium">Sarah Mwangi</h4> <p class="text-gray-500 text-sm">Operations Manager, Mombasa Port Authority</p> </div> </div> </div> </div> <div class="swiper-slide"> <div class="bg-white p-6 rounded-lg shadow-md testimonial-card h-full"> <div class="flex items-center mb-4"> <div class="text-primary text-2xl mr-2"> <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> <p class="text-gray-600 mb-4">"Their mechanical maintenance team has been instrumental in keeping our production line running with minimal downtime. The preventive maintenance program they implemented has saved us thousands in potential repair costs. Highly recommended!"</p> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-10 h-10 rounded-full mr-3"> <div> <h4 class="font-medium">David Ochieng</h4> <p class="text-gray-500 text-sm">Plant Manager, Kisumu Bottlers</p> </div> </div> </div> </div> <div class="swiper-slide"> <div class="bg-white p-6 rounded-lg shadow-md testimonial-card h-full"> <div class="flex items-center mb-4"> <div class="text-primary text-2xl mr-2"> <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> <p class="text-gray-600 mb-4">"We've been working with Zadok Engineering for over 5 years now and they've consistently delivered quality service. Their technical expertise and attention to detail have made them our go-to partner for all industrial equipment needs."</p> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-10 h-10 rounded-full mr-3"> <div> <h4 class="font-medium">Grace Wambui</h4> <p class="text-gray-500 text-sm">CEO, Eldoret Textiles</p> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> </section>  <section class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <span class="text-primary font-semibold">Our Experts</span> <h2 class="text-3xl font-bold mt-2">Meet Our Team</h2> <p class="text-gray-600 max-w-2xl mx-auto mt-3">Our team of certified engineers and technicians bring decades of combined experience to every project.</p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="bg-white rounded-lg shadow-md overflow-hidden text-center"> <div class="h-64 overflow-hidden"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="w-full h-full object-cover"> </div> <div class="p-6"> <h3 class="font-semibold text-lg mb-1">John Kamau</h3> <p class="text-primary text-sm mb-3">Chief Executive Officer</p> <p class="text-gray-600 text-sm mb-4">20+ years experience in industrial engineering and project management.</p> <div class="flex justify-center space-x-3"> <a href="#" class="text-gray-500 hover:text-primary transition"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="text-gray-500 hover:text-primary transition"><i class="fas fa-envelope"></i></a> </div> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden text-center"> <div class="h-64 overflow-hidden"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-full h-full object-cover"> </div> <div class="p-6"> <h3 class="font-semibold text-lg mb-1">Susan Wanjiku</h3> <p class="text-primary text-sm mb-3">Technical Director</p> <p class="text-gray-600 text-sm mb-4">Specializes in automation systems and electrical engineering solutions.</p> <div class="flex justify-center space-x-3"> <a href="#" class="text-gray-500 hover:text-primary transition"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="text-gray-500 hover:text-primary transition"><i class="fas fa-envelope"></i></a> </div> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden text-center"> <div class="h-64 overflow-hidden"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Team Member" class="w-full h-full object-cover"> </div> <div class="p-6"> <h3 class="font-semibold text-lg mb-1">Peter Mwangi</h3> <p class="text-primary text-sm mb-3">Head of Mechanical</p> <p class="text-gray-600 text-sm mb-4">Expert in heavy machinery installation and mechanical systems.</p> <div class="flex justify-center space-x-3"> <a href="#" class="text-gray-500 hover:text-primary transition"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="text-gray-500 hover:text-primary transition"><i class="fas fa-envelope"></i></a> </div> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden text-center"> <div class="h-64 overflow-hidden"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Team Member" class="w-full h-full object-cover"> </div> <div class="p-6"> <h3 class="font-semibold text-lg mb-1">Lucy Akinyi</h3> <p class="text-primary text-sm mb-3">Customer Support Manager</p> <p class="text-gray-600 text-sm mb-4">Ensures seamless communication and support for all our clients.</p> <div class="flex justify-center space-x-3"> <a href="#" class="text-gray-500 hover:text-primary transition"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="text-gray-500 hover:text-primary transition"><i class="fas fa-envelope"></i></a> </div> </div> </div> </div> <div class="mt-12 text-center"> <a href="#contact" class="bg-secondary hover:bg-gray-800 text-white px-8 py-3 rounded-md font-semibold transition inline-flex items-center"> <i class="fas fa-users mr-2"></i> Join Our Team </a> </div> </div> </section>  <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <span class="text-primary font-semibold">Need Help?</span> <h2 class="text-3xl font-bold mt-2">Frequently Asked Questions</h2> <p class="text-gray-600 max-w-2xl mx-auto mt-3">Find answers to common questions about our products and services.</p> </div> <div class="max-w-3xl mx-auto"> <div class="border rounded-lg overflow-hidden"> <div class="accordion-item border-b"> <button class="w-full text-left p-4 font-medium flex justify-between items-center hover:bg-gray-50 transition"> <span>What types of industrial equipment do you supply?</span> <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> </button> <div class="accordion-content hidden p-4 bg-gray-50"> <p class="text-gray-600">We supply a wide range of industrial equipment including electrical systems (transformers, switchgears, cables), mechanical tools (power tools, hand tools), automation systems (PLC, sensors, control panels), and heavy machinery (excavators, loaders, cranes). Our inventory is constantly updated to meet industry demands.</p> </div> </div> <div class="accordion-item border-b"> <button class="w-full text-left p-4 font-medium flex justify-between items-center hover:bg-gray-50 transition"> <span>Do you offer installation services for the equipment you sell?</span> <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> </button> <div class="accordion-content hidden p-4 bg-gray-50"> <p class="text-gray-600">Yes, we provide comprehensive installation services performed by our team of certified engineers and technicians. Our installation services include site assessment, system design, equipment installation, testing, and commissioning. We also provide training for your staff on proper equipment operation and maintenance.</p> </div> </div> <div class="accordion-item border-b"> <button class="w-full text-left p-4 font-medium flex justify-between items-center hover:bg-gray-50 transition"> <span>What warranty do you offer on your products?</span> <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> </button> <div class="accordion-content hidden p-4 bg-gray-50"> <p class="text-gray-600">Most of our products come with a standard manufacturer's warranty ranging from 1-3 years depending on the equipment type. We also offer extended warranty options for critical systems. Our warranty covers defects in materials and workmanship, with some exceptions for normal wear and tear or improper use.</p> </div> </div> <div class="accordion-item border-b"> <button class="w-full text-left p-4 font-medium flex justify-between items-center hover:bg-gray-50 transition"> <span>How do I request a quote for a specific product or service?</span> <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> </button> <div class="accordion-content hidden p-4 bg-gray-50"> <p class="text-gray-600">You can request a quote through our website's contact form, by emailing sales@zadokengineering.co.ke, or by calling our sales team at +254 700 123456. For accurate quotes, please provide as much detail as possible about your requirements including product specifications, quantities, and any special requirements.</p> </div> </div> <div class="accordion-item"> <button class="w-full text-left p-4 font-medium flex justify-between items-center hover:bg-gray-50 transition"> <span>What areas in East Africa do you serve?</span> <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> </button> <div class="accordion-content hidden p-4 bg-gray-50"> <p class="text-gray-600">We serve clients throughout Kenya, Uganda, Tanzania, Rwanda, and South Sudan. Our headquarters are in Nairobi with regional offices in Mombasa, Kisumu, Kampala, and Dar es Salaam. We can arrange equipment delivery and provide technical support across the entire East African region.</p> </div> </div> </div> <div class="mt-8 text-center"> <a href="#contact" class="inline-flex items-center text-primary font-medium hover:underline"> <i class="fas fa-question-circle mr-2"></i> Have more questions? Contact our support team </a> </div> </div> </div> </section>  <section id="contact" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <span class="text-primary font-semibold">Get In Touch</span> <h2 class="text-3xl font-bold mt-2">Contact Us</h2> <p class="text-gray-600 max-w-2xl mx-auto mt-3">Reach out to our team for inquiries, quotes, or technical support. We're here to help with all your industrial engineering needs.</p> </div> <div class="flex flex-col lg:flex-row gap-8"> <div class="lg:w-1/2"> <div class="bg-white p-8 rounded-lg shadow-md h-full"> <h3 class="text-xl font-semibold mb-6">Send Us a Message</h3> <form id="contact-form"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> <div> <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name *</label> <input type="text" id="name" name="name" required class="w-full px-4 py-2 border rounded-md focus:outline-none contact-input"> </div> <div> <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email *</label> <input type="email" id="email" name="email" required class="w-full px-4 py-2 border rounded-md focus:outline-none contact-input"> </div> </div> <div class="mb-4"> <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border rounded-md focus:outline-none contact-input"> </div> <div class="mb-4"> <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject *</label> <select id="subject" name="subject" required class="w-full px-4 py-2 border rounded-md focus:outline-none contact-input"> <option value="">Select a subject</option> <option>Product Inquiry</ </body> </html> - Follow Up Deployment

4fcfd60 verified 7 months ago

raw

history blame contribute delete

85.9 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Zadok Engineering \| Industrial Solutions & Equipment</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">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#D4AF37', // Gold
	secondary: '#000000', // Black
	accent: '#FFFFFF', // White
	dark: '#1a1a1a',
	light: '#f8f9fa',
	},
	fontFamily: {
	sans: ['Inter', 'sans-serif'],
	},
	animation: {
	'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
	'float': 'float 6s ease-in-out infinite',
	},
	keyframes: {
	float: {
	'0%, 100%': { transform: 'translateY(0)' },
	'50%': { transform: 'translateY(-10px)' },
	}
	}
	}
	}
	}

	// Global variables
	let currentPage = 'home';
	let products = [];
	let services = [];
	let projects = [];
	let cart = [];
	let categories = [];

	// Initialize the application
	document.addEventListener('DOMContentLoaded', function() {
	// Load all data
	loadData();

	// Initialize page routing
	initRouting();

	// Initialize mobile menu
	document.getElementById('mobile-menu-button').addEventListener('click', toggleMobileMenu);

	// Close mobile menu when clicking a link
	document.querySelectorAll('#mobile-menu a').forEach(link => {
	link.addEventListener('click', toggleMobileMenu);
	});

	// Initialize accordion functionality
	initAccordion();

	// Initialize product filtering
	initProductFiltering();

	// Initialize service filtering
	initServiceFiltering();

	// Initialize project filtering
	initProjectFiltering();

	// Initialize cart functionality
	initCart();

	// Initialize forms
	initForms();
	});

	// Load all data from our "backend"
	function loadData() {
	// Load categories
	categories = [
	{ id: 1, name: "Electrical Equipment", slug: "electrical", description: "Transformers, switchgears, cables and more", image: "https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" },
	{ id: 2, name: "Mechanical Tools", slug: "mechanical", description: "Power tools, hand tools, equipment", image: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" },
	{ id: 3, name: "Automation Systems", slug: "automation", description: "PLC, sensors, control panels", image: "https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" },
	{ id: 4, name: "Heavy Machinery", slug: "machinery", description: "Excavators, loaders, cranes", image: "https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" },
	{ id: 5, name: "Safety Equipment", slug: "safety", description: "PPE, fire safety, hazard protection", image: "https://images.unsplash.com/photo-1581093057302-1af28b6ec8a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" },
	{ id: 6, name: "HVAC Systems", slug: "hvac", description: "Heating, ventilation, air conditioning", image: "https://images.unsplash.com/photo-1581093057153-9ec7d1a5a6e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" },
	{ id: 7, name: "Pumps & Valves", slug: "pumps", description: "Industrial pumps, valves, piping systems", image: "https://images.unsplash.com/photo-1581093057923-ffd3a751ea3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" },
	{ id: 8, name: "Generators & Power", slug: "generators", description: "Diesel generators, solar systems, UPS", image: "https://images.unsplash.com/photo-1581093057302-1af28b6ec8a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" }
	];

	// Generate 1000+ products
	products = generateProducts(1000);

	// Generate 50+ services
	services = generateServices(50);

	// Generate 100+ projects
	projects = generateProjects(100);

	// Load cart from localStorage if available
	const savedCart = localStorage.getItem('zadok-cart');
	if (savedCart) {
	cart = JSON.parse(savedCart);
	updateCartCount();
	}
	}

	// Generate product data
	function generateProducts(count) {
	const productNames = [
	"3-Phase Industrial Motor", "Variable Frequency Drive", "Circuit Breaker Panel",
	"Hydraulic Power Unit", "CNC Machine Controller", "Industrial Conveyor Belt",
	"Pneumatic Cylinder", "Servo Motor", "Steel Gantry Crane", "Diesel Generator",
	"Solar Inverter", "HVAC Control System", "Water Treatment Pump", "Safety Light Curtain",
	"Industrial Robot Arm", "PLC Controller", "SCADA System", "Pressure Transmitter",
	"Flow Meter", "Temperature Controller", "Steel Storage Tank", "Industrial Fan",
	"Dust Collection System", "Welding Machine", "Lathe Machine", "Milling Machine",
	"Hydraulic Press", "Air Compressor", "Industrial Chiller", "Cooling Tower",
	"Steam Boiler", "Heat Exchanger", "Industrial Oven", "Conveyor Roller",
	"Pallet Jack", "Forklift", "Overhead Crane", "Jib Crane", "Hoist",
	"Industrial Battery", "Uninterruptible Power Supply", "Transformer",
	"Switchgear", "Motor Starter", "Soft Starter", "Variable Speed Drive",
	"Industrial Ethernet Switch", "HMI Panel", "Industrial PC", "Barcode Scanner"
	];

	const generatedProducts = [];

	for (let i = 1; i <= count; i++) {
	const category = categories[Math.floor(Math.random() * categories.length)];
	const price = Math.floor(Math.random() * 900000) + 10000; // Between 10,000 and 910,000 KES
	const rating = (Math.random() * 2 + 3).toFixed(1); // Between 3.0 and 5.0
	const stock = Math.floor(Math.random() * 100);
	const isNew = Math.random() > 0.7;
	const isFeatured = Math.random() > 0.8;

	generatedProducts.push({
	id: i,
	name: `${productNames[Math.floor(Math.random() * productNames.length)]} ${Math.floor(Math.random() * 50) + 1}`,
	description: `High-performance ${category.name.toLowerCase()} with advanced features for industrial applications. Built to last with premium materials and rigorous quality control.`,
	price: price,
	category: category,
	rating: parseFloat(rating),
	stock: stock,
	image: `https://source.unsplash.com/random/600x600/?industrial,${category.slug},${i}`,
	specifications: {
	power: `${Math.floor(Math.random() * 50) + 5}kW`,
	voltage: `${Math.floor(Math.random() * 400) + 100}V`,
	weight: `${Math.floor(Math.random() * 500) + 50}kg`,
	dimensions: `${Math.floor(Math.random() * 100) + 50}x${Math.floor(Math.random() * 100) + 50}x${Math.floor(Math.random() * 100) + 50}cm`
	},
	isNew: isNew,
	isFeatured: isFeatured,
	sku: `ZE-${category.slug.toUpperCase().substring(0, 3)}-${Math.floor(Math.random() * 9000) + 1000}`
	});
	}

	return generatedProducts;
	}

	// Generate service data
	function generateServices(count) {
	const serviceNames = [
	"Industrial Automation", "Electrical Installations", "Mechanical Maintenance",
	"PLC Programming", "SCADA System Integration", "Machine Calibration",
	"Preventive Maintenance", "Predictive Maintenance", "Equipment Repair",
	"System Upgrades", "Energy Audits", "Process Optimization",
	"Safety Compliance", "Hazard Analysis", "Risk Assessment",
	"Training Programs", "Technical Consultancy", "Project Management",
	"Facility Management", "System Commissioning", "Troubleshooting",
	"Retrofitting Services", "Vibration Analysis", "Thermal Imaging",
	"Ultrasonic Testing", "Laser Alignment", "Balancing Services",
	"Lubrication Services", "Condition Monitoring", "Reliability Engineering",
	"Root Cause Analysis", "Failure Analysis", "Equipment Installation",
	"System Design", "Control Panel Building", "Motor Rewinding",
	"Transformer Maintenance", "Generator Maintenance", "HVAC Maintenance",
	"Pump Maintenance", "Valve Maintenance", "Conveyor Maintenance",
	"Crane Maintenance", "Forklift Maintenance", "Welding Services",
	"Fabrication Services", "Machining Services", "CAD Design",
	"3D Modeling", "Prototyping"
	];

	const generatedServices = [];

	for (let i = 1; i <= count; i++) {
	const category = categories[Math.floor(Math.random() * categories.length)];
	const price = Math.floor(Math.random() * 900000) + 10000; // Between 10,000 and 910,000 KES
	const duration = `${Math.floor(Math.random() * 10) + 1} ${Math.random() > 0.5 ? 'days' : 'weeks'}`;
	const isPopular = Math.random() > 0.7;

	generatedServices.push({
	id: i,
	name: serviceNames[Math.floor(Math.random() * serviceNames.length)],
	description: `Professional ${category.name.toLowerCase()} service performed by our certified technicians. We provide comprehensive solutions tailored to your specific industrial needs with guaranteed results.`,
	category: category,
	price: price,
	duration: duration,
	image: `https://source.unsplash.com/random/600x600/?service,${category.slug},${i}`,
	isPopular: isPopular,
	includes: [
	"Initial assessment and consultation",
	"Detailed project plan",
	"Quality certified parts and materials",
	"Professional installation",
	"Testing and commissioning",
	"Training for your staff",
	"Post-service support"
	],
	benefits: [
	"Increased equipment efficiency",
	"Reduced downtime",
	"Extended equipment lifespan",
	"Improved safety",
	"Cost savings",
	"Compliance with regulations"
	]
	});
	}

	return generatedServices;
	}

	// Generate project data
	function generateProjects(count) {
	const projectNames = [
	"Nairobi Industrial Park Automation", "Mombasa Port Electrical Upgrade",
	"Kisumu Water Treatment Plant", "Eldoret Textiles Factory Expansion",
	"Thika Power Plant Construction", "Nakuru Dairy Processing Plant",
	"Kericho Tea Factory Automation", "Naivasha Geothermal Plant",
	"Malindi Resort Electrical", "Kakamega Hospital HVAC",
	"Machakos Warehouse Automation", "Embu Agricultural Processing",
	"Meru Cold Storage Facility", "Isiolo Solar Farm",
	"Garissa Water Pumping Station", "Wajir Hospital Generator",
	"Lamu Port Cranes", "Voi Cement Plant",
	"Nyeri Food Processing", "Murang'a Hydropower",
	"Kiambu Industrial Park", "Kitui Textile Mill",
	"Marsabit Wind Farm", "Turkana Oil Field",
	"Baringo Geothermal", "Samburu Solar",
	"Trans Nzoia Grain Storage", "Uasin Gishu Dairy",
	"Elgeyo Marakwet Hydro", "West Pokot Mining",
	"Bomet Tea Factory", "Narok Meat Processing",
	"Kajiado Solar", "Tana River Irrigation",
	"Kilifi Desalination", "Kwale Mining",
	"Taita Taveta Cement", "Makueni Agro-processing",
	"Nyandarua Potato", "Nandi Tea",
	"Busia Border", "Siaya Fish",
	"Homa Bay Lake", "Migori Gold",
	"Kisii Stone", "Nyamira Tea",
	"Nairobi CBD", "Mombasa Old Town"
	];

	const generatedProjects = [];

	for (let i = 1; i <= count; i++) {
	const category = categories[Math.floor(Math.random() * categories.length)];
	const budget = Math.floor(Math.random() * 90000000) + 1000000; // Between 1M and 91M KES
	const duration = `${Math.floor(Math.random() * 12) + 1} months`;
	const hasAward = Math.random() > 0.8;
	const isFeatured = Math.random() > 0.85;

	generatedProjects.push({
	id: i,
	name: projectNames[Math.floor(Math.random() * projectNames.length)],
	description: `Large-scale ${category.name.toLowerCase()} project completed on time and within budget, delivering exceptional results for our client. The project involved multiple teams working in coordination to achieve the desired outcome.`,
	category: category,
	client: `Client ${i}`,
	location: `Location ${i}`,
	budget: budget,
	duration: duration,
	completionDate: new Date(Date.now() - Math.floor(Math.random() * 1000) * 24 * 60 * 60 * 1000).toLocaleDateString(),
	image: `https://source.unsplash.com/random/600x600/?project,${category.slug},${i}`,
	hasAward: hasAward,
	isFeatured: isFeatured,
	awards: hasAward ? [
	"Best Industrial Project 2022",
	"KEBS Certified",
	"Energy Efficiency Award"
	].slice(0, Math.floor(Math.random() * 2) + 1) : [],
	team: [
	{ name: `Engineer ${i}`, role: "Project Manager", image: `https://randomuser.me/api/portraits/${Math.random() > 0.5 ? 'men' : 'women'}/${Math.floor(Math.random() * 100)}.jpg` },
	{ name: `Technician ${i}`, role: "Lead Technician", image: `https://randomuser.me/api/portraits/${Math.random() > 0.5 ? 'men' : 'women'}/${Math.floor(Math.random() * 100)}.jpg` }
	],
	results: [
	`${Math.floor(Math.random() * 50) + 10}% increase in efficiency`,
	`${Math.floor(Math.random() * 40) + 5}% reduction in energy costs`,
	`Completed ${Math.floor(Math.random() * 30) + 5} days ahead of schedule`,
	`Zero safety incidents during ${Math.floor(Math.random() * 10000) + 1000} work hours`
	]
	});
	}

	return generatedProjects;
	}

	// Initialize page routing
	function initRouting() {
	// Handle initial page load
	const path = window.location.hash.substring(1) \|\| 'home';
	navigateTo(path);

	// Handle hash changes
	window.addEventListener('hashchange', function() {
	const path = window.location.hash.substring(1) \|\| 'home';
	navigateTo(path);
	});
	}

	// Navigate to a specific page
	function navigateTo(page) {
	currentPage = page;

	// Hide all page sections
	document.querySelectorAll('.page-section').forEach(section => {
	section.classList.add('hidden');
	});

	// Show the current page section
	const pageSection = document.getElementById(`${page}-page`);
	if (pageSection) {
	pageSection.classList.remove('hidden');

	// Load specific content for the page
	switch(page) {
	case 'home':
	loadHomePage();
	break;
	case 'products':
	loadProductsPage();
	break;
	case 'product':
	const productId = parseInt(window.location.hash.split('/')[1]);
	loadProductDetailPage(productId);
	break;
	case 'services':
	loadServicesPage();
	break;
	case 'service':
	const serviceId = parseInt(window.location.hash.split('/')[1]);
	loadServiceDetailPage(serviceId);
	break;
	case 'projects':
	loadProjectsPage();
	break;
	case 'project':
	const projectId = parseInt(window.location.hash.split('/')[1]);
	loadProjectDetailPage(projectId);
	break;
	case 'about':
	loadAboutPage();
	break;
	case 'contact':
	loadContactPage();
	break;
	case 'cart':
	loadCartPage();
	break;
	case 'checkout':
	loadCheckoutPage();
	break;
	case 'account':
	loadAccountPage();
	break;
	default:
	loadHomePage();
	}
	} else {
	// If page not found, show home page
	document.getElementById('home-page').classList.remove('hidden');
	loadHomePage();
	}

	// Update active nav link
	document.querySelectorAll('.nav-link').forEach(link => {
	if (link.getAttribute('href') === `#${page}`) {
	link.classList.add('text-primary', 'font-semibold');
	} else {
	link.classList.remove('text-primary', 'font-semibold');
	}
	});

	// Scroll to top
	window.scrollTo(0, 0);
	}

	// Toggle mobile menu
	function toggleMobileMenu() {
	const mobileMenu = document.getElementById('mobile-menu');
	mobileMenu.classList.toggle('hidden');
	}

	// Initialize accordion functionality
	function initAccordion() {
	document.querySelectorAll('.accordion-item button').forEach(button => {
	button.addEventListener('click', function() {
	const content = this.nextElementSibling;
	const icon = this.querySelector('i');

	// Toggle content
	if (content.classList.contains('hidden')) {
	content.classList.remove('hidden');
	icon.classList.add('rotate-180');
	} else {
	content.classList.add('hidden');
	icon.classList.remove('rotate-180');
	}
	});
	});
	}

	// Initialize product filtering
	function initProductFiltering() {
	const categoryFilter = document.getElementById('product-category-filter');
	const sortFilter = document.getElementById('product-sort-filter');

	if (categoryFilter) {
	// Populate category filter
	categories.forEach(category => {
	const option = document.createElement('option');
	option.value = category.id;
	option.textContent = category.name;
	categoryFilter.appendChild(option);
	});

	categoryFilter.addEventListener('change', filterProducts);
	}

	if (sortFilter) {
	sortFilter.addEventListener('change', filterProducts);
	}
	}

	// Filter products based on selected filters
	function filterProducts() {
	const categoryFilter = document.getElementById('product-category-filter');
	const sortFilter = document.getElementById('product-sort-filter');
	const searchInput = document.getElementById('product-search');

	let filteredProducts = [...products];

	// Apply category filter
	if (categoryFilter && categoryFilter.value !== 'all') {
	filteredProducts = filteredProducts.filter(product =>
	product.category.id === parseInt(categoryFilter.value)
	);
	}

	// Apply search filter
	if (searchInput && searchInput.value) {
	const searchTerm = searchInput.value.toLowerCase();
	filteredProducts = filteredProducts.filter(product =>
	product.name.toLowerCase().includes(searchTerm) \|\|
	product.description.toLowerCase().includes(searchTerm) \|\|
	product.category.name.toLowerCase().includes(searchTerm)
	);
	}

	// Apply sorting
	if (sortFilter) {
	switch(sortFilter.value) {
	case 'price-low':
	filteredProducts.sort((a, b) => a.price - b.price);
	break;
	case 'price-high':
	filteredProducts.sort((a, b) => b.price - a.price);
	break;
	case 'newest':
	filteredProducts.sort((a, b) => b.id - a.id);
	break;
	case 'rating':
	filteredProducts.sort((a, b) => b.rating - a.rating);
	break;
	default:
	// Default is featured
	filteredProducts.sort((a, b) => (b.isFeatured - a.isFeatured) \|\| (b.id - a.id));
	}
	}

	// Display filtered products
	displayProducts(filteredProducts);
	}

	// Display products in the grid
	function displayProducts(productsToDisplay) {
	const productGrid = document.getElementById('product-grid');
	if (!productGrid) return;

	productGrid.innerHTML = '';

	productsToDisplay.forEach(product => {
	const productCard = document.createElement('div');
	productCard.className = 'bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300';
	productCard.innerHTML = `
	<div class="h-48 overflow-hidden relative">
	<img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover">
	${product.isNew ? '<div class="absolute top-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded">New</div>' : ''}
	${product.isFeatured ? '<div class="absolute top-2 left-2 bg-secondary text-white text-xs px-2 py-1 rounded">Featured</div>' : ''}
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="font-semibold text-lg mb-1">${product.name}</h3>
	<p class="text-gray-600 text-sm">${product.specifications.power}, ${product.specifications.voltage}</p>
	</div>
	<span class="bg-primary bg-opacity-10 text-primary text-sm px-2 py-1 rounded">${product.category.name}</span>
	</div>
	<div class="mt-3 flex justify-between items-center">
	<div>
	<span class="font-bold text-lg">KES ${product.price.toLocaleString()}</span>
	<div class="flex items-center mt-1">
	${Array(Math.floor(product.rating)).fill('<i class="fas fa-star text-yellow-400"></i>').join('')}
	${product.rating % 1 >= 0.5 ? '<i class="fas fa-star-half-alt text-yellow-400"></i>' : ''}
	${Array(5 - Math.ceil(product.rating)).fill('<i class="far fa-star text-yellow-400"></i>').join('')}
	<span class="text-gray-500 text-xs ml-1">(${Math.floor(Math.random() * 100) + 1})</span>
	</div>
	</div>
	<button class="add-to-cart bg-primary hover:bg-yellow-600 text-white p-2 rounded-full transition" data-product-id="${product.id}">
	<i class="fas fa-cart-plus"></i>
	</button>
	</div>
	</div>
	`;

	productGrid.appendChild(productCard);
	});

	// Add event listeners to add-to-cart buttons
	document.querySelectorAll('.add-to-cart').forEach(button => {
	button.addEventListener('click', function() {
	const productId = parseInt(this.getAttribute('data-product-id'));
	addToCart(productId);
	});
	});
	}

	// Initialize service filtering
	function initServiceFiltering() {
	const categoryFilter = document.getElementById('service-category-filter');
	const sortFilter = document.getElementById('service-sort-filter');

	if (categoryFilter) {
	// Populate category filter
	categories.forEach(category => {
	const option = document.createElement('option');
	option.value = category.id;
	option.textContent = category.name;
	categoryFilter.appendChild(option);
	});

	categoryFilter.addEventListener('change', filterServices);
	}

	if (sortFilter) {
	sortFilter.addEventListener('change', filterServices);
	}
	}

	// Filter services based on selected filters
	function filterServices() {
	const categoryFilter = document.getElementById('service-category-filter');
	const sortFilter = document.getElementById('service-sort-filter');
	const searchInput = document.getElementById('service-search');

	let filteredServices = [...services];

	// Apply category filter
	if (categoryFilter && categoryFilter.value !== 'all') {
	filteredServices = filteredServices.filter(service =>
	service.category.id === parseInt(categoryFilter.value)
	);
	}

	// Apply search filter
	if (searchInput && searchInput.value) {
	const searchTerm = searchInput.value.toLowerCase();
	filteredServices = filteredServices.filter(service =>
	service.name.toLowerCase().includes(searchTerm) \|\|
	service.description.toLowerCase().includes(searchTerm) \|\|
	service.category.name.toLowerCase().includes(searchTerm)
	);
	}

	// Apply sorting
	if (sortFilter) {
	switch(sortFilter.value) {
	case 'price-low':
	filteredServices.sort((a, b) => a.price - b.price);
	break;
	case 'price-high':
	filteredServices.sort((a, b) => b.price - a.price);
	break;
	case 'duration':
	filteredServices.sort((a, b) => {
	const aDays = a.duration.includes('weeks') ? parseInt(a.duration) * 7 : parseInt(a.duration);
	const bDays = b.duration.includes('weeks') ? parseInt(b.duration) * 7 : parseInt(b.duration);
	return aDays - bDays;
	});
	break;
	default:
	// Default is popular
	filteredServices.sort((a, b) => (b.isPopular - a.isPopular) \|\| (b.id - a.id));
	}
	}

	// Display filtered services
	displayServices(filteredServices);
	}

	// Display services in the grid
	function displayServices(servicesToDisplay) {
	const serviceGrid = document.getElementById('service-grid');
	if (!serviceGrid) return;

	serviceGrid.innerHTML = '';

	servicesToDisplay.forEach(service => {
	const serviceCard = document.createElement('div');
	serviceCard.className = 'bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition service-card h-full';
	serviceCard.innerHTML = `
	<div class="h-48 overflow-hidden relative">
	<img src="${service.image}" alt="${service.name}" class="w-full h-full object-cover">
	${service.isPopular ? '<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"><span class="text-white text-sm font-medium">Most Popular Service</span></div>' : ''}
	</div>
	<div class="p-6">
	<div class="flex items-center mb-3">
	<div class="bg-primary rounded-full p-3 mr-4 service-icon">
	<i class="fas fa-${service.category.slug === 'electrical' ? 'bolt' : service.category.slug === 'mechanical' ? 'cogs' : service.category.slug === 'automation' ? 'robot' : 'tools'} text-white text-xl"></i>
	</div>
	<h3 class="font-semibold text-xl">${service.name}</h3>
	</div>
	<p class="text-gray-600 mb-4">${service.description.substring(0, 120)}...</p>
	<div class="flex justify-between items-center">
	<span class="text-primary font-medium">From KES ${service.price.toLocaleString()}</span>
	<a href="#service/${service.id}" class="bg-primary hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm transition">
	View Details
	</a>
	</div>
	</div>
	`;

	serviceGrid.appendChild(serviceCard);
	});
	}

	// Initialize project filtering
	function initProjectFiltering() {
	const categoryFilter = document.getElementById('project-category-filter');
	const sortFilter = document.getElementById('project-sort-filter');

	if (categoryFilter) {
	// Populate category filter
	categories.forEach(category => {
	const option = document.createElement('option');
	option.value = category.id;
	option.textContent = category.name;
	categoryFilter.appendChild(option);
	});

	categoryFilter.addEventListener('change', filterProjects);
	}

	if (sortFilter) {
	sortFilter.addEventListener('change', filterProjects);
	}
	}

	// Filter projects based on selected filters
	function filterProjects() {
	const categoryFilter = document.getElementById('project-category-filter');
	const sortFilter = document.getElementById('project-sort-filter');
	const searchInput = document.getElementById('project-search');

	let filteredProjects = [...projects];

	// Apply category filter
	if (categoryFilter && categoryFilter.value !== 'all') {
	filteredProjects = filteredProjects.filter(project =>
	project.category.id === parseInt(categoryFilter.value)
	);
	}

	// Apply search filter
	if (searchInput && searchInput.value) {
	const searchTerm = searchInput.value.toLowerCase();
	filteredProjects = filteredProjects.filter(project =>
	project.name.toLowerCase().includes(searchTerm) \|\|
	project.description.toLowerCase().includes(searchTerm) \|\|
	project.category.name.toLowerCase().includes(searchTerm) \|\|
	project.client.toLowerCase().includes(searchTerm) \|\|
	project.location.toLowerCase().includes(searchTerm)
	);
	}

	// Apply sorting
	if (sortFilter) {
	switch(sortFilter.value) {
	case 'budget-low':
	filteredProjects.sort((a, b) => a.budget - b.budget);
	break;
	case 'budget-high':
	filteredProjects.sort((a, b) => b.budget - a.budget);
	break;
	case 'recent':
	filteredProjects.sort((a, b) => new Date(b.completionDate) - new Date(a.completionDate));
	break;
	default:
	// Default is featured
	filteredProjects.sort((a, b) => (b.isFeatured - a.isFeatured) \|\| (new Date(b.completionDate) - new Date(a.completionDate)));
	}
	}

	// Display filtered projects
	displayProjects(filteredProjects);
	}

	// Display projects in the grid
	function displayProjects(projectsToDisplay) {
	const projectGrid = document.getElementById('project-grid');
	if (!projectGrid) return;

	projectGrid.innerHTML = '';

	projectsToDisplay.forEach(project => {
	const projectCard = document.createElement('div');
	projectCard.className = 'relative rounded-lg overflow-hidden h-96 group';
	projectCard.innerHTML = `
	<img src="${project.image}" alt="${project.name}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
	<div class="absolute inset-0 project-overlay flex flex-col justify-end p-6">
	${project.hasAward ? `<div class="flex items-center mb-2">
	${project.awards.map(award => `<div class="bg-${award.includes('Best') ? 'yellow-400 text-black' : award.includes('KEBS') ? 'blue-500 text-white' : 'green-500 text-white'} text-xs px-2 py-1 rounded mr-2">${award}</div>`).join('')}
	</div>` : ''}
	<h3 class="text-xl font-bold mb-2">${project.name}</h3>
	<p class="text-gray-300 mb-4">${project.description.substring(0, 100)}...</p>
	<div class="flex items-center justify-between">
	<a href="#project/${project.id}" class="text-primary font-medium hover:underline inline-flex items-center">
	View Details <i class="fas fa-arrow-right ml-2"></i>
	</a>
	<div class="flex -space-x-2">
	${project.team.map(member => `<img src="${member.image}" class="w-8 h-8 rounded-full border-2 border-white" alt="${member.name}" title="${member.name} - ${member.role}">`).join('')}
	</div>
	</div>
	</div>
	`;

	projectGrid.appendChild(projectCard);
	});
	}

	// Initialize cart functionality
	function initCart() {
	// Add event listener to cart icon
	const cartIcon = document.getElementById('cart-icon');
	if (cartIcon) {
	cartIcon.addEventListener('click', function(e) {
	e.stopPropagation();
	const cartDropdown = document.getElementById('cart-dropdown');
	cartDropdown.classList.toggle('hidden');
	});
	}

	// Close cart dropdown when clicking outside
	document.addEventListener('click', function() {
	const cartDropdown = document.getElementById('cart-dropdown');
	if (cartDropdown && !cartDropdown.classList.contains('hidden')) {
	cartDropdown.classList.add('hidden');
	}
	});

	// Prevent cart dropdown from closing when clicking inside
	const cartDropdown = document.getElementById('cart-dropdown');
	if (cartDropdown) {
	cartDropdown.addEventListener('click', function(e) {
	e.stopPropagation();
	});
	}

	// Update cart count
	updateCartCount();

	// Load cart items
	loadCartItems();
	}

	// Add product to cart
	function addToCart(productId, quantity = 1) {
	const product = products.find(p => p.id === productId);
	if (!product) return;

	// Check if product already in cart
	const existingItem = cart.find(item => item.product.id === productId);

	if (existingItem) {
	existingItem.quantity += quantity;
	} else {
	cart.push({
	product: product,
	quantity: quantity
	});
	}

	// Save to localStorage
	localStorage.setItem('zadok-cart', JSON.stringify(cart));

	// Update UI
	updateCartCount();
	loadCartItems();

	// Show notification
	showNotification(`${product.name} added to cart`);
	}

	// Remove product from cart
	function removeFromCart(productId) {
	cart = cart.filter(item => item.product.id !== productId);

	// Save to localStorage
	localStorage.setItem('zadok-cart', JSON.stringify(cart));

	// Update UI
	updateCartCount();
	loadCartItems();

	// Show notification
	showNotification('Item removed from cart');
	}

	// Update cart quantity
	function updateCartQuantity(productId, quantity) {
	const item = cart.find(item => item.product.id === productId);
	if (item) {
	item.quantity = quantity;

	// Save to localStorage
	localStorage.setItem('zadok-cart', JSON.stringify(cart));

	// Update UI
	updateCartCount();
	loadCartItems();
	}
	}

	// Update cart count in header
	function updateCartCount() {
	const cartCount = document.getElementById('cart-count');
	if (cartCount) {
	const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
	cartCount.textContent = totalItems;
	cartCount.style.display = totalItems > 0 ? 'flex' : 'none';
	}
	}

	// Load cart items in dropdown
	function loadCartItems() {
	const cartItemsContainer = document.getElementById('cart-items');
	const cartTotalElement = document.getElementById('cart-total');

	if (!cartItemsContainer \|\| !cartTotalElement) return;

	if (cart.length === 0) {
	cartItemsContainer.innerHTML = '<p class="text-gray-500 text-center py-4">Your cart is empty</p>';
	cartTotalElement.textContent = 'KES 0.00';
	return;
	}

	cartItemsContainer.innerHTML = '';

	let total = 0;

	cart.forEach(item => {
	const cartItem = document.createElement('div');
	cartItem.className = 'flex items-center py-3 border-b cart-item';
	cartItem.innerHTML = `
	<div class="flex-shrink-0 h-16 w-16 overflow-hidden rounded-md">
	<img src="${item.product.image}" alt="${item.product.name}" class="h-full w-full object-cover">
	</div>
	<div class="ml-4 flex-1">
	<div class="flex justify-between text-base">
	<h3 class="font-medium">${item.product.name}</h3>
	<p class="ml-4">KES ${(item.product.price * item.quantity).toLocaleString()}</p>
	</div>
	<div class="flex items-center justify-between mt-1">
	<div class="flex items-center border rounded-md">
	<button class="quantity-btn px-2 py-1 text-gray-600 hover:bg-gray-100" data-product-id="${item.product.id}" data-action="decrease">
	<i class="fas fa-minus text-xs"></i>
	</button>
	<input type="number" min="1" value="${item.quantity}" class="w-10 text-center border-0 focus:ring-0" data-product-id="${item.product.id}">
	<button class="quantity-btn px-2 py-1 text-gray-600 hover:bg-gray-100" data-product-id="${item.product.id}" data-action="increase">
	<i class="fas fa-plus text-xs"></i>
	</button>
	</div>
	<button class="remove-btn text-red-500 hover:text-red-700 text-sm" data-product-id="${item.product.id}">
	<i class="fas fa-trash-alt mr-1"></i> Remove
	</button>
	</div>
	</div>
	`;

	cartItemsContainer.appendChild(cartItem);
	total += item.product.price * item.quantity;
	});

	// Update total
	cartTotalElement.textContent = `KES ${total.toLocaleString()}`;

	// Add event listeners to quantity buttons
	document.querySelectorAll('.quantity-btn').forEach(button => {
	button.addEventListener('click', function() {
	const productId = parseInt(this.getAttribute('data-product-id'));
	const action = this.getAttribute('data-action');
	const input = this.parentElement.querySelector('input');
	let quantity = parseInt(input.value);

	if (action === 'increase') {
	quantity++;
	} else if (action === 'decrease' && quantity > 1) {
	quantity--;
	}

	input.value = quantity;
	updateCartQuantity(productId, quantity);
	});
	});

	// Add event listeners to remove buttons
	document.querySelectorAll('.remove-btn').forEach(button => {
	button.addEventListener('click', function() {
	const productId = parseInt(this.getAttribute('data-product-id'));
	removeFromCart(productId);
	});
	});

	// Add event listeners to quantity inputs
	document.querySelectorAll('.cart-item input[type="number"]').forEach(input => {
	input.addEventListener('change', function() {
	const productId = parseInt(this.getAttribute('data-product-id'));
	const quantity = parseInt(this.value) \|\| 1;
	updateCartQuantity(productId, quantity);
	});
	});
	}

	// Initialize forms
	function initForms() {
	// Contact form
	const contactForm = document.getElementById('contact-form');
	if (contactForm) {
	contactForm.addEventListener('submit', function(e) {
	e.preventDefault();

	// Simulate form submission
	const submitBtn = this.querySelector('button[type="submit"]');
	const originalText = submitBtn.innerHTML;

	submitBtn.disabled = true;
	submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Sending...';

	setTimeout(() => {
	submitBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Message Sent';
	showNotification('Your message has been sent successfully!');

	// Reset form after 2 seconds
	setTimeout(() => {
	this.reset();
	submitBtn.disabled = false;
	submitBtn.innerHTML = originalText;
	}, 2000);
	}, 1500);
	});
	}

	// Newsletter form
	const newsletterForm = document.getElementById('newsletter-form');
	if (newsletterForm) {
	newsletterForm.addEventListener('submit', function(e) {
	e.preventDefault();

	const emailInput = this.querySelector('input[type="email"]');
	const submitBtn = this.querySelector('button[type="submit"]');
	const originalText = submitBtn.innerHTML;

	submitBtn.disabled = true;
	submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Subscribing...';

	setTimeout(() => {
	submitBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Subscribed';
	showNotification('Thank you for subscribing to our newsletter!');
	emailInput.value = '';

	// Reset after 2 seconds
	setTimeout(() => {
	submitBtn.disabled = false;
	submitBtn.innerHTML = originalText;
	}, 2000);
	}, 1500);
	});
	}

	// Checkout form
	const checkoutForm = document.getElementById('checkout-form');
	if (checkoutForm) {
	checkoutForm.addEventListener('submit', function(e) {
	e.preventDefault();

	const submitBtn = this.querySelector('button[type="submit"]');
	const originalText = submitBtn.innerHTML;

	submitBtn.disabled = true;
	submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';

	setTimeout(() => {
	// Clear cart
	cart = [];
	localStorage.setItem('zadok-cart', JSON.stringify(cart));
	updateCartCount();

	submitBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Order Placed';
	showNotification('Your order has been placed successfully!');

	// Redirect to thank you page after 2 seconds
	setTimeout(() => {
	window.location.hash = '#thank-you';
	}, 2000);
	}, 2000);
	});
	}
	}

	// Show notification
	function showNotification(message) {
	const notification = document.createElement('div');
	notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center z-50 animate-slide-up';
	notification.innerHTML = `
	<i class="fas fa-check-circle mr-2"></i>
	<span>${message}</span>
	`;

	document.body.appendChild(notification);

	// Remove after 3 seconds
	setTimeout(() => {
	notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
	setTimeout(() => {
	notification.remove();
	}, 300);
	}, 3000);
	}

	// Load home page content
	function loadHomePage() {
	// Initialize hero slider
	if (typeof Swiper !== 'undefined') {
	new Swiper('.hero-slider', {
	loop: true,
	autoplay: {
	delay: 5000,
	},
	pagination: {
	el: '.swiper-pagination',
	clickable: true,
	},
	});
	}

	// Animate counter values
	animateCounter('years-counter', 18, 2000);
	animateCounter('projects-counter', 1200, 2000);
	animateCounter('clients-counter', 2000, 2000);
	animateCounter('products-counter', products.length, 2000);

	// Load featured products
	const featuredProducts = products.filter(p => p.isFeatured).slice(0, 10);
	displayFeaturedProducts(featuredProducts);

	// Initialize featured products slider
	if (typeof Swiper !== 'undefined' && featuredProducts.length > 0) {
	new Swiper('.featured-products-slider', {
	slidesPerView: 1,
	spaceBetween: 20,
	pagination: {
	el: '.swiper-pagination',
	clickable: true,
	},
	breakpoints: {
	640: {
	slidesPerView: 2,
	},
	1024: {
	slidesPerView: 4,
	}
	}
	});
	}

	// Load testimonials slider
	if (typeof Swiper !== 'undefined') {
	new Swiper('.testimonials-slider', {
	slidesPerView: 1,
	spaceBetween: 20,
	pagination: {
	el: '.swiper-pagination',
	clickable: true,
	},
	breakpoints: {
	768: {
	slidesPerView: 2,
	}
	}
	});
	}

	// Load clients slider
	if (typeof Swiper !== 'undefined') {
	new Swiper('.clients-slider', {
	slidesPerView: 2,
	spaceBetween: 30,
	autoplay: {
	delay: 2500,
	disableOnInteraction: false,
	},
	breakpoints: {
	640: {
	slidesPerView: 3,
	},
	768: {
	slidesPerView: 4,
	},
	1024: {
	slidesPerView: 6,
	}
	}
	});
	}
	}

	// Display featured products in slider
	function displayFeaturedProducts(featuredProducts) {
	const sliderWrapper = document.querySelector('.featured-products-slider .swiper-wrapper');
	if (!sliderWrapper) return;

	sliderWrapper.innerHTML = '';

	featuredProducts.forEach(product => {
	const slide = document.createElement('div');
	slide.className = 'swiper-slide';
	slide.innerHTML = `
	<div class="bg-white rounded-lg shadow-md overflow-hidden product-card h-full">
	<div class="h-48 overflow-hidden relative">
	<img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover">
	${product.isNew ? '<div class="absolute top-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded">New</div>' : ''}
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="font-semibold text-lg mb-1">${product.name}</h3>
	<p class="text-gray-600 text-sm">${product.specifications.power}, ${product.specifications.voltage}</p>
	</div>
	<span class="bg-primary bg-opacity-10 text-primary text-sm px-2 py-1 rounded">${product.category.name}</span>
	</div>
	<div class="mt-3 flex justify-between items-center">
	<span class="font-bold text-lg">KES ${product.price.toLocaleString()}</span>
	<button class="add-to-cart bg-primary hover:bg-yellow-600 text-white p-2 rounded-full transition" data-product-id="${product.id}">
	<i class="fas fa-cart-plus"></i>
	</button>
	</div>
	</div>
	</div>
	`;

	sliderWrapper.appendChild(slide);
	});

	// Add event listeners to add-to-cart buttons
	document.querySelectorAll('.add-to-cart').forEach(button => {
	button.addEventListener('click', function() {
	const productId = parseInt(this.getAttribute('data-product-id'));
	addToCart(productId);
	});
	});
	}

	// Animate counter
	function animateCounter(elementId, target, duration) {
	const element = document.getElementById(elementId);
	if (!element) return;

	const start = 0;
	const increment = target / (duration / 16); // 60fps
	let current = start;

	const timer = setInterval(() => {
	current += increment;
	if (current >= target) {
	clearInterval(timer);
	current = target;
	}
	element.textContent = Math.floor(current).toLocaleString();
	}, 16);
	}

	// Load products page
	function loadProductsPage() {
	// Filter and display products
	filterProducts();

	// Add event listener to search input
	const searchInput = document.getElementById('product-search');
	if (searchInput) {
	searchInput.addEventListener('input', filterProducts);
	}

	// Add event listener to load more button
	const loadMoreBtn = document.getElementById('load-more-btn');
	if (loadMoreBtn) {
	loadMoreBtn.addEventListener('click', function() {
	// In a real app, this would load more products from the server
	// For this demo, we'll just show a message
	const spinner = document.getElementById('load-more-spinner');
	const text = document.getElementById('load-more-text');

	spinner.classList.remove('hidden');
	text.textContent = 'Loading...';

	setTimeout(() => {
	spinner.classList.add('hidden');
	text.textContent = 'No more products to load';
	loadMoreBtn.disabled = true;
	}, 1500);
	});
	}
	}

	// Load product detail page
	function loadProductDetailPage(productId) {
	const product = products.find(p => p.id === productId);
	if (!product) {
	// Product not found, redirect to products page
	window.location.hash = '#products';
	return;
	}

	const productDetail = document.getElementById('product-detail');
	if (productDetail) {
	productDetail.innerHTML = `
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
	<div>
	<div class="bg-white rounded-lg shadow-md overflow-hidden mb-4">
	<img src="${product.image}" alt="${product.name}" class="w-full h-96 object-contain">
	</div>
	<div class="grid grid-cols-4 gap-2">
	<div class="border rounded-md overflow-hidden cursor-pointer">
	<img src="${product.image}" alt="${product.name}" class="w-full h-20 object-cover">
	</div>
	<div class="border rounded-md overflow-hidden cursor-pointer">
	<img src="https://source.unsplash.com/random/300x300/?${product.category.slug},1" alt="${product.name}" class="w-full h-20 object-cover">
	</div>
	<div class="border rounded-md overflow-hidden cursor-pointer">
	<img src="https://source.unsplash.com/random/300x300/?${product.category.slug},2" alt="${product.name}" class="w-full h-20 object-cover">
	</div>
	<div class="border rounded-md overflow-hidden cursor-pointer">
	<img src="https://source.unsplash.com/random/300x300/?${product.category.slug},3" alt="${product.name}" class="w-full h-20 object-cover">
	</div>
	</div>
	</div>
	<div>
	<h1 class="text-3xl font-bold mb-2">${product.name}</h1>
	<div class="flex items-center mb-4">
	<div class="text-primary mr-2">
	${Array(Math.floor(product.rating)).fill('<i class="fas fa-star"></i>').join('')}
	${product.rating % 1 >= 0.5 ? '<i class="fas fa-star-half-alt"></i>' : ''}
	${Array(5 - Math.ceil(product.rating)).fill('<i class="far fa-star"></i>').join('')}
	</div>
	<span class="text-gray-500 text-sm">(${Math.floor(Math.random() * 100) + 1} reviews)</span>
	${product.isNew ? '<span class="ml-2 bg-primary text-white text-xs px-2 py-1 rounded">New</span>' : ''}
	</div>

	<div class="mb-6">
	<span class="text-2xl font-bold">KES ${product.price.toLocaleString()}</span>
	<span class="text-sm text-gray-500 ml-1">+ VAT if applicable</span>
	</div>

	<div class="mb-6">
	<p class="text-gray-700 mb-4">${product.description}</p>
	<div class="flex items-center text-sm text-gray-500 mb-2">
	<i class="fas fa-box mr-2"></i>
	<span>SKU: ${product.sku}</span>
	</div>
	<div class="flex items-center text-sm text-gray-500 mb-2">
	<i class="fas fa-layer-group mr-2"></i>
	<span>Category: ${product.category.name}</span>
	</div>
	<div class="flex items-center text-sm text-gray-500">
	<i class="fas fa-check-circle mr-2"></i>
	<span>${product.stock > 0 ? 'In Stock' : 'Out of Stock'}</span>
	</div>
	</div>

	<div class="border-t border-b py-4 mb-6">
	<h3 class="font-semibold mb-2">Specifications</h3>
	<div class="grid grid-cols-2 gap-2 text-sm">
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Power</span>
	<span class="font-medium">${product.specifications.power}</span>
	</div>
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Voltage</span>
	<span class="font-medium">${product.specifications.voltage}</span>
	</div>
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Weight</span>
	<span class="font-medium">${product.specifications.weight}</span>
	</div>
	<div class="flex justify-between py-1 border-b border-gray-100">
	<span class="text-gray-600">Dimensions</span>
	<span class="font-medium">${product.specifications.dimensions}</span>
	</div>
	</div>
	</div>

	<div class="flex items-center mb-6">
	<div class="flex items-center border rounded-md mr-4">
	<button class="quantity-btn px-3 py-2 text-gray-600 hover:bg-gray-100" data-action="decrease">
	<i class="fas fa-minus"></i>
	</button>
	<input type="number" min="1" value="1" class="w-12 text-center border-0 focus:ring-0">
	<button class="quantity-btn px-3 py-2 text-gray-600 hover:bg-gray-100" data-action="increase">
	<i class="fas fa-plus"></i>
	</button>
	</div>
	<button class="add-to-cart bg-primary hover:bg-yellow-600 text-white px-6 py-2 rounded-md font-medium transition flex-1" data-product-id="${product.id}">
	<i class="fas fa-cart-plus mr-2"></i> Add to Cart
	</button>
	</div>

	<div class="flex space-x-4">
	<button class="flex items-center text-gray-600 hover:text-primary">
	<i class="far fa-heart mr-2"></i> Wishlist
	</button>
	<button class="flex items-center text-gray-600 hover:text-primary">
	<i class="fas fa-share-alt mr-2"></i> Share
	</button>
	</div>
	</div>
	</div>

	<div class="mt-12">
	<div class="border-b border-gray-200">
	<nav class="-mb-px flex space-x-8">
	<button class="tab-btn border-b-2 border-primary text-primary px-4 py-3 font-medium" data-tab="description">
	Description
	</button>
	<button class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 px-4 py-3 font-medium" data-tab="specifications">
	Specifications
	</button>
	<button class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 px-4 py-3 font-medium" data-tab="reviews">
	Reviews (${Math.floor(Math.random() * 100) + 1})
	</button>
	</nav>
	</div>

	<div id="description-tab" class="tab-content py-6">
	<h3 class="font-semibold text-lg mb-3">Product Description</h3>
	<p class="text-gray-700 mb-4">${product.description}</p>
	<p class="text-gray-700 mb-4">This high-quality industrial equipment is designed for durability and performance in demanding environments. Manufactured to international standards, it offers reliable operation with minimal maintenance requirements.</p>
	<ul class="list-disc pl-5 text-gray-700 mb-4">
	<li>Premium materials for extended lifespan</li>
	<li>Rigorously tested for quality assurance</li>
	<li>Energy efficient design</li>
	<li>Easy to install and maintain</li>
	<li>Backed by manufacturer warranty</li>
	</ul>
	</div>

	<div id="specifications-tab" class="tab-content py-6 hidden">
	<h3 class="font-semibold text-lg mb-3">Technical Specifications</h3>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-600">Model</td>
	<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">${product.sku}</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-600">Power Rating</td>
	<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">${product.specifications.power}</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-600">Voltage</td>
	<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">${product.specifications.voltage}</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-600">Weight</td>
	<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">${product.specifications.weight}</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-600">Dimensions</td>
	<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">${product.specifications.dimensions}</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-600">Material</td>
	<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">High-grade steel/aluminum</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-600">Protection Class</td>
	<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">IP65</td>
	</tr>
	<tr>
	<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-600">Warranty</td>
	<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2 years</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<div id="reviews-tab" class="tab-content py-6 hidden">
	<h3 class="font-semibold text-lg mb-6">Customer Reviews</h3>

	<div class="mb-8">
	<div class="flex items-center mb-4">
	<div class="text-primary text-2xl mr-2">
	${Array(Math.floor(product.rating)).fill('<i class="fas fa-star"></i>').join('')}
	${product.rating % 1 >= 0.5 ? '<i class="fas fa-star-half-alt"></i>' : ''}
	${Array(5 - Math.ceil(product.rating)).fill('<i class="far fa-star"></i>').join('')}
	</div>
	<span class="text-gray-600">${product.rating.toFixed(1)} out of 5</span>
	</div>
	<button class="bg-primary hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm transition">
	Write a Review
	</button>
	</div>

	<div class="space-y-6">
	<div class="bg-white p-6 rounded-lg shadow-sm">
	<div class="flex items-center mb-3">
	<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer" class="w-10 h-10 rounded-full mr-3">
	<div>
	<h4 class="font-medium">James Kariuki</h4>
	<div class="flex items-center text-sm text-gray-500">
	<div class="text-yellow-400 mr-1">
	<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>
	<span>2 weeks ago</span>
	</div>
	</div>
	</div>
	<p class="text-gray-700">This product has exceeded my expectations. The build quality is excellent and it performs exactly as described. Delivery was prompt and the installation was straightforward with the provided manual.</p>
	</div>

	<div class="bg-white p-6 rounded-lg shadow-sm">
	<div class="flex items-center mb-3">
	<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer" class="w-10 h-10 rounded-full mr-3">
	<div>
	<h4 class="font-medium">Susan Wanjiku</h4>
	<div class="flex items-center text-sm text-gray-500">
	<div class="text-yellow-400 mr-1">
	<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="far fa-star"></i>
	</div>
	<span>1 month ago</span>
	</div>
	</div>
	</div>
	<p class="text-gray-700">Good product overall, but the documentation could be more detailed. Performance is solid and it integrates well with our existing systems. Customer support was helpful when we had questions.</p>
	</div>
	</div>
	</div>
	</div>

	<div class="mt-12">
	<h3 class="text-xl font-semibold mb-6">Related Products</h3>
	<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
	${products.filter(p => p.category.id === product.category.id && p.id !== product.id)
	.slice(0, 4)
	.map(relatedProduct => `
	<div class="bg-white rounded-lg shadow-md overflow-hidden product-card">
	<div class="h-48 overflow-hidden relative">
	<img src="${relatedProduct.image}" alt="${relatedProduct.name}" class="w-full h-full object-cover">
	${relatedProduct.isNew ? '<div class="absolute top-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded">New</div>' : ''}
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="font-semibold text-lg mb-1">${relatedProduct.name}</h3>
	<p class="text-gray-600 text-sm">${relatedProduct.specifications.power}, ${relatedProduct.specifications.voltage}</p>
	</div>
	<span class="bg-primary bg-opacity-10 text-primary text-sm px-2 py-1 rounded">${relatedProduct.category.name}</span>
	</div>
	<div class="mt-3 flex justify-between items-center">
	<span class="font-bold text-lg">KES ${relatedProduct.price.toLocaleString()}</span>
	<button class="add-to-cart bg-primary hover:bg-yellow-600 text-white p-2 rounded-full transition" data-product-id="${relatedProduct.id}">
	<i class="fas fa-cart-plus"></i>
	</button>
	</div>
	</div>
	</div>
	`).join('')}
	</div>
	</div>
	`;

	// Initialize tab functionality
	const tabButtons = productDetail.querySelectorAll('.tab-btn');
	const tabContents = productDetail.querySelectorAll('.tab-content');

	tabButtons.forEach(button => {
	button.addEventListener('click', function() {
	const tabId = this.getAttribute('data-tab');

	// Update active tab button
	tabButtons.forEach(btn => {
	btn.classList.remove('border-primary', 'text-primary');
	btn.classList.add('border-transparent', 'text-gray-500');
	});
	this.classList.add('border-primary', 'text-primary');
	this.classList.remove('border-transparent', 'text-gray-500');

	// Show selected tab content
	tabContents.forEach(content => {
	content.classList.add('hidden');
	});
	document.getElementById(`${tabId}-tab`).classList.remove('hidden');
	});
	});

	// Initialize quantity buttons
	const quantityInput = productDetail.querySelector('input[type="number"]');
	const quantityButtons = productDetail.querySelectorAll('.quantity-btn');

	quantityButtons.forEach(button => {
	button.addEventListener('click', function() {
	const action = this.getAttribute('data-action');
	let quantity = parseInt(quantityInput.value);

	if (action === 'increase') {
	quantity++;
	} else if (action === 'decrease' && quantity > 1) {
	quantity--;
	}

	quantityInput.value = quantity;
	});
	});

	// Initialize add to cart button
	const addToCartBtn = productDetail.querySelector('.add-to-cart');
	if (addToCartBtn) {
	addToCartBtn.addEventListener('click', function() {
	const productId = parseInt(this.getAttribute('data-product-id'));
	const quantity = parseInt(quantityInput.value) \|\| 1;
	addToCart(productId, quantity);
	});
	}
	}
	}

	// Load services page
	function loadServicesPage() {
	// Filter and display services
	filterServices();

	// Add event listener to search input
	const searchInput = document.getElementById('service-search');
	if (searchInput) {
	searchInput.addEventListener('input', filterServices);
	}
	}

	// Load service detail page
	function loadServiceDetailPage(serviceId) {
	const service = services.find(s => s.id === serviceId);
	if (!service) {
	// Service not found, redirect to services page
	window.location.hash = '#services';
	return;
	}

	const serviceDetail = document.getElementById('service-detail');
	if (serviceDetail) {
	serviceDetail.innerHTML = `
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
	<div>
	<div class="bg-white rounded-lg shadow-md overflow-hidden mb-4">
	<img src="${service.image}" alt="${service.name}" class="w-full h-96 object-cover">
	</div>
	</div>
	<div>
	<h1 class="text-3xl font-bold mb-2">${service.name}</h1>
	<div class="flex items-center mb-4">
	<span class="bg-primary text-white text-xs px-2 py-1 rounded mr-2">${service.category.name}</span>
	${service.isPopular ? '<span class="bg-green-500 text-white text-xs px-2 py-1 rounded">Popular</span>' : ''}
	</div>

	<div class="mb-6">
	<span class="text-2xl font-bold">KES ${service.price.toLocaleString()}</span>
	<span class="text-sm text-gray-500 ml-1">Estimated duration: ${service.duration}</span>
	</div>

	<div class="mb-6">
	<p class="text-gray-700 mb-4">${
	</head>
	</html>