{"id":97,"date":"2025-11-20T17:32:51","date_gmt":"2025-11-20T17:32:51","guid":{"rendered":"https:\/\/lab.rwb.my.id\/bio\/?page_id=97"},"modified":"2025-11-20T18:15:22","modified_gmt":"2025-11-20T18:15:22","slug":"profile","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/bio\/profile\/","title":{"rendered":"Profile"},"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 Profile - Biometrik Urbane<\/title>\r\n\r\n <!-- SEO & Meta Tags -->\r\n <meta name=\"description\" content=\"Kenali lebih dekat tim, visi, dan misi Biometrik Urbane dalam menciptakan solusi lingkungan urban yang inovatif dan berkelanjutan.\">\r\n <meta property=\"og:title\" content=\"Profile - Biometrik Urbane\">\r\n <meta property=\"og:description\" content=\"Kenali lebih dekat tim, visi, dan misi Biometrik Urbane.\">\r\n <meta property=\"og:url\" content=\"https:\/\/lab.rwb.my.id\/bio\/profile\/\">\r\n <meta property=\"og:type\" content=\"website\">\r\n \r\n <!-- Poppins Font -->\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&display=swap\" rel=\"stylesheet\">\r\n \r\n <!-- Font Awesome Icons -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* --- GLOBAL STYLES & VARIABLES --- *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --primary-color: #00ff88;\r\n --secondary-color: #00ccff;\r\n --accent-color: #ff9d5c;\r\n --dark-bg: #0a0e27;\r\n --glass-bg: rgba(255, 255, 255, 0.05);\r\n --glass-border: rgba(255, 255, 255, 0.1);\r\n --text-light: #ffffff;\r\n --text-gray: #a8b2d1;\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background: var(--dark-bg);\r\n color: var(--text-light);\r\n overflow-x: hidden;\r\n position: relative;\r\n }\r\n\r\n \/* --- ANIMATED BACKGROUND --- *\/\r\n .animated-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(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1629 100%);\r\n }\r\n\r\n .particles {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n z-index: 500; \r\n }\r\n\r\n .leaf {\r\n position: absolute;\r\n width: 30px;\r\n height: 30px;\r\n opacity: 0.7;\r\n animation: falling 15s infinite linear;\r\n transform-origin: center center;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes falling {\r\n 0% { transform: translateY(-100vh) rotate(0deg); opacity: 0; }\r\n 10% { opacity: 0.7; }\r\n 90% { opacity: 0.7; }\r\n 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }\r\n }\r\n\r\n .biometric-pattern {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0.03;\r\n background-image: \r\n repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 136, 0.1) 2px, rgba(0, 255, 136, 0.1) 4px),\r\n repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 204, 255, 0.1) 2px, rgba(0, 204, 255, 0.1) 4px);\r\n animation: pattern-move 10s linear infinite;\r\n z-index: 0;\r\n }\r\n\r\n @keyframes pattern-move {\r\n 0% { transform: translate(0, 0); }\r\n 100% { transform: translate(10px, 10px); }\r\n }\r\n\r\n \/* --- HEADER --- *\/\r\n header {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 1rem 2rem;\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n border-bottom: 1px solid var(--glass-border);\r\n z-index: 1000;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n header.scrolled {\r\n padding: 0.7rem 2rem;\r\n background: rgba(10, 14, 39, 0.95);\r\n }\r\n\r\n .header-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .logo-section {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n\r\n .logo-section a {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .logo {\r\n width: 50px;\r\n height: 50px;\r\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n font-size: 1.5rem;\r\n animation: pulse 2s infinite;\r\n overflow: hidden;\r\n }\r\n\r\n .logo img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { transform: scale(1); }\r\n 50% { transform: scale(1.05); }\r\n }\r\n\r\n .site-title {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n nav {\r\n display: flex;\r\n gap: 2rem;\r\n }\r\n\r\n nav a {\r\n color: var(--text-gray);\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n padding: 0.5rem 0;\r\n }\r\n\r\n nav a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--primary-color);\r\n transition: width 0.3s ease;\r\n }\r\n\r\n nav a:hover { color: var(--text-light); }\r\n nav a:hover::after { width: 100%; }\r\n\r\n .hamburger {\r\n display: none;\r\n flex-direction: column;\r\n cursor: pointer;\r\n gap: 4px;\r\n }\r\n\r\n .hamburger span {\r\n width: 25px;\r\n height: 3px;\r\n background: var(--primary-color);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }\r\n .hamburger.active span:nth-child(2) { opacity: 0; }\r\n .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }\r\n\r\n \/* --- HERO SECTION --- *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 6rem 2rem 2rem;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .hero-content {\r\n max-width: 1200px;\r\n text-align: center;\r\n z-index: 2;\r\n }\r\n\r\n .hero h1 {\r\n font-size: clamp(1.6rem, 4.5vw, 3rem);\r\n margin-bottom: 1.5rem;\r\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: glow 2s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes glow {\r\n from { filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.5)); }\r\n to { filter: drop-shadow(0 0 30px rgba(0, 204, 255, 0.7)); }\r\n }\r\n\r\n .hero p {\r\n font-size: 1.3rem;\r\n color: var(--text-gray);\r\n margin-bottom: 2rem;\r\n max-width: 800px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n \/* --- SECTION STYLES (SAMA SEPERTI HOMEPAGE) --- *\/\r\n .section-padding { padding: 5rem 2rem; }\r\n .container { max-width: 1200px; margin: 0 auto; }\r\n .section-title { text-align: center; font-size: 2rem; margin-bottom: 3rem; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n \/* --- TENTANG KAMI SECTION --- *\/\r\n .about { background: rgba(255, 255, 255, 0.02); position: relative; z-index: 2; }\r\n .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }\r\n .about-text h2 { font-size: 2rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n .about-text p { color: var(--text-gray); line-height: 1.7; margin-bottom: 1.5rem; }\r\n .about-image { position: relative; }\r\n .about-image img { width: 100%; border-radius: 20px; border: 1px solid var(--glass-border); }\r\n\r\n \/* --- TIM KAMI SECTION --- *\/\r\n .team { background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 204, 255, 0.05)); position: relative; z-index: 2; }\r\n .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }\r\n .team-member { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2rem; text-align: center; transition: all 0.3s ease; cursor: pointer; }\r\n .team-member:hover { transform: translateY(-10px); border-color: var(--primary-color); }\r\n .member-photo { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 1.5rem; overflow: hidden; border: 4px solid var(--primary-color); }\r\n .member-photo img { width: 100%; height: 100%; object-fit: cover; }\r\n .member-name { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; }\r\n .member-role { color: var(--primary-color); font-weight: 500; margin-bottom: 1rem; }\r\n .member-socials { display: flex; justify-content: center; gap: 1rem; }\r\n .member-socials a { width: 36px; height: 36px; 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; }\r\n .member-socials a:hover { background: var(--primary-color); color: var(--dark-bg); transform: translateY(-3px); }\r\n\r\n \/* --- NILAI-NILAI KAMI SECTION --- *\/\r\n .values { background: rgba(255, 255, 255, 0.02); position: relative; z-index: 2; }\r\n .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }\r\n .value-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2rem; text-align: center; transition: all 0.3s ease; }\r\n .value-card:hover { transform: translateY(-10px); border-color: var(--primary-color); }\r\n .value-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1.5rem; animation: float 3s ease-in-out infinite; }\r\n @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }\r\n .value-card h3 { font-size: 1.5rem; margin-bottom: 1rem; }\r\n .value-card p { color: var(--text-gray); line-height: 1.6; }\r\n\r\n \/* --- PROSES KERJA KAMI SECTION (PENGGANTI STATISTIK) --- *\/\r\n .process { padding: 5rem 2rem; background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 204, 255, 0.1)); position: relative; z-index: 2; }\r\n .process-container { max-width: 1200px; margin: 0 auto; }\r\n .process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }\r\n .process-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2rem; position: relative; }\r\n .process-number { position: absolute; top: -15px; left: 20px; width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--dark-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; }\r\n .process-card h3 { font-size: 1.3rem; margin-bottom: 1rem; margin-left: 30px; }\r\n .process-card p { color: var(--text-gray); line-height: 1.6; }\r\n\r\n \/* --- MITRA KAMI SECTION --- *\/\r\n .partners { background: rgba(255, 255, 255, 0.02); position: relative; z-index: 2; }\r\n .partners-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; align-items: center; }\r\n .partner-logo { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 15px; padding: 1.5rem; display: flex; align-items: center; justify-content: center; height: 120px; transition: all 0.3s ease; }\r\n .partner-logo:hover { transform: translateY(-5px); border-color: var(--primary-color); }\r\n .partner-logo img { max-width: 100%; max-height: 100%; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease; }\r\n .partner-logo:hover img { filter: grayscale(0%); opacity: 1; }\r\n\r\n \/* --- FOOTER --- *\/\r\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; }\r\n .footer-content { max-width: 1200px; margin: 0 auto; text-align: center; }\r\n .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }\r\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; }\r\n .social-links a:hover { background: var(--primary-color); color: var(--dark-bg); transform: translateY(-3px); }\r\n .footer-text { color: var(--text-gray); margin-bottom: 1rem; }\r\n .credit { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); text-decoration: none; animation: neon-blink 2s infinite; display: inline-block; }\r\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; } }\r\n\r\n \/* --- MODAL STYLES --- *\/\r\n .modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.7);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 2000;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .modal-overlay.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .modal-content {\r\n background: var(--dark-bg);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 20px;\r\n padding: 2.5rem;\r\n max-width: 600px;\r\n width: 90%;\r\n max-height: 80vh;\r\n overflow-y: auto;\r\n position: relative;\r\n transform: scale(0.8);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .modal-overlay.active .modal-content {\r\n transform: scale(1);\r\n }\r\n\r\n .modal-close {\r\n position: absolute;\r\n top: 1rem;\r\n right: 1rem;\r\n background: var(--glass-bg);\r\n border: 1px solid var(--glass-border);\r\n color: var(--text-light);\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .modal-close:hover {\r\n background: var(--primary-color);\r\n color: var(--dark-bg);\r\n transform: rotate(90deg);\r\n }\r\n\r\n .modal-content h3 {\r\n font-size: 1.8rem;\r\n margin-bottom: 0.5rem;\r\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n \r\n .modal-subtitle {\r\n color: var(--accent-color);\r\n font-weight: 600;\r\n margin-bottom: 1.5rem;\r\n display: inline-block;\r\n }\r\n\r\n .modal-content p {\r\n color: var(--text-gray);\r\n line-height: 1.7;\r\n margin-bottom: 1.5rem;\r\n }\r\n \r\n \/* --- MOBILE RESPONSIVE --- *\/\r\n @media (max-width: 768px) {\r\n nav { \r\n position: fixed; \r\n top: 70px; \r\n left: -100%; \r\n width: 100%; \r\n height: auto;\r\n max-height: calc(100vh - 70px);\r\n overflow-y: auto;\r\n background: linear-gradient(135deg, #0a0e27, #0d2818);\r\n backdrop-filter: blur(10px); \r\n flex-direction: column; \r\n padding: 1rem 0; \r\n gap: 0.5rem;\r\n transition: left 0.3s ease; \r\n justify-content: flex-start;\r\n }\r\n nav.active { left: 0; }\r\n nav a {\r\n padding: 0.8rem 2rem;\r\n width: 100%;\r\n }\r\n .hamburger { display: flex; }\r\n .site-title { font-size: 1.2rem; }\r\n \r\n .hero { \r\n padding-top: 1.5rem; \r\n padding-bottom: 1rem; \r\n min-height: 75vh; \r\n }\r\n \r\n .hero h1 { font-size: 1.6rem; }\r\n .hero p { font-size: 0.9rem; }\r\n \r\n .section-padding { padding: 3rem 1rem; }\r\n .section-title { font-size: 1.4rem; margin-bottom: 1.5rem; }\r\n \r\n .about-content { grid-template-columns: 1fr; gap: 2rem; }\r\n .about-text h2 { font-size: 1.4rem; }\r\n \r\n .team-grid { grid-template-columns: 1fr; }\r\n \r\n .values-grid { grid-template-columns: 1fr; }\r\n \r\n .process-grid { grid-template-columns: 1fr; }\r\n \r\n .partners-grid { grid-template-columns: repeat(2, 1fr); }\r\n \r\n footer { padding: 2rem 1rem 1rem; }\r\n .footer-text { font-size: 0.85rem; }\r\n .credit { font-size: 0.75rem; }\r\n }\r\n\r\n \/* PERUBAHAN: Menyembunyikan credit di desktop *\/\r\n .mobile-menu-credit {\r\n display: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Animated Background -->\r\n <div class=\"animated-bg\">\r\n <div class=\"particles\" id=\"particles\"><\/div>\r\n <div class=\"biometric-pattern\"><\/div>\r\n <\/div>\r\n\r\n <!-- Header -->\r\n <header id=\"header\">\r\n <div class=\"header-container\">\r\n <div class=\"logo-section\">\r\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/\">\r\n <div class=\"logo\">\r\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\">\r\n <\/div>\r\n <div class=\"site-title\">Biometrik Urbane<\/div>\r\n <\/a>\r\n <\/div>\r\n <nav id=\"nav\">\r\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/\">Beranda<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/profile\/\">Profile<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/teknologi\/\">Teknologi<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/studi-kasus\/\">Studi Kasus<\/a>\r\n <a href=\"https:\/\/lab.rwb.my.id\/bio\/kontak\/\">Kontak<\/a>\r\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"mobile-menu-credit\">\ud83d\udca1Proudly\ud83d\udc23 By Rudi Web Builder<\/a>\r\n <\/nav>\r\n <div class=\"hamburger\" id=\"hamburger\">\r\n <span><\/span>\r\n <span><\/span>\r\n <span><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- Hero Section -->\r\n <section class=\"hero\" id=\"home\">\r\n <div class=\"hero-content\">\r\n <h1>Tentang Biometrik Urbane<\/h1>\r\n <p>Kami adalah tim yang berdedikasi untuk mengintegrasikan teknologi biometrik dalam menciptakan solusi lingkungan urban yang inovatif dan berkelanjutan.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Tentang Kami Section -->\r\n <section class=\"about section-padding\">\r\n <div class=\"container\">\r\n <div class=\"about-content\">\r\n <div class=\"about-text\">\r\n <h2>Visi & Misi Kami<\/h2>\r\n <p><strong>Visi kami<\/strong> adalah menjadi pelopor dalam transformasi kota-kota global menjadi pusat kehidupan yang berkelanjutan, sehat, dan selaras dengan alam melalui penerapan teknologi biometrik.<\/p>\r\n <p><strong>Misi kami<\/strong> adalah menyediakan solusi berbasis data yang akurat dan inovatif untuk perencanaan, pemantauan, dan pengelolaan ekosistem urban. Kami berkomitmen untuk meningkatkan kualitas hidup masyarakat dan melestarikan keanekaragaman hayati untuk generasi mendatang.<\/p>\r\n <\/div>\r\n <div class=\"about-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80\" alt=\"Tim Biometrik Urbane\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Tim Kami Section -->\r\n <section class=\"team section-padding\">\r\n <div class=\"container\">\r\n <h2 class=\"section-title\">Tim Kami<\/h2>\r\n <div class=\"team-grid\">\r\n <div class=\"team-member\" data-modal-target=\"team-modal-1\">\r\n <div class=\"member-photo\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80\" alt=\"Dr. Andi Pratama\">\r\n <\/div>\r\n <h3 class=\"member-name\">Dr. Andi Pratama<\/h3>\r\n <p class=\"member-role\">CEO & Founder<\/p>\r\n <div class=\"member-socials\">\r\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"team-member\" data-modal-target=\"team-modal-2\">\r\n <div class=\"member-photo\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80\" alt=\"Dr. Sarah Wijaya\">\r\n <\/div>\r\n <h3 class=\"member-name\">Dr. Sarah Wijaya<\/h3>\r\n <p class=\"member-role\">Head of Research<\/p>\r\n <div class=\"member-socials\">\r\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"team-member\" data-modal-target=\"team-modal-3\">\r\n <div class=\"member-photo\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80\" alt=\"Budi Santoso\">\r\n <\/div>\r\n <h3 class=\"member-name\">Budi Santoso<\/h3>\r\n <p class=\"member-role\">Lead Data Scientist<\/p>\r\n <div class=\"member-socials\">\r\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"team-member\" data-modal-target=\"team-modal-4\">\r\n <div class=\"member-photo\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1161&q=80\" alt=\"Maya Putri\">\r\n <\/div>\r\n <h3 class=\"member-name\">Maya Putri<\/h3>\r\n <p class=\"member-role\">Environmental Engineer<\/p>\r\n <div class=\"member-socials\">\r\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Nilai-Nilai Kami Section -->\r\n <section class=\"values section-padding\">\r\n <div class=\"container\">\r\n <h2 class=\"section-title\">Nilai-Nilai Kami<\/h2>\r\n <div class=\"values-grid\">\r\n <div class=\"value-card\">\r\n <div class=\"value-icon\"><i class=\"fas fa-leaf\"><\/i><\/div>\r\n <h3>Inovasi Berkelanjutan<\/h3>\r\n <p>Kami terus mendorong batas-batas teknologi untuk menciptakan solusi yang tidak hanya inovatif tetapi juga berkelanjutan untuk jangka panjang.<\/p>\r\n <\/div>\r\n <div class=\"value-card\">\r\n <div class=\"value-icon\"><i class=\"fas fa-microscope\"><\/i><\/div>\r\n <h3>Ketepatan Ilmiah<\/h3>\r\n <p>Setiap solusi yang kami tawarkan didasarkan pada penelitian ilmiah yang ketat dan data biometrik yang akurat untuk memastikan efektivitas maksimal.<\/p>\r\n <\/div>\r\n <div class=\"value-card\">\r\n <div class=\"value-icon\"><i class=\"fas fa-handshake\"><\/i><\/div>\r\n <h3>Kolaborasi<\/h3>\r\n <p>Kami percaya bahwa kolaborasi dengan klien, pemerintah, dan masyarakat adalah kunci untuk menciptakan dampak positif yang nyata dan berkelanjutan.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Proses Kerja Kami Section -->\r\n <section class=\"process\">\r\n <div class=\"process-container\">\r\n <h2 class=\"section-title\">Proses Kerja Kami<\/h2>\r\n <div class=\"process-grid\">\r\n <div class=\"process-card\">\r\n <div class=\"process-number\">1<\/div>\r\n <h3>Konsultasi & Analisis Awal<\/h3>\r\n <p>Mendengarkan kebutuhan klien dan melakukan analisis lingkungan awal untuk memahami tantangan dan peluang unik proyek Anda.<\/p>\r\n <\/div>\r\n <div class=\"process-card\">\r\n <div class=\"process-number\">2<\/div>\r\n <h3>Perencanaan & Desain<\/h3>\r\n <p>Merancang solusi biometrik yang disesuaikan dengan kondisi unik proyek, memastikan integrasi teknologi yang optimal dan efektif.<\/p>\r\n <\/div>\r\n <div class=\"process-card\">\r\n <div class=\"process-number\">3<\/div>\r\n <h3>Implementasi Teknologi<\/h3>\r\n <p>Memasang sensor, mengambil sampel eDNA, dan menjalankan analisis data dengan presisi tinggi untuk mengumpulkan informasi yang diperlukan.<\/p>\r\n <\/div>\r\n <div class=\"process-card\">\r\n <div class=\"process-number\">4<\/div>\r\n <h3>Monitoring & Evaluasi<\/h3>\r\n <p>Melakukan pemantauan berkelanjutan dan memberikan laporan perkembangan secara berkala untuk memastikan proyek berjalan sesuai rencana.<\/p>\r\n <\/div>\r\n <div class=\"process-card\">\r\n <div class=\"process-number\">5<\/div>\r\n <h3>Optimasi & Pelaporan<\/h3>\r\n <p>Mengoptimalkan strategi berdasarkan data yang terkumpul dan menyampaikan hasil akhir dengan rekomendasi untuk tindakan selanjutnya.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Mitra Kami Section -->\r\n <section class=\"partners section-padding\">\r\n <div class=\"container\">\r\n <h2 class=\"section-title\">Mitra Kami<\/h2>\r\n <div class=\"partners-grid\">\r\n <div class=\"partner-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/2\/2f\/Google_2015_logo.svg\/1200px-Google_2015_logo.svg.png\" alt=\"Google\">\r\n <\/div>\r\n <div class=\"partner-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/a\/a9\/Amazon_logo.svg\/1200px-Amazon_logo.svg.png\" alt=\"Amazon\">\r\n <\/div>\r\n <div class=\"partner-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/9\/96\/Microsoft_logo_%282012%29.svg\/1200px-Microsoft_logo_%282012%29.svg.png\" alt=\"Microsoft\">\r\n <\/div>\r\n <div class=\"partner-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/c\/c8\/Intel_logo_%282006-2020%29.svg\/1200px-Intel_logo_%282006-2020%29.svg.png\" alt=\"Intel\">\r\n <\/div>\r\n <div class=\"partner-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/2\/2f\/Apple_logo_black.svg\/1200px-Apple_logo_black.svg.png\" alt=\"Apple\">\r\n <\/div>\r\n <div class=\"partner-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/8\/89\/IBM_logo.svg\/1200px-IBM_logo.svg.png\" alt=\"IBM\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Footer -->\r\n <footer>\r\n <div class=\"footer-content\">\r\n <div class=\"social-links\">\r\n <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\r\n <\/div>\r\n <p class=\"footer-text\">\u00a9 <span id=\"year\"><\/span> Biometrik Urbane. All rights reserved.<\/p>\r\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"credit\">\ud83d\udca1Proudly\ud83d\udc23 By Rudi Web Builder<\/a>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- Modal Tim 1 -->\r\n <div class=\"modal-overlay\" id=\"team-modal-1\">\r\n <div class=\"modal-content\">\r\n <span class=\"modal-close\" data-modal=\"team-modal-1\">×<\/span>\r\n <h3>Dr. Andi Pratama<\/h3>\r\n <p class=\"member-role\">CEO & Founder<\/p>\r\n <p>Dr. Andi Pratama adalah seorang ahli bioteknologi dengan pengalaman lebih dari 15 tahun dalam penelitian dan pengembangan solusi berbasis biometrik untuk aplikasi lingkungan. Ia mendirikan Biometrik Urbane dengan visi untuk mengintegrasikan teknologi canggih dengan kebutuhan praktis dalam perencanaan kota berkelanjutan.<\/p>\r\n <p>Dengan gelar PhD dalam Biologi Molekuler dari Universitas Indonesia, Dr. Pratama telah memimpin berbagai proyek inovatif yang menghasilkan dampak signifikan dalam konservasi biodiversitas dan peningkatan kualitas lingkungan urban.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Modal Tim 2 -->\r\n <div class=\"modal-overlay\" id=\"team-modal-2\">\r\n <div class=\"modal-content\">\r\n <span class=\"modal-close\" data-modal=\"team-modal-2\">×<\/span>\r\n <h3>Dr. Sarah Wijaya<\/h3>\r\n <p class=\"member-role\">Head of Research<\/p>\r\n <p>Dr. Sarah Wijaya memimpin tim penelitian kami dengan fokus pada pengembangan metodologi analisis biometrik yang inovatif. Dengan latar belakang dalam ekologi dan genetika, ia telah mengembangkan berbagai protokol analisis DNA lingkungan yang kini menjadi standar industri.<\/p>\r\n <p>Sebelum bergabung dengan Biometrik Urbane, Dr. Wijaya adalah peneliti senior di Institut Biologi Nasional, di mana ia mempublikasikan lebih dari 20 paper ilmiah tentang biodiversitas urban dan metode monitoring non-invasif.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Modal Tim 3 -->\r\n <div class=\"modal-overlay\" id=\"team-modal-3\">\r\n <div class=\"modal-content\">\r\n <span class=\"modal-close\" data-modal=\"team-modal-3\">×<\/span>\r\n <h3>Budi Santoso<\/h3>\r\n <p class=\"member-role\">Lead Data Scientist<\/p>\r\n <p>Budi Santoso adalah seorang data scientist dengan spesialisasi dalam analisis data biometrik dan machine learning. Ia mengembangkan algoritma canggih yang memungkinkan kami mengidentifikasi pola kompleks dalam data ekologis dan membuat prediksi akurat tentang tren lingkungan.<\/p>\r\n <p>Dengan pengalaman lebih dari 10 tahun dalam big data dan AI, Budi telah memimpin pengembangan sistem prediktif kami yang kini digunakan oleh berbagai kota untuk perencanaan lingkungan berbasis data.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Modal Tim 4 -->\r\n <div class=\"modal-overlay\" id=\"team-modal-4\">\r\n <div class=\"modal-content\">\r\n <span class=\"modal-close\" data-modal=\"team-modal-4\">×<\/span>\r\n <h3>Maya Putri<\/h3>\r\n <p class=\"member-role\">Environmental Engineer<\/p>\r\n <p>Maya Putri adalah seorang insinyur lingkungan dengan keahlian dalam desain sistem berkelanjutan dan implementasi teknologi biometrik dalam infrastruktur urban. Ia memimpin tim implementasi kami, memastikan bahwa solusi yang kami rancang dapat diintegrasikan dengan efektif dalam lingkungan kota yang ada.<\/p>\r\n <p>Sebelum bergabung dengan Biometrik Urbane, Maya bekerja sebagai konsultan untuk berbagai proyek infrastruktur hijau di Asia Tenggara, di mana ia mengembangkan sistem pengelolaan air limbah inovatif dan ruang hijau urban.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ PERUBAHAN: Jumlah animasi daun jatuh diatur ke 15\r\n const leafCount = 15; \r\n const leafSymbols = ['\ud83c\udf42', '\ud83c\udf41', '\ud83c\udf43', '\ud83c\udf40'];\r\n const particlesContainer = document.getElementById('particles');\r\n \r\n function createLeaves() {\r\n particlesContainer.innerHTML = '';\r\n for (let i = 0; i < leafCount; i++) {\r\n const leaf = document.createElement('div');\r\n leaf.className = 'leaf';\r\n leaf.textContent = leafSymbols[Math.floor(Math.random() * leafSymbols.length)];\r\n leaf.style.left = Math.random() * 100 + '%';\r\n const size = 15 + Math.random() * 25;\r\n leaf.style.fontSize = size + 'px';\r\n const duration = 10 + Math.random() * 15;\r\n const delay = Math.random() * 15;\r\n leaf.style.animationDuration = duration + 's';\r\n leaf.style.animationDelay = delay + 's';\r\n leaf.style.opacity = 0.2 + Math.random() * 0.6;\r\n particlesContainer.appendChild(leaf);\r\n }\r\n }\r\n\r\n \/\/ Header scroll effect\r\n const header = document.getElementById('header');\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 50) {\r\n header.classList.add('scrolled');\r\n } else {\r\n header.classList.remove('scrolled');\r\n }\r\n });\r\n\r\n \/\/ Mobile menu toggle\r\n const hamburger = document.getElementById('hamburger');\r\n const nav = document.getElementById('nav');\r\n hamburger.addEventListener('click', () => {\r\n hamburger.classList.toggle('active');\r\n nav.classList.toggle('active');\r\n });\r\n document.querySelectorAll('nav a').forEach(link => {\r\n link.addEventListener('click', () => {\r\n if (window.innerWidth <= 768) {\r\n hamburger.classList.remove('active');\r\n nav.classList.remove('active');\r\n }\r\n });\r\n });\r\n\r\n \/\/ Modal functionality for team members\r\n const teamMembers = document.querySelectorAll('.team-member');\r\n const modalCloseButtons = document.querySelectorAll('.modal-close');\r\n\r\n function openModal(modal) {\r\n modal.classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeModal(modal) {\r\n modal.classList.remove('active');\r\n document.body.style.overflow = 'auto';\r\n }\r\n\r\n teamMembers.forEach(member => {\r\n member.addEventListener('click', () => {\r\n const modalId = member.getAttribute('data-modal-target');\r\n const modal = document.getElementById(modalId);\r\n if (modal) {\r\n openModal(modal);\r\n }\r\n });\r\n });\r\n\r\n modalCloseButtons.forEach(button => {\r\n button.addEventListener('click', () => {\r\n const modalId = button.getAttribute('data-modal');\r\n const modal = document.getElementById(modalId);\r\n closeModal(modal);\r\n });\r\n });\r\n\r\n document.querySelectorAll('.modal-overlay').forEach(overlay => {\r\n overlay.addEventListener('click', (e) => {\r\n if (e.target === overlay) {\r\n closeModal(overlay);\r\n }\r\n });\r\n });\r\n\r\n \/\/ Set current year\r\n document.getElementById('year').textContent = new Date().getFullYear();\r\n\r\n \/\/ Initialize falling leaves\r\n createLeaves();\r\n setInterval(createLeaves, 30000);\r\n });\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>Profile – Biometrik Urbane Biometrik Urbane Beranda Profile Teknologi Studi Kasus Kontak \ud83d\udca1Proudly\ud83d\udc23 By Rudi Web Builder Tentang Biometrik Urbane Kami adalah tim yang berdedikasi untuk mengintegrasikan teknologi biometrik dalam menciptakan solusi lingkungan urban yang inovatif dan berkelanjutan. Visi & Misi Kami Visi kami adalah menjadi pelopor dalam transformasi kota-kota global menjadi pusat kehidupan yang […]<\/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-97","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/97","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=97"}],"version-history":[{"count":13,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/97\/revisions"}],"predecessor-version":[{"id":131,"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/pages\/97\/revisions\/131"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/bio\/wp-json\/wp\/v2\/media?parent=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}