{"id":108,"date":"2025-11-20T17:35:03","date_gmt":"2025-11-20T17:35:03","guid":{"rendered":"https:\/\/lab.rwb.my.id\/bio\/?page_id=108"},"modified":"2026-04-18T14:19:56","modified_gmt":"2026-04-18T14:19:56","slug":"kontak","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/bio\/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\n\n\n \n \n Kontak - Biometrik Urbane<\/title>\n\n <!-- SEO & Meta Tags -->\n <meta name=\"description\" content=\"Hubungi Biometrik Urbane untuk konsultasi gratis mengenai solusi lingkungan urban berbasis biometrik. Tim kami siap membantu mewujudkan proyek Anda.\">\n <meta property=\"og:title\" content=\"Kontak - Biometrik Urbane\">\n <meta property=\"og:description\" content=\"Kirimkan pertanyaan atau ide proyek Anda melalui formulir kontak kami atau hubungi langsung.\">\n <meta property=\"og:url\" content=\"https:\/\/biometrik-urbane.com\/kontak\/\">\n <meta property=\"og:type\" content=\"website\">\n \n <!-- Poppins Font -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <!-- Font Awesome Icons -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n \/* --- GLOBAL STYLES & VARIABLES (SAMA SEPERTI HOMEPAGE) --- *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --primary-color: #00ff88;\n --secondary-color: #00ccff;\n --accent-color: #ff9d5c;\n --dark-bg: #0a0e27;\n --glass-bg: rgba(255, 255, 255, 0.05);\n --glass-border: rgba(255, 255, 255, 0.1);\n --text-light: #ffffff;\n --text-gray: #a8b2d1;\n }\n\n body {\n font-family: 'Poppins', sans-serif;\n background: var(--dark-bg);\n color: var(--text-light);\n overflow-x: hidden;\n position: relative;\n }\n\n \/* --- ANIMATED BACKGROUND (SAMA SEPERTI HOMEPAGE) --- *\/\n .animated-bg {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1629 100%);\n }\n\n .particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 500; \n }\n\n .leaf {\n position: absolute;\n width: 30px;\n height: 30px;\n opacity: 0.7;\n animation: falling 15s infinite linear;\n transform-origin: center center;\n pointer-events: none;\n }\n\n @keyframes falling {\n 0% { transform: translateY(-100vh) rotate(0deg); opacity: 0; }\n 10% { opacity: 0.7; }\n 90% { opacity: 0.7; }\n 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }\n }\n\n .biometric-pattern {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0.03;\n background-image: \n repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 136, 0.1) 2px, rgba(0, 255, 136, 0.1) 4px),\n repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 204, 255, 0.1) 2px, rgba(0, 204, 255, 0.1) 4px);\n animation: pattern-move 10s linear infinite;\n z-index: 0;\n }\n\n @keyframes pattern-move {\n 0% { transform: translate(0, 0); }\n 100% { transform: translate(10px, 10px); }\n }\n \n \/* --- HEADER (SAMA SEPERTI HOMEPAGE) --- *\/\n header {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n padding: 1rem 2rem;\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--glass-border);\n z-index: 1000;\n transition: all 0.3s ease;\n }\n\n header.scrolled {\n padding: 0.7rem 2rem;\n background: rgba(10, 14, 39, 0.95);\n }\n\n .header-container {\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo-section {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .logo-section a {\n display: flex;\n align-items: center;\n gap: 1rem;\n text-decoration: none;\n color: inherit;\n }\n\n .logo {\n width: 50px;\n height: 50px;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 1.5rem;\n animation: pulse 2s infinite;\n overflow: hidden;\n }\n\n .logo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n\n .site-title {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n nav {\n display: flex;\n gap: 2rem;\n }\n\n nav a {\n color: var(--text-gray);\n text-decoration: none;\n transition: all 0.3s ease;\n position: relative;\n padding: 0.5rem 0;\n }\n\n nav a::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--primary-color);\n transition: width 0.3s ease;\n }\n\n nav a:hover { color: var(--text-light); }\n nav a:hover::after { width: 100%; }\n\n .hamburger {\n display: none;\n flex-direction: column;\n cursor: pointer;\n gap: 4px;\n }\n\n .hamburger span {\n width: 25px;\n height: 3px;\n background: var(--primary-color);\n transition: all 0.3s ease;\n }\n\n .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }\n .hamburger.active span:nth-child(2) { opacity: 0; }\n .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }\n \n .mobile-menu-credit {\n display: none;\n }\n\n \/* --- PREMIUM ANIMATION --- *\/\n .fade-in {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n .fade-in.visible {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* --- CONTACT HERO SECTION --- *\/\n .contact-hero {\n min-height: 50vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 7rem 2rem 4rem;\n text-align: center;\n position: relative;\n z-index: 2;\n }\n .contact-hero h1 {\n font-size: clamp(1.6rem, 4.5vw, 3rem);\n margin-bottom: 1.5rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .contact-hero p {\n font-size: 1.2rem;\n color: var(--text-gray);\n max-width: 600px;\n margin: 0 auto;\n }\n\n \/* --- CONTACT MAIN SECTION --- *\/\n .contact-main-section {\n padding: 2rem 2rem 5rem;\n background: rgba(255, 255, 255, 0.02);\n position: relative;\n z-index: 2;\n }\n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n .contact-content {\n display: grid;\n grid-template-columns: 1fr 1.5fr;\n gap: 4rem;\n align-items: start;\n }\n .contact-info {\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n padding: 2.5rem;\n }\n .contact-info h2 {\n font-size: 1.8rem;\n margin-bottom: 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .contact-info-item {\n display: flex;\n align-items: center;\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n .contact-info-item a {\n color: inherit;\n text-decoration: none;\n }\n .contact-info-item i {\n font-size: 1.5rem;\n color: var(--primary-color);\n width: 30px;\n text-align: center;\n }\n .contact-info-item div {\n color: var(--text-light);\n }\n .contact-info-item div h3 {\n font-size: 1.1rem;\n font-weight: 600;\n margin-bottom: 0.2rem;\n }\n .contact-info-item div p {\n color: var(--text-gray);\n font-size: 0.9rem;\n }\n .contact-illustration {\n margin-top: 3rem;\n width: 100%;\n height: 200px;\n }\n .contact-form-wrapper {\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n padding: 2.5rem;\n }\n .contact-form-wrapper h2 {\n font-size: 1.8rem;\n margin-bottom: 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .contact-form {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n }\n .form-group {\n position: relative;\n }\n .form-group input,\n .form-group textarea {\n width: 100%;\n padding: 1rem 1.5rem;\n background: rgba(255, 255, 255, 0.03);\n border: 1px solid var(--glass-border);\n border-radius: 10px;\n color: var(--text-light);\n font-family: 'Poppins', sans-serif;\n font-size: 1rem;\n transition: all 0.3s ease;\n }\n .form-group input:focus,\n .form-group textarea:focus {\n outline: none;\n border-color: var(--primary-color);\n background: rgba(255, 255, 255, 0.05);\n }\n .form-group input.valid {\n border-color: var(--primary-color);\n }\n .form-group input.invalid {\n border-color: #e74c3c; \/* Red for invalid *\/\n }\n .form-group textarea {\n resize: vertical;\n min-height: 150px;\n }\n .form-group label {\n position: absolute;\n left: 1.5rem;\n top: 1rem;\n color: var(--text-gray);\n pointer-events: none;\n transition: all 0.3s ease;\n }\n .form-group input:focus + label,\n .form-group input:not(:placeholder-shown) + label,\n .form-group textarea:focus + label,\n .form-group textarea:not(:placeholder-shown) + label {\n top: -0.7rem;\n left: 0.8rem;\n font-size: 0.8rem;\n background: var(--dark-bg);\n padding: 0 0.5rem;\n color: var(--primary-color);\n }\n .btn-submit {\n padding: 1rem 2.5rem;\n border: none;\n border-radius: 50px;\n font-size: 1.1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--dark-bg);\n width: 100%;\n text-align: center;\n margin-top: 1rem;\n }\n .btn-submit:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3);\n }\n \n \/* --- FAQ SECTION (FITUR BARU) --- *\/\n .faq-section {\n padding: 5rem 2rem;\n background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 204, 255, 0.05));\n position: relative;\n z-index: 2;\n }\n .faq-container {\n max-width: 800px;\n margin: 0 auto;\n }\n .faq-item {\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n border: 1px solid var(--glass-border);\n border-radius: 15px;\n margin-bottom: 1rem;\n overflow: hidden;\n }\n .faq-question {\n width: 100%;\n padding: 1.5rem 2rem;\n background: none;\n border: none;\n color: var(--text-light);\n font-family: 'Poppins', sans-serif;\n font-size: 1.1rem;\n font-weight: 600;\n text-align: left;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all 0.3s ease;\n }\n .faq-question:hover {\n color: var(--primary-color);\n }\n .faq-question i {\n transition: transform 0.3s ease;\n }\n .faq-question.active i {\n transform: rotate(180deg);\n }\n .faq-answer {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s ease-out, padding 0.4s ease-out;\n padding: 0 2rem;\n color: var(--text-gray);\n line-height: 1.7;\n }\n .faq-answer.active {\n max-height: 500px; \/* A large enough value *\/\n padding: 0 2rem 1.5rem 2rem;\n }\n\n \/* --- FOOTER (SAMA SEPERTI HOMEPAGE) --- *\/\n footer { padding: 3rem 2rem 1.5rem; background: rgba(10, 14, 39, 0.95); border-top: 1px solid var(--glass-border); position: relative; z-index: 2; }\n .footer-content { max-width: 1200px; margin: 0 auto; text-align: center; }\n .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }\n .social-links a { width: 40px; height: 40px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-gray); transition: all 0.3s ease; }\n .social-links a:hover { background: var(--primary-color); color: var(--dark-bg); transform: translateY(-3px); }\n .footer-text { color: var(--text-gray); margin-bottom: 1rem; }\n .credit { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); text-decoration: none; animation: neon-blink 2s infinite; display: inline-block; }\n @keyframes neon-blink { 0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.4); opacity: 1; } 50% { text-shadow: 0 0 2px rgba(255, 255, 255, 0.4), 0 0 4px rgba(255, 255, 255, 0.3), 0 0 6px rgba(255, 255, 255, 0.2); opacity: 0.8; } }\n\n \/* --- MOBILE RESPONSIVE (SAMA SEPERTI HOMEPAGE + PENAMBAHAN) --- *\/\n @media (max-width: 768px) {\n .mobile-menu-credit {\n display: block;\n font-size: 0.75rem;\n color: rgba(255, 255, 255, 0.6);\n text-decoration: none;\n animation: neon-blink 2s infinite;\n text-align: center;\n margin-top: 1rem;\n }\n nav { \n position: fixed; \n top: 70px; \n left: -100%; \n width: 100%; \n height: auto;\n max-height: calc(100vh - 70px);\n overflow-y: auto;\n background: linear-gradient(135deg, #0a0e27, #0d2818);\n backdrop-filter: blur(10px); \n flex-direction: column; \n padding: 1rem 0; \n gap: 0.5rem;\n transition: left 0.3s ease; \n justify-content: flex-start;\n }\n nav.active { left: 0; }\n nav a { padding: 0.8rem 2rem; width: 100%; }\n .hamburger { display: flex; }\n .site-title { font-size: 1.2rem; }\n\n .contact-hero { min-height: 40vh; padding-top: 6rem; padding-bottom: 2rem; }\n .contact-hero h1 { font-size: 1.6rem; }\n .contact-hero p { font-size: 1rem; }\n\n .contact-main-section, .faq-section { padding: 1rem 1rem 3rem; }\n .contact-content { grid-template-columns: 1fr; gap: 2rem; }\n .contact-info, .contact-form-wrapper { padding: 1.5rem; }\n .contact-info h2, .contact-form-wrapper h2 { font-size: 1.4rem; }\n .contact-info-item { margin-bottom: 1.5rem; }\n .contact-illustration { margin-top: 2rem; height: 150px; }\n\n .faq-question { font-size: 1rem; padding: 1.2rem 1.5rem; }\n .faq-answer.active { padding: 0 1.5rem 1.2rem 1.5rem; }\n \n footer { padding: 2rem 1rem 1rem; }\n .footer-text { font-size: 0.85rem; }\n .credit { font-size: 0.75rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- Animated Background (Sama seperti Homepage) -->\n <div class=\"animated-bg\">\n <div class=\"particles\" id=\"particles\"><\/div>\n <div class=\"biometric-pattern\"><\/div>\n <\/div>\n\n <!-- Header (Sama seperti Homepage) -->\n <header id=\"header\">\n <div class=\"header-container\">\n <div class=\"logo-section\">\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/\">\n <div class=\"logo\">\n <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/bio\/wp-content\/uploads\/sites\/3\/2025\/11\/Logo-Rudi-Web-Builder.png\" alt=\"Biometrik Urbane Logo\">\n <\/div>\n <div class=\"site-title\">Biometrik Urbane<\/div>\n <\/a>\n <\/div>\n <nav id=\"nav\">\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/\">Beranda<\/a>\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/profile\/\">Profile<\/a>\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/teknologi\/\">Teknologi<\/a>\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/studi-kasus\/\">Studi Kasus<\/a>\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/kontak\/\">Kontak<\/a>\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"mobile-menu-credit\">\ud83d\udca1Proudly\ud83d\udc23 By Rudi Web Builder<\/a>\n <\/nav>\n <div class=\"hamburger\" id=\"hamburger\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/div>\n <\/header>\n\n <main>\n <!-- Contact Hero Section -->\n <section class=\"contact-hero\">\n <div class=\"container fade-in\">\n <h1>Siap Memulai Proyek Anda?<\/h1>\n <p>Hubungi kami hari ini untuk konsultasi gratis dan temukan bagaimana kami dapat membantu mewujudkan visi lingkungan urban Anda.<\/p>\n <\/div>\n <\/section>\n\n <!-- Contact Main Section -->\n <section class=\"contact-main-section\">\n <div class=\"container fade-in\">\n <div class=\"contact-content\">\n <!-- Contact Info & Illustration -->\n <div class=\"contact-info\">\n <h2>Hubungi Kami<\/h2>\n <div class=\"contact-info-item\">\n <i class=\"fas fa-map-marker-alt\"><\/i>\n <div>\n <h3>Alamat<\/h3>\n <p>Jl. Teknologi No. 123, Jakarta Selatan, 12345<\/p>\n <\/div>\n <\/div>\n <div class=\"contact-info-item\">\n <i class=\"fab fa-whatsapp\"><\/i>\n <div>\n <h3>WhatsApp<\/h3>\n <p><a href=\"https:\/\/wa.me\/6281227008020\" target=\"_blank\">+62 812-2700-8020<\/a><\/p>\n <\/div>\n <\/div>\n <div class=\"contact-info-item\">\n <i class=\"fas fa-envelope\"><\/i>\n <div>\n <h3>Email<\/h3>\n <p>info@biometrik-urbane.com<\/p>\n <\/div>\n <\/div>\n <!-- SVG Illustration -->\n <svg class=\"contact-illustration\" viewBox=\"0 0 400 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"50\" cy=\"50\" r=\"30\" fill=\"var(--glass-border)\"\/>\n <circle cx=\"350\" cy=\"150\" r=\"30\" fill=\"var(--glass-border)\"\/>\n <path d=\"M 80 50 Q 200 10 320 150\" stroke=\"var(--primary-color)\" stroke-width=\"2\" fill=\"none\" stroke-dasharray=\"5,5\" opacity=\"0.5\"\/>\n <rect x=\"180\" y=\"70\" width=\"40\" height=\"40\" rx=\"10\" fill=\"var(--glass-bg)\" stroke=\"var(--glass-border)\" stroke-width=\"1\"\/>\n <circle cx=\"200\" cy=\"90\" r=\"5\" fill=\"var(--primary-color)\"\/>\n <path d=\"M 195 95 L 200 100 L 210 85\" stroke=\"var(--secondary-color)\" stroke-width=\"2\" fill=\"none\"\/>\n <\/svg>\n <\/div>\n\n <!-- Contact Form -->\n <div class=\"contact-form-wrapper\">\n <h2>Kirim Pesan<\/h2>\n <form class=\"contact-form\" id=\"contact-form\">\n <div class=\"form-group\">\n <input type=\"text\" id=\"name\" name=\"name\" placeholder=\" \" required>\n <label for=\"name\">Nama Lengkap<\/label>\n <\/div>\n <div class=\"form-group\">\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\" \" required>\n <label for=\"email\">Email<\/label>\n <\/div>\n <div class=\"form-group\">\n <input type=\"text\" id=\"subject\" name=\"subject\" placeholder=\" \" required>\n <label for=\"subject\">Subjek<\/label>\n <\/div>\n <div class=\"form-group\">\n <textarea id=\"message\" name=\"message\" placeholder=\" \" required><\/textarea>\n <label for=\"message\">Pesan Anda<\/label>\n <\/div>\n <button type=\"submit\" class=\"btn-submit\">Kirim Pesan<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- FAQ Section -->\n <section class=\"faq-section\">\n <div class=\"container fade-in\">\n <h2 class=\"section-title\">Pertanyaan yang Sering Diajukan<\/h2>\n <div class=\"faq-container\">\n <div class=\"faq-item\">\n <button class=\"faq-question\">Apa itu teknologi biometrik dalam konteks lingkungan?<\/button>\n <div class=\"faq-answer\">\n <p>Teknologi biometrik lingkungan adalah penggunaan identifikasi unik organisme (seperti DNA, sidik jari daun, atau suara burung) untuk memantau, menganalisis, dan mengelola kesehatan ekosistem. Ini memungkinkan kami mendapatkan data yang sangat akurat tentang keanekaragaman hayati dan kualitas lingkungan.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <button class=\"faq-question\">Berapa lama waktu yang dibutuhkan untuk sebuah proyek?<\/button>\n <div class=\"faq-answer\">\n <p>Durasi proyek sangat bervariasi tergantung pada skala dan kompleksitasnya. Proyek analisis dasar mungkin memakan waktu beberapa minggu, sementara implementasi skala besar seperti restorasi sungai bisa memakan waktu beberapa tahun. Kami akan memberikan estimasi waktu yang jelas setelah fase konsultasi awal.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <button class=\"faq-question\">Apakah layanan Anda tersedia di luar Jakarta?<\/button>\n <div class=\"faq-answer\">\n <p>Tentu saja. Meskipun basis kami di Jakarta, kami telah mengerjakan proyek di berbagai kota di seluruh Indonesia. Tim kami siap untuk bepergian dan berkolaborasi dengan mitra lokal untuk memberikan solusi terbaik di mana pun Anda berada.<\/p>\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <button class=\"faq-question\">Bagaimana saya bisa memulai konsultasi dengan Biometrik Urbane?<\/button>\n <div class=\"faq-answer\">\n <p>Cara termudah adalah dengan mengisi formulir kontak di halaman ini atau menghubungi kami langsung melalui WhatsApp. Tim kami akan merespons secepatnya untuk menjadwalkan sesi konsultasi awal dan memahami kebutuhan spesifik Anda.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <!-- Footer (Sama seperti Homepage) -->\n <footer>\n <div class=\"footer-content\">\n <div class=\"social-links\">\n <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\n <\/div>\n <p class=\"footer-text\">\u00a9 <span id=\"year\"><\/span> Biometrik Urbane. All rights reserved.<\/p>\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"credit\">\ud83d\udca1Proudly\ud83d\udc23 By Rudi Web Builder<\/a>\n <\/div>\n <\/footer>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ --- Fungsi dari Homepage ---\n function createLeaves() {\n const particlesContainer = document.getElementById('particles');\n const leafCount = 40;\n const leafSymbols = ['\ud83c\udf42', '\ud83c\udf41', '\ud83c\udf43', '\ud83c\udf40'];\n particlesContainer.innerHTML = '';\n for (let i = 0; i < leafCount; i++) {\n const leaf = document.createElement('div');\n leaf.className = 'leaf';\n leaf.textContent = leafSymbols[Math.floor(Math.random() * leafSymbols.length)];\n leaf.style.left = Math.random() * 100 + '%';\n const size = 15 + Math.random() * 25;\n leaf.style.fontSize = size + 'px';\n const duration = 10 + Math.random() * 15;\n const delay = Math.random() * 15;\n leaf.style.animationDuration = duration + 's';\n leaf.style.animationDelay = delay + 's';\n leaf.style.opacity = 0.2 + Math.random() * 0.6;\n particlesContainer.appendChild(leaf);\n }\n }\n createLeaves();\n setInterval(createLeaves, 30000);\n\n const header = document.getElementById('header');\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n header.classList.add('scrolled');\n } else {\n header.classList.remove('scrolled');\n }\n });\n\n const hamburger = document.getElementById('hamburger');\n const nav = document.getElementById('nav');\n hamburger.addEventListener('click', () => {\n hamburger.classList.toggle('active');\n nav.classList.toggle('active');\n });\n document.querySelectorAll('nav a').forEach(link => {\n link.addEventListener('click', () => {\n if (window.innerWidth <= 768) {\n hamburger.classList.remove('active');\n nav.classList.remove('active');\n }\n });\n });\n\n document.getElementById('year').textContent = new Date().getFullYear();\n\n \/\/ --- Fungsi Khusus Halaman Kontak ---\n\n \/\/ Fade-in Animation on Scroll\n const faders = document.querySelectorAll('.fade-in');\n const appearOptions = { threshold: 0.1, rootMargin: \"0px 0px -50px 0px\" };\n const appearOnScroll = new IntersectionObserver(function(entries, observer) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) return;\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n });\n }, appearOptions);\n faders.forEach(fader => appearOnScroll.observe(fader));\n\n \/\/ FAQ Accordion\n const faqQuestions = document.querySelectorAll('.faq-question');\n faqQuestions.forEach(question => {\n question.addEventListener('click', () => {\n const answer = question.nextElementSibling;\n const isActive = question.classList.contains('active');\n\n \/\/ Close all other answers\n faqQuestions.forEach(q => {\n q.classList.remove('active');\n q.nextElementSibling.classList.remove('active');\n });\n\n \/\/ Toggle current answer\n if (!isActive) {\n question.classList.add('active');\n answer.classList.add('active');\n }\n });\n });\n\n \/\/ Form Submission (mailto)\n const contactForm = document.getElementById('contact-form');\n contactForm.addEventListener('submit', (e) => {\n e.preventDefault(); \/\/ Prevent default form submission\n\n const name = document.getElementById('name').value;\n const email = document.getElementById('email').value;\n const subject = document.getElementById('subject').value;\n const message = document.getElementById('message').value;\n\n const mailtoLink = `mailto:info@biometrik-urbane.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(`Nama: ${name}\\nEmail: ${email}\\n\\nPesan:\\n${message}`)}`;\n \n window.location.href = mailtoLink;\n });\n\n });\n <\/script>\n<\/body>\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 – Biometrik Urbane Biometrik Urbane Beranda Profile Teknologi Studi Kasus Kontak \ud83d\udca1Proudly\ud83d\udc23 By Rudi Web Builder Siap Memulai Proyek Anda? Hubungi kami hari ini untuk konsultasi gratis dan temukan bagaimana kami dapat membantu mewujudkan visi lingkungan urban Anda. Hubungi Kami Alamat Jl. Teknologi No. 123, Jakarta Selatan, 12345 WhatsApp +62 812-2700-8020 Email info@biometrik-urbane.com Kirim […]<\/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-108","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":4,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/108\/revisions"}],"predecessor-version":[{"id":145,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/108\/revisions\/145"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/media?parent=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}