Spaces:

katonfjrr
/

mobangun

Running

App Files Files Community

katonfjrr commited on Jul 7, 2025

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

index.html +273 -80

index.html CHANGED Viewed

@@ -3,25 +3,74 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MOBANGUN! - Arsitektur & Desain Interior</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">
     <style>
-        .hero-section {
-            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');
-            background-size: cover;
-            background-position: center;
-            height: 90vh;
         }
         .portfolio-item:hover .portfolio-overlay {
             opacity: 1;
         }
         .portfolio-overlay {
-            transition: .5s ease;
             opacity: 0;
-            background-color: rgba(0, 0, 0, 0.7);
         }
         .timeline-step {
@@ -40,36 +89,59 @@
         @media (max-width: 768px) {
             .hero-section {
-                height: 70vh;
             }
             .timeline-step:not(:last-child):after {
                 display: none;
             }
         }
     </style>
 </head>
 <body class="font-sans">
     <!-- Header & Navigation -->
-    <header class="bg-black shadow-md sticky top-0 z-50">
         <div class="container mx-auto px-4 py-4 flex justify-between items-center">
             <div class="flex items-center">
-                <h1 class="text-2xl font-bold text-yellow-400">MOBANGUN!</h1>
             </div>
             <nav class="hidden md:flex space-x-8">
-                <a href="#" class="text-white hover:text-yellow-400 font-medium">Beranda</a>
-                <a href="#" class="text-white hover:text-yellow-400 font-medium">Tentang Kami</a>
-                <a href="#" class="text-white hover:text-yellow-400 font-medium">Layanan</a>
-                <a href="#" class="text-white hover:text-yellow-400 font-medium">Portofolio</a>
-                <a href="#" class="text-white hover:text-yellow-400 font-medium">Artikel</a>
-                <a href="#" class="text-white hover:text-yellow-400 font-medium">FAQ</a>
-                <a href="#" class="text-white hover:text-yellow-400 font-medium">Karir</a>
             </nav>
-            <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">
                 Kontak Kami
-            </button>
             <button class="md:hidden text-gray-800">
                 <i class="fas fa-bars text-2xl"></i>
@@ -78,17 +150,36 @@
     </header>
     <!-- Hero Section -->
-    <section class="hero-section flex items-center justify-center text-center text-white">
         <div class="container mx-auto px-4">
-            <h1 class="text-4xl md:text-6xl font-bold mb-6">Bangun Rumah Impian Tanpa Repot!</h1>
-            <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>
-            <div class="flex flex-col md:flex-row justify-center gap-4">
-                <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-3 rounded-md font-bold text-lg transition duration-300">
-                    <i class="fas fa-calendar-check mr-2"></i> Jadwalkan Konsultasi Gratis
-                </button>
-                <a href="#" class="text-white hover:text-blue-200 font-medium flex items-center justify-center">
-                    Lihat Karya Kami <i class="fas fa-arrow-right ml-2"></i>
-                </a>
             </div>
         </div>
     </section>
@@ -109,34 +200,37 @@
     <!-- Services Section -->
     <section class="bg-gray-50 py-16">
         <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Solusi Lengkap untuk Kebutuhan Properti Anda</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                 <!-- Service 1 -->
                 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
                     <div class="text-yellow-500 mb-4">
-                        <i class="fas fa-drafting-compass text-4xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold text-gray-800 mb-3">DESAIN ARSITEKTUR</h3>
-                    <p class="text-gray-600">Perancangan bangunan baru dari nol, termasuk rumah tinggal, vila, hingga bangunan komersial kecil.</p>
                 </div>
                 <!-- Service 2 -->
                 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
                     <div class="text-blue-600 mb-4">
-                        <i class="fas fa-couch text-4xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold text-gray-800 mb-3">DESAIN INTERIOR</h3>
-                    <p class="text-gray-600">Mengharmonisasikan interior dengan arsitektur, pemilihan material, furnitur, dan pencahayaan.</p>
                 </div>
                 <!-- Service 3 -->
                 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
                     <div class="text-blue-600 mb-4">
-                        <i class="fas fa-hard-hat text-4xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold text-gray-800 mb-3">MANAJEMEN KONSTRUKSI</h3>
-                    <p class="text-gray-600">Pengawasan penuh di lapangan untuk memastikan konstruksi berjalan sesuai desain, waktu, dan anggaran.</p>
                 </div>
                 <!-- Service 4 -->
@@ -144,8 +238,29 @@
                     <div class="text-blue-600 mb-4">
                         <i class="fas fa-tools text-4xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold text-gray-800 mb-3">JASA RENOVASI</h3>
-                    <p class="text-gray-600">Memperbarui dan mengubah fungsi ruang yang sudah ada agar lebih efisien dan sesuai kebutuhan baru.</p>
                 </div>
             </div>
         </div>
@@ -156,42 +271,70 @@
         <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Karya yang Bercerita</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <!-- Portfolio 1 -->
-                <div class="portfolio-item relative rounded-lg overflow-hidden h-96">
-                    <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">
                     <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
-                        <h3 class="text-2xl font-bold mb-2">The Serenity House, Sentul</h3>
                         <p class="text-blue-300 mb-4">Kategori: Rumah Tinggal</p>
-                        <p class="text-center">Sebuah hunian yang mengedepankan ketenangan dan koneksi dengan alam sekitar.</p>
                     </div>
                 </div>
-                <!-- Portfolio 2 -->
-                <div class="portfolio-item relative rounded-lg overflow-hidden h-96">
-                    <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">
                     <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
-                        <h3 class="text-2xl font-bold mb-2">Kofinara Coffee Roastery, Bandung</h3>
-                        <p class="text-blue-300 mb-4">Kategori: Komersial & Interior</p>
-                        <p class="text-center">Desain yang menciptakan suasana hangat dan komunal bagi para penikmat kopi.</p>
                     </div>
                 </div>
-                <!-- Portfolio 3 -->
-                <div class="portfolio-item relative rounded-lg overflow-hidden h-96">
-                    <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">
                     <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
-                        <h3 class="text-2xl font-bold mb-2">Villa Puncak Biru, Uluwatu</h3>
-                        <p class="text-blue-300 mb-4">Kategori: Villa & Resort</p>
-                        <p class="text-center">Memaksimalkan pemandangan dramatis dengan desain yang terbuka dan mewah.</p>
                     </div>
                 </div>
             </div>
             <div class="text-center mt-10">
-                <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-bold transition duration-300">
                     Lihat Semua Portofolio
-                </button>
             </div>
         </div>
     </section>
@@ -265,8 +408,56 @@
         </div>
     </section>
     <!-- Workflow Section -->
-    <section class="py-16 bg-gray-100">
         <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Dari Ide Menjadi Kenyataan dalam 4 Langkah Mudah</h2>
@@ -315,31 +506,33 @@
         <div class="container mx-auto px-4 text-center">
             <h2 class="text-3xl md:text-4xl font-bold mb-6">Konsultasi Gratis dengan MOBANGUN!</h2>
             <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>
-            <button class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-4 rounded-md font-bold text-lg transition duration-300">
                 Mulai Proyek Anda Sekarang!
-            </button>
         </div>
     </section>
     <!-- Footer -->
-    <footer class="bg-gray-900 text-white py-12">
         <div class="container mx-auto px-4">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <!-- Column 1 -->
                 <div>
-                    <h3 class="text-2xl font-bold text-yellow-400 mb-4">MOBANGUN!</h3>
-                    <p class="text-gray-400">PT MOBANGUN Indonesia mendedikasikan diri untuk menggabungkan estetika dan tanggung jawab lingkungan dalam setiap proyek.</p>
                 </div>
                 <!-- Column 2 -->
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Navigasi</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Tentang Kami</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Layanan</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Portofolio</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Artikel</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Kontak Kami</a></li>
                     </ul>
                 </div>
@@ -348,7 +541,7 @@
                     <h4 class="text-lg font-semibold mb-4">Kontak</h4>
                     <address class="text-gray-400 not-italic">
                         <p class="mb-2">Alamat Studio:</p>
-                        <p class="mb-4">Jl. Pangeran Antasari No. 7A<br>Kemang, Jakarta Selatan 12150</p>
                         <p class="mb-1">Email: <a href="mailto:halo@mobangun.com" class="hover:text-white transition">halo@mobangun.com</a></p>
                         <p>WhatsApp: <a href="https://wa.me/6281234567890" class="hover:text-white transition">+62 812-3456-7890</a></p>
                     </address>
@@ -358,16 +551,16 @@
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Media Sosial</h4>
                     <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-instagram"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-linkedin"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-pinterest"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-youtube"></i></a>
                     </div>
                 </div>
             </div>
             <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
-                <p>© 2025 MOBANGUN! Arsitek. Seluruh Hak Cipta Dilindungi.</p>
             </div>
         </div>
     </footer>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MOBANGUN! - Jasa Desain & Arsitektur Rumah Terbaik di Jabodetabek</title>
+    <meta name="description" content="Konsultan Arsitektur & Kontraktor Bangunan Profesional. Desain Rumah Impian Anda dengan MOBANGUN! Pelayanan dari Desain Hingga Bangun Rumah Terima Beres.">
+    <meta name="keywords" content="arsitek,jasa desain rumah,kontraktor bangunan,desain interior,jasa renovasi rumah,arsitek jakarta,rumah minimalis">
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://mobangun.id/">
+    <meta property="og:title" content="MOBANGUN! - Jasa Desain & Arsitektur Rumah Terbaik">
+    <meta property="og:description" content="Konsultan Arsitektur & Kontraktor Bangunan Profesional. Desain Rumah Impian Anda dengan MOBANGUN!">
+    <meta property="og:image" content="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-9.avif">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://mobangun.id/">
+    <meta property="twitter:title" content="MOBANGUN! - Jasa Desain & Arsitektur Rumah Terbaik">
+    <meta property="twitter:description" content="Konsultan Arsitektur & Kontraktor Bangunan Profesional. Desain Rumah Impian Anda dengan MOBANGUN!">
+    <meta property="twitter:image" content="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-9.avif">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#FFC107',
+                        secondary: '#333333',
+                        footer: '#1A1A1A',
+                    },
+                    fontFamily: {
+                        sans: ['Poppins', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        .portfolio-item {
+            transition: transform 0.3s ease;
+        }
+        .portfolio-item:hover {
+            transform: translateY(-5px);
         }
         .portfolio-item:hover .portfolio-overlay {
             opacity: 1;
+            transform: scale(1.03);
         }
         .portfolio-overlay {
+            transition: all 0.5s ease;
             opacity: 0;
+            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%);
+            transform: scale(1);
+        }
+        .portfolio-item video {
+            transition: transform 0.5s ease;
+        }
+        .portfolio-item:hover video {
+            transform: scale(1.05);
         }
         .timeline-step {
         @media (max-width: 768px) {
             .hero-section {
+                height: auto;
+                padding-top: 2rem;
+                padding-bottom: 2rem;
             }
             .timeline-step:not(:last-child):after {
                 display: none;
             }
+            /* Hero image mobile styling */
+            .hero-image-mobile {
+                margin-top: 2rem;
+                border-radius: 0.5rem;
+                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            }
+        }
+        @media (max-width: 640px) {
+            /* Adjust text sizes for very small screens */
+            .hero-title {
+                font-size: 2.25rem;
+                line-height: 2.5rem;
+            }
+            .hero-description {
+                font-size: 1rem;
+            }
+            .hero-cta {
+                font-size: 0.875rem;
+                padding: 0.75rem 1.5rem;
+            }
         }
     </style>
 </head>
 <body class="font-sans">
     <!-- Header & Navigation -->
+    <header class="bg-white shadow-sm sticky top-0 z-50">
         <div class="container mx-auto px-4 py-4 flex justify-between items-center">
             <div class="flex items-center">
+                <img src="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/kdlj9r6c-1.avif" alt="Mobangun.id" class="h-10">
+                <h1 class="text-2xl font-bold text-black">Mobangun.id</h1>
             </div>
             <nav class="hidden md:flex space-x-8">
+                <a href="https://wa.link/pglcks" class="text-secondary hover:text-primary font-medium">Beranda</a>
+                <a href="https://wa.link/pglcks" class="text-secondary hover:text-primary font-medium">Tentang Kami</a>
+                <a href="https://wa.link/pglcks" class="text-secondary hover:text-primary font-medium">Layanan</a>
+                <a href="https://wa.link/pglcks" class="text-secondary hover:text-primary font-medium">Portofolio</a>
+                <a href="https://wa.link/pglcks" class="text-secondary hover:text-primary font-medium">Artikel</a>
             </nav>
+            <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">
                 Kontak Kami
+            </a>
             <button class="md:hidden text-gray-800">
                 <i class="fas fa-bars text-2xl"></i>
     </header>
     <!-- Hero Section -->
+    <section class="bg-white">
         <div class="container mx-auto px-4">
+            <div class="flex flex-col lg:flex-row items-center">
+                <!-- Text Content -->
+                <div class="w-full lg:w-1/2 py-12 lg:py-24 order-1 lg:order-1">
+                    <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold uppercase tracking-tight mb-6 text-secondary leading-tight">
+                        JASA DESAIN & BANGUN<br>RUMAH TERIMA BERES!
+                    </h1>
+                    <p class="text-base sm:text-lg text-gray-600 mb-8 max-w-xl leading-relaxed">
+                        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.
+                    </p>
+                    <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">
+                        KONSULTASIKAN SEKARANG!
+                    </a>
+                </div>
+                <!-- Image Content - Visible on mobile too -->
+                <div class="w-full lg:w-1/2 relative order-2 lg:order-2">
+                    <div class="lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-end">
+                        <img src="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-1.avif"
+                             alt="Modern Architecture"
+                             class="w-full h-auto lg:h-[80vh] object-cover lg:object-contain rounded-lg shadow-lg lg:shadow-none lg:rounded-none"
+                             style="mask-image: linear-gradient(to top, rgba(0,0,0,1) 90%, rgba(0,0,0,0));">
+                    </div>
+                    <!-- Floating CTA - Mobile version at bottom -->
+                    <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">
+                        <i class="fas fa-comment-dots text-xl"></i>
+                        <span class="font-bold">Chat via WhatsApp</span>
+                    </a>
+                </div>
             </div>
         </div>
     </section>
     <!-- Services Section -->
     <section class="bg-gray-50 py-16">
         <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Layanan Yang Kami Tawarkan</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <!-- Service 1 -->
                 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
                     <div class="text-yellow-500 mb-4">
+                        <i class="fas fa-hard-hat text-4xl"></i>
                     </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Jasa Kontraktor Bangunan</h3>
+                    <p class="text-gray-600 mb-4">Pelaksanaan konstruksi bangunan secara menyeluruh dengan standar kualitas terbaik.</p>
+                    <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
                 </div>
                 <!-- Service 2 -->
                 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
                     <div class="text-blue-600 mb-4">
+                        <i class="fas fa-drafting-compass text-4xl"></i>
                     </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Desain Arsitektur Bangunan</h3>
+                    <p class="text-gray-600 mb-4">Perancangan bangunan baru dari nol dengan konsep fungsional dan estetis.</p>
+                    <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
                 </div>
                 <!-- Service 3 -->
                 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
                     <div class="text-blue-600 mb-4">
+                        <i class="fas fa-couch text-4xl"></i>
                     </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Jasa Desain Interior</h3>
+                    <p class="text-gray-600 mb-4">Mengharmonisasikan interior dengan arsitektur untuk menciptakan ruang yang nyaman.</p>
+                    <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
                 </div>
                 <!-- Service 4 -->
                     <div class="text-blue-600 mb-4">
                         <i class="fas fa-tools text-4xl"></i>
                     </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Jasa Renovasi Bangunan</h3>
+                    <p class="text-gray-600 mb-4">Transformasi bangunan lama menjadi lebih fungsional dan modern.</p>
+                    <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
+                </div>
+                <!-- Service 5 -->
+                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
+                    <div class="text-blue-600 mb-4">
+                        <i class="fas fa-calculator text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Analisa dan Perencanaan Struktur</h3>
+                    <p class="text-gray-600 mb-4">Perhitungan struktur yang akurat untuk keamanan dan kekuatan bangunan.</p>
+                    <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
+                </div>
+                <!-- Service 6 -->
+                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
+                    <div class="text-blue-600 mb-4">
+                        <i class="fas fa-bolt text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Mekanikal dan Elektrikal</h3>
+                    <p class="text-gray-600 mb-4">Perencanaan sistem kelistrikan dan mekanikal yang efisien untuk bangunan.</p>
+                    <a href="https://wa.link/pglcks" class="text-primary font-medium hover:underline">Selengkapnya <i class="fas fa-arrow-right ml-1"></i></a>
                 </div>
             </div>
         </div>
         <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Karya yang Bercerita</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Video Portfolio -->
+                <div class="portfolio-item relative rounded-lg overflow-hidden group">
+                    <video autoplay loop muted playsinline class="w-full h-full object-cover">
+                        <source src="https://katonfajar.rooma21.com/wp-content/uploads/2025/07/mobangun-porto-1.mp4" type="video/mp4">
+                    </video>
+                    <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
+                        <h3 class="text-2xl font-bold mb-2">Proyek Modern Minimalis</h3>
+                        <p class="text-blue-300 mb-4">Kategori: Rumah Tinggal</p>
+                        <p class="text-center">Desain minimalis dengan sentuhan modern yang elegan.</p>
+                    </div>
+                </div>
+                <!-- Portfolio Items -->
+                <div class="portfolio-item relative rounded-lg overflow-hidden group">
+                    <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">
                     <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
+                        <h3 class="text-2xl font-bold mb-2">Rumah Taman Asri</h3>
                         <p class="text-blue-300 mb-4">Kategori: Rumah Tinggal</p>
+                        <p class="text-center">Konsep hunian yang menyatu dengan alam sekitar.</p>
+                    </div>
+                </div>
+                <div class="portfolio-item relative rounded-lg overflow-hidden group">
+                    <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">
+                    <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
+                        <h3 class="text-2xl font-bold mb-2">Apartemen Mewah</h3>
+                        <p class="text-blue-300 mb-4">Kategori: Apartemen</p>
+                        <p class="text-center">Desain interior apartemen premium dengan sentuhan mewah.</p>
+                    </div>
+                </div>
+                <div class="portfolio-item relative rounded-lg overflow-hidden group">
+                    <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">
+                    <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
+                        <h3 class="text-2xl font-bold mb-2">Kantor Modern</h3>
+                        <p class="text-blue-300 mb-4">Kategori: Komersial</p>
+                        <p class="text-center">Ruang kerja yang fungsional dengan estetika modern.</p>
                     </div>
                 </div>
+                <div class="portfolio-item relative rounded-lg overflow-hidden group">
+                    <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">
                     <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
+                        <h3 class="text-2xl font-bold mb-2">Villa Eksklusif</h3>
+                        <p class="text-blue-300 mb-4">Kategori: Villa</p>
+                        <p class="text-center">Villa mewah dengan pemandangan alam memukau.</p>
                     </div>
                 </div>
+                <div class="portfolio-item relative rounded-lg overflow-hidden group">
+                    <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">
                     <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-6 text-white">
+                        <h3 class="text-2xl font-bold mb-2">Kafe Minimalis</h3>
+                        <p class="text-blue-300 mb-4">Kategori: Komersial</p>
+                        <p class="text-center">Desain kafe dengan konsep minimalis yang nyaman.</p>
                     </div>
                 </div>
             </div>
             <div class="text-center mt-10">
+                <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">
                     Lihat Semua Portofolio
+                </a>
             </div>
         </div>
     </section>
         </div>
     </section>
+    <!-- Our Process Section -->
+    <section class="py-20 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="max-w-4xl mx-auto text-center mb-16">
+                <h2 class="text-4xl font-bold text-secondary mb-4">Proses <span class="font-normal">Kreatif</span> Kami</h2>
+                <div class="w-24 h-1 bg-primary mx-auto"></div>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                <div class="order-1 lg:order-1">
+                    <img src="https://arsitekhijau.com/wp-content/uploads/FIX-1-1-min.jpg"
+                         alt="Design Process" class="rounded-lg shadow-xl w-full h-auto">
+                </div>
+                <div class="order-2 lg:order-2">
+                    <div class="space-y-8">
+                        <div class="flex items-start">
+                            <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center mr-4 flex-shrink-0">
+                                <span class="text-xl font-bold">1</span>
+                            </div>
+                            <div>
+                                <h3 class="text-2xl font-semibold text-secondary mb-2">Konsultasi Kebutuhan</h3>
+                                <p class="text-gray-600">Diskusi mendalam untuk memahami visi, gaya hidup, dan anggaran Anda melalui pertemuan virtual atau langsung di lokasi.</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center mr-4 flex-shrink-0">
+                                <span class="text-xl font-bold">2</span>
+                            </div>
+                            <div>
+                                <h3 class="text-2xl font-semibold text-secondary mb-2">Konsep & Sketsa</h3>
+                                <p class="text-gray-600">Pembuatan sketsa awal dan mood board untuk memvisualisasikan ide sebelum dikembangkan menjadi desain detail.</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center mr-4 flex-shrink-0">
+                                <span class="text-xl font-bold">3</span>
+                            </div>
+                            <div>
+                                <h3 class="text-2xl font-semibold text-secondary mb-2">3D Visualization</h3>
+                                <p class="text-gray-600">Presentasi desain 3D lengkap dengan material dan pencahayaan untuk memberikan gambaran nyata hasil akhir.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
     <!-- Workflow Section -->
+    <section class="py-16 bg-primary">
         <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Dari Ide Menjadi Kenyataan dalam 4 Langkah Mudah</h2>
         <div class="container mx-auto px-4 text-center">
             <h2 class="text-3xl md:text-4xl font-bold mb-6">Konsultasi Gratis dengan MOBANGUN!</h2>
             <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>
+            <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">
                 Mulai Proyek Anda Sekarang!
+            </a>
         </div>
     </section>
     <!-- Footer -->
+    <footer class="bg-footer text-white py-12">
         <div class="container mx-auto px-4">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <!-- Column 1 -->
                 <div>
+                    <div class="mb-4">
+                        <h3 class="text-2xl font-bold text-yellow-500">mobangun.id</h3>
+                    </div>
+>                    <p class="text-gray-400">PT MOBANGUN Indonesia mendedikasikan diri untuk menggabungkan estetika dan tanggung jawab lingkungan dalam setiap proyek.</p>
                 </div>
                 <!-- Column 2 -->
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Navigasi</h4>
                     <ul class="space-y-2">
+                        <li><a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white transition">Tentang Kami</a></li>
+                        <li><a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white transition">Layanan</a></li>
+                        <li><a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white transition">Portofolio</a></li>
+                        <li><a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white transition">Artikel</a></li>
+                        <li><a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white transition">Kontak Kami</a></li>
                     </ul>
                 </div>
                     <h4 class="text-lg font-semibold mb-4">Kontak</h4>
                     <address class="text-gray-400 not-italic">
                         <p class="mb-2">Alamat Studio:</p>
+                        <p class="mb-4">Komplek AADASCA, Jl. Merpati Raya<br>Sawah Lama, Kec Ciputat<br>South Tangerang 15413</p>
                         <p class="mb-1">Email: <a href="mailto:halo@mobangun.com" class="hover:text-white transition">halo@mobangun.com</a></p>
                         <p>WhatsApp: <a href="https://wa.me/6281234567890" class="hover:text-white transition">+62 812-3456-7890</a></p>
                     </address>
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Media Sosial</h4>
                     <div class="flex space-x-4">
+                        <a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-instagram"></i></a>
+                        <a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-linkedin"></i></a>
+                        <a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-pinterest"></i></a>
+                        <a href="https://wa.link/pglcks" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-youtube"></i></a>
                     </div>
                 </div>
             </div>
             <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
+                <p>© 2025 Mobangun.id Arsitek. Seluruh Hak Cipta Dilindungi.</p>
             </div>
         </div>
     </footer>