| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ARKAN Solutions | Sustainable Off-Grid Infrastructure</title> |
| <meta name="description" content="ARKAN Solutions provides end-to-end sustainable infrastructure solutions for eco-resorts and remote developments. Specializing in renewable energy, water systems, and MEP design."> |
| <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 href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#c0e4fd', |
| 300: '#a1d6fc', |
| 400: '#1e88e5', |
| 500: '#0d8bf2', |
| 600: '#0a75d0', |
| 700: '#085fa8', |
| 800: '#064980', |
| 900: '#043358', |
| }, |
| secondary: { |
| 50: '#f0fdf4', |
| 100: '#dcfce7', |
| 200: '#bbf7d0', |
| 300: '#86efac', |
| 400: '#4ade80', |
| 500: '#22c55e', |
| 600: '#16a34a', |
| 700: '#15803d', |
| 800: '#166534', |
| 900: '#14532d', |
| }, |
| accent: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| }, |
| earth: { |
| 50: '#fafaf9', |
| 100: '#f5f5f4', |
| 200: '#e7e5e4', |
| 300: '#d6d3d1', |
| 400: '#a8a29e', |
| 500: '#78716c', |
| 600: '#57534e', |
| 700: '#44403c', |
| 800: '#292524', |
| 900: '#1c1917', |
| }, |
| }, |
| fontFamily: { |
| poppins: ['Poppins', 'sans-serif'], |
| montserrat: ['Montserrat', 'sans-serif'], |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| body { |
| font-family: 'Poppins', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| h1, h2, h3, h4 { |
| font-family: 'Montserrat', sans-serif; |
| font-weight: 700; |
| } |
| |
| .hero-bg { |
| background: linear-gradient(rgba(4, 51, 88, 0.85), rgba(20, 83, 45, 0.85)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23043358"/><path d="M0 0L100 100M100 0L0 100" stroke="%231688e5" stroke-width="1" opacity="0.2"/></svg>'); |
| background-size: cover; |
| background-position: center; |
| position: relative; |
| } |
| |
| .pattern-bg { |
| background-color: #f0f9ff; |
| background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%230d8bf2' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); |
| } |
| |
| .service-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
| } |
| |
| .project-card { |
| transition: all 0.3s ease; |
| overflow: hidden; |
| } |
| |
| .project-card img { |
| transition: transform 0.5s ease; |
| } |
| |
| .project-card:hover img { |
| transform: scale(1.05); |
| } |
| |
| .water-wave { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| overflow: hidden; |
| line-height: 0; |
| } |
| |
| .water-wave svg { |
| position: relative; |
| display: block; |
| width: calc(100% + 1.3px); |
| height: 100px; |
| } |
| |
| .water-wave .shape-fill { |
| fill: #f0f9ff; |
| } |
| </style> |
| </head> |
| <body class="bg-gradient-to-b from-primary-50 to-white text-earth-800"> |
| |
| <header class="fixed w-full z-50 bg-white bg-opacity-90 backdrop-blur-sm shadow-sm"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center"> |
| <i class="fas fa-leaf text-white text-xl"></i> |
| </div> |
| <span class="text-xl font-bold text-primary-800">ARKAN<span class="text-secondary-600">Solutions</span></span> |
| </div> |
| </div> |
| |
| <nav class="hidden md:flex items-center space-x-8"> |
| <a href="#about" class="font-medium text-earth-700 hover:text-primary-600 transition">About Us</a> |
| <a href="#services" class="font-medium text-earth-700 hover:text-primary-600 transition">Services</a> |
| <a href="#clients" class="font-medium text-earth-700 hover:text-primary-600 transition">Who We Serve</a> |
| <a href="#projects" class="font-medium text-earth-700 hover:text-primary-600 transition">Projects</a> |
| <a href="#blog" class="font-medium text-earth-700 hover:text-primary-600 transition">Insights</a> |
| <a href="#contact" class="px-4 py-2 bg-primary-600 text-white rounded-full hover:bg-primary-700 transition">Contact Us</a> |
| </nav> |
| |
| <button class="md:hidden text-earth-800"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <section class="hero-bg pt-32 pb-24 text-white relative"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-3xl mx-auto text-center"> |
| <span class="inline-block px-4 py-1 bg-white bg-opacity-20 rounded-full text-sm font-medium mb-4">Sustainable Infrastructure Specialists</span> |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">Resilient Energy, Water, and MEP Systems for Remote & Sustainable Places</h1> |
| <p class="text-xl mb-10 opacity-90 max-w-2xl mx-auto">End-to-end solutions for eco-resorts and remote developments designed to thrive off-grid</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#contact" class="px-8 py-4 bg-secondary-600 hover:bg-secondary-700 rounded-full font-medium transition transform hover:-translate-y-1">Start Your Project</a> |
| <a href="#services" class="px-8 py-4 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full font-medium transition transform hover:-translate-y-1">Our Services</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="water-wave"> |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> |
| <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path> |
| <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path> |
| <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path> |
| </svg> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 pattern-bg"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <span class="text-primary-600 font-semibold">ABOUT US</span> |
| <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Pioneers in Sustainable Infrastructure</h2> |
| <div class="w-24 h-1 bg-secondary-500 mx-auto"></div> |
| </div> |
| |
| <div class="flex flex-col md:flex-row items-start gap-10"> |
| <div class="md:w-1/2"> |
| <div class="relative mt-8"> |
| <div class="rounded-2xl overflow-hidden shadow-xl"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-96"></div> |
| </div> |
| <div class="absolute -bottom-6 -right-6 bg-white p-5 rounded-xl shadow-lg w-64"> |
| <div class="flex items-start"> |
| <div class="bg-primary-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-globe-asia text-primary-600 text-2xl"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg">Our Reach</h3> |
| <p class="text-sm text-earth-600">Based in Singapore & Indonesia</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <h3 class="text-2xl font-bold mb-4">Enabling Net-Zero Living in Remote Locations</h3> |
| <p class="text-lg mb-6 text-earth-700">At ARKAN Solutions, we're driven by a mission to create truly sustainable infrastructure that enables off-grid living without compromising on comfort or reliability. Founded by engineers and sustainability experts, we combine technical excellence with deep ecological awareness.</p> |
| |
| <div class="space-y-6"> |
| <div class="flex"> |
| <div class="mr-4 mt-1"> |
| <div class="w-10 h-10 rounded-full bg-secondary-100 flex items-center justify-center"> |
| <i class="fas fa-bullseye text-secondary-600"></i> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg">Our Mission</h4> |
| <p>To create resilient, regenerative infrastructure that works in harmony with nature.</p> |
| </div> |
| </div> |
| |
| <div class="flex"> |
| <div class="mr-4 mt-1"> |
| <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center"> |
| <i class="fas fa-lightbulb text-primary-600"></i> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg">Our Expertise</h4> |
| <p>Sustainability engineering, off-grid systems design, and remote project management.</p> |
| </div> |
| </div> |
| |
| <div class="flex"> |
| <div class="mr-4 mt-1"> |
| <div class="w-10 h-10 rounded-full bg-accent-100 flex items-center justify-center"> |
| <i class="fas fa-map-marker-alt text-accent-600"></i> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg">Our Focus</h4> |
| <p>Serving Indonesia and the Asia-Pacific region with specialized solutions for tropical environments.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <span class="text-primary-600 font-semibold">OUR SERVICES</span> |
| <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">End-to-End Sustainable Solutions</h2> |
| <p class="max-w-2xl mx-auto text-lg text-earth-700">Comprehensive infrastructure services tailored for eco-resorts and remote developments</p> |
| <div class="w-24 h-1 bg-secondary-500 mx-auto mt-6"></div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="service-card bg-white rounded-2xl overflow-hidden border border-earth-100 transition-all duration-300"> |
| <div class="p-6"> |
| <div class="w-16 h-16 rounded-xl bg-accent-100 flex items-center justify-center mb-6"> |
| <i class="fas fa-chart-line text-accent-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Feasibility & Development</h3> |
| <p class="text-earth-600 mb-4">Comprehensive site analysis, resource assessment, and project planning for off-grid developments.</p> |
| <a href="#" class="text-primary-600 font-medium flex items-center"> |
| Learn more |
| <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-2xl overflow-hidden border border-earth-100 transition-all duration-300"> |
| <div class="p-6"> |
| <div class="w-16 h-16 rounded-xl bg-green-100 flex items-center justify-center mb-6"> |
| <i class="fas fa-drafting-compass text-secondary-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Sustainable MEP Design</h3> |
| <p class="text-earth-600 mb-4">Integrated mechanical, electrical, and plumbing systems designed for efficiency and sustainability.</p> |
| <a href="#" class="text-primary-600 font-medium flex items-center"> |
| Learn more |
| <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-2xl overflow-hidden border border-earth-100 transition-all duration-300"> |
| <div class="p-6"> |
| <div class="w-16 h-16 rounded-xl bg-yellow-100 flex items-center justify-center mb-6"> |
| <i class="fas fa-solar-panel text-yellow-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Power & Renewable Energy</h3> |
| <p class="text-earth-600 mb-4">Solar, wind, and hybrid systems with battery storage tailored for remote locations.</p> |
| <a href="#" class="text-primary-600 font-medium flex items-center"> |
| Learn more |
| <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-2xl overflow-hidden border border-earth-100 transition-all duration-300"> |
| <div class="p-6"> |
| <div class="w-16 h-16 rounded-xl bg-blue-100 flex items-center justify-center mb-6"> |
| <i class="fas fa-faucet text-primary-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Water & Wastewater Solutions</h3> |
| <p class="text-earth-600 mb-4">Rainwater harvesting, desalination, filtration, and ecological wastewater treatment systems.</p> |
| <a href="#" class="text-primary-600 font-medium flex items-center"> |
| Learn more |
| <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-2xl overflow-hidden border border-earth-100 transition-all duration-300"> |
| <div class="p-6"> |
| <div class="w-16 h-16 rounded-xl bg-orange-100 flex items-center justify-center mb-6"> |
| <i class="fas fa-truck text-orange-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Construction & Remote Logistics</h3> |
| <p class="text-earth-600 mb-4">Specialized construction management and logistics for challenging remote locations.</p> |
| <a href="#" class="text-primary-600 font-medium flex items-center"> |
| Learn more |
| <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-2xl overflow-hidden border border-earth-100 transition-all duration-300"> |
| <div class="p-6"> |
| <div class="w-16 h-16 rounded-xl bg-purple-100 flex items-center justify-center mb-6"> |
| <i class="fas fa-coins text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Project Financing</h3> |
| <p class="text-earth-600 mb-4">Financial solutions and partnerships for sustainable energy and water infrastructure projects.</p> |
| <a href="#" class="text-primary-600 font-medium flex items-center"> |
| Learn more |
| <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="clients" class="py-20 pattern-bg"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <span class="text-primary-600 font-semibold">WHO WE SERVE</span> |
| <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Partners in Sustainable Development</h2> |
| <p class="max-w-2xl mx-auto text-lg text-earth-700">We work with forward-thinking developers and businesses committed to sustainable growth</p> |
| <div class="w-24 h-1 bg-secondary-500 mx-auto mt-6"></div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-lg transition"> |
| <div class="w-20 h-20 rounded-full bg-blue-50 flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-umbrella-beach text-primary-600 text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Hospitality Development</h3> |
| <p class="text-earth-600">Resorts, hotels, and eco-lodges seeking sustainable infrastructure.</p> |
| </div> |
| |
| |
| <div class="bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-lg transition"> |
| <div class="w-20 h-20 rounded-full bg-green-50 flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-tree text-secondary-600 text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Off-Grid Resorts & Eco-Hotels</h3> |
| <p class="text-earth-600">Remote luxury destinations requiring self-sufficient systems.</p> |
| </div> |
| |
| |
| <div class="bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-lg transition"> |
| <div class="w-20 h-20 rounded-full bg-cyan-50 flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-water text-cyan-600 text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Remote Islands & Off-Grid Communities</h3> |
| <p class="text-earth-600">Island and remote community infrastructure development.</p> |
| </div> |
| |
| |
| <div class="bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-lg transition"> |
| <div class="w-20 h-20 rounded-full bg-yellow-50 flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-building text-amber-600 text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Commercial & Industrial Development</h3> |
| <p class="text-earth-600">Sustainable solutions for commercial projects and industrial facilities.</p> |
| </div> |
| </div> |
| |
| <div class="mt-16 bg-gradient-to-r from-primary-600 to-accent-600 rounded-2xl p-10 text-white"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-2/3 mb-8 md:mb-0 md:pr-10"> |
| <h3 class="text-2xl font-bold mb-4">Partner with Sustainability Experts</h3> |
| <p>Architects, developers, and investors - collaborate with us to integrate sustainable infrastructure from the conceptual stage.</p> |
| </div> |
| <div class="md:w-1/3 text-center"> |
| <a href="#contact" class="px-6 py-3 bg-white text-primary-600 rounded-full font-bold hover:bg-opacity-90 transition">Request Consultation</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="projects" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <span class="text-primary-600 font-semibold">OUR PROJECTS</span> |
| <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Sustainable Infrastructure in Action</h2> |
| <p class="max-w-2xl mx-auto text-lg text-earth-700">Showcasing our work in creating resilient systems for eco-resorts and remote developments</p> |
| <div class="w-24 h-1 bg-secondary-500 mx-auto mt-6"></div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div class="project-card rounded-2xl overflow-hidden shadow-lg"> |
| <div class="h-64 bg-gradient-to-r from-cyan-500 to-blue-500 relative overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> |
| <h3 class="text-white text-2xl font-bold">Sundara Eco-Resort, Bali</h3> |
| </div> |
| </div> |
| <div class="p-6 bg-white"> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Solar Power</span> |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Water Filtration</span> |
| <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Waste Management</span> |
| </div> |
| <p class="text-earth-700 mb-4">Complete off-grid solution for a 50-villa luxury resort with 100% renewable energy and closed-loop water systems.</p> |
| <a href="#" class="text-primary-600 font-medium flex items-center"> |
| View case study |
| <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="project-card rounded-2xl overflow-hidden shadow-lg"> |
| <div class="h-64 bg-gradient-to-r from-emerald-500 to-green-500 relative overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> |
| <h3 class="text-white text-2xl font-bold">Atoll Haven, Maldives</h3> |
| </div> |
| </div> |
| <div class="p-6 bg-white"> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Hybrid Energy</span> |
| <span class="px-3 py-1 bg-cyan-100 text-cyan-800 rounded-full text-sm">Desalination</span> |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Smart Monitoring</span> |
| </div> |
| <p class="text-earth-700 mb-4">Integrated solar-wind-diesel hybrid system with desalination for a remote island resort.</p> |
| <a href="#" class="text-primary-600 font-medium flex items-center"> |
| View case study |
| <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-earth-300 rounded-full text-earth-700 hover:bg-earth-50 transition"> |
| <i class="fas fa-th mr-2"></i> |
| View all projects |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="team" class="py-20 pattern-bg"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <span class="text-primary-600 font-semibold">OUR TEAM</span> |
| <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Meet the ARKAN Solutions Team</h2> |
| <p class="max-w-2xl mx-auto text-lg text-earth-700">A diverse team of sustainability experts, engineers and project managers dedicated to building resilient infrastructure.</p> |
| <div class="w-24 h-1 bg-secondary-500 mx-auto mt-6"></div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg text-center p-6"> |
| <div class="w-40 h-40 rounded-full bg-gray-200 mx-auto mb-6 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Team member" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Sarah Johnson</h3> |
| <p class="text-primary-600 font-medium mb-4">Founder & CEO</p> |
| <p class="text-earth-600 mb-4">Sustainability engineer with 15+ years experience in off-grid systems design.</p> |
| <div class="flex justify-center space-x-3"> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fab fa-linkedin-in"></i></a> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fas fa-envelope"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg text-center p-6"> |
| <div class="w-40 h-40 rounded-full bg-gray-200 mx-auto mb-6 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team member" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Michael Chen</h3> |
| <p class="text-primary-600 font-medium mb-4">Head of Engineering</p> |
| <p class="text-earth-600 mb-4">MEP specialist with expertise in tropical climate systems.</p> |
| <div class="flex justify-center space-x-3"> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fab fa-linkedin-in"></i></a> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fas fa-envelope"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg text-center p-6"> |
| <div class="w-40 h-40 rounded-full bg-gray-200 mx-auto mb-6 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Team member" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Priya Patel</h3> |
| <p class="text-primary-600 font-medium mb-4">Water Systems Director</p> |
| <p class="text-earth-600 mb-4">Expert in rainwater harvesting and ecological wastewater treatment.</p> |
| <div class="flex justify-center space-x-3"> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fab fa-linkedin-in"></i></a> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fas fa-envelope"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg text-center p-6"> |
| <div class="w-40 h-40 rounded-full bg-gray-200 mx-auto mb-6 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Team member" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-bold mb-2">David Wilson</h3> |
| <p class="text-primary-600 font-medium mb-4">Energy Solutions Lead</p> |
| <p class="text-earth-600 mb-4">Renewable energy specialist focusing on hybrid power systems.</p> |
| <div class="flex justify-center space-x-3"> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fab fa-linkedin-in"></i></a> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fas fa-envelope"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg text-center p-6"> |
| <div class="w-40 h-40 rounded-full bg-gray-200 mx-auto mb-6 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Team member" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Elena Rodriguez</h3> |
| <p class="text-primary-600 font-medium mb-4">Project Manager</p> |
| <p class="text-earth-600 mb-4">Specializes in remote location construction and logistics.</p> |
| <div class="flex justify-center space-x-3"> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fab fa-linkedin-in"></i></a> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fas fa-envelope"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg text-center p-6"> |
| <div class="w-40 h-40 rounded-full bg-gray-200 mx-auto mb-6 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Team member" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-bold mb-2">James Wong</h3> |
| <p class="text-primary-600 font-medium mb-4">Business Development</p> |
| <p class="text-earth-600 mb-4">Connects clients with sustainable infrastructure solutions.</p> |
| <div class="flex justify-center space-x-3"> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fab fa-linkedin-in"></i></a> |
| <a href="#" class="text-earth-500 hover:text-primary-600"><i class="fas fa-envelope"></i></a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <a href="#contact" class="inline-flex items-center px-6 py-3 bg-primary-600 text-white rounded-full hover:bg-primary-700 transition"> |
| Contact Our Team |
| <i class="fas fa-arrow-right ml-2 text-sm"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-gradient-to-br from-primary-700 to-primary-900 text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-5xl mx-auto"> |
| <div class="text-center mb-16"> |
| <span class="text-secondary-400 font-semibold">CONTACT US</span> |
| <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Let's Build Sustainable Infrastructure Together</h2> |
| <p class="max-w-2xl mx-auto opacity-80">Reach out to discuss your project requirements or request a consultation</p> |
| <div class="w-24 h-1 bg-secondary-500 mx-auto mt-6"></div> |
| </div> |
| |
| <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| <div> |
| <h3 class="text-2xl font-bold text-earth-800 mb-6">Get in Touch</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex"> |
| <div class="mr-4"> |
| <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center"> |
| <i class="fas fa-map-marker-alt text-primary-600"></i> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-bold text-earth-800">Our Locations</h4> |
| <p class="text-earth-600">Singapore Headquarters<br>Indonesia Operations Center</p> |
| </div> |
| </div> |
| |
| <div class="flex"> |
| <div class="mr-4"> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-envelope text-secondary-600"></i> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-bold text-earth-800">Email Us</h4> |
| <p class="text-earth-600">info@arkansolutions.com<br>projects@arkansolutions.com</p> |
| </div> |
| </div> |
| |
| <div class="flex"> |
| <div class="mr-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-phone-alt text-primary-600"></i> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-bold text-earth-800">Call Us</h4> |
| <p class="text-earth-600">+65 1234 5678 (Singapore)<br>+62 21 1234 5678 (Indonesia)</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <form class="space-y-6"> |
| <div> |
| <label class="block text-earth-800 mb-2 font-medium">Your Name</label> |
| <input type="text" class="w-full px-4 py-3 border border-earth-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="Full name"> |
| </div> |
| |
| <div> |
| <label class="block text-earth-800 mb-2 font-medium">Email Address</label> |
| <input type="email" class="w-full px-4 py-3 border border-earth-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="your@email.com"> |
| </div> |
| |
| <div> |
| <label class="block text-earth-800 mb-2 font-medium">Project Type</label> |
| <select class="w-full px-4 py-3 border border-earth-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"> |
| <option>Select project type</option> |
| <option>Eco-Resort Development</option> |
| <option>Renewable Energy System</option> |
| <option>Water/Wastewater Solution</option> |
| <option>MEP Design</option> |
| <option>Other</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-earth-800 mb-2 font-medium">Message</label> |
| <textarea rows="4" class="w-full px-4 py-3 border border-earth-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="Tell us about your project"></textarea> |
| </div> |
| |
| <button type="submit" class="w-full py-4 bg-primary-600 hover:bg-primary-700 rounded-lg text-white font-bold transition"> |
| Send Message |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-earth-900 text-white pt-16 pb-8"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> |
| <div> |
| <div class="flex items-center space-x-2 mb-6"> |
| <div class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center"> |
| <i class="fas fa-leaf text-white text-xl"></i> |
| </div> |
| <span class="text-xl font-bold text-white">ARKAN<span class="text-secondary-400">Solutions</span></span> |
| </div> |
| <p class="text-earth-300 mb-6">ARKAN Solutions creates sustainable infrastructure for a resilient future.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-earth-800 flex items-center justify-center hover:bg-primary-600 transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-earth-800 flex items-center justify-center hover:bg-primary-600 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-earth-800 flex items-center justify-center hover:bg-primary-600 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-earth-800 flex items-center justify-center hover:bg-primary-600 transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-6 border-l-4 border-primary-500 pl-3">Services</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-earth-300 hover:text-white transition">Feasibility & Development</a></li> |
| <li><a href="#" class="text-earth-300 hover:text-white transition">Sustainable MEP Design</a></li> |
| <li><a href="#" class="text-earth-300 hover:text-white transition">Power & Renewable Energy</a></li> |
| <li><a href="#" class="text-earth-300 hover:text-white transition">Water & Wastewater Solutions</a></li> |
| <li><a href="#" class="text-earth-300 hover:text-white transition">Construction & Logistics</a></li> |
| <li><a href="#" class="text-earth-300 hover:text-white transition">Project Financing</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-6 border-l-4 border-primary-500 pl-3">Quick Links</h3> |
| <ul class="space-y-3"> |
| <li><a href="#about" class="text-earth-300 hover:text-white transition">About Us</a></li> |
| <li><a href="#projects" class="text-earth-300 hover:text-white transition">Projects</a></li> |
| <li><a href="#blog" class="text-earth-300 hover:text-white transition">Insights</a></li> |
| <li><a href="#" class="text-earth-300 hover:text-white transition">Careers</a></li> |
| <li><a href="#" class="text-earth-300 hover:text-white transition">Privacy Policy</a></li> |
| <li><a href="#" class="text-earth-300 hover:text-white transition">Terms of Service</a></li> |
| </ul> |
| </div> |
| |
| </div> |
| |
| <div class="border-t border-earth-800 pt-8 text-center text-earth-500"> |
| <p>© 2023 ARKAN Solutions. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| |
| <script> |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| window.scrollTo({ |
| top: target.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| |
| document.querySelector('button').addEventListener('click', function() { |
| alert("Mobile menu would open here. In a real implementation, this would show/hide the navigation menu."); |
| }); |
| </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" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
