|
|
<!DOCTYPE html> |
|
|
<html lang="id"> |
|
|
<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"> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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 { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.timeline-step:not(:last-child):after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
right: -10%; |
|
|
width: 20%; |
|
|
height: 2px; |
|
|
background-color: #3b82f6; |
|
|
} |
|
|
|
|
|
@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 { |
|
|
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) { |
|
|
|
|
|
.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 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> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<section class="bg-white py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Lebih dari Sekadar Struktur, Kami Membangun Ruang untuk Hidup</h2> |
|
|
<p class="text-lg text-gray-600 mb-8">Selamat datang di MOBANGUN! Kami percaya bahwa arsitektur terbaik lahir dari kolaborasi erat antara arsitek dan klien. Kami tidak hanya merancang bangunan, kami merancang pengalaman. Fokus kami adalah menciptakan desain yang fungsional, estetis, dan relevan dengan konteks lingkungan tropis Indonesia.</p> |
|
|
<div class="flex justify-center"> |
|
|
<div class="w-24 h-1 bg-blue-600"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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-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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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">Keunggulan yang Kami Tawarkan</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto"> |
|
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-lightbulb text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Desain Khas & Fungsional</h3> |
|
|
<p class="text-gray-600">Kami tidak mengikuti tren sesaat. Desain kami berfokus pada solusi cerdas yang menjawab kebutuhan unik gaya hidup Anda dan bertahan sepanjang masa.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-file-invoice text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Proses Jelas & Terbuka</h3> |
|
|
<p class="text-gray-600">Anda akan selalu tahu apa yang terjadi. Kami menyediakan laporan progres rutin dan rincian anggaran yang transparan dari awal hingga akhir.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-medal text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Kualitas Material Terjamin</h3> |
|
|
<p class="text-gray-600">Kami memiliki jaringan vendor dan suplier terpercaya. Kami hanya merekomendasikan material berkualitas terbaik yang sesuai dengan anggaran Anda.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-users text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Tim Arsitek Berpengalaman</h3> |
|
|
<p class="text-gray-600">Tim kami terdiri dari arsitek bersertifikat dan desainer interior yang siap mengubah ide kompleks Anda menjadi kenyataan yang bisa dibangun.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Apa Kata Klien Kami</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto bg-gray-50 rounded-xl p-8 md:p-12"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/3 mb-6 md:mb-0"> |
|
|
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Andini & Rizky" class="w-32 h-32 rounded-full object-cover mx-auto"> |
|
|
</div> |
|
|
<div class="md:w-2/3 md:pl-8"> |
|
|
<blockquote class="text-lg italic text-gray-700 mb-4"> |
|
|
"Proses desain bersama MOBANGUN! sangat menyenangkan. Mereka benar-benar mendengarkan semua keinginan dan kekhawatiran kami. Hasil akhirnya jauh melebihi ekspektasi kami, dan yang terpenting, anggarannya tidak meleset! Terima kasih telah membangun rumah impian kami." |
|
|
</blockquote> |
|
|
<div class="text-right"> |
|
|
<p class="font-bold text-gray-800">Andini & Rizky</p> |
|
|
<p class="text-blue-600">Pemilik The Serenity House, Sentul</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</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> |
|
|
|
|
|
|
|
|
<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="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-6xl mx-auto"> |
|
|
|
|
|
<div class="timeline-step text-center"> |
|
|
<div class="bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-2xl font-bold">1</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Konsultasi & Konsep</h3> |
|
|
<p class="text-gray-600">Diskusi mendalam untuk memahami visi, kebutuhan, dan anggaran Anda. Dilanjutkan dengan survei lokasi.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-step text-center"> |
|
|
<div class="bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-2xl font-bold">2</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Pengembangan Desain</h3> |
|
|
<p class="text-gray-600">Pembuatan denah, tampak 3D, dan visualisasi render untuk memberikan gambaran nyata dari hasil akhir.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-step text-center"> |
|
|
<div class="bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-2xl font-bold">3</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Gambar Teknis & RAB</h3> |
|
|
<p class="text-gray-600">Penyusunan gambar kerja detail untuk kontraktor dan Rencana Anggaran Biaya (RAB) yang komprehensif.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-step text-center"> |
|
|
<div class="bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-2xl font-bold">4</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Pelaksanaan & Pengawasan</h3> |
|
|
<p class="text-gray-600">Proses konstruksi dimulai dengan pengawasan dari tim kami untuk memastikan kualitas hingga serah terima.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-black text-white"> |
|
|
<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 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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
<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=katonfjrr/mobangun" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
