Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ARKAN Solutions | Integrated MEP, Utilities & Renewable Energy Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0057b8', | |
| secondary: '#2a9d8f', | |
| dark: '#002f4d', | |
| light: '#f8f9fb', | |
| accent: '#ff7b00', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .hero-background { | |
| background: | |
| linear-gradient(to bottom right, rgba(0, 47, 77, 0.85), rgba(42, 157, 143, 0.7)), | |
| url('https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| transition: background-image 1s ease-in-out; | |
| } | |
| .hero-background.alternate-bg { | |
| background-image: | |
| linear-gradient(to bottom right, rgba(0, 47, 77, 0.85), rgba(42, 157, 143, 0.7)), | |
| url('https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=1800&q=80'); | |
| } | |
| .hero-background.alternate-bg { | |
| background-image: | |
| linear-gradient(to bottom right, rgba(0, 47, 77, 0.85), rgba(42, 157, 143, 0.7)), | |
| url('https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'); | |
| } | |
| .hero-background.alternate-bg { | |
| background-image: | |
| linear-gradient(to bottom right, rgba(0, 47, 77, 0.85), rgba(42, 157, 143, 0.7)), | |
| url('https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'); | |
| } | |
| .hero-background.third-bg { | |
| background-image: | |
| linear-gradient(to bottom right, rgba(0, 47, 77, 0.85), rgba(42, 157, 143, 0.7)), | |
| url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80'); | |
| } | |
| #tagline-container { | |
| transition: opacity 1s ease-in-out; | |
| } | |
| .tagline-slide { | |
| animation: slideIn 0.8s ease-in-out; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(30px); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| .expertise-card { | |
| transition: all 0.3s ease; | |
| } | |
| .expertise-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .service-tab.active { | |
| border-bottom: 3px solid #ff7b00; | |
| color: #0057b8; | |
| } | |
| .service-tab-content { | |
| display: none; | |
| } | |
| .service-tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .project-card { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.8s ease; | |
| } | |
| .project-card.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .contact-modal { | |
| backdrop-filter: blur(5px); | |
| } | |
| .carousel-container { | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| .carousel-track { | |
| display: flex; | |
| will-change: transform; | |
| } | |
| .bg-pattern { | |
| background-image: radial-gradient(#e2e8f0 1px, transparent 2px); | |
| background-size: 20px 20px; | |
| } | |
| .rotate-180 { | |
| transform: rotate(180deg); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light"> | |
| <!-- Header & Navigation --> | |
| <header class="fixed w-full z-50 bg-white shadow-md"> | |
| <nav class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <svg viewBox="0 0 24 24" class="w-6 h-6 text-white"> | |
| <path fill="currentColor" d="M12 3L2 12h3v8h14v-8h3L12 3zm0 5.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5z"/> | |
| </svg> | |
| </div> | |
| <h1 class="text-2xl font-bold">ARKAN <span class="text-secondary">Solutions</span></h1> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <!-- Main Navigation --> | |
| <div class="flex space-x-8"> | |
| <a href="/index.html#home" class="font-medium text-gray-700 hover:text-primary transition flex items-center py-2"> | |
| <i class="fas fa-home mr-2 text-sm"></i> Home | |
| </a> | |
| <!-- Services Dropdown --> | |
| <div class="relative group"> | |
| <button class="font-medium text-gray-700 hover:text-primary transition flex items-center py-2"> | |
| <i class="fas fa-cogs mr-2 text-sm"></i> Services <i class="ml-1 fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div class="absolute hidden group-hover:block w-64 bg-white shadow-xl rounded-lg p-2 z-50"> | |
| <a href="/index.html#expertise" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center"> | |
| <i class="fas fa-lightbulb mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-semibold">Fields of Expertise</div> | |
| </div> | |
| </a> | |
| <a href="/services.html" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center pl-12"> | |
| <i class="fas fa-building mr-3 text-secondary text-sm"></i> | |
| <div class="text-sm">Building MEP Services</div> | |
| </a> | |
| <a href="/services.html" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center pl-12"> | |
| <i class="fas fa-water mr-3 text-secondary text-sm"></i> | |
| <div class="text-sm">Site Utilities Infrastructure</div> | |
| </a> | |
| <a href="/renewable-energy-systems.html" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center pl-12"> | |
| <i class="fas fa-solar-panel mr-3 text-secondary text-sm"></i> | |
| <div class="text-sm">Renewable Energy Systems</div> | |
| </a> | |
| <a href="/services.html" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center pl-12"> | |
| <i class="fas fa-hands-helping mr-3 text-secondary text-sm"></i> | |
| <div class="text-sm">Extended & Integrated Services</div> | |
| </a> | |
| <a href="/index.html#services" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center"> | |
| <i class="fas fa-list-alt mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-semibold">Service Categories</div> | |
| </div> | |
| </a> | |
| <a href="/index.html#industries-we-serve" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center"> | |
| <i class="fas fa-industry mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-semibold">Industries We Serve</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <a href="/index.html#projects" class="font-medium text-gray-700 hover:text-primary transition flex items-center py-2"> | |
| <i class="fas fa-project-diagram mr-2 text-sm"></i> Projects | |
| </a> | |
| <!-- About Us Dropdown --> | |
| <div class="relative group"> | |
| <button class="font-medium text-gray-700 hover:text-primary transition flex items-center py-2"> | |
| <i class="fas fa-info-circle mr-2 text-sm"></i> About Us <i class="ml-1 fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div class="absolute hidden group-hover:block w-64 bg-white shadow-xl rounded-lg p-2 z-50"> | |
| <a href="#about" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center"> | |
| <i class="fas fa-building mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-semibold">About Us</div> | |
| </div> | |
| </a> | |
| <a href="/index.html#team" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center"> | |
| <i class="fas fa-users mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-semibold">Our Team</div> | |
| </div> | |
| </a> | |
| <a href="/index.html#strategic-partners" class="block px-4 py-3 hover:bg-gray-50 rounded-lg transition flex items-center"> | |
| <i class="fas fa-handshake mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-semibold">Partners</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Button --> | |
| <div class="border-l border-gray-200 pl-6"> | |
| <a href="/index.html#contact" class="px-5 py-2 bg-primary rounded-lg text-white hover:bg-primary/90 transition flex items-center"> | |
| <i class="fas fa-paper-plane mr-2"></i> Contact | |
| </a> | |
| </div> | |
| </div> | |
| <button class="md:hidden text-dark mobile-menu-button"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </nav> | |
| </header> | |
| <!-- Mobile Menu --> | |
| <div class="mobile-menu hidden md:hidden fixed inset-0 z-40 bg-white pt-16 overflow-y-auto transition-all duration-300 ease-in-out"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <a href="/index.html#home" class="block py-4 px-4 text-gray-700 hover:bg-gray-50 rounded-lg transition flex items-center text-lg"> | |
| <i class="fas fa-home mr-3 text-primary text-xl"></i> Home | |
| </a> | |
| <!-- Services Dropdown --> | |
| <div class="group"> | |
| <button class="mobile-menu-dropdown flex items-center justify-between w-full py-4 px-4 text-gray-700 hover:bg-gray-50 rounded-lg transition text-lg"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cogs mr-3 text-primary text-xl"></i> Services | |
| </div> | |
| <i class="fas fa-chevron-down text-sm transition-transform duration-200"></i> | |
| </button> | |
| <div class="mobile-submenu hidden pl-8 transition-all duration-300 ease-in-out"> | |
| <a href="/index.html#expertise" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center"> | |
| <i class="fas fa-lightbulb mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-medium">Fields of Expertise</div> | |
| </div> | |
| </a> | |
| <a href="/services.html" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center pl-12"> | |
| <i class="fas fa-building mr-3 text-secondary text-sm"></i> | |
| <div class="text-sm">Building MEP Services</div> | |
| </a> | |
| <a href="/services.html" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center pl-12"> | |
| <i class="fas fa-water mr-3 text-secondary text-sm"></i> | |
| <div class="text-sm">Site Utilities Infrastructure</div> | |
| </a> | |
| <a href="/services.html" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center pl-12"> | |
| <i class="fas fa-solar-panel mr-3 text-secondary text-sm"></i> | |
| <div class="text-sm">Renewable Energy Systems</div> | |
| </a> | |
| <a href="/services.html" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center pl-12"> | |
| <i class="fas fa-hands-helping mr-3 text-secondary text-sm"></i> | |
| <div class="text-sm">Extended & Integrated Services</div> | |
| </a> | |
| <a href="/index.html#services" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center"> | |
| <i class="fas fa-list-alt mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-medium">Service Categories</div> | |
| </div> | |
| </a> | |
| <a href="/index.html#industries-we-serve" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center"> | |
| <i class="fas fa-industry mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-medium">Industries We Serve</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <a href="/index.html#projects" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center"> | |
| <i class="fas fa-project-diagram mr-3 text-primary"></i> Projects | |
| </a> | |
| <!-- About Us Dropdown --> | |
| <div class="group"> | |
| <button class="mobile-menu-dropdown flex items-center justify-between w-full py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-info-circle mr-3 text-primary"></i> About Us | |
| </div> | |
| <i class="fas fa-chevron-down text-xs transition-transform duration-200"></i> | |
| </button> | |
| <div class="mobile-submenu hidden pl-8"> | |
| <a href="/index.html#about" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center"> | |
| <i class="fas fa-building mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-medium">About Us</div> | |
| </div> | |
| </a> | |
| <a href="/index.html#team" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center"> | |
| <i class="fas fa-users mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-medium">Our Team</div>> | |
| </div> | |
| </a> | |
| <a href="/index.html#strategic-partners" class="block py-3 px-4 text-gray-700 hover:bg-gray-100 rounded-lg transition flex items-center"> | |
| <i class="fas fa-handshake mr-3 text-secondary"></i> | |
| <div> | |
| <div class="font-medium">Partners</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <a href="/index.html#contact" class="block py-3 px-4 bg-primary text-white rounded-lg hover:bg-primary/90 transition flex items-center justify-center mt-4"> | |
| <i class="fas fa-paper-plane mr-2"></i> Contact | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Hero Section Building MEP Services --> | |
| <section id="home" class="hero-background text-white pt-60 pb-28"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="mb-4"> | |
| <div id="tagline-container"> | |
| <h2 class="tagline-slide text-4xl md:text-6xl font-bold leading-tight">Building MEP Services</h2> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Overview --> | |
| <section id="services" class="py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark">Building MEP Systems designed for Performance and Efficiency.</h2> | |
| <div class="w-24 h-1 bg-secondary mx-auto mt-4"></div> | |
| <p class="mt-6 max-w-2xl mx-auto text-gray-600"> | |
| Our Building MEP Services cover the full spectrum of mechanical, electrical, plumbing, and fire protection systems, focusing on delivering high-performance, code-compliant, and energy-efficient solutions tailored to hospitality, commercial, residential, and industrial projects. | |
| </p> | |
| </div> | |
| <div class="service-content space-y-8"> | |
| <!-- Challenges & Solutions --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1625014618427-fbc980b974f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80')"></div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Challenges & Solutions</h3> | |
| <p class="mb-4">We address common issues in building systems from design to operation.</p> | |
| <p class="mb-4 font-medium">Challenges:</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Over-engineered or underperforming systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>High CAPEX/OPEX due to poor early coordination</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Difficulty balancing comfort, compliance, and sustainability</span> | |
| </li> | |
| </ul> | |
| <p class="mb-4 font-medium">Our Solutions:</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Data-driven HVAC, electrical, and plumbing design</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Integrated Document control and clash-free layouts</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Value engineering to reduce costs and improve lifecycle performance</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sub Disciplines --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto"> | |
| <div class="md:flex flex-row-reverse"> | |
| <div class="md:w-1/2 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80')"></div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Disciplines</h3> | |
| <p class="mb-4 font-medium">Covering all building system disciplines for integrated performance.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Mechanical Engineering (HVAC, chilled water, ventilation)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Electrical Engineering (power distribution, lighting, backup power)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Plumbing & Sanitary Systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Fire Protection and Life Safety Systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Building Automation and Control Systems (BMS)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Services --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1771&q=80')"></div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Services</h3> | |
| <p class="mb-4 font-medium">Full range of services from concept to commissioning.</p> | |
| <p class="mb-4 font-medium">We Deliver:</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>HVAC system design and optimization</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Load calculations and energy modeling</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Power distribution, panel schedules, and SLDs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Lighting design and control systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Plumbing schematics and water balance</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Fire alarm and suppression design</span> | |
| <li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hero Section Site Ulitities Infrastructure --> | |
| <section id="home" class="hero-background text-white pt-60 pb-28"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="mb-4"> | |
| <div id="tagline-container"> | |
| <h2 class="tagline-slide text-4xl md:text-6xl font-bold leading-tight">Site Utilities Infrastructure</h2> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Overview --> | |
| <section id="services" class="py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark">Efficient Utility Networks for Resilient Developments.</h2> | |
| <div class="w-24 h-1 bg-secondary mx-auto mt-4"></div> | |
| <p class="mt-6 max-w-2xl mx-auto text-gray-600"> | |
| We design and integrate utility networks to ensure reliable water, power, and waste systems for resorts, estates, and remote developments. Our approach spans early assessments, phasing strategies, detailed engineering, and operational planning, linking site infrastructure with building services. We plan for scalability, environmental resilience, and renewable integration to ensure efficient performance throughout the project lifecycle. | |
| </p> | |
| </div> | |
| <div class="service-content space-y-8"> | |
| <!-- Challenges & Solutions --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1625014618427-fbc980b974f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80')"></div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Challenges & Solutions</h3> | |
| <p class="mb-4">Site-wide infrastructure requires foresight and coordination.</p> | |
| <p class="mb-4 font-medium">Challenges:</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Quality and reliability of energy and water supply systems are commonly underestimated during planning and design stages</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Poor integration between building and site systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>High operating costs due to inefficient infrastructure</span> | |
| </li> | |
| </ul> | |
| <p class="mb-4 font-medium">Our Solutions:</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Scalable water, power, and wastewater networks</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Long-term resilience planning</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Integration of renewables and backup systems</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sub Disciplines --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto"> | |
| <div class="md:flex flex-row-reverse"> | |
| <div class="md:w-1/2 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80')"></div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Disciplines</h3> | |
| <p class="mb-4 font-medium">Utilities engineering across multiple domains.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Electrical Distribution Networks (MV/LV)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Water Supply and Treatment Systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Wastewater Collection and Treatment</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Stormwater and Drainage Systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Fuel Storage and Distribution Networks</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Centralized Cooling/Heating</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Services --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1771&q=80')"></div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Services</h3> | |
| <p class="mb-4 font-medium">Complete infrastructure planning and delivery.</p> | |
| <p class="mb-4 font-medium">We Deliver:</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Utility master planning and load forecasting</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Hydraulic and electrical calculations</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Pumping station and reservoir design</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Stormwater management strategies</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Integration of renewables energy and backup systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Acceptance Testings, Quality and Quantity control</span> | |
| <li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>O&M strategy and handover documentation</span> | |
| <li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hero Section Renewable Energy--> | |
| <section id="home" class="hero-background text-white pt-60 pb-28"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="mb-4"> | |
| <div id="tagline-container"> | |
| <h2 class="tagline-slide text-4xl md:text-6xl font-bold leading-tight">Renewable Energy Systems</h2> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Overview --> | |
| <section id="services" class="py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark">Reliable, Clean Energy for On-Grid and Off-Grid Projects.</h2> | |
| <div class="w-24 h-1 bg-secondary mx-auto mt-4"></div> | |
| <p class="mt-6 max-w-2xl mx-auto text-gray-600"> | |
| We create sustainable hybrid energy systems integrating solar PV, battery storage, and backup power to deliver reliable, low-cost energy solutions. Our designs balance technical performance with financial viability, ensuring systems are optimized for long-term resilience and adaptability. | |
| </p> | |
| </div> | |
| <div class="service-content space-y-8"> | |
| <!-- Challenges & Solutions --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1625014618427-fbc980b974f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80')"></div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Challenges & Solutions</h3> | |
| <p class="mb-4">Addressing the cost and reliability of energy in diverse locations.</p> | |
| <p class="mb-4 font-medium">Challenges:</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>High fuel dependency and operational costs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Grid instability and outages</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Balancing the drive for renewable adoption with ensuring true sustainability in system design</span> | |
| </li> | |
| </ul> | |
| <p class="mb-4 font-medium">Our Solutions:</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Hybrid solar + battery + genset systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Financial modeling for CAPEX/OPEX optimization</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Scalable microgrid design for remote sites</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sub Disciplines --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto"> | |
| <div class="md:flex flex-row-reverse"> | |
| <div class="md:w-1/2 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80')"></div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Disciplines</h3> | |
| <p class="mb-4 font-medium">Covering all renewable and hybrid power components.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Solar PV Engineering (rooftop, ground-mounted, hybrid)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Battery Energy Storage Systems (BESS)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Hybrid Power Plant Integration (PV + gensets + grid)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Integrated Energy Management and Control Systems (EMS/BMS)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Microgrid and Off-Grid Electrification</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Services --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1771&q=80')"></div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Services</h3> | |
| <p class="mb-4 font-medium">From resource assessment to commissioning and O&M.</p> | |
| <p class="mb-4 font-medium">We Deliver:</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Resource assessment and energy yield studies</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Performance simulation and HOMER/PVsyst modeling</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>PV and BESS layout and single-line diagrams</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Control logic and hybrid system integration design</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Commissioning and performance validation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>O&M setup and training</span> | |
| <li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hero Section Extended & Integrated Services--> | |
| <section id="home" class="hero-background text-white pt-60 pb-28"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="mb-4"> | |
| <div id="tagline-container"> | |
| <h2 class="tagline-slide text-4xl md:text-6xl font-bold leading-tight">Extended & Integrated Services</h2> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Overview --> | |
| <section id="services" class="py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark">Multidisciplinary Partners to Develop, Deliver & Operate Assets.</h2> | |
| <div class="w-24 h-1 bg-secondary mx-auto mt-4"></div> | |
| <p class="mt-6 max-w-2xl mx-auto text-gray-600"> | |
| In partnership with selected experts, we provide complete project development and delivery services, offering a single point of responsibility from concept to operation. Our integrated approach covers technical, financial, and operational aspects to ensure assets are designed, built, and managed for long-term value. | |
| </p> | |
| </div> | |
| <div class="service-content space-y-8"> | |
| <!-- Challenges & Solutions --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1625014618427-fbc980b974f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80')"></div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Challenges & Solutions</h3> | |
| <p class="mb-4">Complex projects require coordinated multidisciplinary expertise.</p> | |
| <p class="mb-4">We provide clients with a fully integrated pathway from project conception through to operation, combining technical expertise, financial structuring, and operational planning into a single coordinated delivery framework.</p> | |
| <p class="mb-4 font-medium">Challenges:</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Single partner for complete lifecycle delivery</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Seamless coordination across disciplines</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Reduced risk and improved cost certainty</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Optimized operational efficiency and ROI</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sub Disciplines --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-5xl mx-auto"> | |
| <div class="md:flex flex-row-reverse"> | |
| <div class="md:w-1/2 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80')"></div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Disciplines</h3> | |
| <p class="mb-4 font-medium">Complementary disciplines to cover full project needs.</p> | |
| <p class="mb-4 font-medium">Our full project development model brings together technical, financial, and operational capabilities under one roof, enabling us to serve as a single point of contact for clients seeking comprehensive delivery and operational readiness.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Full project development management</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Site surveys and feasibility assessments</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Structural and civil engineering</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Environmental and sustainability engineering</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Quantity surveying and cost control</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Architectural coordination</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Procurement and logistics servcies</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Construction management</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Asset management and operational servicesn</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="mt-1 text-secondary mr-2 text-xs"><i class="fas fa-check-circle"></i></span> | |
| <span>Project financing and partnership structuring</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partners --> | |
| <section id="team" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark">Our Strategic Partners</h2> | |
| <div class="w-24 h-1 bg-secondary mx-auto mt-4"></div> | |
| </div> | |
| <div id="strategic-partners"> | |
| <p class="text-center max-w-3xl mx-auto mb-10 text-gray-600"> | |
| We collaborate with industry-leading experts and providers to deliver cutting-edge solutions for our clients. | |
| </p> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 justify-items-center"> | |
| <!-- Partner Category 1 --> | |
| <div class="bg-gray-50 rounded-xl p-6 pt-6 pb-20 text-center border border-gray-200 relative min-h-[250px]"> | |
| <h4 class="text-lg font-bold mb-2">Civil & Structural</h4> | |
| <p class="text-gray-600 text-sm">Leading civil & structural engineers</p> | |
| <div class="mt-6 mb-4"> | |
| <div class="absolute bottom-4 left-0 w-full flex justify-center space-x-4"> | |
| <div class="w-10 h-10 rounded-full bg-gray-500"></div> | |
| <div class="w-10 h-10 rounded-full bg-gray-500"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Partner Category 2 --> | |
| <div class="bg-gray-50 rounded-xl p-6 pt-6 pb-20 text-center border border-gray-200 relative min-h-[250px]"> | |
| <h4 class="text-lg font-bold mb-2">Sustainability Engineering</h4> | |
| <p class="text-gray-600 text-sm">Experts in the fields of sustainability and green building</p> | |
| <div class="mt-6 mb-4"> | |
| <div class="absolute bottom-4 left-0 w-full flex justify-center space-x-4"> | |
| <div class="w-10 h-10 rounded-full bg-gray-500"></div> | |
| <div class="w-10 h-10 rounded-full bg-gray-500"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Partner Category 3 --> | |
| <div class="bg-gray-50 rounded-xl p-6 pt-6 pb-20 text-center border border-gray-200 relative min-h-[250px]"> | |
| <h4 class="text-lg font-bold mb-2">Automation & Processes</h4> | |
| <p class="text-gray-600 text-sm">Specialists in building and industrial automation</p> | |
| <div class="mt-6 mb-4"> | |
| <div class="absolute bottom-4 left-0 w-full flex justify-center space-x-4"> | |
| <div class="w-10 h-10 rounded-full bg-gray-500"></div> | |
| <div class="w-10 h-10 rounded-full bg-gray-500"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Partner Category 4 --> | |
| <div class="bg-gray-50 rounded-xl p-6 pt-6 pb-20 text-center border border-gray-200 relative min-h-[250px]"> | |
| <h4 class="text-lg font-bold mb-2">Construction</h4> | |
| <p class="text-gray-600 text-sm">Collaborating with construction management companies and leading equipment suppliers</p> | |
| <div class="mt-6 mb-4"> | |
| <div class="absolute bottom-4 left-0 w-full flex justify-center space-x-4"> | |
| <div class="w-10 h-10 rounded-full bg-gray-500"></div> | |
| <div class="w-10 h-10 rounded-full bg-gray-500"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact CTA --> | |
| <section id="contact" class="py-20 hero-background text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Project?</h2> | |
| <p class="mb-8 text-lg"> | |
| Connect with our engineering and project management team to discuss your building, utilities, or renewable energy project requirements. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="mt-1 text-secondary mr-4 text-xl"><i class="fas fa-map-marker-alt"></i></div> | |
| <div> | |
| <h4 class="font-bold">Office</h4> | |
| <p>PT Lintas Solusi Konsultan<br>Jl. Sunset Road No.28<br>Seminyak, Badung, Bali 80361</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mt-1 text-secondary mr-4 text-xl"><i class="fas fa-phone-alt"></i></div> | |
| <div> | |
| <h4 class="font-bold">Contact</h4> | |
| <p>hello@arkansolutions.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white text-dark rounded-xl p-8 shadow-xl"> | |
| <h3 class="text-2xl font-bold mb-6 text-primary">Send Inquiry</h3> | |
| <form> | |
| <div class="mb-5"> | |
| <label class="block mb-2 font-medium">Name</label> | |
| <input type="text" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-primary" placeholder="Your Name"> | |
| </div> | |
| <div class="mb-5"> | |
| <label class="block mb-2 font-medium">Email</label> | |
| <input type="email" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-primary" placeholder="your@email.com"> | |
| </div> | |
| <div class="mb-5"> | |
| <label class="block mb-2 font-medium">Project Interest</label> | |
| <select class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-primary"> | |
| <option>Building MEP Services</option> | |
| <option>Utilities Infrastructure</option> | |
| <option>Renewable Energy Systems</option> | |
| <option>Integrated Solutions</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-5"> | |
| <label class="block mb-2 font-medium">Message</label> | |
| <textarea rows="4" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-primary" placeholder="Tell us about your project"></textarea> | |
| </div> | |
| <button class="w-full py-4 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition"> | |
| Send Message <i class="ml-2 fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <svg viewBox="0 0 24 24" class="w-5 h-5 text-white"> | |
| <path fill="currentColor" d="M12 3L2 12h3v8h14v-8h3L12 3zm0 5.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5z"/> | |
| </svg> | |
| </div> | |
| <h2 class="text-xl font-bold">ARKAN <span class="text-secondary">Solutions</span></h2> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| ARKAN Solutions delivers integrated engineering excellence for mechanical, electrical, plumbing systems, site utilities, and renewable energy solutions. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-secondary transition"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm"> | |
| <p>© 2023 ARKAN Solutions. All rights reserved. Terms & Conditions | Privacy Policy</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- JavaScript --> | |
| <script> | |
| const projectCards = document.querySelectorAll('.project-card'); | |
| // Service tabs interaction | |
| document.querySelectorAll('.service-tab').forEach((tab, index) => { | |
| tab.addEventListener('click', function() { | |
| document.querySelectorAll('.service-tab').forEach(t => | |
| t.classList.remove('active') | |
| ); | |
| this.classList.add('active'); | |
| // Show corresponding content | |
| document.querySelectorAll('.service-tab-content').forEach(content => | |
| content.classList.remove('active') | |
| ); | |
| document.querySelectorAll('.service-tab-content')[index].classList.add('active'); | |
| }); | |
| }); | |
| // Filter projects | |
| document.querySelectorAll('.project-filter').forEach(filter => { | |
| filter.addEventListener('click', function() { | |
| document.querySelectorAll('.project-filter').forEach(f => | |
| f.classList.remove('active') | |
| ); | |
| this.classList.add('active'); | |
| // Results filtering logic would go here | |
| }); | |
| }); | |
| // Carousel functionality | |
| function setupCarousel() { | |
| const track = document.querySelector('.carousel-track'); | |
| const prevBtn = document.querySelector('.carousel-prev'); | |
| const nextBtn = document.querySelector('.carousel-next'); | |
| const projects = document.querySelectorAll('.project-card'); | |
| const projectWidth = projects[0].offsetWidth; | |
| const totalProjects = projects.length; | |
| let currentIndex = 0; | |
| let autoSlideInterval; | |
| let isTransitioning = false; | |
| // Clone first few projects for infinite loop | |
| const firstFewProjects = Array.from(projects).slice(0, 3); | |
| firstFewProjects.forEach(project => { | |
| const clone = project.cloneNode(true); | |
| track.appendChild(clone); | |
| }); | |
| function updateCarousel() { | |
| if (currentIndex >= totalProjects) { | |
| // When we reach the clones, instantly reset to original position | |
| track.style.transition = 'none'; | |
| currentIndex = 0; | |
| track.style.transform = `translateX(-${currentIndex * projectWidth}px)`; | |
| // Force reflow | |
| track.offsetHeight; | |
| track.style.transition = 'transform 0.5s ease-in-out'; | |
| } else if (currentIndex < 0) { | |
| // When going backwards past first item | |
| track.style.transition = 'none'; | |
| currentIndex = totalProjects - 1; | |
| track.style.transform = `translateX(-${currentIndex * projectWidth}px)`; | |
| // Force reflow | |
| track.offsetHeight; | |
| track.style.transition = 'transform 0.5s ease-in-out'; | |
| } | |
| track.style.transform = `translateX(-${currentIndex * projectWidth}px)`; | |
| } | |
| function nextSlide() { | |
| if (isTransitioning) return; | |
| isTransitioning = true; | |
| currentIndex++; | |
| updateCarousel(); | |
| setTimeout(() => { | |
| isTransitioning = false; | |
| }, 250); | |
| } | |
| function prevSlide() { | |
| if (isTransitioning) return; | |
| isTransitioning = true; | |
| currentIndex--; | |
| updateCarousel(); | |
| setTimeout(() => { | |
| isTransitioning = false; | |
| }, 250); | |
| } | |
| function startAutoSlide() { | |
| autoSlideInterval = setInterval(nextSlide, 5000); | |
| } | |
| function stopAutoSlide() { | |
| clearInterval(autoSlideInterval); | |
| } | |
| // Event listeners | |
| nextBtn.addEventListener('click', () => { | |
| stopAutoSlide(); | |
| nextSlide(); | |
| startAutoSlide(); | |
| }); | |
| prevBtn.addEventListener('click', () => { | |
| stopAutoSlide(); | |
| prevSlide(); | |
| startAutoSlide(); | |
| }); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| projectWidth = projects[0].offsetWidth; | |
| updateCarousel(); | |
| }); | |
| // Start auto sliding | |
| startAutoSlide(); | |
| // Pause on hover | |
| const container = document.querySelector('.carousel-container'); | |
| container.addEventListener('mouseenter', stopAutoSlide); | |
| container.addEventListener('mouseleave', startAutoSlide); | |
| // Reset position when transition ends (for infinite loop) | |
| track.addEventListener('transitionend', () => { | |
| if (currentIndex >= totalProjects || currentIndex < 0) { | |
| updateCarousel(); | |
| } | |
| }); | |
| } | |
| // Make project cards slide in when visible | |
| function animateProjectCards() { | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| setTimeout(() => { | |
| entry.target.classList.add('visible'); | |
| }, 100 * parseInt(entry.target.dataset.index)); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| projectCards.forEach((card, index) => { | |
| card.dataset.index = index; | |
| observer.observe(card); | |
| }); | |
| } | |
| // Smooth scrolling for navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (!target) return; | |
| window.scrollTo({ | |
| top: target.offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Background image slideshow | |
| function cycleBackground() { | |
| const hero = document.querySelector('.hero-background'); | |
| if (hero.classList.contains('alternate-bg')) { | |
| hero.classList.remove('alternate-bg'); | |
| hero.classList.add('third-bg'); | |
| } else if (hero.classList.contains('third-bg')) { | |
| hero.classList.remove('third-bg'); | |
| } else { | |
| hero.classList.add('alternate-bg'); | |
| } | |
| } | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('.mobile-menu-button'); | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| // Toggle between hamburger and close icon | |
| const icon = this.querySelector('i'); | |
| if (mobileMenu.classList.contains('hidden')) { | |
| icon.classList.remove('fa-times'); | |
| icon.classList.add('fa-bars'); | |
| } else { | |
| icon.classList.remove('fa-bars'); | |
| icon.classList.add('fa-times'); | |
| } | |
| }); | |
| // Mobile menu dropdown functionality | |
| document.querySelectorAll('.mobile-menu-dropdown').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const submenu = this.nextElementSibling; | |
| const icon = this.querySelector('.fa-chevron-down'); | |
| // Toggle submenu | |
| submenu.classList.toggle('hidden'); | |
| // Rotate chevron icon | |
| icon.classList.toggle('rotate-180'); | |
| // Close other open submenus | |
| document.querySelectorAll('.mobile-submenu').forEach(menu => { | |
| if (menu !== submenu && !menu.classList.contains('hidden')) { | |
| menu.classList.add('hidden'); | |
| menu.previousElementSibling.querySelector('.fa-chevron-down').classList.remove('rotate-180'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Close menu when clicking on a link | |
| document.querySelectorAll('.mobile-menu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| mobileMenuButton.querySelector('i').classList.remove('fa-times'); | |
| mobileMenuButton.querySelector('i').classList.add('fa-bars'); | |
| // Close all submenus | |
| document.querySelectorAll('.mobile-submenu').forEach(menu => { | |
| menu.classList.add('hidden'); | |
| menu.previousElementSibling.querySelector('.fa-chevron-down').classList.remove('rotate-180'); | |
| }); | |
| }); | |
| }); | |
| // Initiate animations when page loads | |
| document.addEventListener('DOMContentLoaded', function() { | |
| animateProjectCards(); | |
| setupCarousel(); | |
| setInterval(cycleBackground, 7000); // Cycle every 7 seconds | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Julien355/arkan-services-page" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |