Hugging Face's logo

Spaces:
Julien355
/
arkan-website
Running

App Files Community
Julien355 commited on
Commit
4a9abcf
·
verified ·
1 Parent(s): 6b4ba5d

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +807 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Arkan Website
3
- emoji: 😻
4
- colorFrom: green
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: arkan-website
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,807 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Sustainable infrastructure solutions for eco-resorts and remote developments. Resilient energy, water, and MEP systems.">
7
+ <meta name="keywords" content="sustainable infrastructure, off-grid energy, renewable energy, eco-resort solutions, wastewater treatment, MEP design">
8
+ <title>EcoSystems Infrastructure | Sustainable Solutions for Remote Developments</title>
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Raleway:wght@500;600;700;800&display=swap');
13
+
14
+ :root {
15
+ --primary: #2c7a7b;
16
+ --primary-dark: #285e61;
17
+ --secondary: #2d6a4f;
18
+ --accent: #3182ce;
19
+ --light: #f7fafc;
20
+ --sand: #e6e1d1;
21
+ --text: #1a202c;
22
+ --gray: #718096;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Poppins', sans-serif;
27
+ color: var(--text);
28
+ scroll-behavior: smooth;
29
+ }
30
+
31
+ h1, h2, h3, h4, h5 {
32
+ font-family: 'Raleway', sans-serif;
33
+ }
34
+
35
+ .gradient-bg {
36
+ background: linear-gradient(135deg, #f0f7ff 0%, #e6fffa 50%, #f0fff4 100%);
37
+ }
38
+
39
+ .btn-primary {
40
+ background: var(--primary);
41
+ color: white;
42
+ padding: 12px 30px;
43
+ border-radius: 50px;
44
+ font-weight: 500;
45
+ transition: all 0.3s ease;
46
+ }
47
+
48
+ .btn-primary:hover {
49
+ background: var(--primary-dark);
50
+ transform: translateY(-2px);
51
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
52
+ }
53
+
54
+ .section-title {
55
+ position: relative;
56
+ display: inline-block;
57
+ margin-bottom: 50px;
58
+ }
59
+
60
+ .section-title::after {
61
+ content: '';
62
+ position: absolute;
63
+ width: 70%;
64
+ height: 4px;
65
+ background: var(--primary);
66
+ bottom: -15px;
67
+ left: 15%;
68
+ }
69
+
70
+ .service-card:hover {
71
+ transform: translateY(-10px);
72
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
73
+ }
74
+
75
+ .team-card:hover img {
76
+ transform: scale(1.05);
77
+ }
78
+
79
+ .carousel-container {
80
+ overflow: hidden;
81
+ }
82
+
83
+ .carousel-track {
84
+ display: flex;
85
+ animation: carousel-scroll 30s linear infinite;
86
+ }
87
+
88
+ .carousel-item {
89
+ flex: 0 0 300px;
90
+ margin: 0 15px;
91
+ border-radius: 10px;
92
+ overflow: hidden;
93
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
94
+ }
95
+
96
+ .contact-form input,
97
+ .contact-form textarea {
98
+ border: 1px solid #cbd5e0;
99
+ border-radius: 8px;
100
+ padding: 12px 15px;
101
+ width: 100%;
102
+ transition: all 0.3s;
103
+ }
104
+
105
+ .contact-form input:focus,
106
+ .contact-form textarea:focus {
107
+ outline: none;
108
+ border-color: var(--primary);
109
+ box-shadow: 0 0 0 3px rgba(44, 122, 123, 0.2);
110
+ }
111
+
112
+ .footer-links a:hover {
113
+ color: var(--sand);
114
+ }
115
+
116
+ @media (max-width: 768px) {
117
+ .hero-content {
118
+ text-align: center;
119
+ }
120
+
121
+ .carousel-item {
122
+ flex: 0 0 250px;
123
+ }
124
+ }
125
+
126
+ @keyframes carousel-scroll {
127
+ 0% { transform: translateX(0); }
128
+ 100% { transform: translateX(calc(-315px * 10)); }
129
+ }
130
+ </style>
131
+ <script>
132
+ tailwind.config = {
133
+ theme: {
134
+ extend: {
135
+ colors: {
136
+ primary: '#2c7a7b',
137
+ secondary: '#2d6a4f',
138
+ accent: '#3182ce',
139
+ light: '#f7fafc',
140
+ sand: '#e6e1d1',
141
+ dark: '#1a202c',
142
+ }
143
+ }
144
+ }
145
+ }
146
+ </script>
147
+ </head>
148
+ <body class="gradient-bg">
149
+ <!-- Header -->
150
+ <header class="fixed w-full z-50 bg-white shadow-sm">
151
+ <div class="container mx-auto px-4">
152
+ <nav class="flex items-center justify-between py-4">
153
+ <div class="flex items-center">
154
+ <div class="bg-primary w-10 h-10 rounded-full mr-3"></div>
155
+ <div class="text-xl font-bold text-primary-dark">EcoSystems<span class="font-normal text-secondary">Infra</span></div>
156
+ </div>
157
+
158
+ <!-- Desktop Navigation -->
159
+ <div class="hidden md:flex space-x-8">
160
+ <a href="#about" class="text-gray-600 hover:text-primary transition">About</a>
161
+ <a href="#services" class="text-gray-600 hover:text-primary transition">Services</a>
162
+ <a href="#serve" class="text-gray-600 hover:text-primary transition">Who We Serve</a>
163
+ <a href="#projects" class="text-gray-600 hover:text-primary transition">Projects</a>
164
+ <a href="#team" class="text-gray-600 hover:text-primary transition">Team</a>
165
+ <a href="#contact" class="text-gray-600 hover:text-primary transition">Contact</a>
166
+ </div>
167
+
168
+ <div class="hidden md:block">
169
+ <a href="#contact" class="btn-primary">Get Started</a>
170
+ </div>
171
+
172
+ <!-- Mobile menu button -->
173
+ <button id="mobile-menu-button" class="md:hidden text-gray-600">
174
+ <i class="fas fa-bars text-xl"></i>
175
+ </button>
176
+ </nav>
177
+
178
+ <!-- Mobile menu -->
179
+ <div id="mobile-menu" class="hidden md:hidden py-4 px-4 bg-white border-t">
180
+ <a href="#about" class="block py-2 text-gray-700">About</a>
181
+ <a href="#services" class="block py-2 text-gray-700">Services</a>
182
+ <a href="#serve" class="block py-2 text-gray-700">Who We Serve</a>
183
+ <a href="#projects" class="block py-2 text-gray-700">Projects</a>
184
+ <a href="#team" class="block py-2 text-gray-700">Team</a>
185
+ <a href="#contact" class="block py-2 text-gray-700">Contact</a>
186
+ <a href="#contact" class="btn-primary w-full mt-4 text-center">Get Started</a>
187
+ </div>
188
+ </div>
189
+ </header>
190
+
191
+ <!-- Hero Section -->
192
+ <section class="pt-32 pb-20 px-4">
193
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
194
+ <div class="md:w-1/2 hero-content">
195
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
196
+ Resilient Energy, Water, and MEP Systems for Remote & Sustainable Places.
197
+ </h1>
198
+ <p class="text-lg text-gray-600 mb-8 max-w-2xl">
199
+ End-to-end sustainable infrastructure solutions for eco-resorts and remote developments across Indonesia and APAC.
200
+ We make net-zero off-grid living possible.
201
+ </p>
202
+ <div class="flex flex-col sm:flex-row gap-4">
203
+ <a href="#services" class="btn-primary text-center">Explore Our Services</a>
204
+ <a href="#projects" class="bg-white text-primary border border-primary px-8 py-3 rounded-full text-center transition hover:bg-gray-50">
205
+ View Projects
206
+ </a>
207
+ </div>
208
+ </div>
209
+ <div class="md:w-1/2 mt-12 md:mt-0 relative">
210
+ <div class="relative">
211
+ <img src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Eco Resort" class="w-full h-auto rounded-xl shadow-xl">
212
+ <div class="absolute -bottom-6 -right-6 bg-white p-6 rounded-lg shadow-lg">
213
+ <div class="text-center">
214
+ <div class="text-3xl font-bold text-primary">150+</div>
215
+ <div class="text-gray-600">Sustainable Projects</div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </section>
222
+
223
+ <!-- About Section -->
224
+ <section id="about" class="py-20 bg-white">
225
+ <div class="container mx-auto px-4">
226
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 section-title">About Us</h2>
227
+
228
+ <div class="flex flex-col md:flex-row gap-12 items-center">
229
+ <div class="md:w-1/2">
230
+ <div class="relative mb-8">
231
+ <img src="https://images.unsplash.com/photo-1587586115052-1baac4c3a58f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Eco Infrastructure" class="rounded-lg">
232
+ <div class="absolute top-4 -right-4 bg-secondary text-white p-4 rounded">
233
+ <div class="text-2xl">2010</div>
234
+ <div class="text-xs">ESTABLISHED</div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="md:w-1/2">
240
+ <h3 class="text-2xl font-bold mb-4">Enabling Net-Zero Off-Grid Living</h3>
241
+ <p class="text-gray-600 mb-6">
242
+ Based in Singapore and Indonesia with a focus throughout APAC, EcoSystems Infrastructure specializes in sustainable
243
+ engineering solutions for remote developments. We combine deep expertise in sustainability with innovative engineering
244
+ to create resilient systems that allow developments to thrive off-grid while minimizing environmental impact.
245
+ </p>
246
+
247
+ <div class="flex flex-wrap gap-6 mt-10">
248
+ <div class="flex items-center">
249
+ <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white mr-4">
250
+ <i class="fas fa-leaf"></i>
251
+ </div>
252
+ <div>
253
+ <div class="font-bold">Sustainability Focus</div>
254
+ <div class="text-gray-600 text-sm">Net-zero solutions</div>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="flex items-center">
259
+ <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white mr-4">
260
+ <i class="fas fa-map"></i>
261
+ </div>
262
+ <div>
263
+ <div class="font-bold">Regional Expertise</div>
264
+ <div class="text-gray-600 text-sm">APAC specialists</div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </section>
272
+
273
+ <!-- Services Section -->
274
+ <section id="services" class="py-20 bg-sand">
275
+ <div class="container mx-auto px-4">
276
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 section-title">Our Services</h2>
277
+
278
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
279
+ <!-- Service 1 -->
280
+ <div class="bg-white rounded-xl p-8 shadow-md transition-all duration-300 service-card">
281
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary text-2xl mb-6">
282
+ <i class="fas fa-file-alt"></i>
283
+ </div>
284
+ <h3 class="text-xl font-bold mb-4">Feasibility & Development</h3>
285
+ <p class="text-gray-600 mb-4">
286
+ Comprehensive site analysis, technical feasibility studies, and development planning for remote projects.
287
+ </p>
288
+ </div>
289
+
290
+ <!-- Service 2 -->
291
+ <div class="bg-white rounded-xl p-8 shadow-md transition-all duration-300 service-card">
292
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary text-2xl mb-6">
293
+ <i class="fas fa-drafting-compass"></i>
294
+ </div>
295
+ <h3 class="text-xl font-bold mb-4">Sustainable MEP Design</h3>
296
+ <p class="text-gray-600 mb-4">
297
+ Mechanical, Electrical, and Plumbing solutions optimized for sustainability and remote locations.
298
+ </p>
299
+ </div>
300
+
301
+ <!-- Service 3 -->
302
+ <div class="bg-white rounded-xl p-8 shadow-md transition-all duration-300 service-card">
303
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary text-2xl mb-6">
304
+ <i class="fas fa-solar-panel"></i>
305
+ </div>
306
+ <h3 class="text-xl font-bold mb-4">Power & Renewable Energy</h3>
307
+ <p class="text-gray-600 mb-4">
308
+ Solar, wind, and hybrid systems with battery storage for reliable off-grid power solutions.
309
+ </p>
310
+ </div>
311
+
312
+ <!-- Service 4 -->
313
+ <div class="bg-white rounded-xl p-8 shadow-md transition-all duration-300 service-card">
314
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary text-2xl mb-6">
315
+ <i class="fas fa-faucet-drip"></i>
316
+ </div>
317
+ <h3 class="text-xl font-bold mb-4">Water & Wastewater Solutions</h3>
318
+ <p class="text-gray-600 mb-4">
319
+ Sustainable water sourcing, filtration systems, and eco-friendly wastewater treatment.
320
+ </p>
321
+ </div>
322
+
323
+ <!-- Service 5 -->
324
+ <div class="bg-white rounded-xl p-8 shadow-md transition-all duration-300 service-card">
325
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary text-2xl mb-6">
326
+ <i class="fas fa-truck-loading"></i>
327
+ </div>
328
+ <h3 class="text-xl font-bold mb-4">Construction & Remote Logistics</h3>
329
+ <p class="text-gray-600 mb-4">
330
+ End-to-end project execution, specialized sourcing, and logistics for challenging locations.
331
+ </p>
332
+ </div>
333
+
334
+ <!-- Service 6 -->
335
+ <div class="bg-white rounded-xl p-8 shadow-md transition-all duration-300 service-card">
336
+ <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary text-2xl mb-6">
337
+ <i class="fas fa-file-invoice-dollar"></i>
338
+ </div>
339
+ <h3 class="text-xl font-bold mb-4">Project Financing</h3>
340
+ <p class="text-gray-600 mb-4">
341
+ Financial solutions and partnership models for energy and water system investments.
342
+ </p>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </section>
347
+
348
+ <!-- Who We Serve Section -->
349
+ <section id="serve" class="py-20 bg-white">
350
+ <div class="container mx-auto px-4">
351
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 section-title">Who We Serve</h2>
352
+
353
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-4xl mx-auto">
354
+ <div class="flex">
355
+ <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center text-white mr-6 flex-shrink-0">
356
+ <i class="fas fa-umbrella-beach"></i>
357
+ </div>
358
+ <div>
359
+ <h3 class="text-xl font-bold mb-2">Hospitality Development</h3>
360
+ <p class="text-gray-600">
361
+ Eco-resorts, boutique hotels, and glamping destinations requiring sustainable infrastructure.
362
+ </p>
363
+ </div>
364
+ </div>
365
+
366
+ <div class="flex">
367
+ <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center text-white mr-6 flex-shrink-0">
368
+ <i class="fas fa-tree"></i>
369
+ </div>
370
+ <div>
371
+ <h3 class="text-xl font-bold mb-2">Off-Grid Resorts & Eco-Hotels</h3>
372
+ <p class="text-gray-600">
373
+ Properties committed to sustainability, minimizing environmental impact while maintaining guest comfort.
374
+ </p>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="flex">
379
+ <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center text-white mr-6 flex-shrink-0">
380
+ <i class="fas fa-island-tropical"></i>
381
+ </div>
382
+ <div>
383
+ <h3 class="text-xl font-bold mb-2">Remote Islands</h3>
384
+ <p class="text-gray-600">
385
+ Community and resort developments on islands without existing grid infrastructure.
386
+ </p>
387
+ </div>
388
+ </div>
389
+
390
+ <div class="flex">
391
+ <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center text-white mr-6 flex-shrink-0">
392
+ <i class="fas fa-industry"></i>
393
+ </div>
394
+ <div>
395
+ <h3 class="text-xl font-bold mb-2">Commercial & Industrial</h3>
396
+ <p class="text-gray-600">
397
+ Remote commercial operations, manufacturing facilities, and industrial sites needing sustainable utilities.
398
+ </p>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="flex md:col-span-2 justify-center">
403
+ <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center text-white mr-6 flex-shrink-0">
404
+ <i class="fas fa-users"></i>
405
+ </div>
406
+ <div>
407
+ <h3 class="text-xl font-bold mb-2">Architects & Hospitality Investors</h3>
408
+ <p class="text-gray-600">
409
+ Developers and designers seeking infrastructure partners for sustainable projects.
410
+ </p>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </section>
416
+
417
+ <!-- Projects Carousel -->
418
+ <section id="projects" class="py-20 bg-sand">
419
+ <div class="container mx-auto px-4">
420
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 section-title">Our Projects</h2>
421
+
422
+ <div class="carousel-container">
423
+ <div class="carousel-track">
424
+ <!-- Project 1 -->
425
+ <div class="carousel-item">
426
+ <img src="https://images.unsplash.com/photo-1564049489314-03f9d3f4ded2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Bali Eco Resort" class="w-full h-48 object-cover">
427
+ <div class="p-4 bg-white">
428
+ <div class="text-sm text-primary">Bali, Indonesia</div>
429
+ <h3 class="font-bold mt-1">Ubud Eco Resort</h3>
430
+ <p class="text-sm text-gray-600 mt-2">300kW solar + water recycling system</p>
431
+ </div>
432
+ </div>
433
+
434
+ <!-- Project 2 -->
435
+ <div class="carousel-item">
436
+ <img src="https://images.unsplash.com/photo-1520250497590-451cfd324c43?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Lombok Island Resort" class="w-full h-48 object-cover">
437
+ <div class="p-4 bg-white">
438
+ <div class="text-sm text-primary">Lombok, Indonesia</div>
439
+ <h3 class="font-bold mt-1">Senggigi Eco Lodge</h3>
440
+ <p class="text-sm text-gray-600 mt-2">Off-grid power & water system</p>
441
+ </div>
442
+ </div>
443
+
444
+ <!-- Project 3 -->
445
+ <div class="carousel-item">
446
+ <img src="https://images.unsplash.com/photo-1599619573841-2a0af7a0d4a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Phuket Luxury Resort" class="w-full h-48 object-cover">
447
+ <div class="p-4 bg-white">
448
+ <div class="text-sm text-primary">Phuket, Thailand</div>
449
+ <h3 class="font-bold mt-1">Phuket Ocean Resort</h3>
450
+ <p class="text-sm text-gray-600 mt-2">Solar + seawater desalination</p>
451
+ </div>
452
+ </div>
453
+
454
+ <!-- Project 4 -->
455
+ <div class="carousel-item">
456
+ <img src="https://images.unsplash.com/photo-1539367628448-4bc5c9d171c8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Raja Ampat Retreat" class="w-full h-48 object-cover">
457
+ <div class="p-4 bg-white">
458
+ <div class="text-sm text-primary">Raja Ampat, Indonesia</div>
459
+ <h3 class="font-bold mt-1">Papuana Island Retreat</h3>
460
+ <p class="text-sm text-gray-600 mt-2">Off-grid power & waste management</p>
461
+ </div>
462
+ </div>
463
+
464
+ <!-- Project 5 -->
465
+ <div class="carousel-item">
466
+ <img src="https://images.unsplash.com/photo-1605716175375-2d203c55f104?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Battery Room" class="w-full h-48 object-cover">
467
+ <div class="p-4 bg-white">
468
+ <div class="text-sm text-primary">Komodo Island</div>
469
+ <h3 class="font-bold mt-1">Komodo Eco Resort</h3>
470
+ <p class="text-sm text-gray-600 mt-2">500kWh battery storage system</p>
471
+ </div>
472
+ </div>
473
+
474
+ <!-- Project 6 -->
475
+ <div class="carousel-item">
476
+ <img src="https://images.unsplash.com/photo-1557800637-9097f08c9bd6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Solar Installation" class="w-full h-48 object-cover">
477
+ <div class="p-4 bg-white">
478
+ <div class="text-sm text-primary">Java, Indonesia</div>
479
+ <h3 class="font-bold mt-1">Green Mountain Lodge</h3>
480
+ <p class="text-sm text-gray-600 mt-2">Integrated solar power solution</p>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Add 4 more placeholder projects -->
485
+ <!-- Project 7 -->
486
+ <div class="carousel-item">
487
+ <img src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Malaysia Eco Resort" class="w-full h-48 object-cover">
488
+ <div class="p-4 bg-white">
489
+ <div class="text-sm text-primary">Borneo, Malaysia</div>
490
+ <h3 class="font-bold mt-1">Rainforest Eco Lodge</h3>
491
+ <p class="text-sm text-gray-600 mt-2">Water & wastewater systems</p>
492
+ </div>
493
+ </div>
494
+
495
+ <!-- Project 8 -->
496
+ <div class="carousel-item">
497
+ <img src="https://images.unsplash.com/photo-1508948956644-0017e845d797?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Philippines Resort" class="w-full h-48 object-cover">
498
+ <div class="p-4 bg-white">
499
+ <div class="text-sm text-primary">Palawan, Philippines</div>
500
+ <h3 class="font-bold mt-1">El Nido Resort Complex</h3>
501
+ <p class="text-sm text-gray-600 mt-2">Hybrid renewable energy system</p>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- Project 9 -->
506
+ <div class="carousel-item">
507
+ <img src="https://images.unsplash.com/photo-1591262184857-ffc4367d7eed?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Vietnam Eco Resort" class="w-full h-48 object-cover">
508
+ <div class="p-4 bg-white">
509
+ <div class="text-sm text-primary">Da Nang, Vietnam</div>
510
+ <h3 class="font-bold mt-1">Mountain View Retreat</h3>
511
+ <p class="text-sm text-gray-600 mt-2">Complete off-grid solution</p>
512
+ </div>
513
+ </div>
514
+
515
+ <!-- Project 10 -->
516
+ <div class="carousel-item">
517
+ <img src="https://images.unsplash.com/photo-1596199050106-5c0c8ebcdb60?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Water Treatment" class="w-full h-48 object-cover">
518
+ <div class="p-4 bg-white">
519
+ <div class="text-sm text-primary">Sulawesi, Indonesia</div>
520
+ <h3 class="font-bold mt-1">Tana Toraja Eco Lodge</h3>
521
+ <p class="text-sm text-gray-600 mt-2">Water filtration & treatment plant</p>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </section>
528
+
529
+ <!-- Team Section -->
530
+ <section id="team" class="py-20 bg-white">
531
+ <div class="container mx-auto px-4">
532
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 section-title">Our Team</h2>
533
+
534
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 max-w-5xl mx-auto">
535
+ <!-- Team Member 1 -->
536
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm team-card">
537
+ <div class="h-56 overflow-hidden">
538
+ <img src="https://images.unsplash.com/photo-1556157382-54d83bb83a36?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="David Chen" class="w-full h-full object-cover transition-transform duration-500">
539
+ </div>
540
+ <div class="p-6">
541
+ <h3 class="font-bold text-xl">David Chen</h3>
542
+ <div class="text-primary text-sm mb-3">CEO & Founder</div>
543
+ <p class="text-gray-600 text-sm">
544
+ 20+ years in sustainable engineering and project management across APAC.
545
+ </p>
546
+ </div>
547
+ </div>
548
+
549
+ <!-- Team Member 2 -->
550
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm team-card">
551
+ <div class="h-56 overflow-hidden">
552
+ <img src="https://images.unsplash.com/photo-1567532939604-b6b5b0e1601d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Anita Sari" class="w-full h-full object-cover transition-transform duration-500">
553
+ </div>
554
+ <div class="p-6">
555
+ <h3 class="font-bold text-xl">Anita Sari</h3>
556
+ <div class="text-primary text-sm mb-3">Director of Engineering</div>
557
+ <p class="text-gray-600 text-sm">
558
+ Renewable energy systems specialist with extensive Indonesian projects experience.
559
+ </p>
560
+ </div>
561
+ </div>
562
+
563
+ <!-- Team Member 3 -->
564
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm team-card">
565
+ <div class="h-56 overflow-hidden">
566
+ <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5dc?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Thomas Lee" class="w-full h-full object-cover transition-transform duration-500">
567
+ </div>
568
+ <div class="p-6">
569
+ <h3 class="font-bold text-xl">Thomas Lee</h3>
570
+ <div class="text-primary text-sm mb-3">Water Systems Lead</div>
571
+ <p class="text-gray-600 text-sm">
572
+ Water treatment expert with 15 years of developing remote area water solutions.
573
+ </p>
574
+ </div>
575
+ </div>
576
+
577
+ <!-- Team Member 4 -->
578
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm team-card">
579
+ <div class="h-56 overflow-hidden">
580
+ <img src="https://images.unsplash.com/photo-1552519507-88aa2dfa9fdb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Raj Patel" class="w-full h-full object-cover transition-transform duration-500">
581
+ </div>
582
+ <div class="p-6">
583
+ <h3 class="font-bold text-xl">Raj Patel</h3>
584
+ <div class="text-primary text-sm mb-3">Construction & Logistics</div>
585
+ <p class="text-gray-600 text-sm">
586
+ Specializes in complex installations in challenging locations throughout APAC.
587
+ </p>
588
+ </div>
589
+ </div>
590
+
591
+ <!-- Team Member 5 -->
592
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm team-card">
593
+ <div class="h-56 overflow-hidden">
594
+ <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Sarah Tan" class="w-full h-full object-cover transition-transform duration-500">
595
+ </div>
596
+ <div class="p-6">
597
+ <h3 class="font-bold text-xl">Sarah Tan</h3>
598
+ <div class="text-primary text-sm mb-3">Operations Director</div>
599
+ <p class="text-gray-600 text-sm">
600
+ Ensures seamless operation and maintenance of installed systems for all clients.
601
+ </p>
602
+ </div>
603
+ </div>
604
+
605
+ <!-- Team Member 6 -->
606
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm team-card">
607
+ <div class="h-56 overflow-hidden">
608
+ <img src="https://images.unsplash.com/photo-1484863137850-76126637fea4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Michael Wong" class="w-full h-full object-cover transition-transform duration-500">
609
+ </div>
610
+ <div class="p-6">
611
+ <h3 class="font-bold text-xl">Michael Wong</h3>
612
+ <div class="text-primary text-sm mb-3">Sustainability Advisor</div>
613
+ <p class="text-gray-600 text-sm">
614
+ Guides clients on achieving net-zero goals and environmental certifications.
615
+ </p>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </section>
621
+
622
+ <!-- Contact Section -->
623
+ <section id="contact" class="py-20 bg-primary bg-opacity-5">
624
+ <div class="container mx-auto px-4">
625
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 section-title">Let's Talk</h2>
626
+
627
+ <div class="flex flex-col lg:flex-row gap-12 max-w-6xl mx-auto">
628
+ <div class="lg:w-1/2">
629
+ <h3 class="text-2xl font-bold mb-6">Ready to start your sustainable project?</h3>
630
+ <p class="text-gray-600 mb-8">
631
+ Reach out to our team to discuss how we can create resilient, eco-friendly infrastructure for your next development.
632
+ We'll provide a customized approach to meet your specific needs and location challenges.
633
+ </p>
634
+
635
+ <div class="space-y-6">
636
+ <div class="flex items-start">
637
+ <div class="bg-primary w-12 h-12 rounded-full flex items-center justify-center text-white flex-shrink-0">
638
+ <i class="fas fa-map-marker-alt"></i>
639
+ </div>
640
+ <div class="ml-4">
641
+ <div class="font-bold">Our Offices</div>
642
+ <p class="text-gray-600">
643
+ 123 Sustainability Road, Singapore 09876<br>
644
+ 45 Eco Business Park, Jakarta 12980, Indonesia
645
+ </p>
646
+ </div>
647
+ </div>
648
+
649
+ <div class="flex items-start">
650
+ <div class="bg-primary w-12 h-12 rounded-full flex items-center justify-center text-white flex-shrink-0">
651
+ <i class="fas fa-envelope"></i>
652
+ </div>
653
+ <div class="ml-4">
654
+ <div class="font-bold">Email Us</div>
655
+ <p class="text-gray-600">projects@ecosystemsinfra.com</p>
656
+ </div>
657
+ </div>
658
+
659
+ <div class="flex items-start">
660
+ <div class="bg-primary w-12 h-12 rounded-full flex items-center justify-center text-white flex-shrink-0">
661
+ <i class="fas fa-phone"></i>
662
+ </div>
663
+ <div class="ml-4">
664
+ <div class="font-bold">Call Us</div>
665
+ <p class="text-gray-600">+65 6123 4567 (Singapore)<br>+62 21 1234 5678 (Indonesia)</p>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </div>
670
+
671
+ <div class="lg:w-1/2 bg-white rounded-xl p-8 shadow-lg contact-form">
672
+ <form>
673
+ <div class="mb-6">
674
+ <label class="block text-gray-700 mb-2">Your Name</label>
675
+ <input type="text" placeholder="Full Name" class="px-4 py-3">
676
+ </div>
677
+
678
+ <div class="mb-6">
679
+ <label class="block text-gray-700 mb-2">Email Address</label>
680
+ <input type="email" placeholder="Email Address" class="px-4 py-3">
681
+ </div>
682
+
683
+ <div class="mb-6">
684
+ <label class="block text-gray-700 mb-2">Project Type</label>
685
+ <select class="px-4 py-3 w-full">
686
+ <option>Select project category</option>
687
+ <option>Eco-Resort Development</option>
688
+ <option>Renewable Energy System</option>
689
+ <option>Water & Wastewater Solutions</option>
690
+ <option>MEP Design</option>
691
+ <option>Financing Inquiry</option>
692
+ <option>Operations & Maintenance</option>
693
+ </select>
694
+ </div>
695
+
696
+ <div class="mb-6">
697
+ <label class="block text-gray-700 mb-2">Project Location</label>
698
+ <input type="text" placeholder="Location/Country" class="px-4 py-3">
699
+ </div>
700
+
701
+ <div class="mb-6">
702
+ <label class="block text-gray-700 mb-2">Project Details</label>
703
+ <textarea placeholder="Tell us about your project..." rows="4" class="px-4 py-3"></textarea>
704
+ </div>
705
+
706
+ <button type="submit" class="btn-primary w-full">Send Inquiry</button>
707
+ </form>
708
+ </div>
709
+ </div>
710
+ </div>
711
+ </section>
712
+
713
+ <!-- Footer -->
714
+ <footer class="bg-primary-dark text-gray-200 py-12">
715
+ <div class="container mx-auto px-4">
716
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
717
+ <div>
718
+ <div class="flex items-center mb-6">
719
+ <div class="bg-white w-8 h-8 rounded-full mr-3"></div>
720
+ <div class="text-xl font-bold text-white">EcoSystems<span class="font-normal text-gray-300">Infra</span></div>
721
+ </div>
722
+ <p class="mb-4">
723
+ Sustainable infrastructure solutions for eco-resorts and remote developments across APAC.
724
+ </p>
725
+ <div class="flex space-x-4">
726
+ <a href="#" class="text-white hover:text-sand"><i class="fab fa-linkedin-in"></i></a>
727
+ <a href="#" class="text-white hover:text-sand"><i class="fab fa-twitter"></i></a>
728
+ <a href="#" class="text-white hover:text-sand"><i class="fab fa-instagram"></i></a>
729
+ </div>
730
+ </div>
731
+
732
+ <div>
733
+ <h3 class="text-white font-bold mb-4 text-lg">Services</h3>
734
+ <ul class="space-y-2 footer-links">
735
+ <li><a href="#" class="block hover:text-sand">Feasibility & Development</a></li>
736
+ <li><a href="#" class="block hover:text-sand">Sustainable MEP Design</a></li>
737
+ <li><a href="#" class="block hover:text-sand">Power & Renewable Energy</a></li>
738
+ <li><a href="#" class="block hover:text-sand">Water & Wastewater Solutions</a></li>
739
+ <li><a href="#" class="block hover:text-sand">Construction & Logistics</a></li>
740
+ <li><a href="#" class="block hover:text-sand">Project Financing</a></li>
741
+ </ul>
742
+ </div>
743
+
744
+ <div>
745
+ <h3 class="text-white font-bold mb-4 text-lg">Quick Links</h3>
746
+ <ul class="space-y-2 footer-links">
747
+ <li><a href="#about" class="block hover:text-sand">About Us</a></li>
748
+ <li><a href="#projects" class="block hover:text-sand">Projects</a></li>
749
+ <li><a href="#team" class="block hover:text-sand">Team</a></li>
750
+ <li><a href="#" class="block hover:text-sand">Case Studies</a></li>
751
+ <li><a href="#" class="block hover:text-sand">Careers</a></li>
752
+ <li><a href="#contact" class="block hover:text-sand">Contact</a></li>
753
+ </ul>
754
+ </div>
755
+
756
+ <div>
757
+ <h3 class="text-white font-bold mb-4 text-lg">Newsletter</h3>
758
+ <p class="mb-4">
759
+ Stay updated on sustainable infrastructure innovations.
760
+ </p>
761
+ <div class="flex">
762
+ <input type="email" placeholder="Your email address" class="px-4 py-2 rounded-l-md w-full text-gray-700">
763
+ <button class="bg-primary px-4 rounded-r-md text-white">
764
+ <i class="fas fa-paper-plane"></i>
765
+ </button>
766
+ </div>
767
+ </div>
768
+ </div>
769
+
770
+ <div class="border-t border-primary border-opacity-20 mt-12 pt-6 text-center text-gray-400 text-sm">
771
+ <p>&copy; 2023 EcoSystems Infrastructure. All rights reserved.</p>
772
+ </div>
773
+ </div>
774
+ </footer>
775
+
776
+ <!-- JavaScript -->
777
+ <script>
778
+ // Mobile menu toggle
779
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
780
+ const mobileMenu = document.getElementById('mobile-menu');
781
+
782
+ mobileMenuButton.addEventListener('click', () => {
783
+ mobileMenu.classList.toggle('hidden');
784
+ });
785
+
786
+ // Close mobile menu when clicking on links
787
+ mobileMenu.querySelectorAll('a').forEach(link => {
788
+ link.addEventListener('click', () => {
789
+ mobileMenu.classList.add('hidden');
790
+ });
791
+ });
792
+
793
+ // Form submission
794
+ const contactForm = document.querySelector('.contact-form form');
795
+
796
+ if(contactForm) {
797
+ contactForm.addEventListener('submit', function(e) {
798
+ e.preventDefault();
799
+
800
+ // In a real implementation, you would handle form submission here
801
+ alert('Thank you for your inquiry! We will contact you shortly.');
802
+ contactForm.reset();
803
+ });
804
+ }
805
+ </script>
806
+ <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>
807
+ </html>