Hugging Face's logo

Spaces:
katonfjrr
/
mobangun
Running

App Files
xet
Community
katonfjrr commited on
Commit
53ccb16
·
verified ·
1 Parent(s): c965e74

jelek!!! https://arsitekhijau.com/wp-content/uploads/V2-3-1-8-min-2.jpg image heronya pakai ini aja deh, - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +273 -80
index.html CHANGED
@@ -3,25 +3,74 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>MOBANGUN! - Arsitektur & Desain Interior</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- .hero-section {
11
- background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
12
- background-size: cover;
13
- background-position: center;
14
- height: 90vh;
 
15
  }
16
 
17
  .portfolio-item:hover .portfolio-overlay {
18
  opacity: 1;
 
19
  }
20
 
21
  .portfolio-overlay {
22
- transition: .5s ease;
23
  opacity: 0;
24
- background-color: rgba(0, 0, 0, 0.7);
 
 
 
 
 
 
 
 
 
25
  }
26
 
27
  .timeline-step {
@@ -40,36 +89,59 @@
40
 
41
  @media (max-width: 768px) {
42
  .hero-section {
43
- height: 70vh;
 
 
44
  }
45
 
46
  .timeline-step:not(:last-child):after {
47
  display: none;
48
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  }
50
  </style>
51
  </head>
52
  <body class="font-sans">
53
  <!-- Header & Navigation -->
54
- <header class="bg-black shadow-md sticky top-0 z-50">
55
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
56
  <div class="flex items-center">
57
- <h1 class="text-2xl font-bold text-yellow-400">MOBANGUN!</h1>
 
58
  </div>
59
 
60
  <nav class="hidden md:flex space-x-8">
61
- <a href="#" class="text-white hover:text-yellow-400 font-medium">Beranda</a>
62
- <a href="#" class="text-white hover:text-yellow-400 font-medium">Tentang Kami</a>
63
- <a href="#" class="text-white hover:text-yellow-400 font-medium">Layanan</a>
64
- <a href="#" class="text-white hover:text-yellow-400 font-medium">Portofolio</a>
65
- <a href="#" class="text-white hover:text-yellow-400 font-medium">Artikel</a>
66
- <a href="#" class="text-white hover:text-yellow-400 font-medium">FAQ</a>
67
- <a href="#" class="text-white hover:text-yellow-400 font-medium">Karir</a>
68
  </nav>
69
 
70
- <button class="hidden md:block bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-2 rounded-md font-medium transition duration-300">
71
  Kontak Kami
72
- </button>
73
 
74
  <button class="md:hidden text-gray-800">
75
  <i class="fas fa-bars text-2xl"></i>
@@ -78,17 +150,36 @@
78
  </header>
79
 
80
  <!-- Hero Section -->
81
- <section class="hero-section flex items-center justify-center text-center text-white">
82
  <div class="container mx-auto px-4">
83
- <h1 class="text-4xl md:text-6xl font-bold mb-6">Bangun Rumah Impian Tanpa Repot!</h1>
84
- <p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto">Jasa Arsitek PROFESIONAL MOBANGUN! siap menjadi konsultan terbaik untuk membantu Anda merencanakan tempat tinggal idaman sampai ke tahap pembangunan.</p>
85
- <div class="flex flex-col md:flex-row justify-center gap-4">
86
- <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-3 rounded-md font-bold text-lg transition duration-300">
87
- <i class="fas fa-calendar-check mr-2"></i> Jadwalkan Konsultasi Gratis
88
- </button>
89
- <a href="#" class="text-white hover:text-blue-200 font-medium flex items-center justify-center">
90
- Lihat Karya Kami <i class="fas fa-arrow-right ml-2"></i>
91
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </div>
93
  </div>
94
  </section>
@@ -109,34 +200,37 @@
109
  <!-- Services Section -->
110
  <section class="bg-gray-50 py-16">
111
  <div class="container mx-auto px-4">
112
- <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Solusi Lengkap untuk Kebutuhan Properti Anda</h2>
113
 
114
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
115
  <!-- Service 1 -->
116
  <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
117
  <div class="text-yellow-500 mb-4">
118
- <i class="fas fa-drafting-compass text-4xl"></i>
119
  </div>
120
- <h3 class="text-xl font-bold text-gray-800 mb-3">DESAIN ARSITEKTUR</h3>
121
- <p class="text-gray-600">Perancangan bangunan baru dari nol, termasuk rumah tinggal, vila, hingga bangunan komersial kecil.</p>
 
122
  </div>
123
 
124
  <!-- Service 2 -->
125
  <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
126
  <div class="text-blue-600 mb-4">
127
- <i class="fas fa-couch text-4xl"></i>
128
  </div>
129
- <h3 class="text-xl font-bold text-gray-800 mb-3">DESAIN INTERIOR</h3>
130
- <p class="text-gray-600">Mengharmonisasikan interior dengan arsitektur, pemilihan material, furnitur, dan pencahayaan.</p>
 
131
  </div>
132
 
133
  <!-- Service 3 -->
134
  <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
135
  <div class="text-blue-600 mb-4">
136
- <i class="fas fa-hard-hat text-4xl"></i>
137
  </div>
138
- <h3 class="text-xl font-bold text-gray-800 mb-3">MANAJEMEN KONSTRUKSI</h3>
139
- <p class="text-gray-600">Pengawasan penuh di lapangan untuk memastikan konstruksi berjalan sesuai desain, waktu, dan anggaran.</p>
 
140
  </div>
141
 
142
  <!-- Service 4 -->
@@ -144,8 +238,29 @@
144
  <div class="text-blue-600 mb-4">
145
  <i class="fas fa-tools text-4xl"></i>
146
  </div>
147
- <h3 class="text-xl font-bold text-gray-800 mb-3">JASA RENOVASI</h3>
148
- <p class="text-gray-600">Memperbarui dan mengubah fungsi ruang yang sudah ada agar lebih efisien dan sesuai kebutuhan baru.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
  </div>
150
  </div>
151
  </div>
@@ -156,42 +271,70 @@
156
  <div class="container mx-auto px-4">
157
  <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Karya yang Bercerita</h2>
158
 
159
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
160
- <!-- Portfolio 1 -->
161
- <div class="portfolio-item relative rounded-lg overflow-hidden h-96">
162
- <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="The Serenity House" class="w-full h-full object-cover">
 
 
 
 
 
 
 
 
 
 
 
 
163
  <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
164
- <h3 class="text-2xl font-bold mb-2">The Serenity House, Sentul</h3>
165
  <p class="text-blue-300 mb-4">Kategori: Rumah Tinggal</p>
166
- <p class="text-center">Sebuah hunian yang mengedepankan ketenangan dan koneksi dengan alam sekitar.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  </div>
168
  </div>
169
 
170
- <!-- Portfolio 2 -->
171
- <div class="portfolio-item relative rounded-lg overflow-hidden h-96">
172
- <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Kofinara Coffee Roastery" class="w-full h-full object-cover">
173
  <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
174
- <h3 class="text-2xl font-bold mb-2">Kofinara Coffee Roastery, Bandung</h3>
175
- <p class="text-blue-300 mb-4">Kategori: Komersial & Interior</p>
176
- <p class="text-center">Desain yang menciptakan suasana hangat dan komunal bagi para penikmat kopi.</p>
177
  </div>
178
  </div>
179
 
180
- <!-- Portfolio 3 -->
181
- <div class="portfolio-item relative rounded-lg overflow-hidden h-96">
182
- <img src="https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Villa Puncak Biru" class="w-full h-full object-cover">
183
  <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
184
- <h3 class="text-2xl font-bold mb-2">Villa Puncak Biru, Uluwatu</h3>
185
- <p class="text-blue-300 mb-4">Kategori: Villa & Resort</p>
186
- <p class="text-center">Memaksimalkan pemandangan dramatis dengan desain yang terbuka dan mewah.</p>
187
  </div>
188
  </div>
189
  </div>
190
 
191
  <div class="text-center mt-10">
192
- <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-bold transition duration-300">
193
  Lihat Semua Portofolio
194
- </button>
195
  </div>
196
  </div>
197
  </section>
@@ -265,8 +408,56 @@
265
  </div>
266
  </section>
267
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
268
  <!-- Workflow Section -->
269
- <section class="py-16 bg-gray-100">
270
  <div class="container mx-auto px-4">
271
  <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Dari Ide Menjadi Kenyataan dalam 4 Langkah Mudah</h2>
272
 
@@ -315,31 +506,33 @@
315
  <div class="container mx-auto px-4 text-center">
316
  <h2 class="text-3xl md:text-4xl font-bold mb-6">Konsultasi Gratis dengan MOBANGUN!</h2>
317
  <p class="text-xl mb-8 max-w-3xl mx-auto">MOBANGUN! menghadirkan desain orisinil yang disesuaikan dengan kebutuhan dan karakter penghuninya. Tim profesional kami siap membantu mewujudkan rumah impian Anda.</p>
318
- <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-4 rounded-md font-bold text-lg transition duration-300">
319
  Mulai Proyek Anda Sekarang!
320
- </button>
321
  </div>
322
  </section>
323
 
324
  <!-- Footer -->
325
- <footer class="bg-gray-900 text-white py-12">
326
  <div class="container mx-auto px-4">
327
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
328
  <!-- Column 1 -->
329
  <div>
330
- <h3 class="text-2xl font-bold text-yellow-400 mb-4">MOBANGUN!</h3>
331
- <p class="text-gray-400">PT MOBANGUN Indonesia mendedikasikan diri untuk menggabungkan estetika dan tanggung jawab lingkungan dalam setiap proyek.</p>
 
 
332
  </div>
333
 
334
  <!-- Column 2 -->
335
  <div>
336
  <h4 class="text-lg font-semibold mb-4">Navigasi</h4>
337
  <ul class="space-y-2">
338
- <li><a href="#" class="text-gray-400 hover:text-white transition">Tentang Kami</a></li>
339
- <li><a href="#" class="text-gray-400 hover:text-white transition">Layanan</a></li>
340
- <li><a href="#" class="text-gray-400 hover:text-white transition">Portofolio</a></li>
341
- <li><a href="#" class="text-gray-400 hover:text-white transition">Artikel</a></li>
342
- <li><a href="#" class="text-gray-400 hover:text-white transition">Kontak Kami</a></li>
343
  </ul>
344
  </div>
345
 
@@ -348,7 +541,7 @@
348
  <h4 class="text-lg font-semibold mb-4">Kontak</h4>
349
  <address class="text-gray-400 not-italic">
350
  <p class="mb-2">Alamat Studio:</p>
351
- <p class="mb-4">Jl. Pangeran Antasari No. 7A<br>Kemang, Jakarta Selatan 12150</p>
352
  <p class="mb-1">Email: <a href="mailto:[email protected]" class="hover:text-white transition">[email protected]</a></p>
353
  <p>WhatsApp: <a href="https://wa.me/6281234567890" class="hover:text-white transition">+62 812-3456-7890</a></p>
354
  </address>
@@ -358,16 +551,16 @@
358
  <div>
359
  <h4 class="text-lg font-semibold mb-4">Media Sosial</h4>
360
  <div class="flex space-x-4">
361
- <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-instagram"></i></a>
362
- <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-linkedin"></i></a>
363
- <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-pinterest"></i></a>
364
- <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-youtube"></i></a>
365
  </div>
366
  </div>
367
  </div>
368
 
369
  <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
370
- <p>© 2025 MOBANGUN! Arsitek. Seluruh Hak Cipta Dilindungi.</p>
371
  </div>
372
  </div>
373
  </footer>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MOBANGUN! - Jasa Desain & Arsitektur Rumah Terbaik di Jabodetabek</title>
7
+ <meta name="description" content="Konsultan Arsitektur & Kontraktor Bangunan Profesional. Desain Rumah Impian Anda dengan MOBANGUN! Pelayanan dari Desain Hingga Bangun Rumah Terima Beres.">
8
+ <meta name="keywords" content="arsitek,jasa desain rumah,kontraktor bangunan,desain interior,jasa renovasi rumah,arsitek jakarta,rumah minimalis">
9
+
10
+ <!-- Open Graph / Facebook -->
11
+ <meta property="og:type" content="website">
12
+ <meta property="og:url" content="https://mobangun.id/">
13
+ <meta property="og:title" content="MOBANGUN! - Jasa Desain & Arsitektur Rumah Terbaik">
14
+ <meta property="og:description" content="Konsultan Arsitektur & Kontraktor Bangunan Profesional. Desain Rumah Impian Anda dengan MOBANGUN!">
15
+ <meta property="og:image" content="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-9.avif">
16
+ <meta property="og:image:width" content="1200">
17
+ <meta property="og:image:height" content="630">
18
+
19
+ <!-- Twitter -->
20
+ <meta property="twitter:card" content="summary_large_image">
21
+ <meta property="twitter:url" content="https://mobangun.id/">
22
+ <meta property="twitter:title" content="MOBANGUN! - Jasa Desain & Arsitektur Rumah Terbaik">
23
+ <meta property="twitter:description" content="Konsultan Arsitektur & Kontraktor Bangunan Profesional. Desain Rumah Impian Anda dengan MOBANGUN!">
24
+ <meta property="twitter:image" content="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-9.avif">
25
+
26
+ <link rel="preconnect" href="https://fonts.googleapis.com">
27
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
28
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
29
  <script src="https://cdn.tailwindcss.com"></script>
30
+ <script>
31
+ tailwind.config = {
32
+ theme: {
33
+ extend: {
34
+ colors: {
35
+ primary: '#FFC107',
36
+ secondary: '#333333',
37
+ footer: '#1A1A1A',
38
+ },
39
+ fontFamily: {
40
+ sans: ['Poppins', 'sans-serif'],
41
+ },
42
+ }
43
+ }
44
+ }
45
+ </script>
46
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
47
  <style>
48
+ .portfolio-item {
49
+ transition: transform 0.3s ease;
50
+ }
51
+
52
+ .portfolio-item:hover {
53
+ transform: translateY(-5px);
54
  }
55
 
56
  .portfolio-item:hover .portfolio-overlay {
57
  opacity: 1;
58
+ transform: scale(1.03);
59
  }
60
 
61
  .portfolio-overlay {
62
+ transition: all 0.5s ease;
63
  opacity: 0;
64
+ background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
65
+ transform: scale(1);
66
+ }
67
+
68
+ .portfolio-item video {
69
+ transition: transform 0.5s ease;
70
+ }
71
+
72
+ .portfolio-item:hover video {
73
+ transform: scale(1.05);
74
  }
75
 
76
  .timeline-step {
 
89
 
90
  @media (max-width: 768px) {
91
  .hero-section {
92
+ height: auto;
93
+ padding-top: 2rem;
94
+ padding-bottom: 2rem;
95
  }
96
 
97
  .timeline-step:not(:last-child):after {
98
  display: none;
99
  }
100
+
101
+ /* Hero image mobile styling */
102
+ .hero-image-mobile {
103
+ margin-top: 2rem;
104
+ border-radius: 0.5rem;
105
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
106
+ }
107
+ }
108
+
109
+ @media (max-width: 640px) {
110
+ /* Adjust text sizes for very small screens */
111
+ .hero-title {
112
+ font-size: 2.25rem;
113
+ line-height: 2.5rem;
114
+ }
115
+ .hero-description {
116
+ font-size: 1rem;
117
+ }
118
+ .hero-cta {
119
+ font-size: 0.875rem;
120
+ padding: 0.75rem 1.5rem;
121
+ }
122
  }
123
  </style>
124
  </head>
125
  <body class="font-sans">
126
  <!-- Header & Navigation -->
127
+ <header class="bg-white shadow-sm sticky top-0 z-50">
128
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
129
  <div class="flex items-center">
130
+ <img src="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/kdlj9r6c-1.avif" alt="Mobangun.id" class="h-10">
131
+ <h1 class="text-2xl font-bold text-black">Mobangun.id</h1>
132
  </div>
133
 
134
  <nav class="hidden md:flex space-x-8">
135
+ <a href="https://wa.link/pglcks" class="text-secondary hover:text-primary font-medium">Beranda</a>
136
+ <a href="https://wa.link/pglcks" class="text-secondary hover:text-primary font-medium">Tentang Kami</a>
137
+ <a href="https://wa.link/pglcks" class="text-secondary hover:text-primary font-medium">Layanan</a>
138
+ <a href="https://wa.link/pglcks" class="text-secondary hover:text-primary font-medium">Portofolio</a>
139
+ <a href="https://wa.link/pglcks" class="text-secondary hover:text-primary font-medium">Artikel</a>
 
 
140
  </nav>
141
 
142
+ <a href="https://wa.link/pglcks" class="hidden md:block bg-primary hover:bg-yellow-600 text-white px-6 py-2 rounded-md font-medium transition duration-300">
143
  Kontak Kami
144
+ </a>
145
 
146
  <button class="md:hidden text-gray-800">
147
  <i class="fas fa-bars text-2xl"></i>
 
150
  </header>
151
 
152
  <!-- Hero Section -->
153
+ <section class="bg-white">
154
  <div class="container mx-auto px-4">
155
+ <div class="flex flex-col lg:flex-row items-center">
156
+ <!-- Text Content -->
157
+ <div class="w-full lg:w-1/2 py-12 lg:py-24 order-1 lg:order-1">
158
+ <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold uppercase tracking-tight mb-6 text-secondary leading-tight">
159
+ JASA DESAIN & BANGUN<br>RUMAH TERIMA BERES!
160
+ </h1>
161
+ <p class="text-base sm:text-lg text-gray-600 mb-8 max-w-xl leading-relaxed">
162
+ MOBANGUN! memberikan solusi lengkap dari desain hingga pembangunan rumah impian Anda. Tim profesional kami siap membantu mewujudkan hunian ideal dengan kualitas terbaik di seluruh wilayah Jabodetabek.
163
+ </p>
164
+ <a href="https://wa.link/pglcks" class="inline-block bg-secondary hover:bg-gray-800 text-white px-6 py-3 sm:px-8 sm:py-4 rounded-md font-bold text-base sm:text-lg transition duration-300 uppercase tracking-wide">
165
+ KONSULTASIKAN SEKARANG!
166
+ </a>
167
+ </div>
168
+
169
+ <!-- Image Content - Visible on mobile too -->
170
+ <div class="w-full lg:w-1/2 relative order-2 lg:order-2">
171
+ <div class="lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-end">
172
+ <img src="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-1.avif"
173
+ alt="Modern Architecture"
174
+ class="w-full h-auto lg:h-[80vh] object-cover lg:object-contain rounded-lg shadow-lg lg:shadow-none lg:rounded-none"
175
+ style="mask-image: linear-gradient(to top, rgba(0,0,0,1) 90%, rgba(0,0,0,0));">
176
+ </div>
177
+ <!-- Floating CTA - Mobile version at bottom -->
178
+ <a href="https://wa.link/pglcks" class="lg:absolute lg:bottom-8 lg:right-8 bg-primary text-black px-6 py-3 rounded-full shadow-xl flex items-center justify-center gap-2 animate-bounce mt-6 lg:mt-0 w-full lg:w-auto">
179
+ <i class="fas fa-comment-dots text-xl"></i>
180
+ <span class="font-bold">Chat via WhatsApp</span>
181
+ </a>
182
+ </div>
183
  </div>
184
  </div>
185
  </section>
 
200
  <!-- Services Section -->
201
  <section class="bg-gray-50 py-16">
202
  <div class="container mx-auto px-4">
203
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Layanan Yang Kami Tawarkan</h2>
204
 
205
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
206
  <!-- Service 1 -->
207
  <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
208
  <div class="text-yellow-500 mb-4">
209
+ <i class="fas fa-hard-hat text-4xl"></i>
210
  </div>
211
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Jasa Kontraktor Bangunan</h3>
212
+ <p class="text-gray-600 mb-4">Pelaksanaan konstruksi bangunan secara menyeluruh dengan standar kualitas terbaik.</p>
213
+ <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
214
  </div>
215
 
216
  <!-- Service 2 -->
217
  <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
218
  <div class="text-blue-600 mb-4">
219
+ <i class="fas fa-drafting-compass text-4xl"></i>
220
  </div>
221
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Desain Arsitektur Bangunan</h3>
222
+ <p class="text-gray-600 mb-4">Perancangan bangunan baru dari nol dengan konsep fungsional dan estetis.</p>
223
+ <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
224
  </div>
225
 
226
  <!-- Service 3 -->
227
  <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
228
  <div class="text-blue-600 mb-4">
229
+ <i class="fas fa-couch text-4xl"></i>
230
  </div>
231
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Jasa Desain Interior</h3>
232
+ <p class="text-gray-600 mb-4">Mengharmonisasikan interior dengan arsitektur untuk menciptakan ruang yang nyaman.</p>
233
+ <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
234
  </div>
235
 
236
  <!-- Service 4 -->
 
238
  <div class="text-blue-600 mb-4">
239
  <i class="fas fa-tools text-4xl"></i>
240
  </div>
241
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Jasa Renovasi Bangunan</h3>
242
+ <p class="text-gray-600 mb-4">Transformasi bangunan lama menjadi lebih fungsional dan modern.</p>
243
+ <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
244
+ </div>
245
+
246
+ <!-- Service 5 -->
247
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
248
+ <div class="text-blue-600 mb-4">
249
+ <i class="fas fa-calculator text-4xl"></i>
250
+ </div>
251
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Analisa dan Perencanaan Struktur</h3>
252
+ <p class="text-gray-600 mb-4">Perhitungan struktur yang akurat untuk keamanan dan kekuatan bangunan.</p>
253
+ <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
254
+ </div>
255
+
256
+ <!-- Service 6 -->
257
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
258
+ <div class="text-blue-600 mb-4">
259
+ <i class="fas fa-bolt text-4xl"></i>
260
+ </div>
261
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Mekanikal dan Elektrikal</h3>
262
+ <p class="text-gray-600 mb-4">Perencanaan sistem kelistrikan dan mekanikal yang efisien untuk bangunan.</p>
263
+ <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
264
  </div>
265
  </div>
266
  </div>
 
271
  <div class="container mx-auto px-4">
272
  <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Karya yang Bercerita</h2>
273
 
274
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
275
+ <!-- Video Portfolio -->
276
+ <div class="portfolio-item relative rounded-lg overflow-hidden group">
277
+ <video autoplay loop muted playsinline class="w-full h-full object-cover">
278
+ <source src="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-1.mp4" type="video/mp4">
279
+ </video>
280
+ <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
281
+ <h3 class="text-2xl font-bold mb-2">Proyek Modern Minimalis</h3>
282
+ <p class="text-blue-300 mb-4">Kategori: Rumah Tinggal</p>
283
+ <p class="text-center">Desain minimalis dengan sentuhan modern yang elegan.</p>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Portfolio Items -->
288
+ <div class="portfolio-item relative rounded-lg overflow-hidden group">
289
+ <img src="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-2.avif" alt="Proyek 2" class="w-full h-full object-cover">
290
  <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
291
+ <h3 class="text-2xl font-bold mb-2">Rumah Taman Asri</h3>
292
  <p class="text-blue-300 mb-4">Kategori: Rumah Tinggal</p>
293
+ <p class="text-center">Konsep hunian yang menyatu dengan alam sekitar.</p>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="portfolio-item relative rounded-lg overflow-hidden group">
298
+ <img src="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-3.avif" alt="Proyek 3" class="w-full h-full object-cover">
299
+ <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
300
+ <h3 class="text-2xl font-bold mb-2">Apartemen Mewah</h3>
301
+ <p class="text-blue-300 mb-4">Kategori: Apartemen</p>
302
+ <p class="text-center">Desain interior apartemen premium dengan sentuhan mewah.</p>
303
+ </div>
304
+ </div>
305
+
306
+ <div class="portfolio-item relative rounded-lg overflow-hidden group">
307
+ <img src="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-4.avif" alt="Proyek 4" class="w-full h-full object-cover">
308
+ <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
309
+ <h3 class="text-2xl font-bold mb-2">Kantor Modern</h3>
310
+ <p class="text-blue-300 mb-4">Kategori: Komersial</p>
311
+ <p class="text-center">Ruang kerja yang fungsional dengan estetika modern.</p>
312
  </div>
313
  </div>
314
 
315
+ <div class="portfolio-item relative rounded-lg overflow-hidden group">
316
+ <img src="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-5.avif" alt="Proyek 5" class="w-full h-full object-cover">
 
317
  <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
318
+ <h3 class="text-2xl font-bold mb-2">Villa Eksklusif</h3>
319
+ <p class="text-blue-300 mb-4">Kategori: Villa</p>
320
+ <p class="text-center">Villa mewah dengan pemandangan alam memukau.</p>
321
  </div>
322
  </div>
323
 
324
+ <div class="portfolio-item relative rounded-lg overflow-hidden group">
325
+ <img src="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-6.avif" alt="Proyek 6" class="w-full h-full object-cover">
 
326
  <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
327
+ <h3 class="text-2xl font-bold mb-2">Kafe Minimalis</h3>
328
+ <p class="text-blue-300 mb-4">Kategori: Komersial</p>
329
+ <p class="text-center">Desain kafe dengan konsep minimalis yang nyaman.</p>
330
  </div>
331
  </div>
332
  </div>
333
 
334
  <div class="text-center mt-10">
335
+ <a href="https://wa.link/pglcks" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-bold transition duration-300">
336
  Lihat Semua Portofolio
337
+ </a>
338
  </div>
339
  </div>
340
  </section>
 
408
  </div>
409
  </section>
410
 
411
+ <!-- Our Process Section -->
412
+ <section class="py-20 bg-white">
413
+ <div class="container mx-auto px-4">
414
+ <div class="max-w-4xl mx-auto text-center mb-16">
415
+ <h2 class="text-4xl font-bold text-secondary mb-4">Proses <span class="font-normal">Kreatif</span> Kami</h2>
416
+ <div class="w-24 h-1 bg-primary mx-auto"></div>
417
+ </div>
418
+
419
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
420
+ <div class="order-1 lg:order-1">
421
+ <img src="https://arsitekhijau.com/wp-content/uploads/FIX-1-1-min.jpg"
422
+ alt="Design Process" class="rounded-lg shadow-xl w-full h-auto">
423
+ </div>
424
+ <div class="order-2 lg:order-2">
425
+ <div class="space-y-8">
426
+ <div class="flex items-start">
427
+ <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center mr-4 flex-shrink-0">
428
+ <span class="text-xl font-bold">1</span>
429
+ </div>
430
+ <div>
431
+ <h3 class="text-2xl font-semibold text-secondary mb-2">Konsultasi Kebutuhan</h3>
432
+ <p class="text-gray-600">Diskusi mendalam untuk memahami visi, gaya hidup, dan anggaran Anda melalui pertemuan virtual atau langsung di lokasi.</p>
433
+ </div>
434
+ </div>
435
+ <div class="flex items-start">
436
+ <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center mr-4 flex-shrink-0">
437
+ <span class="text-xl font-bold">2</span>
438
+ </div>
439
+ <div>
440
+ <h3 class="text-2xl font-semibold text-secondary mb-2">Konsep & Sketsa</h3>
441
+ <p class="text-gray-600">Pembuatan sketsa awal dan mood board untuk memvisualisasikan ide sebelum dikembangkan menjadi desain detail.</p>
442
+ </div>
443
+ </div>
444
+ <div class="flex items-start">
445
+ <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center mr-4 flex-shrink-0">
446
+ <span class="text-xl font-bold">3</span>
447
+ </div>
448
+ <div>
449
+ <h3 class="text-2xl font-semibold text-secondary mb-2">3D Visualization</h3>
450
+ <p class="text-gray-600">Presentasi desain 3D lengkap dengan material dan pencahayaan untuk memberikan gambaran nyata hasil akhir.</p>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </section>
458
+
459
  <!-- Workflow Section -->
460
+ <section class="py-16 bg-primary">
461
  <div class="container mx-auto px-4">
462
  <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Dari Ide Menjadi Kenyataan dalam 4 Langkah Mudah</h2>
463
 
 
506
  <div class="container mx-auto px-4 text-center">
507
  <h2 class="text-3xl md:text-4xl font-bold mb-6">Konsultasi Gratis dengan MOBANGUN!</h2>
508
  <p class="text-xl mb-8 max-w-3xl mx-auto">MOBANGUN! menghadirkan desain orisinil yang disesuaikan dengan kebutuhan dan karakter penghuninya. Tim profesional kami siap membantu mewujudkan rumah impian Anda.</p>
509
+ <a href="https://wa.link/pglcks" class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-4 rounded-md font-bold text-lg transition duration-300">
510
  Mulai Proyek Anda Sekarang!
511
+ </a>
512
  </div>
513
  </section>
514
 
515
  <!-- Footer -->
516
+ <footer class="bg-footer text-white py-12">
517
  <div class="container mx-auto px-4">
518
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
519
  <!-- Column 1 -->
520
  <div>
521
+ <div class="mb-4">
522
+ <h3 class="text-2xl font-bold text-yellow-500">mobangun.id</h3>
523
+ </div>
524
+ > <p class="text-gray-400">PT MOBANGUN Indonesia mendedikasikan diri untuk menggabungkan estetika dan tanggung jawab lingkungan dalam setiap proyek.</p>
525
  </div>
526
 
527
  <!-- Column 2 -->
528
  <div>
529
  <h4 class="text-lg font-semibold mb-4">Navigasi</h4>
530
  <ul class="space-y-2">
531
+ <li><a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white transition">Tentang Kami</a></li>
532
+ <li><a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white transition">Layanan</a></li>
533
+ <li><a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white transition">Portofolio</a></li>
534
+ <li><a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white transition">Artikel</a></li>
535
+ <li><a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white transition">Kontak Kami</a></li>
536
  </ul>
537
  </div>
538
 
 
541
  <h4 class="text-lg font-semibold mb-4">Kontak</h4>
542
  <address class="text-gray-400 not-italic">
543
  <p class="mb-2">Alamat Studio:</p>
544
+ <p class="mb-4">Komplek AADASCA, Jl. Merpati Raya<br>Sawah Lama, Kec Ciputat<br>South Tangerang 15413</p>
545
  <p class="mb-1">Email: <a href="mailto:[email protected]" class="hover:text-white transition">[email protected]</a></p>
546
  <p>WhatsApp: <a href="https://wa.me/6281234567890" class="hover:text-white transition">+62 812-3456-7890</a></p>
547
  </address>
 
551
  <div>
552
  <h4 class="text-lg font-semibold mb-4">Media Sosial</h4>
553
  <div class="flex space-x-4">
554
+ <a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-instagram"></i></a>
555
+ <a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-linkedin"></i></a>
556
+ <a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-pinterest"></i></a>
557
+ <a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-youtube"></i></a>
558
  </div>
559
  </div>
560
  </div>
561
 
562
  <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
563
+ <p>© 2025 Mobangun.id Arsitek. Seluruh Hak Cipta Dilindungi.</p>
564
  </div>
565
  </div>
566
  </footer>