{"id":158,"date":"2025-11-19T17:04:39","date_gmt":"2025-11-19T17:04:39","guid":{"rendered":"https:\/\/lab.rwb.my.id\/web\/?page_id=158"},"modified":"2025-11-19T17:43:10","modified_gmt":"2025-11-19T17:43:10","slug":"kontak","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/web\/kontak\/","title":{"rendered":"Kontak"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\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 Kontak - ValveTech Solutions<\/title>\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=Poppins:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background: #000814;\r\n color: #ffffff;\r\n overflow-x: hidden;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Holographic Background *\/\r\n .holographic-bg {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n background: linear-gradient(45deg, #000814, #001d3d, #000814);\r\n overflow: hidden;\r\n }\r\n\r\n .holographic-particles {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .particle {\r\n position: absolute;\r\n width: 4px;\r\n height: 4px;\r\n background: radial-gradient(circle, rgba(0, 255, 255, 0.8), transparent);\r\n border-radius: 50%;\r\n animation: particleFloat 6s ease-in-out infinite;\r\n }\r\n\r\n @keyframes particleFloat {\r\n 0%, 100% { \r\n transform: translateY(0) scale(1);\r\n opacity: 0.8;\r\n }\r\n 50% { \r\n transform: translateY(-20px) scale(1.5);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* Content Container *\/\r\n .content-wrapper {\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n \/* Header Styles *\/\r\n .header {\r\n background: rgba(0, 8, 20, 0.9);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid rgba(0, 255, 255, 0.3);\r\n position: sticky;\r\n top: 0;\r\n z-index: 1000;\r\n box-shadow: 0 4px 30px rgba(0, 255, 255, 0.1);\r\n }\r\n\r\n .header-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 70px;\r\n }\r\n\r\n .logo-section {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .logo-img {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 10px;\r\n object-fit: cover;\r\n border: 2px solid rgba(0, 255, 255, 0.5);\r\n box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);\r\n }\r\n\r\n .company-name {\r\n font-size: clamp(16px, 2vw, 22px);\r\n font-weight: 600;\r\n background: linear-gradient(135deg, #00ffff, #ff00ff);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);\r\n }\r\n\r\n .nav-menu {\r\n display: none;\r\n gap: 40px;\r\n }\r\n\r\n .nav-menu a {\r\n color: #e0e0e0;\r\n text-decoration: none;\r\n transition: all 0.3s;\r\n font-size: 14px;\r\n position: relative;\r\n }\r\n\r\n .nav-menu a:hover {\r\n color: #00ffff;\r\n text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);\r\n }\r\n\r\n .nav-menu a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -5px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, #00ffff, #ff00ff);\r\n transition: width 0.3s;\r\n }\r\n\r\n .nav-menu a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n .cta-button {\r\n background: linear-gradient(135deg, #00ffff, #0088cc);\r\n color: #000814;\r\n border: none;\r\n padding: 12px 24px;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n font-size: 14px;\r\n box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);\r\n }\r\n\r\n .cta-button:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 30px rgba(0, 255, 255, 0.5);\r\n background: linear-gradient(135deg, #00ffff, #00aaff);\r\n }\r\n\r\n .mobile-menu-btn {\r\n display: block;\r\n background: none;\r\n border: 2px solid rgba(0, 255, 255, 0.5);\r\n color: #00ffff;\r\n cursor: pointer;\r\n padding: 10px;\r\n border-radius: 8px;\r\n transition: all 0.3s;\r\n }\r\n\r\n .mobile-menu-btn:hover {\r\n background: rgba(0, 255, 255, 0.1);\r\n box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);\r\n }\r\n\r\n .mobile-menu {\r\n display: none;\r\n background: rgba(0, 8, 20, 0.95);\r\n backdrop-filter: blur(20px);\r\n border-top: 1px solid rgba(0, 255, 255, 0.3);\r\n box-shadow: 0 10px 40px rgba(0, 255, 255, 0.2);\r\n }\r\n\r\n .mobile-menu.active {\r\n display: block;\r\n }\r\n\r\n .mobile-menu a {\r\n display: block;\r\n padding: 20px;\r\n color: #e0e0e0;\r\n text-decoration: none;\r\n border-bottom: 1px solid rgba(0, 255, 255, 0.1);\r\n transition: all 0.3s;\r\n }\r\n\r\n .mobile-menu a:hover {\r\n color: #00ffff;\r\n background: rgba(0, 255, 255, 0.05);\r\n text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);\r\n }\r\n\r\n \/* Hero Section for Contact Page *\/\r\n .hero-contact {\r\n min-height: 60vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 60px 20px;\r\n text-align: center;\r\n position: relative;\r\n }\r\n\r\n .hero-contact::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: radial-gradient(circle at center, rgba(0, 255, 255, 0.05), transparent);\r\n animation: heroPulse 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes heroPulse {\r\n 0%, 100% { opacity: 0.3; }\r\n 50% { opacity: 0.7; }\r\n }\r\n\r\n .hero-contact-content {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .hero-contact-title {\r\n font-size: clamp(24px, 4vw, 40px);\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n line-height: 1.1;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .hero-contact-title .gradient-text {\r\n background: linear-gradient(135deg, #00ffff, #ff00ff, #00ff00);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-shadow: 0 0 50px rgba(0, 255, 255, 0.5);\r\n animation: textShimmer 3s ease-in-out infinite;\r\n }\r\n\r\n @keyframes textShimmer {\r\n 0%, 100% { \r\n filter: hue-rotate(0deg) brightness(1);\r\n }\r\n 50% { \r\n filter: hue-rotate(30deg) brightness(1.2);\r\n }\r\n }\r\n\r\n .hero-contact-subtitle {\r\n font-size: clamp(14px, 2vw, 18px);\r\n color: #e0e0e0;\r\n line-height: 1.6;\r\n text-shadow: 0 0 20px rgba(0, 255, 255, 0.3);\r\n }\r\n\r\n \/* Contact Section *\/\r\n .contact-section {\r\n padding: 100px 20px;\r\n background: rgba(0, 8, 20, 0.8);\r\n position: relative;\r\n }\r\n\r\n .contact-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 60px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .contact-form-wrapper, .contact-info-wrapper {\r\n background: rgba(0, 255, 255, 0.05);\r\n backdrop-filter: blur(15px);\r\n border: 1px solid rgba(0, 255, 255, 0.2);\r\n border-radius: 20px;\r\n padding: 40px;\r\n transition: all 0.4s;\r\n }\r\n \r\n .contact-form-wrapper:hover, .contact-info-wrapper:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 40px rgba(0, 255, 255, 0.3);\r\n border-color: rgba(0, 255, 255, 0.4);\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(22px, 3.5vw, 28px);\r\n font-weight: 700;\r\n margin-bottom: 30px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .section-title .gradient-text {\r\n background: linear-gradient(135deg, #00ffff, #ff00ff, #00ff00);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-shadow: 0 0 50px rgba(0, 255, 255, 0.5);\r\n animation: titleShimmer 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes titleShimmer {\r\n 0%, 100% { \r\n filter: hue-rotate(0deg) brightness(1);\r\n }\r\n 25% { \r\n filter: hue-rotate(90deg) brightness(1.1);\r\n }\r\n 50% { \r\n filter: hue-rotate(180deg) brightness(1);\r\n }\r\n 75% { \r\n filter: hue-rotate(270deg) brightness(1.1);\r\n }\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 25px;\r\n }\r\n\r\n .form-group label {\r\n display: block;\r\n margin-bottom: 10px;\r\n font-weight: 500;\r\n color: #e0e0e0;\r\n }\r\n\r\n .form-group input,\r\n .form-group textarea {\r\n width: 100%;\r\n padding: 15px;\r\n background: rgba(0, 8, 20, 0.5);\r\n border: 1px solid rgba(0, 255, 255, 0.3);\r\n border-radius: 8px;\r\n color: #ffffff;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 14px;\r\n transition: all 0.3s;\r\n }\r\n\r\n .form-group input::placeholder,\r\n .form-group textarea::placeholder {\r\n color: rgba(255, 255, 255, 0.4);\r\n }\r\n\r\n .form-group input:focus,\r\n .form-group textarea:focus {\r\n outline: none;\r\n border-color: #00ffff;\r\n box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);\r\n }\r\n\r\n .btn-submit {\r\n background: linear-gradient(135deg, #00ffff, #0088cc);\r\n color: #000814;\r\n border: none;\r\n padding: 15px 30px;\r\n border-radius: 10px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n font-size: 16px;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n box-shadow: 0 6px 30px rgba(0, 255, 255, 0.4);\r\n width: 100%;\r\n }\r\n\r\n .btn-submit:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 10px 40px rgba(0, 255, 255, 0.6);\r\n background: linear-gradient(135deg, #00ffff, #00aaff);\r\n }\r\n\r\n .info-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 20px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .info-icon {\r\n width: 50px;\r\n height: 50px;\r\n background: linear-gradient(135deg, #00ffff, #0088cc);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n }\r\n\r\n .info-icon svg {\r\n width: 24px;\r\n height: 24px;\r\n stroke: #000814;\r\n stroke-width: 2;\r\n }\r\n\r\n .info-text h3 {\r\n font-size: 18px;\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n color: #ffffff;\r\n }\r\n\r\n .info-text p {\r\n font-size: 14px;\r\n color: #e0e0e0;\r\n line-height: 1.6;\r\n }\r\n \r\n \/* New style for links inside info text *\/\r\n .info-text p a {\r\n color: #00ffff;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .info-text p a:hover {\r\n text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);\r\n }\r\n\r\n .map-container {\r\n margin-top: 30px;\r\n border-radius: 15px;\r\n overflow: hidden;\r\n border: 1px solid rgba(0, 255, 255, 0.3);\r\n }\r\n\r\n .map-container iframe {\r\n width: 100%;\r\n height: 300px;\r\n border: 0;\r\n }\r\n\r\n \/* Premium Footer *\/\r\n .premium-footer {\r\n background: rgba(0, 8, 20, 0.95);\r\n backdrop-filter: blur(20px);\r\n border-top: 1px solid rgba(0, 255, 255, 0.3);\r\n padding: 30px 20px;\r\n position: relative;\r\n box-shadow: 0 -10px 40px rgba(0, 255, 255, 0.2);\r\n }\r\n\r\n .premium-footer::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: linear-gradient(45deg, rgba(0, 255, 255, 0.05), rgba(255, 0, 255, 0.05));\r\n animation: footerGlow 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes footerGlow {\r\n 0%, 100% { opacity: 0.3; }\r\n 50% { opacity: 0.7; }\r\n }\r\n\r\n .footer-content {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 15px;\r\n text-align: center;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .copyright {\r\n color: #e0e0e0;\r\n font-size: 14px;\r\n text-shadow: 0 0 20px rgba(0, 255, 255, 0.3);\r\n }\r\n\r\n .neon-link {\r\n color: #ffffff;\r\n text-decoration: none;\r\n transition: all 0.3s;\r\n animation: neonPulse 2s ease-in-out infinite;\r\n font-weight: 500;\r\n font-size: 14px;\r\n text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n @keyframes neonPulse {\r\n 0%, 100% { \r\n opacity: 1;\r\n text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),\r\n 0 0 40px rgba(255, 255, 255, 0.6),\r\n 0 0 60px rgba(255, 255, 255, 0.4);\r\n }\r\n 50% { \r\n opacity: 0.8;\r\n text-shadow: 0 0 10px rgba(255, 255, 255, 0.5),\r\n 0 0 20px rgba(255, 255, 255, 0.3),\r\n 0 0 30px rgba(255, 255, 255, 0.2);\r\n }\r\n }\r\n\r\n .neon-link:hover {\r\n color: #00ffff;\r\n animation: none;\r\n text-shadow: 0 0 30px rgba(0, 255, 255, 0.8);\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (min-width: 768px) {\r\n .nav-menu {\r\n display: flex;\r\n }\r\n\r\n .mobile-menu-btn {\r\n display: none;\r\n }\r\n\r\n .contact-container {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n\r\n .footer-content {\r\n flex-direction: row;\r\n justify-content: space-between;\r\n }\r\n }\r\n \r\n \/* Mobile Specific Adjustments *\/\r\n @media (max-width: 767px) {\r\n \/* Header adjustments *\/\r\n .header-container .cta-button {\r\n display: none;\r\n }\r\n \r\n \/* Hero section adjustments *\/\r\n .hero-contact {\r\n padding: 20px 20px;\r\n min-height: 50vh;\r\n }\r\n \r\n \/* Contact section adjustments *\/\r\n .contact-section {\r\n padding: 60px 20px;\r\n }\r\n \r\n .contact-form-wrapper, .contact-info-wrapper {\r\n padding: 30px 20px;\r\n }\r\n \r\n \/* Footer adjustments *\/\r\n .copyright {\r\n font-size: 12px;\r\n }\r\n \r\n .neon-link {\r\n font-size: 12px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Holographic Background -->\r\n <div class=\"holographic-bg\">\r\n <div class=\"holographic-particles\" id=\"particles\"><\/div>\r\n <\/div>\r\n\r\n <!-- Main Content -->\r\n <div class=\"content-wrapper\">\r\n <!-- Header -->\r\n <header class=\"header\">\r\n <div class=\"header-container\">\r\n <a href=\"https:\/\/lab.rwb.my.id\/web\/\" class=\"logo-section\">\r\n <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/web\/wp-content\/uploads\/sites\/2\/2025\/11\/Rudi-Web-Builder.png\" alt=\"Company Logo\" class=\"logo-img\" id=\"logoImg\">\r\n <span class=\"company-name\" id=\"companyName\">ValveTech Solutions<\/span>\r\n <\/a>\r\n \r\n <nav class=\"nav-menu\">\r\n <a href=\"https:\/\/lab.rwb.my.id\/web\/\">Beranda<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/web\/tentang\/\">Tentang<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/web\/produk\/\">Produk<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/web\/solusi\/\">Solusi<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/web\/kontak\/\">Kontak<\/a>\r\n <\/nav>\r\n\r\n <button class=\"cta-button\">Hubungi Kami<\/button>\r\n\r\n <button class=\"mobile-menu-btn\" id=\"mobileMenuBtn\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line>\r\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"><\/line>\r\n <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"><\/line>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"mobile-menu\" id=\"mobileMenu\">\r\n <a href=\"https:\/\/lab.rwb.my.id\/web\/\">Beranda<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/web\/tentang\/\">Tentang<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/web\/produk\/\">Produk<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/web\/solusi\/\">Solusi<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/web\/kontak\/\">Kontak<\/a>\r\n <div style=\"padding: 20px;\">\r\n <button class=\"cta-button\" style=\"width: 100%;\">Hubungi Kami<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- Hero Section -->\r\n <section class=\"hero-contact\">\r\n <div class=\"hero-contact-content\">\r\n <h1 class=\"hero-contact-title\">\r\n <span class=\"gradient-text\">Hubungi Kami<\/span>\r\n <\/h1>\r\n <p class=\"hero-contact-subtitle\">\r\n Siap untuk memulai proyek Anda? Tim ahli kami siap membantu. Hubungi kami hari ini untuk konsultasi teknis, penawaran harga, atau informasi lebih lanjut tentang solusi valve terbaik untuk kebutuhan Anda.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Contact Section -->\r\n <section class=\"contact-section\">\r\n <div class=\"contact-container\">\r\n <div class=\"contact-form-wrapper\">\r\n <h2 class=\"section-title\">\r\n <span class=\"gradient-text\">Kirim Pesan<\/span>\r\n <\/h2>\r\n <!-- Form diubah menjadi div untuk mencegah submit default -->\r\n <div id=\"contactForm\">\r\n <div class=\"form-group\">\r\n <label for=\"name\">Nama Lengkap<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"John Doe\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"email\">Email<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"john.doe@example.com\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"subject\">Subjek<\/label>\r\n <input type=\"text\" id=\"subject\" name=\"subject\" placeholder=\"Konsultasi Produk\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"message\">Pesan Anda<\/label>\r\n <textarea id=\"message\" name=\"message\" rows=\"6\" placeholder=\"Jelaskan kebutuhan Anda...\" required><\/textarea>\r\n <\/div>\r\n <!-- Tombol diubah dari type=\"submit\" menjadi type=\"button\" -->\r\n <button type=\"button\" id=\"submitBtn\" class=\"btn-submit\">Kirim Pesan<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-info-wrapper\">\r\n <h2 class=\"section-title\">\r\n <span class=\"gradient-text\">Informasi Kontak<\/span>\r\n <\/h2>\r\n \r\n <div class=\"info-item\">\r\n <div class=\"info-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/>\r\n <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"info-text\">\r\n <h3>Alamat<\/h3>\r\n <p>Jl. Industri Selatan No. 123, Jakarta, Indonesia 12345<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"info-item\">\r\n <div class=\"info-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81-.7A2 2 0 0 1 22 16.92z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"info-text\">\r\n <h3>WhatsApp<\/h3>\r\n <p><a href=\"https:\/\/wa.me\/628123456789\" target=\"_blank\" rel=\"noopener noreferrer\">Hubungi via WhatsApp<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"info-item\">\r\n <div class=\"info-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/>\r\n <polyline points=\"22,6 12,13 2,6\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"info-text\">\r\n <h3>Email<\/h3>\r\n <p><a href=\"mailto:info@valvetechsolutions.com\">info@valvetechsolutions.com<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"map-container\">\r\n <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3966.521260322283!2d106.8195613507864!3d-6.194741395493371!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5390917b759%3A0xb610f5e7f9b6c9e!2sJakarta!5e0!3m2!1sen!2sid!4v1584875743115!5m2!1sen!2sid\" allowfullscreen=\"\" aria-hidden=\"false\" tabindex=\"0\"><\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Premium Footer -->\r\n <footer class=\"premium-footer\">\r\n <div class=\"footer-content\">\r\n <div class=\"copyright\" id=\"copyright\">\r\n \u00a9 2024 ValveTech Solutions. All rights reserved.\r\n <\/div>\r\n \r\n <div>\r\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"neon-link\">\r\n \ud83d\udca1Proudly\ud83d\udc23By Rudi Web Builder\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Holographic Particles\r\n function createParticles() {\r\n const particlesContainer = document.getElementById('particles');\r\n const particleCount = 50;\r\n \r\n for (let i = 0; i < particleCount; i++) {\r\n const particle = document.createElement('div');\r\n particle.className = 'particle';\r\n particle.style.left = Math.random() * 100 + '%';\r\n particle.style.top = Math.random() * 100 + '%';\r\n particle.style.animationDelay = Math.random() * 6 + 's';\r\n particle.style.animationDuration = (4 + Math.random() * 4) + 's';\r\n particlesContainer.appendChild(particle);\r\n }\r\n }\r\n\r\n \/\/ Mobile Menu Toggle\r\n const mobileMenuBtn = document.getElementById('mobileMenuBtn');\r\n const mobileMenu = document.getElementById('mobileMenu');\r\n \r\n mobileMenuBtn.addEventListener('click', () => {\r\n mobileMenu.classList.toggle('active');\r\n });\r\n\r\n \/\/ Close mobile menu when clicking on links\r\n const mobileLinks = mobileMenu.querySelectorAll('a');\r\n mobileLinks.forEach(link => {\r\n link.addEventListener('click', () => {\r\n mobileMenu.classList.remove('active');\r\n });\r\n });\r\n\r\n \/\/ --- SCRIPT BARU UNTUK FORM MAILTO ---\r\n const submitBtn = document.getElementById('submitBtn');\r\n\r\n submitBtn.addEventListener('click', function() {\r\n \/\/ Ambil nilai dari setiap field\r\n const name = document.getElementById('name').value;\r\n const email = document.getElementById('email').value;\r\n const subject = document.getElementById('subject').value;\r\n const message = document.getElementById('message').value;\r\n\r\n \/\/ Validasi sederhana\r\n if (!name || !email || !subject || !message) {\r\n alert('Mohon isi semua field yang diperlukan.');\r\n return;\r\n }\r\n\r\n \/\/ Email tujuan\r\n const emailTo = 'info@valvetechsolutions.com';\r\n\r\n \/\/ Buat body email dengan baris baru yang benar (\\n)\r\n const emailBody = `Nama: ${name}\\nEmail: ${email}\\n\\n${message}`;\r\n\r\n \/\/ Encode semua parameter untuk memastikan aman di URL\r\n const encodedSubject = encodeURIComponent(subject);\r\n const encodedBody = encodeURIComponent(emailBody);\r\n\r\n \/\/ Buat link mailto\r\n const mailtoLink = `mailto:${emailTo}?subject=${encodedSubject}&body=${encodedBody}`;\r\n\r\n \/\/ Arahkan browser ke link mailto\r\n window.location.href = mailtoLink;\r\n });\r\n \/\/ --- AKHIR SCRIPT BARU ---\r\n\r\n\r\n \/\/ Script to pre-fill the contact form from URL parameters\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const subjectParam = urlParams.get('subject');\r\n \r\n if (subjectParam) {\r\n const subjectField = document.getElementById('subject');\r\n if (subjectField) {\r\n subjectField.value = decodeURIComponent(subjectParam);\r\n }\r\n }\r\n\r\n\r\n \/\/ Update copyright year\r\n const currentYear = new Date().getFullYear();\r\n const copyrightElement = document.getElementById('copyright');\r\n const companyNameElement = document.getElementById('companyName');\r\n \r\n if (copyrightElement) {\r\n copyrightElement.textContent = `\u00a9 ${currentYear} ${companyNameElement.textContent}. All rights reserved.`;\r\n }\r\n\r\n \/\/ Initialize particles\r\n createParticles();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\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>Kontak – ValveTech Solutions ValveTech Solutions Beranda Tentang Produk Solusi Kontak Hubungi Kami Beranda Tentang Produk Solusi Kontak Hubungi Kami Hubungi Kami Siap untuk memulai proyek Anda? Tim ahli kami siap membantu. Hubungi kami hari ini untuk konsultasi teknis, penawaran harga, atau informasi lebih lanjut tentang solusi valve terbaik untuk kebutuhan Anda. Kirim Pesan Nama […]<\/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-158","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/web\/wp-json\/wp\/v2\/pages\/158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/web\/wp-json\/wp\/v2\/comments?post=158"}],"version-history":[{"count":19,"href":"https:\/\/lab.rwb.my.id\/web\/wp-json\/wp\/v2\/pages\/158\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/lab.rwb.my.id\/web\/wp-json\/wp\/v2\/pages\/158\/revisions\/192"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/web\/wp-json\/wp\/v2\/media?parent=158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}