{"id":7,"date":"2026-03-16T17:48:02","date_gmt":"2026-03-16T17:48:02","guid":{"rendered":"https:\/\/cmdigital.id\/company-profile-2\/?page_id=7"},"modified":"2026-03-18T20:23:04","modified_gmt":"2026-03-18T20:23:04","slug":"home","status":"publish","type":"page","link":"https:\/\/cmdigital.id\/company-profile-2\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n Konstruksi - Membangun Infrastruktur Masa Depan<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n display: ['Cormorant Garamond', 'serif'],\r\n body: ['Plus Jakarta Sans', 'sans-serif'],\r\n },\r\n colors: {\r\n ocean: {\r\n 50: '#f0f9ff',\r\n 100: '#e0f2fe',\r\n 200: '#bae6fd',\r\n 300: '#7dd3fc',\r\n 400: '#38bdf8',\r\n 500: '#0ea5e9',\r\n 600: '#0284c7',\r\n 700: '#0369a1',\r\n 800: '#075985',\r\n 900: '#0c4a6e',\r\n 950: '#082f49',\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n \r\n <style>\r\n :root {\r\n --bg-primary: #fdfcfa;\r\n --bg-secondary: #f8f7f5;\r\n --bg-accent: #0c4a6e;\r\n --fg-primary: #1e293b;\r\n --fg-secondary: #475569;\r\n --fg-muted: #94a3b8;\r\n --accent-primary: #0369a1;\r\n --accent-secondary: #0ea5e9;\r\n --accent-gold: #b8860b;\r\n --border-light: #e2e8f0;\r\n --card-bg: #ffffff;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n \r\n body {\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n background-color: var(--bg-primary) !important;\r\n color: var(--fg-primary);\r\n overflow-x: hidden;\r\n }\r\n \r\n .font-display {\r\n font-family: 'Cormorant Garamond', serif;\r\n }\r\n \r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: var(--bg-secondary);\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: var(--accent-primary);\r\n border-radius: 4px;\r\n }\r\n \r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-10px); }\r\n }\r\n \r\n .animate-fade-up {\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n }\r\n \r\n .animate-float {\r\n animation: float 3s ease-in-out infinite;\r\n }\r\n \r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n \r\n .reveal.active {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \r\n .reveal-delay-1 { transition-delay: 0.1s; }\r\n .reveal-delay-2 { transition-delay: 0.2s; }\r\n .reveal-delay-3 { transition-delay: 0.3s; }\r\n .reveal-delay-4 { transition-delay: 0.4s; }\r\n .reveal-delay-5 { transition-delay: 0.5s; }\r\n \r\n .hero-overlay {\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(12, 74, 110, 0.92) 0%,\r\n rgba(7, 89, 133, 0.88) 50%,\r\n rgba(12, 74, 110, 0.85) 100%\r\n );\r\n }\r\n \r\n .btn-primary {\r\n background: linear-gradient(135deg, var(--accent-primary) 0%, #0284c7 100%);\r\n color: #ffffff !important;\r\n text-decoration: none !important;\r\n padding: 1rem 2rem;\r\n border-radius: 4px;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n display: inline-block;\r\n }\r\n \r\n .btn-primary::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\r\n transition: left 0.5s ease;\r\n }\r\n \r\n .btn-primary:hover::before {\r\n left: 100%;\r\n }\r\n \r\n .btn-primary:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 30px rgba(3, 105, 161, 0.3);\r\n }\r\n \r\n .btn-outline {\r\n border: 2px solid var(--accent-primary);\r\n color: var(--accent-primary) !important;\r\n text-decoration: none !important;\r\n padding: 1rem 2rem;\r\n border-radius: 4px;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n transition: all 0.3s ease;\r\n background: transparent;\r\n display: inline-block;\r\n }\r\n \r\n .btn-outline:hover {\r\n background: var(--accent-primary);\r\n color: #ffffff !important;\r\n transform: translateY(-2px);\r\n }\r\n \r\n \/* CTA White Button *\/\r\n .cta-white-btn {\r\n background: #ffffff !important;\r\n color: #0c4a6e !important;\r\n text-decoration: none !important;\r\n padding: 1rem 2rem;\r\n border-radius: 4px;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n transition: all 0.3s ease;\r\n border: 2px solid #ffffff;\r\n display: inline-block;\r\n }\r\n \r\n .cta-white-btn:hover {\r\n background: transparent !important;\r\n color: #ffffff !important;\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n .service-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border-light);\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .service-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 4px;\r\n background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.4s ease;\r\n }\r\n \r\n .service-card:hover::before {\r\n transform: scaleX(1);\r\n }\r\n \r\n .service-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 40px rgba(12, 74, 110, 0.1);\r\n border-color: var(--accent-secondary);\r\n }\r\n \r\n .problem-card {\r\n background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\r\n border-left: 4px solid #dc2626;\r\n }\r\n \r\n .solution-card {\r\n background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);\r\n border-left: 4px solid #16a34a;\r\n }\r\n \r\n .stat-number {\r\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n \r\n .pattern-bg {\r\n background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230369a1' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\r\n }\r\n \r\n .mobile-menu {\r\n transform: translateX(100%);\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .mobile-menu.active {\r\n transform: translateX(0);\r\n }\r\n \r\n a:focus, button:focus {\r\n outline: 2px solid var(--accent-secondary);\r\n outline-offset: 2px;\r\n }\r\n \r\n @media (prefers-reduced-motion: reduce) {\r\n *, *::before, *::after {\r\n animation-duration: 0.01ms !important;\r\n animation-iteration-count: 1 !important;\r\n transition-duration: 0.01ms !important;\r\n }\r\n html {\r\n scroll-behavior: auto;\r\n }\r\n }\r\n \r\n .whatsapp-btn {\r\n background: #25D366;\r\n color: #ffffff !important;\r\n text-decoration: none !important;\r\n padding: 1rem 2rem;\r\n border-radius: 4px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n \r\n .whatsapp-btn:hover {\r\n background: #128C7E;\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);\r\n }\r\n\r\n .stats-section {\r\n background: linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0369a1 100%);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .stats-section::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: url(\"data:image\/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'\/%3E%3C\/svg%3E\");\r\n opacity: 0.5;\r\n }\r\n\r\n .stat-card {\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .stat-card:hover {\r\n background: rgba(255, 255, 255, 0.15);\r\n transform: translateY(-5px);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"font-body\">\r\n <!-- Navigation -->\r\n <header class=\"fixed top-0 left-0 right-0 z-50 bg-white\/95 backdrop-blur-md shadow-sm\" role=\"banner\">\r\n <nav class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\" role=\"navigation\" aria-label=\"Main navigation\">\r\n <div class=\"flex items-center justify-between h-20\">\r\n <a href=\"#\" class=\"flex items-center gap-3\" aria-label=\"Konstruksi Home\">\r\n <div class=\"w-10 h-10 bg-gradient-to-br from-ocean-700 to-ocean-900 rounded flex items-center justify-center\">\r\n <svg class=\"w-6 h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"font-display text-2xl font-bold text-ocean-900\">Konstruksi<\/span>\r\n <\/a>\r\n \r\n <div class=\"hidden lg:flex items-center gap-8\">\r\n <a href=\"#beranda\" class=\"text-slate-600 hover:text-ocean-700 font-medium transition-colors\">Beranda<\/a>\r\n <a href=\"#layanan\" class=\"text-slate-600 hover:text-ocean-700 font-medium transition-colors\">Layanan<\/a>\r\n <a href=\"#tentang\" class=\"text-slate-600 hover:text-ocean-700 font-medium transition-colors\">Tentang<\/a>\r\n <a href=\"#keunggulan\" class=\"text-slate-600 hover:text-ocean-700 font-medium transition-colors\">Keunggulan<\/a>\r\n <a href=\"#kontak\" class=\"btn-primary\">Hubungi Kami<\/a>\r\n <\/div>\r\n \r\n <button id=\"mobileMenuBtn\" class=\"lg:hidden p-2 text-slate-600 hover:text-ocean-700\" aria-label=\"Toggle menu\" aria-expanded=\"false\">\r\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n \r\n <div id=\"mobileMenu\" class=\"mobile-menu fixed top-0 right-0 w-72 h-full bg-white shadow-2xl lg:hidden z-50\">\r\n <div class=\"p-6\">\r\n <button id=\"closeMobileMenu\" class=\"absolute top-6 right-6 p-2 text-slate-600 hover:text-ocean-700\" aria-label=\"Close menu\">\r\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"\/>\r\n <\/svg>\r\n <\/button>\r\n <div class=\"mt-12 flex flex-col gap-4\">\r\n <a href=\"#beranda\" class=\"mobile-link py-3 text-lg font-medium text-slate-700 hover:text-ocean-700 border-b border-slate-100\">Beranda<\/a>\r\n <a href=\"#layanan\" class=\"mobile-link py-3 text-lg font-medium text-slate-700 hover:text-ocean-700 border-b border-slate-100\">Layanan<\/a>\r\n <a href=\"#tentang\" class=\"mobile-link py-3 text-lg font-medium text-slate-700 hover:text-ocean-700 border-b border-slate-100\">Tentang<\/a>\r\n <a href=\"#keunggulan\" class=\"mobile-link py-3 text-lg font-medium text-slate-700 hover:text-ocean-700 border-b border-slate-100\">Keunggulan<\/a>\r\n <a href=\"#kontak\" class=\"btn-primary text-center mt-4\">Hubungi Kami<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <main id=\"main-content\" role=\"main\">\r\n <!-- Hero Section -->\r\n <section id=\"beranda\" class=\"relative min-h-screen flex items-center\" aria-label=\"Hero section\">\r\n <div class=\"absolute inset-0 z-0\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/1920x1080\/1e3a5f\/1e3a5f?text=+\" alt=\"\" class=\"w-full h-full object-cover\" aria-hidden=\"true\">\r\n <div class=\"hero-overlay absolute inset-0\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"absolute top-20 right-10 w-32 h-32 border border-white\/10 rounded-full animate-float\" aria-hidden=\"true\"><\/div>\r\n <div class=\"absolute bottom-40 left-10 w-20 h-20 border border-white\/10 rounded-full animate-float\" style=\"animation-delay: 1s;\" aria-hidden=\"true\"><\/div>\r\n \r\n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32\">\r\n <div class=\"max-w-3xl\">\r\n <p class=\"text-ocean-200 font-medium tracking-widest uppercase mb-4 animate-fade-up\" style=\"animation-delay: 0.2s;\">\r\n Jasa Konstruksi Profesional\r\n <\/p>\r\n <h1 class=\"font-display text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-white leading-tight mb-6 animate-fade-up\" style=\"animation-delay: 0.4s;\">\r\n Membangun Infrastruktur Masa Depan dengan Presisi\r\n <\/h1>\r\n <p class=\"text-lg sm:text-xl text-ocean-100 mb-8 leading-relaxed animate-fade-up\" style=\"animation-delay: 0.6s;\">\r\n Spesialis pembangunan rumah hunian, gedung komersial, hingga proyek jalan raya. \r\n Kami menghadirkan struktur kokoh, aman, dan berkualitas tinggi dengan standar pengerjaan presisi.\r\n <\/p>\r\n <div class=\"flex flex-col sm:flex-row gap-4 animate-fade-up\" style=\"animation-delay: 0.8s;\">\r\n <a href=\"#kontak\" class=\"btn-primary text-center\">\r\n Konsultasi Gratis\r\n <\/a>\r\n <a href=\"#layanan\" class=\"btn-outline border-white text-white hover:bg-white hover:text-ocean-900 text-center\" style=\"color: #ffffff !important;\">\r\n Lihat Layanan\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-16 pt-8 border-t border-white\/20 animate-fade-up\" style=\"animation-delay: 1s;\">\r\n <p class=\"text-ocean-200 text-sm mb-4\">Dipercaya oleh berbagai klien<\/p>\r\n <div class=\"flex flex-wrap items-center gap-8 opacity-70\">\r\n <span class=\"font-display text-xl text-white\">Partner 1<\/span>\r\n <span class=\"font-display text-xl text-white\">Partner 2<\/span>\r\n <span class=\"font-display text-xl text-white\">Partner 3<\/span>\r\n <span class=\"font-display text-xl text-white\">Partner 4<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"absolute bottom-8 left-1\/2 -translate-x-1\/2 animate-float\">\r\n <a href=\"#layanan\" class=\"text-white\/60 hover:text-white transition-colors\" aria-label=\"Scroll to services\">\r\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Services Section -->\r\n <section id=\"layanan\" class=\"py-20 lg:py-32 bg-gradient-to-b from-white to-slate-50\" aria-label=\"Layanan kami\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-3xl mx-auto mb-16\">\r\n <p class=\"text-ocean-600 font-semibold tracking-widest uppercase mb-4 reveal\">Layanan Kami<\/p>\r\n <h2 class=\"font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 mb-6 reveal reveal-delay-1\">\r\n Solusi Konstruksi Bangunan Terintegrasi\r\n <\/h2>\r\n <p class=\"text-lg text-slate-600 reveal reveal-delay-2\">\r\n Kami menyediakan layanan konstruksi menyeluruh dari perencanaan hingga serah terima kunci dengan standar kualitas tertinggi.\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n <article class=\"service-card rounded-lg p-8 reveal\">\r\n <div class=\"w-14 h-14 bg-gradient-to-br from-ocean-500 to-ocean-700 rounded-lg flex items-center justify-center mb-6\">\r\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"font-display text-xl font-bold text-slate-900 mb-3\">Pembangunan Rumah Tinggal dan Ruko<\/h3>\r\n <p class=\"text-ocean-600 font-semibold text-sm mb-3\">Rp 3.500.000 - Rp 8.000.000 \/ m2<\/p>\r\n <p class=\"text-slate-600 leading-relaxed\">Layanan menyeluruh mulai dari pembersihan lahan, pembuatan fondasi, hingga serah terima kunci (finishing).<\/p>\r\n <\/article>\r\n \r\n <article class=\"service-card rounded-lg p-8 reveal reveal-delay-1\">\r\n <div class=\"w-14 h-14 bg-gradient-to-br from-ocean-500 to-ocean-700 rounded-lg flex items-center justify-center mb-6\">\r\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"font-display text-xl font-bold text-slate-900 mb-3\">Renovasi Bangunan<\/h3>\r\n <p class=\"text-ocean-600 font-semibold text-sm mb-3\">Rp 1.500.000 - Rp 2.500.000 \/ m2<\/p>\r\n <p class=\"text-slate-600 leading-relaxed\">Solusi untuk memperbarui, memperluas, atau memperbaiki bagian bangunan yang sudah ada.<\/p>\r\n <\/article>\r\n \r\n <article class=\"service-card rounded-lg p-8 reveal reveal-delay-2\">\r\n <div class=\"w-14 h-14 bg-gradient-to-br from-ocean-500 to-ocean-700 rounded-lg flex items-center justify-center mb-6\">\r\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"font-display text-xl font-bold text-slate-900 mb-3\">Desain Arsitektur dan Interior<\/h3>\r\n <p class=\"text-ocean-600 font-semibold text-sm mb-3\">Rp 50.000 - Rp 150.000 \/ m2<\/p>\r\n <p class=\"text-slate-600 leading-relaxed\">Pembuatan Gambar Kerja (DED), denah 2D, visualisasi 3D, serta perhitungan Rencana Anggaran Biaya (RAB).<\/p>\r\n <\/article>\r\n \r\n <article class=\"service-card rounded-lg p-8 reveal reveal-delay-3\">\r\n <div class=\"w-14 h-14 bg-gradient-to-br from-ocean-500 to-ocean-700 rounded-lg flex items-center justify-center mb-6\">\r\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"font-display text-xl font-bold text-slate-900 mb-3\">Pekerjaan Sipil dan Infrastruktur<\/h3>\r\n <p class=\"text-ocean-600 font-semibold text-sm mb-3\">Harga setelah survei lokasi<\/p>\r\n <p class=\"text-slate-600 leading-relaxed\">Pembangunan jalan (aspal\/beton), saluran drainase, pagar panel beton, hingga pengurukan lahan (cut and fill).<\/p>\r\n <\/article>\r\n \r\n <article class=\"service-card rounded-lg p-8 reveal reveal-delay-4\">\r\n <div class=\"w-14 h-14 bg-gradient-to-br from-ocean-500 to-ocean-700 rounded-lg flex items-center justify-center mb-6\">\r\n <svg class=\"w-7 h-7 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"font-display text-xl font-bold text-slate-900 mb-3\">Jasa Kontraktor MEP<\/h3>\r\n <p class=\"text-ocean-600 font-semibold text-sm mb-3\">Rp 200.000 - Rp 350.000 \/ titik<\/p>\r\n <p class=\"text-slate-600 leading-relaxed\">Instalasi jaringan listrik, pemasangan titik lampu, sistem air bersih\/kotor, serta pemasangan AC dan pemadam api.<\/p>\r\n <\/article>\r\n \r\n <!-- CTA Card with White Button -->\r\n <article class=\"bg-gradient-to-br from-ocean-800 to-ocean-900 rounded-lg p-8 flex flex-col justify-center reveal reveal-delay-5\">\r\n <h3 class=\"font-display text-2xl font-bold text-white mb-4\">Butuh Layanan Khusus?<\/h3>\r\n <p class=\"text-ocean-100 mb-6\">Konsultasikan kebutuhan proyek Anda dengan tim ahli kami secara gratis.<\/p>\r\n <a href=\"#kontak\" class=\"cta-white-btn text-center\">\r\n Konsultasi Sekarang\r\n <\/a>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Stats Section -->\r\n <section class=\"stats-section py-20 lg:py-28\" aria-label=\"Statistics\">\r\n <div class=\"relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center mb-12\">\r\n <p class=\"text-ocean-200 font-semibold tracking-widest uppercase mb-4 reveal\">Pencapaian Kami<\/p>\r\n <h2 class=\"font-display text-3xl sm:text-4xl font-bold text-white reveal reveal-delay-1\">\r\n Dipercaya Oleh Ratusan Klien\r\n <\/h2>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 lg:grid-cols-4 gap-6\">\r\n <div class=\"stat-card rounded-xl p-6 lg:p-8 text-center reveal\">\r\n <p class=\"font-display text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-2\">250+<\/p>\r\n <p class=\"text-ocean-100 text-sm lg:text-base\">Proyek Selesai<\/p>\r\n <\/div>\r\n <div class=\"stat-card rounded-xl p-6 lg:p-8 text-center reveal reveal-delay-1\">\r\n <p class=\"font-display text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-2\">15+<\/p>\r\n <p class=\"text-ocean-100 text-sm lg:text-base\">Tahun Pengalaman<\/p>\r\n <\/div>\r\n <div class=\"stat-card rounded-xl p-6 lg:p-8 text-center reveal reveal-delay-2\">\r\n <p class=\"font-display text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-2\">98%<\/p>\r\n <p class=\"text-ocean-100 text-sm lg:text-base\">Klien Puas<\/p>\r\n <\/div>\r\n <div class=\"stat-card rounded-xl p-6 lg:p-8 text-center reveal reveal-delay-3\">\r\n <p class=\"font-display text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-2\">50+<\/p>\r\n <p class=\"text-ocean-100 text-sm lg:text-base\">Tim Profesional<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Problem-Solution Section -->\r\n <section class=\"py-20 lg:py-32 bg-slate-50 pattern-bg\" aria-label=\"Masalah dan solusi\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-3xl mx-auto mb-16\">\r\n <p class=\"text-ocean-600 font-semibold tracking-widest uppercase mb-4 reveal\">Mengapa Memilih Kami<\/p>\r\n <h2 class=\"font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 mb-6 reveal reveal-delay-1\">\r\n Kami Memahami Tantangan Anda\r\n <\/h2>\r\n <p class=\"text-lg text-slate-600 reveal reveal-delay-2\">\r\n Setiap proyek konstruksi memiliki tantangan unik. Kami hadir dengan solusi tepat untuk mengatasinya.\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"grid lg:grid-cols-2 gap-6\">\r\n <div class=\"space-y-4\">\r\n <h3 class=\"font-display text-2xl font-bold text-slate-900 mb-6 reveal\">Masalah yang Sering Dihadapi<\/h3>\r\n \r\n <div class=\"problem-card rounded-lg p-5 reveal reveal-delay-1\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg class=\"w-5 h-5 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-slate-900\">Anggaran yang Terus Membengkak<\/h4>\r\n <p class=\"text-slate-600 text-sm mt-1\">Biaya siluman dan tambahan tak terduga menguras kantong.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"problem-card rounded-lg p-5 reveal reveal-delay-2\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg class=\"w-5 h-5 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-slate-900\">Proyek Mangkrak atau Terlambat<\/h4>\r\n <p class=\"text-slate-600 text-sm mt-1\">Deadline molor tanpa kepastian selesai.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"problem-card rounded-lg p-5 reveal reveal-delay-3\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg class=\"w-5 h-5 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-slate-900\">Kualitas Bangunan yang Buruk<\/h4>\r\n <p class=\"text-slate-600 text-sm mt-1\">Material murahan dan pengerjaan asal-asalan.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"problem-card rounded-lg p-5 reveal reveal-delay-4\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg class=\"w-5 h-5 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-slate-900\">Komunikasi yang Sulit<\/h4>\r\n <p class=\"text-slate-600 text-sm mt-1\">Sulit menghubungi dan tidak ada update progres.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"problem-card rounded-lg p-5 reveal reveal-delay-5\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg class=\"w-5 h-5 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-slate-900\">Desain Tidak Fungsional<\/h4>\r\n <p class=\"text-slate-600 text-sm mt-1\">Hasil akhir tidak sesuai kebutuhan dan ekspektasi.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"space-y-4\">\r\n <h3 class=\"font-display text-2xl font-bold text-slate-900 mb-6 reveal\">Solusi dari Kami<\/h3>\r\n \r\n <div class=\"solution-card rounded-lg p-5 reveal reveal-delay-1\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg class=\"w-5 h-5 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-slate-900\">RAB Transparan dan Pasti<\/h4>\r\n <p class=\"text-slate-600 text-sm mt-1\">Harga final sejak awal, tanpa biaya siluman.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"solution-card rounded-lg p-5 reveal reveal-delay-2\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg class=\"w-5 h-5 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-slate-900\">Manajemen Timeline Ketat<\/h4>\r\n <p class=\"text-slate-600 text-sm mt-1\">Sistem pelacakan real-time dan milestone jelas.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"solution-card rounded-lg p-5 reveal reveal-delay-3\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg class=\"w-5 h-5 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-slate-900\">Jaminan Kualitas dan Garansi<\/h4>\r\n <p class=\"text-slate-600 text-sm mt-1\">Material berkualitas dengan garansi pemeliharaan.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"solution-card rounded-lg p-5 reveal reveal-delay-4\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg class=\"w-5 h-5 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-slate-900\">Komunikasi Satu Pintu<\/h4>\r\n <p class=\"text-slate-600 text-sm mt-1\">Single Point of Contact untuk kemudahan koordinasi.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"solution-card rounded-lg p-5 reveal reveal-delay-5\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg class=\"w-5 h-5 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-semibold text-slate-900\">Desain Fungsional dan Konsultasi Ahli<\/h4>\r\n <p class=\"text-slate-600 text-sm mt-1\">Tim arsitek berpengalaman memastikan hasil optimal.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Vision Mission Section -->\r\n <section id=\"tentang\" class=\"py-20 lg:py-32 bg-white\" aria-label=\"Visi dan Misi\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid lg:grid-cols-2 gap-16 items-center\">\r\n <div class=\"relative reveal\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/600x500\/0c4a6e\/0c4a6e?text=+\" alt=\"Tim konstruksi profesional\" class=\"w-full rounded-lg shadow-2xl\">\r\n <div class=\"absolute -bottom-8 -right-8 bg-gradient-to-br from-ocean-600 to-ocean-800 text-white p-6 rounded-lg shadow-xl hidden sm:block\">\r\n <p class=\"font-display text-3xl font-bold\">15+<\/p>\r\n <p class=\"text-ocean-100 text-sm\">Tahun Pengalaman<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <p class=\"text-ocean-600 font-semibold tracking-widest uppercase mb-4 reveal\">Tentang Kami<\/p>\r\n <h2 class=\"font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 mb-6 reveal reveal-delay-1\">\r\n Membangun Masa Depan dengan Integritas\r\n <\/h2>\r\n \r\n <div class=\"mb-8 reveal reveal-delay-2\">\r\n <h3 class=\"font-display text-xl font-bold text-ocean-800 mb-3\">Visi<\/h3>\r\n <p class=\"text-slate-600 leading-relaxed\">\r\n Menjadi perusahaan jasa konstruksi terkemuka dan terpercaya di tingkat nasional, yang dikenal melalui inovasi berkelanjutan, kualitas bangunan yang unggul, serta komitmen penuh terhadap keselamatan kerja dan kepuasan pelanggan.\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"reveal reveal-delay-3\">\r\n <h3 class=\"font-display text-xl font-bold text-ocean-800 mb-3\">Misi<\/h3>\r\n <ul class=\"space-y-3\">\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"w-6 h-6 bg-ocean-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5\">\r\n <span class=\"w-2 h-2 bg-ocean-600 rounded-full\"><\/span>\r\n <\/span>\r\n <span class=\"text-slate-600\">Kualitas tanpa kompromi dengan material terbaik<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"w-6 h-6 bg-ocean-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5\">\r\n <span class=\"w-2 h-2 bg-ocean-600 rounded-full\"><\/span>\r\n <\/span>\r\n <span class=\"text-slate-600\">Ketepatan waktu dalam setiap proyek<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"w-6 h-6 bg-ocean-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5\">\r\n <span class=\"w-2 h-2 bg-ocean-600 rounded-full\"><\/span>\r\n <\/span>\r\n <span class=\"text-slate-600\">Inovasi dan adopsi teknologi terbaru<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-3\">\r\n <span class=\"w-6 h-6 bg-ocean-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5\">\r\n <span class=\"w-2 h-2 bg-ocean-600 rounded-full\"><\/span>\r\n <\/span>\r\n <span class=\"text-slate-600\">Keselamatan dan kesehatan kerja (K3) prioritas<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Service Pillars Section -->\r\n <section id=\"keunggulan\" class=\"py-20 lg:py-32 bg-gradient-to-br from-ocean-900 via-ocean-800 to-ocean-900 relative overflow-hidden\" aria-label=\"Keunggulan kami\">\r\n <div class=\"absolute inset-0 opacity-10\" aria-hidden=\"true\">\r\n <svg class=\"w-full h-full\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\">\r\n <defs>\r\n <pattern id=\"grid\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\">\r\n <path d=\"M 10 0 L 0 0 0 10\" fill=\"none\" stroke=\"white\" stroke-width=\"0.5\"\/>\r\n <\/pattern>\r\n <\/defs>\r\n <rect width=\"100\" height=\"100\" fill=\"url(#grid)\"\/>\r\n <\/svg>\r\n <\/div>\r\n \r\n <div class=\"relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-3xl mx-auto mb-16\">\r\n <p class=\"text-ocean-200 font-semibold tracking-widest uppercase mb-4 reveal\">Pilar Layanan<\/p>\r\n <h2 class=\"font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6 reveal reveal-delay-1\">\r\n Komitmen Kami untuk Kesuksesan Proyek Anda\r\n <\/h2>\r\n <p class=\"text-lg text-ocean-100 reveal reveal-delay-2\">\r\n Lima pilar utama yang menjadi fondasi setiap pengerjaan proyek konstruksi kami.\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"grid md:grid-cols-2 lg:grid-cols-5 gap-6\">\r\n <div class=\"bg-white\/10 backdrop-blur-sm border border-white\/20 rounded-lg p-6 text-center hover:bg-white\/20 transition-all duration-300 reveal\">\r\n <div class=\"w-16 h-16 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-4\">\r\n <svg class=\"w-8 h-8 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"font-display text-lg font-bold text-white mb-2\">Kualitas Unggul<\/h3>\r\n <p class=\"text-ocean-200 text-sm\">Standar konstruksi tertinggi<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-white\/10 backdrop-blur-sm border border-white\/20 rounded-lg p-6 text-center hover:bg-white\/20 transition-all duration-300 reveal reveal-delay-1\">\r\n <div class=\"w-16 h-16 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-4\">\r\n <svg class=\"w-8 h-8 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"font-display text-lg font-bold text-white mb-2\">Tepat Waktu<\/h3>\r\n <p class=\"text-ocean-200 text-sm\">Efisiensi proyek terjamin<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-white\/10 backdrop-blur-sm border border-white\/20 rounded-lg p-6 text-center hover:bg-white\/20 transition-all duration-300 reveal reveal-delay-2\">\r\n <div class=\"w-16 h-16 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-4\">\r\n <svg class=\"w-8 h-8 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\/>\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"font-display text-lg font-bold text-white mb-2\">Transparansi<\/h3>\r\n <p class=\"text-ocean-200 text-sm\">Integritas tanpa kompromi<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-white\/10 backdrop-blur-sm border border-white\/20 rounded-lg p-6 text-center hover:bg-white\/20 transition-all duration-300 reveal reveal-delay-3\">\r\n <div class=\"w-16 h-16 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-4\">\r\n <svg class=\"w-8 h-8 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"font-display text-lg font-bold text-white mb-2\">Inovasi<\/h3>\r\n <p class=\"text-ocean-200 text-sm\">Teknologi berkelanjutan<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-white\/10 backdrop-blur-sm border border-white\/20 rounded-lg p-6 text-center hover:bg-white\/20 transition-all duration-300 reveal reveal-delay-4\">\r\n <div class=\"w-16 h-16 bg-white\/20 rounded-full flex items-center justify-center mx-auto mb-4\">\r\n <svg class=\"w-8 h-8 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3 class=\"font-display text-lg font-bold text-white mb-2\">Keselamatan<\/h3>\r\n <p class=\"text-ocean-200 text-sm\">Safety first culture<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-16 bg-white\/10 backdrop-blur-sm border border-white\/20 rounded-xl p-8 lg:p-12 text-center reveal\">\r\n <p class=\"text-ocean-200 font-medium mb-4\">Keunggulan Utama Kami<\/p>\r\n <h3 class=\"font-display text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-4\">\r\n Pembangunan Tanpa Biaya Siluman\r\n <\/h3>\r\n <p class=\"text-xl text-ocean-100 max-w-2xl mx-auto\">\r\n RAB Transparan, Harga Final Sejak Awal\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Contact Section -->\r\n <section id=\"kontak\" class=\"py-20 lg:py-32 bg-slate-50\" aria-label=\"Hubungi kami\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid lg:grid-cols-2 gap-16\">\r\n <div>\r\n <p class=\"text-ocean-600 font-semibold tracking-widest uppercase mb-4 reveal\">Hubungi Kami<\/p>\r\n <h2 class=\"font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 mb-6 reveal reveal-delay-1\">\r\n Siap Memulai Proyek Impian Anda?\r\n <\/h2>\r\n <p class=\"text-lg text-slate-600 mb-8 reveal reveal-delay-2\">\r\n Konsultasikan kebutuhan konstruksi bangunan Anda dengan tim ahli kami. Kami siap membantu mewujudkan visi Anda menjadi kenyataan.\r\n <\/p>\r\n \r\n <div class=\"space-y-6 reveal reveal-delay-3\">\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-12 h-12 bg-ocean-100 rounded-lg flex items-center justify-center\">\r\n <svg class=\"w-6 h-6 text-ocean-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <p class=\"text-sm text-slate-500\">Email<\/p>\r\n <a href=\"mailto:konstruksi@gmail.com\" class=\"text-slate-900 font-medium hover:text-ocean-700 transition-colors\">konstruksi@gmail.com<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-12 h-12 bg-ocean-100 rounded-lg flex items-center justify-center\">\r\n <svg class=\"w-6 h-6 text-ocean-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <p class=\"text-sm text-slate-500\">Telepon<\/p>\r\n <a href=\"tel:+6281234567890\" class=\"text-slate-900 font-medium hover:text-ocean-700 transition-colors\">+62 812 3456 7890<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-12 h-12 bg-ocean-100 rounded-lg flex items-center justify-center\">\r\n <svg class=\"w-6 h-6 text-ocean-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\/>\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <p class=\"text-sm text-slate-500\">Alamat<\/p>\r\n <p class=\"text-slate-900 font-medium\">Jakarta, Indonesia<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-8 pt-8 border-t border-slate-200 reveal reveal-delay-4\">\r\n <p class=\"text-sm text-slate-500 mb-4\">Ikuti Kami<\/p>\r\n <div class=\"flex gap-4\">\r\n <a href=\"https:\/\/instagram.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"w-10 h-10 bg-ocean-100 rounded-lg flex items-center justify-center text-ocean-700 hover:bg-ocean-700 hover:text-white transition-all\" aria-label=\"Instagram\">\r\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <a href=\"#\" class=\"w-10 h-10 bg-ocean-100 rounded-lg flex items-center justify-center text-ocean-700 hover:bg-ocean-700 hover:text-white transition-all\" aria-label=\"LinkedIn\">\r\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"bg-white rounded-xl shadow-xl p-8 lg:p-10 reveal\">\r\n <h3 class=\"font-display text-2xl font-bold text-slate-900 mb-6\">Kirim Pesan<\/h3>\r\n <form id=\"contactForm\" class=\"space-y-6\">\r\n <div>\r\n <label for=\"name\" class=\"block text-sm font-medium text-slate-700 mb-2\">Nama Lengkap<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" required class=\"w-full px-4 py-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 transition-colors\" placeholder=\"Masukkan nama Anda\">\r\n <\/div>\r\n \r\n <div>\r\n <label for=\"email\" class=\"block text-sm font-medium text-slate-700 mb-2\">Email<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" required class=\"w-full px-4 py-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 transition-colors\" placeholder=\"email@contoh.com\">\r\n <\/div>\r\n \r\n <div>\r\n <label for=\"phone\" class=\"block text-sm font-medium text-slate-700 mb-2\">Nomor Telepon<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"phone\" class=\"w-full px-4 py-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 transition-colors\" placeholder=\"+62 xxx xxxx xxxx\">\r\n <\/div>\r\n \r\n <div>\r\n <label for=\"service\" class=\"block text-sm font-medium text-slate-700 mb-2\">Layanan yang Dibutuhkan<\/label>\r\n <select id=\"service\" name=\"service\" class=\"w-full px-4 py-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 transition-colors\">\r\n <option value=\"\">Pilih layanan<\/option>\r\n <option value=\"pembangunan\">Pembangunan Rumah Tinggal dan Ruko<\/option>\r\n <option value=\"renovasi\">Renovasi Bangunan<\/option>\r\n <option value=\"desain\">Desain Arsitektur dan Interior<\/option>\r\n <option value=\"sipil\">Pekerjaan Sipil dan Infrastruktur<\/option>\r\n <option value=\"mep\">Jasa Kontraktor MEP<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <div>\r\n <label for=\"message\" class=\"block text-sm font-medium text-slate-700 mb-2\">Pesan<\/label>\r\n <textarea id=\"message\" name=\"message\" rows=\"4\" class=\"w-full px-4 py-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 transition-colors resize-none\" placeholder=\"Ceritakan kebutuhan proyek Anda...\"><\/textarea>\r\n <\/div>\r\n \r\n <button type=\"submit\" class=\"btn-primary w-full text-center\">\r\n Kirim Pesan\r\n <\/button>\r\n <\/form>\r\n \r\n <div class=\"mt-6 pt-6 border-t border-slate-100 text-center\">\r\n <p class=\"text-sm text-slate-500 mb-4\">Atau hubungi langsung via WhatsApp<\/p>\r\n <a href=\"https:\/\/wa.me\/6281234567890?text=Halo,%20saya%20ingin%20konsultasi%20proyek%20konstruksi\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"whatsapp-btn justify-center w-full\">\r\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/>\r\n <\/svg>\r\n Chat via WhatsApp\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n <!-- Footer -->\r\n <footer class=\"bg-ocean-950 text-white py-16\" role=\"contentinfo\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-12\">\r\n <div class=\"lg:col-span-2\">\r\n <a href=\"#\" class=\"flex items-center gap-3 mb-6\">\r\n <div class=\"w-10 h-10 bg-white rounded flex items-center justify-center\">\r\n <svg class=\"w-6 h-6 text-ocean-900\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span class=\"font-display text-2xl font-bold\">Konstruksi<\/span>\r\n <\/a>\r\n <p class=\"text-ocean-200 leading-relaxed max-w-md mb-6\">\r\n Jasa konstruksi terintegrasi yang berdedikasi membangun infrastruktur masa depan dengan standar kualitas tertinggi dan integritas tanpa kompromi.\r\n <\/p>\r\n <p class=\"text-ocean-300 text-sm\">\r\n Est. 2026 | Jakarta, Indonesia\r\n <\/p>\r\n <\/div>\r\n \r\n <div>\r\n <h4 class=\"font-display text-lg font-bold mb-6\">Navigasi<\/h4>\r\n <nav aria-label=\"Footer navigation\">\r\n <ul class=\"space-y-3\">\r\n <li><a href=\"#beranda\" class=\"text-ocean-200 hover:text-white transition-colors\">Beranda<\/a><\/li>\r\n <li><a href=\"#layanan\" class=\"text-ocean-200 hover:text-white transition-colors\">Layanan<\/a><\/li>\r\n <li><a href=\"#tentang\" class=\"text-ocean-200 hover:text-white transition-colors\">Tentang Kami<\/a><\/li>\r\n <li><a href=\"#keunggulan\" class=\"text-ocean-200 hover:text-white transition-colors\">Keunggulan<\/a><\/li>\r\n <li><a href=\"#kontak\" class=\"text-ocean-200 hover:text-white transition-colors\">Kontak<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/div>\r\n \r\n <div>\r\n <h4 class=\"font-display text-lg font-bold mb-6\">Layanan<\/h4>\r\n <ul class=\"space-y-3\">\r\n <li><a href=\"#layanan\" class=\"text-ocean-200 hover:text-white transition-colors\">Pembangunan Rumah dan Ruko<\/a><\/li>\r\n <li><a href=\"#layanan\" class=\"text-ocean-200 hover:text-white transition-colors\">Renovasi Bangunan<\/a><\/li>\r\n <li><a href=\"#layanan\" class=\"text-ocean-200 hover:text-white transition-colors\">Desain Arsitektur<\/a><\/li>\r\n <li><a href=\"#layanan\" class=\"text-ocean-200 hover:text-white transition-colors\">Pekerjaan Sipil<\/a><\/li>\r\n <li><a href=\"#layanan\" class=\"text-ocean-200 hover:text-white transition-colors\">Kontraktor MEP<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-12 pt-8 border-t border-ocean-800 flex flex-col md:flex-row justify-between items-center gap-4\">\r\n <p class=\"text-ocean-300 text-sm\">\r\n 2026 Konstruksi. Seluruh hak cipta dilindungi.\r\n <\/p>\r\n <div class=\"flex gap-6\">\r\n <a href=\"#\" class=\"text-ocean-300 hover:text-white text-sm transition-colors\">Kebijakan Privasi<\/a>\r\n <a href=\"#\" class=\"text-ocean-300 hover:text-white text-sm transition-colors\">Syarat dan Ketentuan<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script>\r\n const mobileMenuBtn = document.getElementById('mobileMenuBtn');\r\n const mobileMenu = document.getElementById('mobileMenu');\r\n const closeMobileMenu = document.getElementById('closeMobileMenu');\r\n const mobileLinks = document.querySelectorAll('.mobile-link');\r\n \r\n function openMenu() {\r\n mobileMenu.classList.add('active');\r\n mobileMenuBtn.setAttribute('aria-expanded', 'true');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n \r\n function closeMenu() {\r\n mobileMenu.classList.remove('active');\r\n mobileMenuBtn.setAttribute('aria-expanded', 'false');\r\n document.body.style.overflow = '';\r\n }\r\n \r\n mobileMenuBtn.addEventListener('click', openMenu);\r\n closeMobileMenu.addEventListener('click', closeMenu);\r\n \r\n mobileLinks.forEach(link => {\r\n link.addEventListener('click', closeMenu);\r\n });\r\n \r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape' && mobileMenu.classList.contains('active')) {\r\n closeMenu();\r\n }\r\n });\r\n \r\n const revealElements = document.querySelectorAll('.reveal');\r\n \r\n const revealObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n }\r\n });\r\n }, {\r\n threshold: 0.1,\r\n rootMargin: '0px 0px -50px 0px'\r\n });\r\n \r\n revealElements.forEach(el => {\r\n revealObserver.observe(el);\r\n });\r\n \r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function (e) {\r\n const href = this.getAttribute('href');\r\n if (href !== '#') {\r\n e.preventDefault();\r\n const target = document.querySelector(href);\r\n if (target) {\r\n target.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }\r\n }\r\n });\r\n });\r\n \r\n const contactForm = document.getElementById('contactForm');\r\n if (contactForm) {\r\n contactForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n \r\n const name = document.getElementById('name').value;\r\n const email = document.getElementById('email').value;\r\n const phone = document.getElementById('phone').value;\r\n const service = document.getElementById('service').value;\r\n const message = document.getElementById('message').value;\r\n \r\n const waMessage = `Halo, saya ingin konsultasi proyek konstruksi.%0A%0ANama: ${encodeURIComponent(name)}%0AEmail: ${encodeURIComponent(email)}%0ATelepon: ${encodeURIComponent(phone)}%0ALayanan: ${encodeURIComponent(service)}%0APesan: ${encodeURIComponent(message)}`;\r\n \r\n window.open(`https:\/\/wa.me\/6281234567890?text=${waMessage}`, '_blank');\r\n \r\n contactForm.reset();\r\n });\r\n }\r\n \r\n const header = document.querySelector('header');\r\n let lastScroll = 0;\r\n \r\n window.addEventListener('scroll', () => {\r\n const currentScroll = window.pageYOffset;\r\n \r\n if (currentScroll > 100) {\r\n header.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.1)';\r\n } else {\r\n header.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.05)';\r\n }\r\n \r\n lastScroll = currentScroll;\r\n });\r\n \r\n const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\r\n \r\n if (prefersReducedMotion.matches) {\r\n document.querySelectorAll('.reveal').forEach(el => {\r\n el.classList.add('active');\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Konstruksi – Membangun Infrastruktur Masa Depan Konstruksi Beranda Layanan Tentang Keunggulan Hubungi Kami Beranda Layanan Tentang Keunggulan Hubungi Kami Jasa Konstruksi Profesional Membangun Infrastruktur Masa Depan dengan Presisi Spesialis pembangunan rumah hunian, gedung komersial, hingga proyek jalan raya. Kami menghadirkan struktur kokoh, aman, dan berkualitas tinggi dengan standar pengerjaan presisi. Konsultasi Gratis Lihat Layanan Dipercaya […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cmdigital.id\/company-profile-2\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cmdigital.id\/company-profile-2\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cmdigital.id\/company-profile-2\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cmdigital.id\/company-profile-2\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cmdigital.id\/company-profile-2\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":40,"href":"https:\/\/cmdigital.id\/company-profile-2\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/cmdigital.id\/company-profile-2\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/cmdigital.id\/company-profile-2\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}