Pages
/
microsite
Edit Microsite
Kelola struktur HTML dan relasi halaman (Sub-Page).
← Kembali ke List
Judul Microsite:
Sub Halaman Dari (Opsional):
-- Berdiri Sendiri (Parent) --
ver2
demo
wg
Waskita
timah
</>
HTML & Tailwind Code Source
Tekan TAB untuk indentasi
<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WIKA Gedung - Beranda</title> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- FontAwesome untuk ikon panah & search --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script> tailwind.config = { theme: { extend: { colors: { brandBlue: '#0095DA', brandOrange: '#C68A12', } } } } </script> <style> header#main-header-page { padding: 30px 100px; } p.text-gray-500.font-light.text-sm.leading-relaxed { font-weight: 500; font-size: 1em; } a.flex.items-center.space-x-1.5.text-blue-600.hover:text-brandOrange.transition-colors {}a.flex.items-center.space-x-1.5.text-blue-600.hover:text-brandOrange.transition-colors { font-weight: bold!important; color: #00aeef !important; } .w-full.pt-2.pb-1.border-t.border-slate-100.mt-1.flex.items-center.text-xs.text-slate-700.font-normal { padding-top: 14px; font-size: 12px; color: #000000; } .px-6.py-4.bg-slate-900.text-white.flex.items-center.justify-between { background-color: #00aeef; } button.px-5.py-2.bg-slate-900.text-white.text-xs.font-semibold.rounded-lg.hover:bg-slate-800.transition { background-color: #00aeef; } p.text-slate-600.group-hover:text-white/90.text-sm.leading-relaxed.transition-colors.duration-300 { font-size: 13px; } img.img-center { margin: auto; } div#bar-publik { background-color: #00aeef; border: none; } div#bar-wika { background-color: #f9a01b; } body.bg-brand-dark.text-gray-100.antialiased.min-h-screen.flex.flex-col.selection:bg-brand-red.selection:text-white { background-color: #ffffff!important; } section#pilar { background-color: #07b0ef; } h2.text-xs.font-bold.tracking-widest.text-slate-400.uppercase.mb-2 { color: #000000; } .absolute.top-full.left-1/2.-translate-x-1/2.w-screen.bg-white.text-slate-800.shadow-2xl.p-10.opacity-0.invisible.group-hover:opacity-100.group-hover:visible.transition-all.duration-300.transform.translate-y-2.group-hover:translate-y-0.border-t.border-slate-200.z-50 { margin-top: 30px!important; } h3.text-xl.md:text-2xl.font-bold.tracking-tight.mb-3.text-slate-900.group-hover:text-white.transition-colors.duration-300 { font-size: 18px; } .pt-6.mt-6.border-t.border-slate-100.group-hover:border-white/20.flex.items-center.justify-between.text-xs.font-semibold.tracking-wider.uppercase.text-brandBlue.group-hover:text-white.transition-colors.duration-300 { padding: 4px 0px; } .wg3-card.fade-in-section.group.bg-white.text-slate-800.hover:text-white.p-8.rounded-3xl.shadow-xl.flex.flex-col.justify-between.transition-all.duration-300.transform.hover:-translate-y-2.hover:shadow-2xl.hover:bg-[#C68A12].cursor-pointer.border.border-slate-100.is-visible { padding: 20px; } .w-14.h-14.rounded-2xl.bg-blue-50.group-hover:bg-white/20.flex.items-center.justify-center.mb-6.text-brandBlue.group-hover:text-white.text-2xl.transition-colors.duration-300 { padding-bottom: 0px; margin-bottom: 8px; } .w-14.h-14.rounded-2xl.bg-blue-50.group-hover:bg-white/20.flex.items-center.justify-center.mb-6.text-brandBlue.group-hover:text-white.text-2xl.transition-colors.duration-300 {} .circle-progress { transform: rotate(-90deg); transform-origin: 50% 50%; } .fade-in-section { opacity: 0; transform: translateY(30px); visibility: hidden; transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: opacity, visibility, transform; } .fade-in-section.is-visible { opacity: 1; transform: none; visibility: visible; } /* Styling Viewport Mobile (Layar di bawah 768px / Tablet ke bawah) */ @media screen and (max-width: 768px) { header#main-header { padding: 20px 16px; /* Padding lebih kecil agar pas di layar HP */ } } /* Pengaturan dasar agar padding tidak merusak lebar 100% */ #main-header-page { width: 100%; box-sizing: border-box; } /* Khusus untuk rentang layar HP 300px sampai 600px */ @media screen and (min-width: 300px) and (max-width: 600px) { #main-header-page { padding: 10px 15px!important; /* Sesuaikan padding agar pas dan tidak terlalu memakan tempat di layar kecil */ } .bg-slate-900 { --tw-bg-opacity: 1; background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); height: 86px!important; margin-top: 63px!important; } } </style> </head> <body class="bg-slate-900 text-white font-sans antialiased overflow-x-hidden"> <!-- ================= HEADER / NAVBAR (SUB-PAGE) ================= --> <header id="main-header-page" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 px-6 md:px-12 bg-white text-slate-900 shadow-sm"> <div class="max-w-[1440px] mx-auto flex flex-col justify-center relative"> <!-- Top Bar: Logo, Stock Ticker & Sitemap --> <div class="flex items-center justify-between w-full pb-3"> <!-- Logo & Stock Ticker Widget --> <div class="flex items-center space-x-6"> <!-- Logo Kustom Sesuai Gambar Asli --> <a href="#" class="flex items-center"> <div class="flex items-center font-bold tracking-tight"> <!-- WIKA Gedung Logo Image --> <img src="https://www.wikagedung.co.id/images/ic_wika_gedung.svg" alt="WIKA Gedung" class="h-8 w-auto"> </div> </a> <!-- Widget Saham (Tema Putih/Solid) --> <div id="stock-widget" class="hidden md:flex items-center space-x-3 text-xs font-medium bg-slate-100 text-slate-800 backdrop-blur-md px-3 py-1 rounded border border-slate-200 transition-colors duration-300"> <span class="font-semibold tracking-wide">WEGE - <span id="stock-price" class="font-bold">IDR 53.00</span></span> <span id="stock-change" class="text-rose-500 font-medium flex items-center"><i class="fa-solid fa-arrow-trend-down mr-1"></i> -1 %</span> <span class="opacity-40">|</span> <span id="stock-time" class="text-[11px] font-normal">30 Sep 2025 15:04 GMT+7</span> </div> </div> <!-- Right Utility Top (Sitemap) & Mobile Hamburger Desktop Hidden --> <div class="flex items-center space-x-6"> <div class="hidden xl:block text-xs font-normal"> <a href="#" class="hover:text-brandOrange transition-colors">Sitemap</a> </div> <!-- Mobile Hamburger Button --> <button id="mobile-menu-btn" class="xl:hidden text-2xl focus:outline-none cursor-pointer"> <i class="fa-solid fa-bars"></i> </button> </div> </div> <!-- Bottom Bar: Navigation Menu & Language/Search Utilities Aligned --> <div class="flex items-center justify-between pt-1 border-t border-slate-200 transition-colors duration-300 relative"> <!-- Navigation Menu Desktop --> <nav class="hidden xl:flex items-center space-x-8 text-sm font-medium"> <!-- 1. Home --> <div class="group py-1"> <a href="https://remark.co.id/micro/demo" class="hover:text-brandOrange transition-colors">Home</a> <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50"> <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12"> <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start"> <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Home</h3> </div> <div class="col-span-8 space-y-4 text-sm font-medium"> <div class="border-b border-slate-100 pb-3"> <a href="#" class="block text-slate-800 hover:text-brandBlue transition">Overview</a> </div> </div> </div> </div> </div> <!-- 2. About Us --> <div class="group py-1"> <a href="#" class="flex items-center space-x-1.5 text-blue-600 hover:text-brandOrange transition-colors"> <span>About Us</span> <!-- Ikon Panah SVG --> <svg class="w-2.5 h-2.5 transition-transform duration-300 group-hover:rotate-180" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path> </svg> </a> <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50"> <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12"> <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start"> <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">About Us</h3> </div> <div class="col-span-8 space-y-4 text-sm font-medium"> <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/demo/about-us/" class="block text-slate-800 hover:text-brandBlue transition">About Us</a></div> <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/demo/Board-of-Commissioners/" class="block text-slate-800 hover:text-brandBlue transition">Board of Commissioners</a></div> <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/demo/Report-of-the-Board-of-Commissioners/" class="block text-slate-800 hover:text-brandBlue transition">Report of the Board of Commissioners</a></div> <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/demo/Directors/" class="block text-slate-800 hover:text-brandBlue transition">Directors</a></div> <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/demo/Report-of-the-Directors/" class="block text-slate-800 hover:text-brandBlue transition">Report of the Directors</a></div> <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/demo/Corporate-Secretary/" class="block text-slate-800 hover:text-brandBlue transition">Corporate Secretary</a></div> </div> </div> </div> </div> <!-- 3. Financials --> <div class="group py-1"> <a href="#" class="flex items-center space-x-1.5 hover:text-brandOrange transition-colors"> <span>Financials</span> <!-- Ikon Panah SVG --> <svg class="w-2.5 h-2.5 transition-transform duration-300 group-hover:rotate-180" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path> </svg> </a> <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50"> <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12"> <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start"> <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Financials</h3> </div> <div class="col-span-8 space-y-4 text-sm font-medium"> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Financial Results</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Financial Highlights</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Annual Reports</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Sustainability Reports</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Investor Presentations</a></div> </div> </div> </div> </div> <!-- 4. Shareholders --> <div class="group py-1"> <a href="#" class="flex items-center space-x-1.5 hover:text-brandOrange transition-colors"> <span>Shareholders</span> <!-- Ikon Panah SVG --> <svg class="w-2.5 h-2.5 transition-transform duration-300 group-hover:rotate-180" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path> </svg> </a> <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50"> <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12"> <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start"> <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Shareholders</h3> </div> <div class="col-span-8 space-y-4 text-sm font-medium"> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">General Meeting of Shareholders</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Dividends</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Shareholding Structure</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Downloads</a></div> </div> </div> </div> </div> <!-- 5. Governance --> <div class="group py-1"> <a href="#" class="flex items-center space-x-1.5 hover:text-brandOrange transition-colors"> <span> Governance</span> <!-- Ikon Panah SVG --> <svg class="w-2.5 h-2.5 transition-transform duration-300 group-hover:rotate-180" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path> </svg> </a> <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50"> <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12"> <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start"> <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Governance</h3> </div> <div class="col-span-8 space-y-4 text-sm font-medium"> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Audit Committee</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Nomination, Remuneration, and GCG Committee</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Risk Monitoring and Integrated Governance Committee</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">ASEAN Corporate Governance Scorecard</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Independence Statement</a></div> </div> </div> </div> </div> <!-- 6. News & Events --> <div class="group py-1"> <a href="#" class="flex items-center space-x-1.5 hover:text-brandOrange transition-colors"> <span>News & Events</span> <!-- Ikon Panah SVG --> <svg class="w-2.5 h-2.5 transition-transform duration-300 group-hover:rotate-180" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path> </svg> </a> <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50"> <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12"> <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start"> <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">News & Events</h3> </div> <div class="col-span-8 space-y-4 text-sm font-medium"> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Regulatory Filings</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">IR Events</a></div> </div> </div> </div> </div> <!-- 7. Stock Information --> <div class="group py-1"> <a href="#" class="flex items-center space-x-1.5 hover:text-brandOrange transition-colors"> <span>Stock Information</span> <!-- Ikon Panah SVG --> <svg class="w-2.5 h-2.5 transition-transform duration-300 group-hover:rotate-180" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path> </svg> </a> <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50"> <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12"> <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start"> <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Stock Information</h3> </div> <div class="col-span-8 space-y-4 text-sm font-medium"> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Interactive Chart</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Analyst Coverage</a></div> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Investor FAQ</a></div> </div> </div> </div> </div> <!-- 8. Contact --> <div class="group py-1"> <a href="#" class="flex items-center space-x-1.5 hover:text-brandOrange transition-colors"> <span>Contact</span> <!-- Ikon Panah SVG --> <svg class="w-2.5 h-2.5 transition-transform duration-300 group-hover:rotate-180" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path> </svg> </a> <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50"> <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12"> <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start"> <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Contact</h3> </div> <div class="col-span-8 space-y-4 text-sm font-medium"> <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">IR Contact</a></div> </div> </div> </div> </div> </nav> <!-- Right Utilities (Language & Search) Desktop on Bottom Bar Right Side --> <div class="hidden xl:flex items-center space-x-6 text-xs font-normal"> <div class="flex items-center space-x-2"> <a href="#" class="hover:text-brandOrange transition-colors">Indonesia</a> <span class="opacity-40">|</span> <a href="#" class="text-[#C68A12] font-semibold">English</a> </div> <button class="hover:text-brandOrange transition-colors pl-2 focus:outline-none cursor-pointer"> <i class="fa-solid fa-magnifying-glass text-sm"></i> </button> </div> </div> <!-- ================= BREADCRUMB SECTION ================= --> <div class="w-full pt-2 pb-1 border-t border-slate-100 mt-1 flex items-center text-xs text-slate-700 font-normal"> <nav class="flex items-center space-x-3" aria-label="Breadcrumb"> <a href="https://remark.co.id/micro/demo" class="hover:text-brandOrange transition-colors">Home</a> <i class="fa-solid fa-chevron-right text-[10px] text-slate-400"></i> <a href="#" class="hover:text-brandOrange transition-colors">About</a> <i class="fa-solid fa-chevron-right text-[10px] text-slate-400"></i> <a href="#" class="text-slate-900 border-b border-slate-900 pb-0.5" aria-current="page">Board of Commissioners</a> </nav> </div> <!-- ================= END BREADCRUMB ================= --> </div> <!-- Backdrop Overlay for Mobile Menu --> <div id="mobile-backdrop" class="fixed inset-0 bg-slate-950/60 backdrop-blur-sm z-40 opacity-0 pointer-events-none transition-opacity duration-300 xl:hidden"></div> <!-- Mobile Drawer Navigation --> <div id="mobile-menu" class="fixed inset-y-0 right-0 w-4/5 max-w-sm bg-slate-900 text-white shadow-2xl z-50 translate-x-full transition-transform duration-300 ease-in-out flex flex-col p-6 xl:hidden overflow-y-auto"> <div class="flex items-center justify-between pb-6 border-b border-slate-800"> <span class="text-xl font-black tracking-tight">WIKA Gedung</span> <button id="mobile-close-btn" class="text-xl text-slate-400 hover:text-white transition-colors cursor-pointer"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="flex-1 py-6 space-y-2 text-sm"> <!-- Mobile menu items --> <div class="border-b border-slate-800"> <button type="button" class="mobile-sub-toggle w-full flex items-center justify-between py-3 text-left hover:text-brandOrange transition-colors cursor-pointer"> <span>Home</span> <i class="fa-solid fa-chevron-down text-xs transition-transform duration-300"></i> </button> <div class="mobile-sub-menu max-h-0 overflow-hidden transition-all duration-300 ease-in-out pl-4 space-y-2 bg-slate-950/40 rounded"> <a href="https://remark.co.id/micro/demo" class="block py-2 text-slate-300 hover:text-white text-xs">Overview</a> </div> </div> </div> </div> </header> <!-- ================= END HEADER / NAVBAR ================= --> <!-- ================= BANNER / HERO IMAGE SECTION (DI BAWAH HEADER) ================= --> <section class="relative w-full h-[280px] md:h-[340px] mt-[120px] bg-slate-900 overflow-hidden flex items-center justify-center"> <!-- Background Image dengan Overlay Biru Korporat --> <div class="absolute inset-0 z-0"> <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1600&auto=format&fit=crop" alt="Our Purpose Banner" class="w-full h-full object-cover object-center opacity-40"> <div class="absolute inset-0 bg-gradient-to-r from-blue-700/80 via-blue-600/70 to-blue-800/80 mix-blend-multiply"></div> </div> <!-- Konten Teks Center --> <div class="relative z-10 max-w-[1440px] mx-auto px-6 md:px-12 text-center"> <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight drop-shadow-md"> Board of Commissioners </h1> </div> </section> <!-- ================= END BANNER SECTION ================= --> <!-- JavaScript Terpadu (Smooth Drawer & Accordion) --> <script> document.addEventListener('DOMContentLoaded', () => { const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileCloseBtn = document.getElementById('mobile-close-btn'); const mobileMenu = document.getElementById('mobile-menu'); const mobileBackdrop = document.getElementById('mobile-backdrop'); function openMobileMenu() { if (mobileMenu && mobileBackdrop) { mobileMenu.classList.remove('translate-x-full'); mobileBackdrop.classList.remove('opacity-0', 'pointer-events-none'); document.body.style.overflow = 'hidden'; } } function closeMobileMenu() { if (mobileMenu && mobileBackdrop) { mobileMenu.classList.add('translate-x-full'); mobileBackdrop.classList.add('opacity-0', 'pointer-events-none'); document.body.style.overflow = ''; } } if (mobileMenuBtn) mobileMenuBtn.addEventListener('click', openMobileMenu); if (mobileCloseBtn) mobileCloseBtn.addEventListener('click', closeMobileMenu); if (mobileBackdrop) mobileBackdrop.addEventListener('click', closeMobileMenu); // Accordion Submenu Handler const subToggles = document.querySelectorAll('.mobile-sub-toggle'); subToggles.forEach(toggle => { toggle.addEventListener('click', function() { const submenu = this.nextElementSibling; const icon = this.querySelector('i'); if (submenu.style.maxHeight && submenu.style.maxHeight !== "0px") { submenu.style.maxHeight = "0px"; if (icon) icon.style.transform = "rotate(0deg)"; } else { subToggles.forEach(otherToggle => { const otherSub = otherToggle.nextElementSibling; const otherIcon = otherToggle.querySelector('i'); if (otherSub !== submenu) { otherSub.style.maxHeight = "0px"; if (otherIcon) otherIcon.style.transform = "rotate(0deg)"; } }); submenu.style.maxHeight = submenu.scrollHeight + "px"; if (icon) icon.style.transform = "rotate(180deg)"; } }); }); }); </script> <!--KONTEN--> <!-- Top Navigation Bar --> <!-- Hero Section --> <section id="komisaris" class="relative pt-28 pb-20 lg:pt-36 lg:pb-32 bg-white overflow-hidden border-b border-gray-100"> <div class="absolute inset-0 -z-10 opacity-30"> <div class="absolute top-10 left-1/2 -translate-x-1/2 w-[800px] h-[350px] bg-gradient-to-tr from-slate-100 to-transparent rounded-full blur-3xl"></div> </div> <div class="max-w-7xl mx-auto px-6 lg:px-8 text-center" data-aos="fade-up" data-aos-duration="1000"> <div class="inline-flex items-center space-x-2 px-3.5 py-1.5 bg-slate-100 rounded-full text-xs font-semibold text-slate-700 uppercase tracking-widest mb-6 shadow-sm"> <svg class="w-3.5 h-3.5 text-slate-900" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg> <span>Good Corporate Governance • WEGE Board of Commissioners</span> </div> <h1 class="text-4xl lg:text-6xl font-light tracking-tight text-slate-900 mb-6 leading-tight"> Board of <span class="font-semibold bg-gradient-to-r from-slate-900 to-slate-700 bg-clip-text text-transparent">Commissioners</span> </h1> <p class="mt-4 max-w-3xl mx-auto text-lg lg:text-xl font-light leading-relaxed text-gray-500"> Executing supervisory functions over management policies, company operations, and providing strategic advice to the Board of Directors based on Good Corporate Governance (GCG) principles. </p> </div> </section> <!-- Strategic Oversight / Komitmen Tata Kelola --> <section id="pengawasan" class="py-24 bg-white"> <div class="max-w-7xl mx-auto px-6 lg:px-8"> <div class="text-center max-w-2xl mx-auto mb-16" data-aos="fade-up" data-aos-duration="800"> <h2 class="text-xs font-bold tracking-widest text-slate-400 uppercase mb-2">Strategic Focus</h2> <h3 class="text-3xl font-semibold text-slate-900">Commitment to Oversight & Sustainable Value</h3> <div class="w-12 h-0.5 bg-slate-300 mx-auto mt-4"></div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <!-- Card 1 --> <div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100"> <div class="w-12 h-12 rounded-xl bg-slate-900 text-white flex items-center justify-center font-bold text-base mb-6 shadow-md group-hover:scale-105 transition-transform duration-300">01</div> <h4 class="text-xl font-semibold text-slate-900 mb-3">Long-Term Strategy</h4> <p class="text-gray-500 font-light text-sm leading-relaxed"> Ensuring the company's strategic direction, including the expansion of modular business lines, precast, and concessions, aligns with the company's vision as an integrated space provider. </p> </div> <!-- Card 2 --> <div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200"> <div class="w-12 h-12 rounded-xl bg-slate-900 text-white flex items-center justify-center font-bold text-base mb-6 shadow-md group-hover:scale-105 transition-transform duration-300">02</div> <h4 class="text-xl font-semibold text-slate-900 mb-3">Risk Management & ESG</h4> <p class="text-gray-500 font-light text-sm leading-relaxed"> Overseeing the implementation of Environmental, Social, and Governance (ESG) principles and the achievement of sustainability targets toward Net Zero Emissions. </p> </div> <!-- Card 3 --> <div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300"> <div class="w-12 h-12 rounded-xl bg-slate-900 text-white flex items-center justify-center font-bold text-base mb-6 shadow-md group-hover:scale-105 transition-transform duration-300">03</div> <h4 class="text-xl font-semibold text-slate-900 mb-3">Internal Control</h4> <p class="text-gray-500 font-light text-sm leading-relaxed"> Assessing the effectiveness of the internal control system, compliance with Capital Market regulations, and BIM-based operational standards. </p> </div> </div> </div> </section> <!-- Profil Dewan Komisaris (Interactive Grid Simulation) --> <!-- SECTION MANAJEMEN & TATA KELOLA (DENGAN TAB & POPUP) --> <section class="py-24 bg-white border-t border-gray-100"> <div class="max-w-7xl mx-auto px-6 lg:px-8"> <div class="text-center max-w-2xl mx-auto mb-12" data-aos="fade-up" data-aos-duration="800"> <h2 class="text-xs font-bold tracking-widest text-slate-400 uppercase mb-2">Organizational Structure</h2> <h3 class="text-3xl font-semibold text-slate-900">Board of Commissioners, Directors & Secretary Profile</h3> <p class="text-gray-500 font-light text-sm mt-2">High-integrity leadership to oversee company growth. Click on a card to view profile details.</p> </div> <!-- Tab Navigation Buttons --> <div class="flex flex-wrap justify-center gap-3 mb-16" data-aos="fade-up" data-aos-duration="800"> <button onclick="switchTab('commissioners')" id="btn-commissioners" class="tab-btn px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-300 bg-slate-900 text-white shadow-md"> Board of Commissioners </button> <button onclick="switchTab('directors')" id="btn-directors" class="tab-btn px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-300 bg-gray-100 text-gray-600 hover:bg-gray-200"> Directors </button> <button onclick="switchTab('secretary')" id="btn-secretary" class="tab-btn px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-300 bg-gray-100 text-gray-600 hover:bg-gray-200"> Corporate Secretary </button> </div> <!-- Tab Wrapper Container untuk Mencegah Layout Shift --> <div class="relative min-h-[150px]"> <!-- TAB CONTENT 1: BOARD OF COMMISSIONERS --> <div id="tab-commissioners" class="tab-pane absolute inset-x-0 top-0 transition-all duration-500 ease-in-out opacity-100 translate-y-0 z-10"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> <!-- Komisaris Utama Card --> <div onclick="openModal('Dr. Ir. H. President Commissioner, M.Sc.', 'President Commissioner', 'January 1, 2024', 'AGMS 2024', 'Indonesian', 'Jakarta', 'Jakarta, August 12, 1968', '57 Years Old', 'Possesses extensive experience in strategic corporate governance and infrastructure sector oversight.', 'Strategic Management, Corporate Governance, Financial Oversight.', 'President Commissioner in various strategic SOE entities.', 'https://wika-gedung.s3.ap-southeast-3.amazonaws.com/management/01KS9EJK6HGN7EQHRX4A5T2242.png')" class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer group flex items-center space-x-6"> <div class="w-24 h-28 bg-slate-200 rounded-xl overflow-hidden flex-shrink-0 relative"> <img src="https://wika-gedung.s3.ap-southeast-3.amazonaws.com/management/01KS9EJK6HGN7EQHRX4A5T2242.png" alt="President Commissioner" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition duration-500"> </div> <div> <span class="text-xs font-semibold px-2.5 py-1 bg-slate-100 text-slate-700 rounded-md uppercase tracking-wider">President Commissioner</span> <h4 class="text-lg font-bold text-slate-900 mt-2">Dr. Ir. H. President Commissioner, M.Sc.</h4> <p class="text-xs text-gray-500 font-light mt-1">Click to view profile details →</p> </div> </div> <!-- Komisaris Independen Card --> <div onclick="openModal('Drs. H. Independent Commissioner, Ak., M.Si.', 'Independent Commissioner', 'March 15, 2023', 'AGMS 2023', 'Indonesian', 'Bandung', 'Bandung, May 5, 1972', '53 Years Old', 'Experienced in independent auditing, risk management, and capital market legal compliance.', 'Risk Management, Audit, Capital Market Regulation.', 'Independent Audit Committee.', 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop')" class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer group flex items-center space-x-6"> <div class="w-24 h-28 bg-slate-200 rounded-xl overflow-hidden flex-shrink-0 relative"> <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop" alt="Independent Commissioner" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition duration-500"> </div> <div> <span class="text-xs font-semibold px-2.5 py-1 bg-slate-100 text-slate-700 rounded-md uppercase tracking-wider">Independent Commissioner</span> <h4 class="text-lg font-bold text-slate-900 mt-2">Drs. H. Independent Commissioner, Ak., M.Si.</h4> <p class="text-xs text-gray-500 font-light mt-1">Click to view profile details →</p> </div> </div> </div> </div> <!-- TAB CONTENT 2: DIRECTORS --> <div id="tab-directors" class="tab-pane absolute inset-x-0 top-0 transition-all duration-500 ease-in-out opacity-0 translate-y-4 pointer-events-none z-0"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> <!-- Director 1 --> <div onclick="openModal('Mahendra Vijaya', 'President Director', '12 May 2026', 'AGMS 2026 (First Term)', 'Indonesian', 'Bogor', 'Malang, 18 October 1976', '49 Years Old', 'Having experience in various strategic positions at PT. Wijaya Karya (Persero) Tbk. as well as strong leadership capacity in supporting the development direction and governance of the Company.', 'Civil Engineering, Business Strategy, Corporate Transformation, Information Technology, Corporate Governance.', 'SVP - Transformation and IT Division PT Wijaya Karya (Persero) Tbk.', 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop')" class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer group flex items-center space-x-6"> <div class="w-24 h-28 bg-slate-200 rounded-xl overflow-hidden flex-shrink-0 relative"> <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop" alt="Mahendra Vijaya" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition duration-500"> </div> <div> <span class="text-xs font-semibold px-2.5 py-1 bg-slate-900 text-white rounded-md uppercase tracking-wider">President Director</span> <h4 class="text-lg font-bold text-slate-900 mt-2">Mahendra Vijaya</h4> <p class="text-xs text-gray-500 font-light mt-1">Click to view profile details →</p> </div> </div> <!-- Director 2 --> <div onclick="openModal('Ir. Director of Operations, M.T.', 'Director of Operations', 'June 10, 2022', 'AGMS 2025', 'Indonesian', 'Jakarta', 'Surabaya, January 14, 1978', '48 Years Old', 'Experienced in large-scale construction project management, high-rise buildings, and modular technology.', 'Building Construction, Project Management, BIM Implementation.', 'General Manager Operations WEGE.', 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=400&auto=format&fit=crop')" class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer group flex items-center space-x-6"> <div class="w-24 h-28 bg-slate-200 rounded-xl overflow-hidden flex-shrink-0 relative"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=400&auto=format&fit=crop" alt="Director of Operations" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition duration-500"> </div> <div> <span class="text-xs font-semibold px-2.5 py-1 bg-slate-900 text-white rounded-md uppercase tracking-wider">Director of Operations</span> <h4 class="text-lg font-bold text-slate-900 mt-2">Ir. Director of Operations, M.T.</h4> <p class="text-xs text-gray-500 font-light mt-1">Click to view profile details →</p> </div> </div> <!-- Director 3 --> <div onclick="openModal('Finance Academic, S.E., M.B.A.', 'Director of Finance, Human Capital & Risk Management', 'July 15, 2023', 'AGMS 2026', 'Indonesian', 'Tangerang', 'Yogyakarta, November 22, 1980', '45 Years Old', 'Expert in corporate finance, banking funding, balance sheet restructuring, and integrated risk management.', 'Corporate Finance, Risk Management, Treasury, Investor Relations.', 'VP Finance WIKA Group.', 'https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=400&auto=format&fit=crop')" class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer group flex items-center space-x-6"> <div class="w-24 h-28 bg-slate-200 rounded-xl overflow-hidden flex-shrink-0 relative"> <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=400&auto=format&fit=crop" alt="Director of Finance" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition duration-500"> </div> <div> <span class="text-xs font-semibold px-2.5 py-1 bg-slate-900 text-white rounded-md uppercase tracking-wider">Director of Finance</span> <h4 class="text-lg font-bold text-slate-900 mt-2">Finance Academic, S.E., M.B.A.</h4> <p class="text-xs text-gray-500 font-light mt-1">Click to view profile details →</p> </div> </div> </div> </div> <!-- TAB CONTENT 3: CORPORATE SECRETARY --> <div id="tab-secretary" class="tab-pane absolute inset-x-0 top-0 transition-all duration-500 ease-in-out opacity-0 translate-y-4 pointer-events-none z-0"> <div class="max-w-xl mx-auto"> <!-- Secretary Card --> <div onclick="openModal('Purba Wirasaputra, S.H., M.H.', 'Corporate Secretary', 'February 1, 2025', 'Directors Appointment', 'Indonesian', 'Jakarta', 'Semarang, September 10, 1983', '43 Years Old', 'Fully responsible for corporate communications, OJK & Indonesia Stock Exchange regulatory compliance, and the implementation of Corporate Social Responsibility (CSR) programs.', 'Corporate Communication, Investor Relations, Legal Compliance, GCG.', 'Head of Investor Relations & Corporate Communication WEGE.', 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=400&auto=format&fit=crop')" class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer group flex items-center space-x-6"> <div class="w-28 h-32 bg-slate-200 rounded-xl overflow-hidden flex-shrink-0 relative"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=400&auto=format&fit=crop" alt="Corporate Secretary" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition duration-500"> </div> <div> <span class="text-xs font-semibold px-2.5 py-1 bg-emerald-800 text-white rounded-md uppercase tracking-wider">Corporate Secretary</span> <h4 class="text-xl font-bold text-slate-900 mt-2">Purba Wirasaputra, S.H., M.H.</h4> <p class="text-xs text-gray-500 font-light mt-1">Click to view profile details →</p> </div> </div> </div> </div> </div> </div> </section> <!-- MODAL POPUP DETAIL PROFIL --> <div id="profileModal" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300"> <div id="modalContainer" class="bg-white w-full max-w-3xl rounded-2xl shadow-2xl overflow-hidden transform scale-95 transition-transform duration-300 max-h-[90vh] flex flex-col"> <!-- Modal Header --> <div class="px-6 py-4 bg-slate-900 text-white flex items-center justify-between"> <h3 class="text-lg font-medium">Executive Profile Details</h3> <button onclick="closeModal()" class="text-gray-400 hover:text-white transition p-1 rounded-lg"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> </button> </div> <!-- Modal Body (Scrollable Table Layout) --> <div class="p-8 overflow-y-auto space-y-6"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-start"> <div class="flex flex-col items-center"> <div class="w-full aspect-[3/4] bg-gray-100 rounded-xl overflow-hidden shadow-inner border border-gray-200"> <img id="modalImg" src="" alt="Profile" class="w-full h-full object-cover"> </div> <span id="modalPositionBadge" class="mt-4 text-xs font-semibold px-3 py-1 bg-slate-100 text-slate-800 rounded-full uppercase tracking-wider text-center">Position</span> </div> <div class="md:col-span-2 space-y-4 text-sm text-gray-700"> <div class="grid grid-cols-3 border-b border-gray-100 pb-3"> <span class="font-medium text-gray-400">Name</span> <span id="modalName" class="col-span-2 font-semibold text-slate-900">Name</span> </div> <div class="grid grid-cols-3 border-b border-gray-100 pb-3"> <span class="font-medium text-gray-400">Position</span> <span id="modalPosition" class="col-span-2 text-slate-900">Position</span> </div> <div class="grid grid-cols-3 border-b border-gray-100 pb-3"> <span class="font-medium text-gray-400">Term Start</span> <span id="modalTermStart" class="col-span-2 text-slate-900">Date</span> </div> <div class="grid grid-cols-3 border-b border-gray-100 pb-3"> <span class="font-medium text-gray-400">Term of Office</span> <span id="modalTerm" class="col-span-2 text-slate-900">Term</span> </div> <div class="grid grid-cols-3 border-b border-gray-100 pb-3"> <span class="font-medium text-gray-400">Nationality</span> <span id="modalNationality" class="col-span-2 text-slate-900">Indonesian</span> </div> <div class="grid grid-cols-3 border-b border-gray-100 pb-3"> <span class="font-medium text-gray-400">Domicile</span> <span id="modalDomicile" class="col-span-2 text-slate-900">Domicile</span> </div> <div class="grid grid-cols-3 border-b border-gray-100 pb-3"> <span class="font-medium text-gray-400">Birth Info</span> <span id="modalBirth" class="col-span-2 text-slate-900">Birth</span> </div> <div class="grid grid-cols-3 border-b border-gray-100 pb-3"> <span class="font-medium text-gray-400">Age</span> <span id="modalAge" class="col-span-2 text-slate-900">Age</span> </div> <div class="border-b border-gray-100 pb-3 space-y-1"> <span class="font-medium text-gray-400 block">Profile Summary</span> <p id="modalSummary" class="text-gray-600 font-light leading-relaxed">Summary</p> </div> <div class="border-b border-gray-100 pb-3 space-y-1"> <span class="font-medium text-gray-400 block">Expertise / Competencies</span> <p id="modalExpertise" class="text-gray-600 font-light leading-relaxed">Expertise</p> </div> <div class="space-y-1"> <span class="font-medium text-gray-400 block">Work History</span> <p id="modalHistory" class="text-gray-600 font-light leading-relaxed">History</p> </div> </div> </div> </div> <!-- Modal Footer --> <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 flex justify-end"> <button onclick="closeModal()" class="px-5 py-2 bg-slate-900 text-white text-xs font-semibold rounded-lg hover:bg-slate-800 transition">Close</button> </div> </div> </div> <!-- JAVASCRIPT LOGIC --> <script> // Tab Switching Logic with Smooth Fade & Slide Effect function switchTab(tabId) { const tabs = ['commissioners', 'directors', 'secretary']; tabs.forEach(t => { const pane = document.getElementById('tab-' + t); const btn = document.getElementById('btn-' + t); if (t === tabId) { pane.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none', 'z-0'); pane.classList.add('opacity-100', 'translate-y-0', 'z-10'); btn.className = "tab-btn px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-300 bg-slate-900 text-white shadow-md"; } else { pane.classList.remove('opacity-100', 'translate-y-0', 'z-10'); pane.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none', 'z-0'); btn.className = "tab-btn px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-300 bg-gray-100 text-gray-600 hover:bg-gray-200"; } }); } // Modal Popup Logic function openModal(name, position, termStart, term, nationality, domicile, birth, age, summary, expertise, history, imgSrc) { document.getElementById('modalName').innerText = name; document.getElementById('modalPosition').innerText = position; document.getElementById('modalPositionBadge').innerText = position; document.getElementById('modalTermStart').innerText = termStart; document.getElementById('modalTerm').innerText = term; document.getElementById('modalNationality').innerText = nationality; document.getElementById('modalDomicile').innerText = domicile; document.getElementById('modalBirth').innerText = birth; document.getElementById('modalAge').innerText = age; document.getElementById('modalSummary').innerText = summary; document.getElementById('modalExpertise').innerText = expertise; document.getElementById('modalHistory').innerText = history; document.getElementById('modalImg').src = imgSrc; const modal = document.getElementById('profileModal'); const container = document.getElementById('modalContainer'); modal.classList.remove('opacity-0', 'pointer-events-none'); container.classList.remove('scale-95'); container.classList.add('scale-100'); document.body.style.overflow = 'hidden'; } function closeModal() { const modal = document.getElementById('profileModal'); const container = document.getElementById('modalContainer'); modal.classList.add('opacity-0', 'pointer-events-none'); container.classList.remove('scale-100'); container.classList.add('scale-95'); document.body.style.overflow = 'auto'; } // Close modal on outside click window.onclick = function(event) { const modal = document.getElementById('profileModal'); if (event.target === modal) { closeModal(); } } </script> <!-- Komite Pendukung Dewan Komisaris --> <section id="komite" class="py-24 bg-white border-t border-gray-100"> <div class="max-w-7xl mx-auto px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div data-aos="fade-right" data-aos-duration="1000"> <h2 class="text-xs font-bold tracking-widest text-slate-400 uppercase mb-2">Supporting Governance</h2> <h3 class="text-3xl font-semibold text-slate-900 mb-6">Supporting Committees of the Board of Commissioners</h3> <p class="text-gray-600 font-light leading-relaxed mb-6"> In carrying out its supervisory duties effectively and professionally, the Board of Commissioners is supported by special committees that operate based on charters and applicable laws and regulations. </p> <div class="p-6 bg-slate-900 text-slate-200 rounded-2xl shadow-lg space-y-3"> <div class="flex items-center space-x-3"> <span class="w-2 h-2 rounded-full bg-slate-400"></span> <span class="text-sm font-medium">Grounded in the AKHLAK Work Culture</span> </div> <p class="text-xs text-slate-400 font-light leading-relaxed"> Upholding the values of Trustworthy (Amanah), Competent (Kompeten), Harmonious (Harmonis), Loyal (Loyal), Adaptive (Adaptif), and Collaborative (Kolaboratif) to maintain integrity and investor trust in the capital market. </p> </div> </div> <div class="space-y-6" data-aos="fade-left" data-aos-duration="1000"> <!-- Komite 1 --> <div class="bg-white p-6 rounded-2xl border border-slate-100 hover:border-slate-300 transition-all duration-300 shadow-sm"> <div class="flex items-center space-x-4 mb-3"> <div class="w-10 h-10 rounded-lg bg-slate-900 text-white flex items-center justify-center font-bold text-sm">1</div> <h4 class="text-lg font-semibold text-slate-900">Audit Committee</h4> </div> <p class="text-sm text-gray-500 font-light leading-relaxed pl-14"> Supervising the financial reporting process, the independence of the Public Accountant, and the effectiveness of the Company's internal audit system on an ongoing basis. </p> </div> <!-- Komite 2 --> <div class="bg-white p-6 rounded-2xl border border-slate-100 hover:border-slate-300 transition-all duration-300 shadow-sm"> <div class="flex items-center space-x-4 mb-3"> <div class="w-10 h-10 rounded-lg bg-slate-900 text-white flex items-center justify-center font-bold text-sm">2</div> <h4 class="text-lg font-semibold text-slate-900">Nomination & Remuneration Committee</h4> </div> <p class="text-sm text-gray-500 font-light leading-relaxed pl-14"> Evaluating nomination policies, remuneration structures, and the performance appraisal process of the Board of Directors and Board of Commissioners transparently. </p> </div> </div> </div> </div> </section> <!--KONTEN--> <!-- ================= FOOTER-WG (CORPORATE FOOTER & SCROLL TO TOP) ================= --> <footer class="footer-wg relative bg-[#0085CA] text-white font-sans antialiased overflow-hidden pt-16 pb-8 px-6 md:px-12 lg:px-20"> <!-- Background Abstract Wave Overlay / Decorative Lines (Opsional untuk mempercantik sesuai desain) --> <div class="absolute inset-0 opacity-10 pointer-events-none overflow-hidden"> <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 500" preserveAspectRatio="none"> <path fill="none" stroke="#ffffff" stroke-width="2" d="M0,160 C320,300 420,50 740,250 C1060,450 1220,100 1440,200"></path> <path fill="none" stroke="#ffffff" stroke-width="1.5" d="M0,260 C320,400 420,150 740,350 C1060,550 1220,200 1440,300"></path> <path fill="none" stroke="#ffffff" stroke-width="1" d="M0,60 C320,200 420,-50 740,150 C1060,350 1220,0 1440,100"></path> </svg> </div> <div class="max-w-7xl mx-auto relative z-10"> <!-- Main Footer Content Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 pb-12 border-b border-white/20"> <!-- Column 1: Company Logo & Address (Col Span 4) --> <div class="lg:col-span-4 space-y-6"> <!-- Logo --> <div class="flex items-center gap-2"> <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=150&q=80" alt="WIKA Gedung Logo Placeholder" class="h-10 w-auto rounded bg-white p-1 object-contain hidden"> <!-- Ganti src jika punya logo asli berbentuk PNG putih --> <div class="bg-white px-3 py-1.5 rounded-lg shadow-md flex items-center"> <img src="https://www.wikagedung.co.id/images/ic_wika_gedung.svg" alt="WIKA Gedung Logo" class="h-7 w-auto object-contain"> </div> </div> <!-- Address --> <p class="text-sm text-sky-100 leading-relaxed pr-4"> PT Wijaya Karya Bangunan Gedung Tbk.<br> WIKA Tower II, Lt. 14–15<br> Jl. DI. Panjaitan Kav. 10, Jakarta Timur 13340 </p> <!-- Contact Info --> <div class="space-y-3 text-sm text-sky-100"> <a href="mailto:corsec@wikagedung.id" class="flex items-center gap-3 hover:text-white transition-colors"> <i class="fa-solid fa-envelope text-base w-5"></i> <span>Email: corsec@wikagedung.id</span> </a> <a href="tel:+622185909003" class="flex items-center gap-3 hover:text-white transition-colors"> <i class="fa-solid fa-phone text-base w-5"></i> <span>Phone: +6221-8590-9003</span> </a> <a href="#" class="flex items-center gap-3 hover:text-white transition-colors"> <i class="fa-solid fa-comment-dots text-base w-5"></i> <span>Chatbot GIVA</span> </a> </div> </div> <!-- Column 2: Company Info (Col Span 2) --> <div class="lg:col-span-2 space-y-4"> <h4 class="text-xs font-bold tracking-widest uppercase text-white">Company Info</h4> <ul class="space-y-2.5 text-sm text-sky-100"> <li><a href="#" class="hover:text-white hover:underline transition-all">About Us</a></li> <li><a href="#" class="hover:text-white hover:underline transition-all">Awards & Certificates</a></li> <li><a href="#" class="hover:text-white hover:underline transition-all">Vission & Mission</a></li> </ul> </div> <!-- Column 3: Sustainability (Col Span 2) --> <div class="lg:col-span-2 space-y-4"> <h4 class="text-xs font-bold tracking-widest uppercase text-white">Sustainability</h4> <ul class="space-y-2.5 text-sm text-sky-100"> <li><a href="#" class="hover:text-white hover:underline transition-all">Corporate Social Responsibility</a></li> </ul> </div> <!-- Column 4: Media (Col Span 2) --> <div class="lg:col-span-2 space-y-4"> <h4 class="text-xs font-bold tracking-widest uppercase text-white">Media</h4> <ul class="space-y-2.5 text-sm text-sky-100"> <li><a href="#" class="hover:text-white hover:underline transition-all">Press Activities</a></li> <li><a href="#" class="hover:text-white hover:underline transition-all">News</a></li> <li><a href="#" class="hover:text-white hover:underline transition-all">Press Release</a></li> <li><a href="#" class="hover:text-white hover:underline transition-all">Ebook</a></li> </ul> </div> <!-- Column 5: Certificate & Social Media (Col Span 2 / Gabungan kanan) --> <div class="lg:col-span-2 space-y-6"> <!-- Certificate --> <div class="space-y-3"> <h4 class="text-xs font-bold tracking-widest uppercase text-white">Certificate</h4> <div class="flex items-center gap-3"> <!-- Badge BSI / ISO --> <div class="bg-white p-1.5 rounded-lg shadow-sm w-24 h-14 flex items-center justify-center overflow-hidden"> <img src="https://www.wikagedung.co.id/_next/image?url=%2Fimages%2Fbsi-verified%2Fbim-verified-iso-19650-012019.png&w=384&q=75" alt="BSI ISO 19650-1 & 2" class="max-w-full max-h-full object-contain" /> </div> <!-- Badge TUV NORD --> <div class="bg-white p-1.5 rounded-lg shadow-sm w-20 h-14 flex items-center justify-center overflow-hidden"> <img src="https://www.wikagedung.co.id/_next/image?url=%2Fimages%2Fbsi-verified%2Fiso-iec-27001-tuv-nord.png&w=256&q=75" alt="TÜV NORD ISO/IEC 27001" class="max-w-full max-h-full object-contain" /> </div> </div> </div> <!-- Social Media --> <div class="space-y-3"> <h4 class="text-xs font-bold tracking-widest uppercase text-white">Social Media</h4> <div class="flex flex-wrap gap-2.5"> <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300"> <i class="fa-brands fa-linkedin-in text-sm"></i> </a> <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300"> <i class="fa-brands fa-facebook-f text-sm"></i> </a> <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300"> <i class="fa-brands fa-youtube text-sm"></i> </a> <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300"> <i class="fa-brands fa-x-twitter text-sm"></i> </a> <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300"> <i class="fa-brands fa-instagram text-sm"></i> </a> <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300"> <i class="fa-brands fa-tiktok text-sm"></i> </a> <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300"> <i class="fa-brands fa-spotify text-sm"></i> </a> </div> </div> </div> </div> <!-- Footer Bottom Bar (Copyright & Policy) --> <div class="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-sky-100"> <p>Copyright © 2026 - All rights reserved by PT Wijaya Karya Bangunan Gedung Tbk.</p> <div class="flex items-center gap-6"> <a href="#" class="hover:text-white transition-colors">Terms Conditions</a> <a href="#" class="hover:text-white transition-colors">Privacy Policy</a> </div> </div> </div> <!-- Move to Scroll / Scroll to Top Button (Terisolasi di dalam footer-wg) --> <button id="footerWgScrollTopBtn" aria-label="Scroll to top" class="fixed bottom-6 right-6 z-50 w-12 h-12 rounded-full bg-slate-900 text-white shadow-2xl flex items-center justify-center opacity-0 invisible translate-y-4 hover:bg-white hover:text-[#0085CA] hover:scale-110 transition-all duration-300 border border-white/20 cursor-pointer"> <i class="fa-solid fa-arrow-up text-base"></i> </button> </footer> <script> // Skrip terisolasi untuk tombol scroll to top (Bebas bentrok) document.addEventListener("DOMContentLoaded", function () { const scrollTopBtn = document.getElementById("footerWgScrollTopBtn"); if (scrollTopBtn) { // Munculkan tombol saat halaman di-scroll ke bawah sejauh 300px window.addEventListener("scroll", function () { if (window.scrollY > 300) { scrollTopBtn.classList.remove("opacity-0", "invisible", "translate-y-4"); scrollTopBtn.classList.add("opacity-100", "visible", "translate-y-0"); } else { scrollTopBtn.classList.remove("opacity-100", "visible", "translate-y-0"); scrollTopBtn.classList.add("opacity-0", "invisible", "translate-y-4"); } }); // Aksi klik untuk kembali smooth scroll ke atas halaman scrollTopBtn.addEventListener("click", function () { window.scrollTo({ top: 0, behavior: "smooth" }); }); } }); </script> <!-- ================= SCRIPTS ================= --> <script> // 1. Header Scroll Shrink & Background Change Effect const header = document.getElementById('main-header'); const stockWidget = document.getElementById('stock-widget'); window.addEventListener('scroll', () => { if (window.scrollY > 40) { header.classList.remove('bg-transparent', 'py-3', 'text-white'); header.classList.add('bg-white/95', 'backdrop-blur-md', 'py-2', 'text-slate-800', 'shadow-md', 'border-b', 'border-slate-200'); stockWidget.classList.remove('bg-white/10', 'border-white/20'); stockWidget.classList.add('bg-slate-100', 'border-slate-200', 'text-slate-800'); } else { header.classList.remove('bg-white/95', 'backdrop-blur-md', 'py-2', 'text-slate-800', 'shadow-md', 'border-b', 'border-slate-200'); header.classList.add('bg-transparent', 'py-3', 'text-white'); stockWidget.classList.remove('bg-slate-100', 'border-slate-200', 'text-slate-800'); stockWidget.classList.add('bg-white/10', 'border-white/20'); } }); // 2. Mobile Menu Toggle const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileCloseBtn = document.getElementById('mobile-close-btn'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.remove('translate-x-full'); }); mobileCloseBtn.addEventListener('click', () => { mobileMenu.classList.add('translate-x-full'); }); // 3. Stock Widget Real-Time Simulation function updateStockWidget() { const priceEl = document.getElementById('stock-price'); let basePrice = 5300; let randomFluctuation = Math.floor(Math.random() * 20) - 10; let currentPrice = (basePrice + randomFluctuation) / 100; priceEl.innerText = `IDR ${currentPrice.toFixed(2)}`; } setInterval(updateStockWidget, 5000); // 4. Hero Slider with Auto Slide, Circle Progress, and Controls const slides = document.querySelectorAll('.slider-item'); const nextBtn = document.getElementById('next-btn'); const prevBtn = document.getElementById('prev-btn'); const slideCounter = document.getElementById('slide-counter'); const progressRingPath = document.getElementById('progress-ring-path'); let currentIndex = 0; const totalSlides = slides.length; const slideIntervalTime = 6000; let timer; let progressInterval; let startTime; function showSlide(index) { slides.forEach((slide, i) => { slide.classList.remove('opacity-100', 'z-10'); slide.classList.add('opacity-0', 'z-0'); if (i === index) { slide.classList.remove('opacity-0', 'z-0'); slide.classList.add('opacity-100', 'z-10'); } }); slideCounter.innerText = `0${index + 1}/0${totalSlides}`; } function setProgressCircle(duration) { clearInterval(progressInterval); startTime = Date.now(); progressInterval = setInterval(() => { let elapsed = Date.now() - startTime; let progress = (elapsed / duration) * 100; if (progress >= 100) { progress = 100; } let strokeVal = 100 - progress; progressRingPath.style.strokeDasharray = `${strokeVal}, 100`; if (progress >= 100) { clearInterval(progressInterval); } }, 50); } function nextSlide() { currentIndex = (currentIndex + 1) % totalSlides; showSlide(currentIndex); resetTimer(); } function prevSlide() { currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; showSlide(currentIndex); resetTimer(); } function resetTimer() { clearInterval(timer); clearInterval(progressInterval); setProgressCircle(slideIntervalTime); timer = setInterval(nextSlide, slideIntervalTime); } nextBtn.addEventListener('click', nextSlide); prevBtn.addEventListener('click', prevSlide); resetTimer(); // 5. WG2 Section Photo Slider & Auto Slide let wg2CurrentSlide = 0; const wg2TotalSlides = 2; const wg2SliderTrack = document.getElementById('wg2SliderTrack'); const wg2Dots = document.querySelectorAll('.wg2-slider-dot'); function goToWg2Slide(index) { wg2CurrentSlide = index; wg2SliderTrack.style.transform = `translateX(-${wg2CurrentSlide * 100}%)`; wg2Dots.forEach((dot, idx) => { if (idx === wg2CurrentSlide) { dot.classList.remove('w-2', 'bg-white/60'); dot.classList.add('w-6', 'bg-white'); } else { dot.classList.remove('w-6', 'bg-white'); dot.classList.add('w-2', 'bg-white/60'); } }); } setInterval(() => { wg2CurrentSlide = (wg2CurrentSlide + 1) % wg2TotalSlides; goToWg2Slide(wg2CurrentSlide); }, 5000); // 6. Fade-In Section Animation on Scroll (Intersection Observer) document.addEventListener("DOMContentLoaded", function () { const observerOptions = { root: null, rootMargin: '0px', threshold: 0.15 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); } else { entry.target.classList.remove('is-visible'); } }); }, observerOptions); document.querySelectorAll('.fade-in-section').forEach(section => { observer.observe(section); }); }); </script> </body> </html>
🖥️ Live Responsive Preview
Desktop
Tablet
Mobile
URL Publik:
https://remark.co.id/micro/demo/board-of-commissioners/
Simpan Microsite