Spaces:

Geoff391
/

zadok

Running

App Files Files Community

zadok / index.html

Commit History

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

Geoff391 commited on Aug 12, 2025

<!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"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#D4AF37', // Gold secondary: '#000000', // Black accent: '#FFFFFF', // White }, fontFamily: { sans: ['Inter', 'sans-serif'], }, } } } </script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; 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; } } </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> </div> <div class="flex space-x-4"> <span class="cursor-pointer hover:text-primary">KES</span> <span class="cursor-pointer hover:text-primary">USD</span> <span class="cursor-pointer hover:text-primary">Swahili</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">Home</a> <a href="#products" class="nav-link font-medium text-secondary hover:text-primary">Products</a> <a href="#services" class="nav-link font-medium text-secondary hover:text-primary">Services</a> <a href="#about" class="nav-link font-medium text-secondary hover:text-primary">About</a> <a href="#contact" class="nav-link font-medium text-secondary hover:text-primary">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"></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"></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">Checkout</button> </div> </div> </div> <button class="bg-primary hover:bg-yellow-600 text-white px-4 py-2 rounded-md hidden md:block transition">Login</button> <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" 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">Home</a> <a href="#products" class="nav-link font-medium text-secondary hover:text-primary">Products</a> <a href="#services" class="nav-link font-medium text-secondary hover:text-primary">Services</a> <a href="#about" class="nav-link font-medium text-secondary hover:text-primary">About</a> <a href="#contact" class="nav-link font-medium text-secondary hover:text-primary">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"> <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="absolute inset-0 w-full h-full object-cover"> <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">Browse Products</a> <a href="#services" class="bg-transparent hover:bg-white hover:text-secondary border-2 border-white text-white px-8 py-3 rounded-md font-semibold transition">Our Services</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>  <section class="py-12 bg-gray-50"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">Our Product Categories</h2> <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition cursor-pointer group"> <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</p> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition cursor-pointer group"> <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> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition cursor-pointer group"> <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> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition cursor-pointer group"> <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> </div> </div> </section>  <section id="products" class="py-12 bg-white"> <div class="container mx-auto px-4"> <div class="flex justify-between items-center mb-8"> <h2 class="text-3xl font-bold">Our Products</h2> <div class="flex space-x-2"> <select class="border rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary"> <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"> <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> <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"> Load More Products </button> </div> </div> </section>  <section id="services" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">Our Engineering Services</h2> <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"> <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-2 mr-3"> <i class="fas fa-robot text-white"></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.</p> <button class="text-primary font-medium hover:underline">Book Consultation</button> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition"> <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-2 mr-3"> <i class="fas fa-bolt text-white"></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.</p> <button class="text-primary font-medium hover:underline">Book Consultation</button> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition"> <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-2 mr-3"> <i class="fas fa-cogs text-white"></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.</p> <button class="text-primary font-medium hover:underline">Book Consultation</button> </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-block"> Request Custom Service </a> </div> </div> </section>  <section id="about" class="py-16 bg-white"> <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"> <h2 class="text-3xl font-bold 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-gray-50 p-4 rounded-lg"> <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-gray-50 p-4 rounded-lg"> <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-gray-50 p-4 rounded-lg"> <h3 class="font-semibold text-primary mb-1">2000+</h3> <p class="text-gray-600 text-sm">Satisfied Clients</p> </div> <div class="bg-gray-50 p-4 rounded-lg"> <h3 class="font-semibold text-primary mb-1">50+</h3> <p class="text-gray-600 text-sm">Certified Engineers</p> </div> </div> <button class="bg-primary hover:bg-yellow-600 text-white px-6 py-2 rounded-md font-medium transition"> Read Our Full Story </button> </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=2070&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=2070&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=2070&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"> <div class="text-center text-white p-4"> <i class="fas fa-play-circle text-4xl mb-2"></i> <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="flex flex-wrap justify-center items-center gap-8"> <img src="https://via.placeholder.com/150x60?text=Client+1" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> <img src="https://via.placeholder.com/150x60?text=Client+2" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> <img src="https://via.placeholder.com/150x60?text=Client+3" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> <img src="https://via.placeholder.com/150x60?text=Client+4" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> <img src="https://via.placeholder.com/150x60?text=Client+5" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> </div> </div> </div> </section>  <section class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">What Our Clients Say</h2> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="bg-white p-6 rounded-lg shadow-md"> <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."</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</p> </div> </div> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <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."</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</p> </div> </div> </div> <div class="bg-white p-6 rounded-lg shadow-md"> <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. 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</p> </div> </div> </div> </div> </div> </section>  <section id="contact" class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">Contact Us</h2> <div class="flex flex-col lg:flex-row gap-8"> <div class="lg:w-1/2"> <div class="bg-gray-50 p-8 rounded-lg shadow-md h-full"> <h3 class="text-xl font-semibold mb-6">Get In Touch</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" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"> </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" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"> </div> </div> <div class="mb-4"> <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> <input type="text" id="subject" name="subject" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"> </div> <div class="mb-4"> <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"></textarea> </div> <button type="submit" class="bg-primary hover:bg-yellow-600 text-white px-6 py-2 rounded-md font-medium transition w-full"> Send Message </button> </form> </div> </div> <div class="lg:w-1/2"> <div class="bg-gray-50 p-8 rounded-lg shadow-md h-full"> <h3 class="text-xl font-semibold mb-6">Our Offices</h3> <div class="space-y-6"> <div class="flex items-start"> <div class="bg-primary text-white p-3 rounded-full mr-4"> <i class="fas fa-map-marker-alt"></i> </div> <div> <h4 class="font-medium mb-1">Headquarters</h4> <p class="text-gray-600">Zadok Engineering Center, Mombasa Road, Nairobi, Kenya</p> </div> </div> <div class="flex items-start"> <div class="bg-primary text-white p-3 rounded-full mr-4"> <i class="fas fa-phone-alt"></i> </div> <div> <h4 class="font-medium mb-1">Phone</h4> <p class="text-gray-600">+254 700 123456 (Sales)</p> <p class="text-gray-600">+254 700 654321 (Support)</p> </div> </div> <div class="flex items-start"> <div class="bg-primary text-white p-3 rounded-full mr-4"> <i class="fas fa-envelope"></i> </div> <div> <h4 class="font-medium mb-1">Email</h4> <p class="text-gray-600">sales@zadokengineering.co.ke</p> <p class="text-gray-600">support@zadokengineering.co.ke</p> </div> </div> <div class="flex items-start"> <div class="bg-primary text-white p-3 rounded-full mr-4"> <i class="fas fa-clock"></i> </div> <div> <h4 class="font-medium mb-1">Working Hours</h4> <p class="text-gray-600">Monday - Friday: 8:00 AM - 5:00 PM</p> <p class="text-gray-600">Saturday: 9:00 AM - 1:00 PM</p> </div> </div> </div> <div class="mt-8"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.808567438112!2d36.82175631475399!3d-1.292385835979229!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f10d7b2d5f3b9%3A0x4a0f8a7a0a0a0a0!2sMombasa%20Road%2C%20Nairobi!5e0!3m2!1sen!2ske!4v1620000000000!5m2!1sen!2ske" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg"></iframe> </div> </div> </div> </div> </div> </section>  <section class="py-12 bg-secondary text-white"> <div class="container mx-auto px-4 text-center"> <h2 class="text-2xl font-bold mb-4">Subscribe to Our Newsletter</h2> <p class="max-w-2xl mx-auto mb-6">Stay updated with our latest products, services, and industry insights.</p> <form class="max-w-md mx-auto flex"> <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-md focus:outline-none text-gray-800"> <button type="submit" class="bg-primary hover:bg-yellow-600 px-6 py-3 rounded-r-md font-medium transition"> Subscribe </button> </form> </div> </section>  <footer class="bg-gray-900 text-white pt-12 pb-6"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> <div> <img src="https://via.placeholder.com/180x60?text=Zadok+Engineering" alt="Zadok Engineering Logo" class="h-12 mb-4"> <p class="text-gray-400 mb-4">Providing premium engineering solutions and equipment since 2005.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> </div> </div> <div> <h3 class="font-semibold text-lg mb-4">Quick Links</h3> <ul class="space-y-2"> <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li> <li><a href="#products" class="text-gray-400 hover:text-white transition">Products</a></li> <li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li> <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li> <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> </ul> </div> <div> <h3 class="font-semibold text-lg mb-4">Products</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition">Electrical Equipment</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Mechanical Tools</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Automation Systems</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Heavy Machinery</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Safety Gear</a></li> </ul> </div> <div> <h3 class="font-semibold text-lg mb-4">Contact Info</h3> <ul class="space-y-2 text-gray-400"> <li class="flex items-start"> <i class="fas fa-map-marker-alt mt-1 mr-3 text-primary"></i> <span>Zadok Engineering Center, Mombasa Road, Nairobi</span> </li> <li class="flex items-center"> <i class="fas fa-phone-alt mr-3 text-primary"></i> <span>+254 700 123456</span> </li> <li class="flex items-center"> <i class="fas fa-envelope mr-3 text-primary"></i> <span>info@zadokengineering.co.ke</span> </li> </ul> </div> </div> <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-400 mb-4 md:mb-0">© 2023 Zadok Engineering Company. All rights reserved.</p> <div class="flex space-x-6"> <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a> <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a> <a href="#" class="text-gray-400 hover:text-white transition">Sitemap</a> </div> </div> </div> </footer>  <div class="fixed bottom-6 right-6 z-50"> <div class="bg-primary text-white rounded-full w-14 h-14 flex items-center justify-center cursor-pointer shadow-xl hover:bg-yellow-600 transition" id="chat-button"> <i class="fas fa-comment-dots text-2xl"></i> </div> <div class="absolute bottom-20 right-0 w-80 bg-white rounded-lg shadow-xl hidden" id="chat-window"> <div class="bg-primary text-white p-4 rounded-t-lg flex justify-between items-center"> <h3 class="font-semibold">Live Chat Support</h3> <button id="close-chat" class="text-white hover:text-gray-200"> <i class="fas fa-times"></i> </button> </div> <div class="p-4 h-60 overflow-y-auto" id="chat-messages"> <div class="mb-4"> <div class="bg-gray-100 rounded-lg p-3 max-w-xs"> <p class="text-sm">Hello! Welcome to Zadok Engineering. How can we help you today?</p> </div> <p class="text-xs text-gray-500 mt-1">Support Agent • Just now</p> </div> </div> <div class="p-4 border-t"> <div class="flex"> <input type="text" placeholder="Type your message..." class="flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-1 focus:ring-primary"> <button class="bg-primary hover:bg-yellow-600 text-white px-4 py-2 rounded-r-md transition"> <i class="fas fa-paper-plane"></i> </button> </div> </div> </div> </div>  <a href="#home" class="fixed bottom-6 left-6 bg-secondary text-white p-3 rounded-full shadow-lg hover:bg-gray-800 transition z-50"> <i class="fas fa-arrow-up"></i> </a> <script> // Sample product data const products = [ { id: 1, name: "Industrial Circuit Breaker", category: "Electrical", price: 24500, image: "https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", rating: 4, stock: 15 }, { id: 2, name: "Heavy Duty Drill Press", category: "Mechanical", price: 38750, image: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", rating: 5, stock: 8 }, { id: 3, name: "PLC Control Panel", category: "Automation", price: 125000, image: "https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", rating: 4, stock: 5 }, { id: 4, name: "Industrial Conveyor Belt", category: "Mechanical", price: 89500, image: "https://images.unsplash.com/photo-1581093057153-9ec7d1a5a6e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", rating: 3, stock: 3 }, { id: 5, name: "High Voltage Transformer", category: "Electrical", price: 187000, image: "https://images.unsplash.com/photo-1581093057923-ffd3a751ea3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", rating: 5, stock: 7 }, { id: 6, name: "Hydraulic Excavator", category: "Heavy Machinery", price: 4250000, image: "https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", rating: 5, stock: 2 }, { id: 7, name: "Industrial Pressure Gauge", category: "Mechanical", price: 12500, image: "https://images.unsplash.com/photo-1581093450021-0c8b94d3c535?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", rating: 4, stock: 22 }, { id: 8, name: "Automation Sensors Kit", category: "Automation", price: 45600, image: "https://images.unsplash.com/photo-1581093057153-9ec7d1a5a6e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", rating: 4, stock: 12 } ]; // Shopping cart let cart = []; // DOM Elements const productGrid = document.getElementById('product-grid'); const cartCount = document.getElementById('cart-count'); const cartItems = document.getElementById('cart-items'); const cartTotal = document.getElementById('cart-total'); const cartDropdown = document.getElementById('cart-dropdown'); const cartIcon = document.getElementById('cart-icon'); const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); const chatButton = document.getElementById('chat-button'); const chatWindow = document.getElementById('chat-window'); const closeChat = document.getElementById('close-chat'); const contactForm = document.getElementById('contact-form'); // Initialize the page document.addEventListener('DOMContentLoaded', function() { renderProducts(); // Mobile menu toggle mobileMenuButton.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); }); // Cart icon hover cartIcon.addEventListener('mouseenter', function() { cartDropdown.classList.remove('hidden'); }); cartIcon.addEventListener('mouseleave', function() { setTimeout(() => { if (!cartDropdown.matches(':hover')) { cartDropdown.classList.add('hidden'); } }, 200); }); cartDropdown.addEventListener('mouseleave', function() { setTimeout(() => { if (!cartIcon.matches(':hover')) { cartDropdown.classList.add('hidden'); } }, 200); }); // Chat widget chatButton.addEventListener('click', function() { chatWindow.classList.toggle('hidden'); }); closeChat.addEventListener('click', function() { chatWindow.classList.add('hidden'); }); // Contact form submission contactForm.addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! We will get back to you soon.'); contactForm.reset(); }); }); // Render products function renderProducts() { productGrid.innerHTML = ''; products.forEach(product => { const productCard = document.createElement('div'); productCard.className = 'bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300'; // Rating stars let stars = ''; for (let i = 1; i <= 5; i++) { if (i <= product.rating) { stars += '<i class="fas fa-star text-yellow-400"></i>'; } else if (i - 0.5 <= product.rating) { stars += '<i class="fas fa-star-half-alt text-yellow-400"></i>'; } else { stars += '<i class="far fa-star text-yellow-400"></i>'; } } productCard.innerHTML = ` <div class="h-48 overflow-hidden"> <img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover"> </div> <div class="p-4"> <div class="flex justify-between items-start mb-2"> <h3 class="font-semibold text-lg">${product.name}</h3> <span class="bg-primary text-white text-xs px-2 py-1 rounded">${product.category}</span> </div> <div class="flex items-center mb-3"> ${stars} <span class="text-gray-500 text-sm ml-2">(${product.rating})</span> </div> <div class="flex justify-between items-center"> <span class="font-bold text-lg">KES ${product.price.toLocaleString()}</span> <span class="text-sm ${product.stock > 5 ? 'text-green-500' : product.stock > 0 ? 'text-yellow-500' : 'text-red-500'}"> ${product.stock > 5 ? 'In Stock' : product.stock > 0 ? 'Low Stock' : 'Out of Stock'} </span> </div> <button class="mt-4 w-full bg-primary hover:bg-yellow-600 text-white py-2 rounded-md transition add-to-cart" data-id="${product.id}"> Add to Cart </button> </div> `; productGrid.appendChild(productCard); }); // Add event listeners to all "Add to Cart" buttons document.querySelectorAll('.add-to-cart').forEach(button => { button.addEventListener('click', function() { const productId = parseInt(this.getAttribute('data-id')); addToCart(productId); }); }); } // Add product to cart function addToCart(productId) { const product = products.find(p => p.id === productId); if (!product) return; // Check if product already exists in cart const existingItem = cart.find(item => item.id === productId); if (existingItem) { if (existingItem.quantity < product.stock) { existingItem.quantity++; } else { alert(`Only ${product.stock} units available in stock.`); return; } } else { if (product.stock > 0) { cart.push({ ...product, quantity: 1 }); } else { alert('This product is out of stock.'); return; } } updateCart(); // Show cart dropdown cartDropdown.classList.remove('hidden'); // Animation for cart icon cartIcon.classList.add('animate-bounce'); setTimeout(() => { cartIcon.classList.remove('animate-bounce'); }, 1000); } // Update cart UI function updateCart() { cartCount.textContent = cart.reduce((total, item) => total + item.quantity, 0); if (cart.length === 0) { cartItems.innerHTML = '<p class="text-gray-500 text-center py-4">Your cart is empty</p>'; cartTotal.textContent = 'KES 0.00'; return; } cartItems.innerHTML = ''; let total = 0; cart.forEach(item => { const itemTotal = item.price item.quantity; total += itemTotal; const cartItem = document.createElement('div'); cartItem.className = 'cart-item flex justify-between items-center py-3 border-b'; cartItem.innerHTML = ` <div class="flex items-center"> <img src="${item.image}" alt="${item.name}" class="w-12 h-12 object-cover rounded mr-3"> <div> <h4 class="font-medium">${item.name}</h4> <p class="text-sm text-gray-500">KES ${item.price.toLocaleString()} x ${item.quantity}</p> </div> </div> <div class="flex items-center"> <span class="font-medium mr-3">KES ${itemTotal.toLocaleString()}</span> <button class="text-red-500 remove-item" data-id="${item.id}"> <i class="fas fa-trash"></i> </button> </div> `; cartItems.appendChild(cartItem); }); cartTotal.textContent = `KES ${total.toLocaleString()}`; // Add event listeners to remove buttons document.querySelectorAll('.remove-item').forEach(button => { button.addEventListener('click', function() { const productId = parseInt(this.getAttribute('data-id')); removeFromCart(productId); }); }); } // Remove item from cart function removeFromCart(productId) { const itemIndex = cart.findIndex(item => item.id === productId); if (itemIndex !== -1) { if (cart[itemIndex].quantity > 1) { cart[itemIndex].quantity--; } else { cart.splice(itemIndex, 1); } updateCart(); } } </script> </body> </html> enhance this website - Initial Deployment

ec74623
verified

Geoff391 commited on Aug 12, 2025

initial commit

a58c382
verified

Geoff391 commited on Aug 12, 2025