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 | Sustainable Infrastructure for Off-Grid Developments</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: '#2E7D32', // Deep green | |
| secondary: '#0288D1', // Ocean blue | |
| accent: '#FBC02D', // Sun yellow | |
| neutral: '#5D4037', // Earth brown | |
| light: '#E8F5E9' // Light green | |
| }, | |
| fontFamily: { | |
| sans: ['Montserrat', 'sans-serif'], | |
| serif: ['Merriweather', 'serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero-bg { | |
| background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), | |
| url('https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1800&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .wave-divider { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| overflow: hidden; | |
| line-height: 0; | |
| transform: rotate(180deg); | |
| } | |
| .wave-divider svg { | |
| position: relative; | |
| display: block; | |
| width: calc(100% + 1.3px); | |
| height: 100px; | |
| } | |
| .wave-divider .shape-fill { | |
| fill: #FFFFFF; | |
| } | |
| .service-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); | |
| } | |
| .team-member:hover .team-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .carousel-item { | |
| transition: transform 0.8s ease-in-out; | |
| } | |
| input:focus, textarea:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.3); | |
| border-color: #2E7D32; | |
| } | |
| .animate-in { | |
| animation: fadeIn 0.8s ease-in forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-white bg-opacity-90 shadow-md"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center"> | |
| <span class="text-primary text-2xl font-bold flex items-center"> | |
| <i class="fas fa-leaf mr-2"></i> | |
| ARKAN Solutions | |
| </span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#about" class="text-neutral-700 hover:text-primary transition-colors">About</a> | |
| <a href="#services" class="text-neutral-700 hover:text-primary transition-colors">Services</a> | |
| <a href="#sectors" class="text-neutral-700 hover:text-primary transition-colors">Sectors</a> | |
| <a href="#projects" class="text-neutral-700 hover:text-primary transition-colors">Projects</a> | |
| <a href="#team" class="text-neutral-700 hover:text-primary transition-colors">Team</a> | |
| <a href="#contact" class="text-neutral-700 hover:text-primary transition-colors">Contact</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-neutral-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden bg-white py-4 shadow-lg"> | |
| <div class="container mx-auto px-4"> | |
| <a href="#about" class="block py-2 text-neutral-700 hover:text-primary">About</a> | |
| <a href="#services" class="block py-2 text-neutral-700 hover:text-primary">Services</a> | |
| <a href="#sectors" class="block py-2 text-neutral-700 hover:text-primary">Sectors</a> | |
| <a href="#projects" class="block py-2 text-neutral-700 hover:text-primary">Projects</a> | |
| <a href="#team" class="block py-2 text-neutral-700 hover:text-primary">Team</a> | |
| <a href="#contact" class="block py-2 text-neutral-700 hover:text-primary">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-bg min-h-screen flex items-center relative pt-16"> | |
| <div class="wave-divider"> | |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> | |
| <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path> | |
| </svg> | |
| </div> | |
| <div class="container mx-auto px-4 py-24 relative z-10 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 animate-in"> | |
| Making Complex Projects Simple, Sustainable, and Deliverable | |
| </h1> | |
| <p class="text-xl md:text-2xl text-white max-w-3xl mx-auto mb-12 animate-in"> | |
| End-to-end sustainable services and infrastructure solutions for hospitality and remote developments across Indonesia and APAC. We make net-zero off-grid living possible. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4 animate-in"> | |
| <a href="#services" class="bg-primary hover:bg-green-800 text-white font-bold py-3 px-8 rounded-full transition-colors duration-300"> | |
| Our Services | |
| </a> | |
| <a href="#contact" class="bg-secondary hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition-colors duration-300"> | |
| Contact Us | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" 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-neutral-800 mb-4">About ARKAN Solutions</h2> | |
| <div class="w-24 h-1 bg-primary mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Mission --> | |
| <div class="bg-light p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="text-primary text-4xl mb-4"> | |
| <i class="fas fa-bullseye"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Our Mission</h3> | |
| <p class="text-neutral-600"> | |
| To enable sustainable and off-grid living by providing comprehensive infrastructure solutions that harmonize with natural environments. We're committed to making net-zero developments achievable across Southeast Asia. | |
| </p> | |
| </div> | |
| <!-- Expertise --> | |
| <div class="bg-light p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="text-primary text-4xl mb-4"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Our Expertise</h3> | |
| <p class="text-neutral-600"> | |
| With multidisciplinary expertise in sustainability, engineering, and remote development, our team specializes in creating resilient systems that function optimally in challenging environments. | |
| </p> | |
| </div> | |
| <!-- Focus --> | |
| <div class="bg-light p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="text-primary text-4xl mb-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Our Focus</h3> | |
| <p class="text-neutral-600"> | |
| Based in Singapore and Indonesia, we focus on creating sustainable infrastructure solutions for hospitality and remote developments across Indonesia and the Asia-Pacific region. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-neutral-800 mb-4">Our Comprehensive Services</h2> | |
| <p class="text-neutral-600 max-w-2xl mx-auto"> | |
| Offering end-to-end sustainable infrastructure solutions tailored for off-grid and remote locations | |
| </p> | |
| <div class="w-24 h-1 bg-primary mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition-all duration-300"> | |
| <div class="text-secondary text-4xl mb-4"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Feasibility & Development</h3> | |
| <p class="text-neutral-600"> | |
| Comprehensive site analysis, resource assessment, and project planning for off-grid developments. | |
| </p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition-all duration-300"> | |
| <div class="text-secondary text-4xl mb-4"> | |
| <i class="fas fa-drafting-compass"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Sustainable MEP Design</h3> | |
| <p class="text-neutral-600"> | |
| Integrated mechanical, electrical, and plumbing systems designed for efficiency and sustainability. | |
| </p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition-all duration-300"> | |
| <div class="text-secondary text-4xl mb-4"> | |
| <i class="fas fa-sun"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Power & Renewable Energy</h3> | |
| <p class="text-neutral-600"> | |
| Solar, wind, and hybrid systems with battery storage tailored for remote locations. | |
| </p> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition-all duration-300"> | |
| <div class="text-secondary text-4xl mb-4"> | |
| <i class="fas fa-tint"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Water & Wastewater Solutions</h3> | |
| <p class="text-neutral-600"> | |
| Rainwater harvesting, desalination, filtration, and ecological wastewater treatment systems. | |
| </p> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition-all duration-300"> | |
| <div class="text-secondary text-4xl mb-4"> | |
| <i class="fas fa-truck-loading"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Construction & Remote Logistics</h3> | |
| <p class="text-neutral-600"> | |
| Specialized construction management and logistics for challenging remote locations. | |
| </p> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition-all duration-300"> | |
| <div class="text-secondary text-4xl mb-4"> | |
| <i class="fas fa-hand-holding-usd"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Project Financing</h3> | |
| <p class="text-neutral-600"> | |
| Financial solutions and partnerships for sustainable energy and water infrastructure projects. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sectors Section --> | |
| <section id="sectors" 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-neutral-800 mb-4">Our Focus Sectors</h2> | |
| <p class="text-xl text-neutral-600 max-w-2xl mx-auto"> | |
| "Partners in Sustainable Development" - We work with forward-thinking developers and businesses committed to sustainable growth | |
| </p> | |
| <div class="w-24 h-1 bg-primary mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Sector 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-100"> | |
| <div class="text-primary text-3xl mb-4"> | |
| <i class="fas fa-umbrella-beach"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Hospitality Development</h3> | |
| <p class="text-neutral-600"> | |
| Sustainable solutions for resorts, boutique hotels, retreats, and luxury villas in eco-sensitive locations. | |
| </p> | |
| </div> | |
| <!-- Sector 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-100"> | |
| <div class="text-primary text-3xl mb-4"> | |
| <i class="fas fa-tree"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Remote Off-Grid Development</h3> | |
| <p class="text-neutral-600"> | |
| Infrastructure solutions for hotels, villages, farms, and islands in isolated locations. | |
| </p> | |
| </div> | |
| <!-- Sector 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-100"> | |
| <div class="text-primary text-3xl mb-4"> | |
| <i class="fas fa-industry"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Commercial & Industrial</h3> | |
| <p class="text-neutral-600"> | |
| Sustainable solutions for commercial projects and industrial facilities in challenging environments. | |
| </p> | |
| </div> | |
| <!-- Sector 4 --> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-100"> | |
| <div class="text-primary text-3xl mb-4"> | |
| <i class="fas fa-handshake"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-neutral-800 mb-3">Sustainability Partnerships</h3> | |
| <p class="text-neutral-600"> | |
| Collaborate with architects, developers, and investors to integrate sustainable infrastructure from concept. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 bg-light"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-neutral-800 mb-4">Sustainable Projects in Action</h2> | |
| <p class="text-xl text-neutral-600 max-w-2xl mx-auto"> | |
| Showcasing our work in creating resilient systems for eco-resorts and remote developments | |
| </p> | |
| <div class="w-24 h-1 bg-primary mx-auto mt-4"></div> | |
| </div> | |
| <!-- Carousel Container --> | |
| <div class="relative overflow-hidden"> | |
| <div id="carousel" class="flex transition-transform duration-700 ease-in-out"> | |
| <!-- Projects will be loaded here by JavaScript --> | |
| </div> | |
| <div class="flex justify-center mt-6 space-x-2"> | |
| <button id="prev-btn" class="bg-primary hover:bg-green-800 text-white p-2 rounded-full transition-colors"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button id="next-btn" class="bg-primary hover:bg-green-800 text-white p-2 rounded-full transition-colors"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| <!-- Navigation Buttons --> | |
| <button id="prev-btn" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 text-primary p-3 rounded-full shadow-md ml-4 z-10 hover:bg-opacity-100 transition-all"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button id="next-btn" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 text-primary p-3 rounded-full shadow-md mr-4 z-10 hover:bg-opacity-100 transition-all"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <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-neutral-800 mb-4">Meet the ARKAN Solutions Team</h2> | |
| <p class="text-xl text-neutral-600 max-w-2xl mx-auto"> | |
| A diverse team of sustainability experts, engineers and project managers dedicated to building resilient infrastructure | |
| </p> | |
| <div class="w-24 h-1 bg-primary mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"> | |
| <!-- Team Members --> | |
| <div class="team-member relative overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Team Member" class="w-full h-64 object-cover"> | |
| <div class="team-overlay absolute inset-0 bg-primary bg-opacity-90 text-white p-4 flex flex-col justify-end opacity-0 transform translate-y-10 transition-all duration-300"> | |
| <h3 class="font-bold text-xl mb-1">Alex Morgan</h3> | |
| <p class="text-sm mb-2">Chief Sustainability Officer</p> | |
| <p class="text-xs">15+ years in sustainable design</p> | |
| </div> | |
| </div> | |
| <div class="team-member relative overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1573496358871-27eaa02b1994?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Team Member" class="w-full h-64 object-cover"> | |
| <div class="team-overlay absolute inset-0 bg-primary bg-opacity-90 text-white p-4 flex flex-col justify-end opacity-0 transform translate-y-10 transition-all duration-300"> | |
| <h3 class="font-bold text-xl mb-1">Sarah Tan</h3> | |
| <p class="text-sm mb-2">Lead Renewable Energy Engineer</p> | |
| <p class="text-xs">Specialist in off-grid power systems</p> | |
| </div> | |
| </div> | |
| <div class="team-member relative overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Team Member" class="w-full h-64 object-cover"> | |
| <div class="team-overlay absolute inset-0 bg-primary bg-opacity-90 text-white p-4 flex flex-col justify-end opacity-0 transform translate-y-10 transition-all duration-300"> | |
| <h3 class="font-bold text-xl mb-1">Raj Patel</h3> | |
| <p class="text-sm mb-2">Hydrology & Water Systems Director</p> | |
| <p class="text-xs">Water treatment solutions expert</p> | |
| </div> | |
| </div> | |
| <div class="team-member relative overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1573496358871-27eaa02b1994?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Team Member" class="w-full h-64 object-cover"> | |
| <div class="team-overlay absolute inset-0 bg-primary bg-opacity-90 text-white p-4 flex flex-col justify-end opacity-0 transform translate-y-10 transition-all duration-300"> | |
| <h3 class="font-bold text-xl mb-1">Elena Garcia</h3> | |
| <p class="text-sm mb-2">Construction & Logistics Manager</p> | |
| <p class="text-xs">Remote project delivery specialist</p> | |
| </div> | |
| </div> | |
| <div class="team-member relative overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Team Member" class="w-full h-64 object-cover"> | |
| <div class="team-overlay absolute inset-0 bg-primary bg-opacity-90 text-white p-4 flex flex-col justify-end opacity-0 transform translate-y-10 transition-all duration-300"> | |
| <h3 class="font-bold text-xl mb-1">Kenji Yamamoto</h3> | |
| <p class="text-sm mb-2">MEP Design Specialist</p> | |
| <p class="text-xs">Integrated sustainable systems</p> | |
| </div> | |
| </div> | |
| <div class="team-member relative overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1573496358871-27eaa02b1994?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Team Member" class="w-full h-64 object-cover"> | |
| <div class="team-overlay absolute inset-0 bg-primary bg-opacity-90 text-white p-4 flex flex-col justify-end opacity-0 transform translate-y-10 transition-all duration-300"> | |
| <h3 class="font-bold text-xl mb-1">Maya Singh</h3> | |
| <p class="text-sm mb-2">Finance & Partnerships Director</p> | |
| <p class="text-xs">Sustainable project funding expert</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-16"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-bold text-neutral-800 mb-6">Let's Talk About Your Project</h2> | |
| <p class="text-xl text-neutral-600 mb-8"> | |
| Reach out to discuss your project requirements or request a consultation | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="text-primary text-2xl mr-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-neutral-800">Our Locations</h3> | |
| <p class="text-neutral-600"> | |
| Singapore: 123 Sustainability Blvd<br> | |
| Bali: 45 Eco Resort Road, Kuta<br> | |
| Jakarta: 88 Green Tower, Central District | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary text-2xl mr-4"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-neutral-800">Contact Us</h3> | |
| <p class="text-neutral-600"> | |
| +65 1234 5678 (Singapore)<br> | |
| +62 812 3456 7890 (Indonesia)<br> | |
| info@arkansolutions.com | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary text-2xl mr-4"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-neutral-800">Business Hours</h3> | |
| <p class="text-neutral-600"> | |
| Monday-Friday: 9AM - 6PM<br> | |
| Saturday: 10AM - 2PM<br> | |
| Sunday: Closed | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <form class="bg-white p-8 rounded-lg shadow-md"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-neutral-700 mb-2">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-neutral-700 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="project" class="block text-neutral-700 mb-2">Project Type</label> | |
| <select id="project" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary"> | |
| <option value="">Select Project Type</option> | |
| <option value="resort">Eco-Resort/Hotel</option> | |
| <option value="remote">Remote Community</option> | |
| <option value="commercial">Commercial/Industrial</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-neutral-700 mb-2">Project Details</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary hover:bg-green-800 text-white font-bold py-3 px-8 rounded-lg transition-colors duration-300"> | |
| Submit Inquiry | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-neutral-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-leaf mr-2 text-primary"></i> | |
| ARKAN Solutions | |
| </h3> | |
| <p class="text-gray-400"> | |
| Creating sustainable infrastructure for off-grid living across Indonesia and APAC. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">About Us</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white transition-colors">Services</a></li> | |
| <li><a href="#projects" class="text-gray-400 hover:text-white transition-colors">Projects</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Renewable Energy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Water Solutions</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">MEP Design</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Project Financing</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Connect With Us</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-linkedin-in text-lg"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-twitter text-lg"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-instagram text-lg"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-facebook-f text-lg"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400"> | |
| Subscribe to our newsletter for sustainable insights | |
| </p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg w-full text-gray-800"> | |
| <button class="bg-primary hover:bg-green-700 px-4 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-6 text-center text-gray-500"> | |
| <p>© 2023 ARKAN Solutions. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Initialize projects carousel (show 3 at a time) | |
| const projects = [ | |
| { | |
| name: "Bali Eco Retreat", | |
| location: "Ubud, Bali", | |
| description: "Complete off-grid power and water solution for 50-villa luxury resort", | |
| image: "https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" | |
| }, | |
| { | |
| name: "Komodo Island Resort", | |
| location: "Flores, Indonesia", | |
| description: "Solar and desalination system for remote island luxury destination", | |
| image: "https://images.unsplash.com/photo-1602002418672-686f9a412c3f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" | |
| }, | |
| { | |
| name: "Sumba Sustainable Village", | |
| location: "East Sumba, Indonesia", | |
| description: "Community water treatment and renewable energy microgrid", | |
| image: "https://images.unsplash.com/photo-1583417319070-4a69db38a482?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" | |
| }, | |
| { | |
| name: "Maluku Dive Resort", | |
| location: "Maluku Islands, Indonesia", | |
| description: "Hybrid solar-wind system with battery storage for remote island operation", | |
| image: "https://images.unsplash.com/photo-1561501900-3701fa6a0864?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" | |
| }, | |
| { | |
| name: "Java Organic Farm", | |
| location: "Central Java, Indonesia", | |
| description: "Integrated water management and solar-powered irrigation system", | |
| image: "https://images.unsplash.com/photo-1500382019954-325903d25e00?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" | |
| }, | |
| { | |
| name: "Lombok Luxury Villas", | |
| location: "South Lombok, Indonesia", | |
| description: "Complete sustainable infrastructure for 30 luxury oceanfront villas", | |
| image: "https://images.unsplash.com/photo-1586375300779-9d9a0aac5255?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" | |
| }, | |
| { | |
| name: "Philippines Island Resort", | |
| location: "Palawan, Philippines", | |
| description: "Off-grid power and water solution for secluded island getaway", | |
| image: "https://images.unsplash.com/photo-1591808259168-54e2b1d29893?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" | |
| }, | |
| { | |
| name: "Sulawesi Eco Lodge", | |
| location: "North Sulawesi, Indonesia", | |
| description: "Sustainable MEP design for rainforest conservation lodge", | |
| image: "https://images.unsplash.com/photo-1591160690555-5debfba289f0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" | |
| }, | |
| { | |
| name: "Thailand Wellness Retreat", | |
| location: "Koh Samui, Thailand", | |
| description: "Net-zero energy and water systems for luxury wellness center", | |
| image: "https://images.unsplash.com/photo-1561501900-3701fa6a0864?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" | |
| }, | |
| { | |
| name: "Vietnam Coastal Resort", | |
| location: "Da Nang, Vietnam", | |
| description: "Integrated sustainable infrastructure for 120-room beach resort", | |
| image: "https://images.unsplash.com/photo-1543411964-9e0c6d1f7e52?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" | |
| } | |
| ]; | |
| const carousel = document.getElementById('carousel'); | |
| const prevBtn = document.getElementById('prev-btn'); | |
| const nextBtn = document.getElementById('next-btn'); | |
| let currentIndex = 0; | |
| // Create project slides | |
| projects.forEach((project, index) => { | |
| const slide = document.createElement('div'); | |
| slide.className = 'carousel-item min-w-full md:min-w-1/2 lg:min-w-1/3 p-4 flex-shrink-0 w-1/3'; | |
| slide.innerHTML = ` | |
| <div class="bg-white rounded-xl overflow-hidden shadow-lg h-full"> | |
| <img src="${project.image}" alt="${project.name}" class="w-full h-56 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold text-neutral-800">${project.name}</h3> | |
| <span class="bg-primary text-white text-xs py-1 px-2 rounded-full">${project.location}</span> | |
| </div> | |
| <p class="text-neutral-600">${project.description}</p> | |
| </div> | |
| </div> | |
| `; | |
| carousel.appendChild(slide); | |
| }); | |
| // Function to update carousel position | |
| function updateCarousel() { | |
| const slideWidth = document.querySelector('.carousel-item').offsetWidth; | |
| carousel.style.transform = `translateX(-${currentIndex * slideWidth * 3}px)`; | |
| } | |
| // Next button event | |
| nextBtn.addEventListener('click', () => { | |
| if (currentIndex + 3 < projects.length) { | |
| currentIndex += 1; | |
| updateCarousel(); | |
| } | |
| }); | |
| // Previous button event | |
| prevBtn.addEventListener('click', () => { | |
| if (currentIndex > 0) { | |
| currentIndex -= 1; | |
| updateCarousel(); | |
| } | |
| }); | |
| // Auto slide every 10 seconds | |
| setInterval(() => { | |
| currentIndex = (currentIndex + 1) % projects.length; | |
| updateCarousel(); | |
| }, 10000); | |
| // Initialize carousel position | |
| window.addEventListener('load', () => { | |
| updateCarousel(); | |
| }); | |
| // Smooth scroll for navigation links | |
| 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' | |
| }); | |
| // Close mobile menu if open | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Intersection Observer for animations | |
| const observerOptions = { | |
| root: null, | |
| rootMargin: '0px', | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-in'); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe sections | |
| document.querySelectorAll('section').forEach(section => { | |
| observer.observe(section); | |
| }); | |
| </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-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |