Remark Admin Dashboard

Pages / microsite

Edit Microsite

Kelola struktur HTML dan relasi halaman (Sub-Page).

← Kembali ke List

Judul Microsite:

Sub Halaman Dari (Opsional):

<!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>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <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 {
    padding: 30px 100px;
}
p.text-slate-600.group-hover:text-white/90.text-sm.leading-relaxed.transition-colors.duration-300 {
    font-size: 13px;
}

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 {}
        .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 */
    }
}

</style>
</head>
<body class="bg-slate-900 text-white font-sans antialiased overflow-x-hidden">

<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 px-6 md:px-12 bg-transparent text-white group/header hover:bg-white hover:text-slate-900 shadow-sm">
        <div class="max-w-[1440px] mx-auto flex flex-col justify-center relative">
            
            
            <div class="flex items-center justify-between w-full pb-3">
                
                
                <div class="flex items-center space-x-6">
                    
                    <a href="#" class="flex items-center">
                        <div class="flex items-center font-bold tracking-tight">
                            
                            <img src="https://www.wikagedung.co.id/images/ic_wika_gedung.svg" alt="WIKA Gedung" class="h-8 w-auto">
                        </div>
                    </a>
                    
                    
                    <div id="stock-widget" class="hidden md:flex items-center space-x-3 text-xs font-medium bg-white/10 group-hover/header:bg-slate-100 group-hover/header:text-slate-800 backdrop-blur-md px-3 py-1 rounded border border-white/20 group-hover/header: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-400 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>

<div class="hidden xl:flex items-center space-x-6 text-xs font-normal">
                    <a href="#" class="hover:text-brandOrange transition-colors">Sitemap</a>
                    <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">
                        <i class="fa-solid fa-magnifying-glass text-sm"></i>
                    </button>
                </div>

<button id="mobile-menu-btn" class="xl:hidden text-2xl focus:outline-none">
                    <i class="fa-solid fa-bars"></i>
                </button>
            </div>

<div class="flex items-center justify-between pt-1 border-t border-white/10 group-hover/header:border-slate-200 transition-colors duration-300 relative">
                <nav class="hidden xl:flex items-center space-x-8 text-sm font-normal">
                    
                    
                    <div class="relative group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors menu-item-link">Company Info</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">Company Info</h3>
                                </div>
                                <div class="col-span-4 space-y-4 text-sm font-medium">
                                    <a href="#" class="block text-[#C68A12] font-semibold hover:underline">About Us</a>
                                    <a href="#" class="block text-slate-800 hover:text-brandBlue transition">Awards & Certificates</a>
                                    <a href="#" class="block text-slate-800 hover:text-brandBlue transition">Corporate Secretary</a>
                                    <a href="#" class="block text-slate-800 hover:text-brandBlue transition">Management</a>
                                </div>
                                <div class="col-span-4 space-y-4 text-sm font-medium">
                                    <a href="#" class="block text-slate-800 hover:text-brandBlue transition flex justify-between items-center">Message From President Director</a>
                                    <a href="#" class="block text-slate-800 hover:text-brandBlue transition flex justify-between items-center">Vision, Mission And Corporate Values <i class="fa-solid fa-chevron-down text-xs"></i></a>
                                    <a href="#" class="block text-slate-800 hover:text-brandBlue transition flex justify-between items-center">Company Structure <i class="fa-solid fa-chevron-down text-xs"></i></a>
                                    <a href="#" class="block text-slate-800 hover:text-brandBlue transition">Address & Contact Information</a>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="relative group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Line Of Business</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">
                                    <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Line Of Business</h3>
                                </div>
                                <div class="col-span-8 space-y-3 text-sm font-medium">
                                    <a href="#" class="block text-slate-800 hover:text-brandBlue transition">Commercial Buildings</a>
                                    <a href="#" class="block text-slate-800 hover:text-brandBlue transition">Residential & Apartment</a>
                                    <a href="#" class="block text-slate-800 hover:text-brandBlue transition">Infrastructure & Public Facilities</a>
                                    <a href="#" class="block text-slate-800 hover:text-brandBlue transition">Investment & Concession</a>
                                </div>
                            </div>
                        </div>
                    </div>

<a href="#" class="hover:text-brandOrange transition-colors py-1">Sustainability</a>

<div class="relative group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Investor</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-4 gap-8 px-6 md:px-12">
                                
                                
                                <div class="space-y-6">
                                    <div>
                                        <h4 class="text-base font-bold text-slate-900 mb-2">Home</h4>
                                        <ul class="space-y-1.5 text-xs font-medium text-slate-600">
                                            <li><a href="#" class="hover:text-brandBlue transition">Overview</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4 class="text-base font-bold text-slate-900 mb-2">Governance</h4>
                                        <ul class="space-y-1.5 text-xs font-medium text-slate-600">
                                            <li><a href="#" class="hover:text-brandBlue transition">Audit Committee</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Nomination, Remuneration, and GCG Committee</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Risk Monitoring and Integrated Governance Committee</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">ASEAN Corporate Governance Scorecard</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Independence Statement</a></li>
                                        </ul>
                                    </div>
                                </div>

<div class="space-y-6">
                                    <div>
                                        <h4 class="text-base font-bold text-slate-900 mb-2">About Us</h4>
                                        <ul class="space-y-1.5 text-xs font-medium text-slate-600">
                                            <li><a href="#" class="hover:text-brandBlue transition">About Us</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Board of Commissioners</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Report of the Board of Commissioners</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Directors</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Report of the Directors</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Corporate Secretary</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4 class="text-base font-bold text-slate-900 mb-2">News & Events</h4>
                                        <ul class="space-y-1.5 text-xs font-medium text-slate-600">
                                            <li><a href="#" class="hover:text-brandBlue transition">Regulatory Filings</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">IR Events</a></li>
                                        </ul>
                                    </div>
                                </div>

<div class="space-y-6">
                                    <div>
                                        <h4 class="text-base font-bold text-slate-900 mb-2">Financials</h4>
                                        <ul class="space-y-1.5 text-xs font-medium text-slate-600">
                                            <li><a href="#" class="hover:text-brandBlue transition">Financial Results</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Financial Highlights</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Annual Reports</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Sustainability Reports</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Investor Presentations</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4 class="text-base font-bold text-slate-900 mb-2">Stock Information</h4>
                                        <ul class="space-y-1.5 text-xs font-medium text-slate-600">
                                            <li><a href="#" class="hover:text-brandBlue transition">Interactive Chart</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Analyst Coverage</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Investor FAQ</a></li>
                                        </ul>
                                    </div>
                                </div>

<div class="space-y-6">
                                    <div>
                                        <h4 class="text-base font-bold text-slate-900 mb-2">Shareholders</h4>
                                        <ul class="space-y-1.5 text-xs font-medium text-slate-600">
                                            <li><a href="#" class="hover:text-brandBlue transition">General Meeting of Shareholders</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Dividends</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Shareholding Structure</a></li>
                                            <li><a href="#" class="hover:text-brandBlue transition">Downloads</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4 class="text-base font-bold text-slate-900 mb-2">Contact</h4>
                                        <ul class="space-y-1.5 text-xs font-medium text-slate-600">
                                            <li><a href="#" class="hover:text-brandBlue transition">IR Contact</a></li>
                                        </ul>
                                    </div>
                                </div>

</div>
                        </div>
                    </div>

<a href="#" class="hover:text-brandOrange transition-colors py-1">Media</a>
                    <a href="#" class="hover:text-brandOrange transition-colors py-1">GCG</a>
                    <a href="#" class="hover:text-brandOrange transition-colors py-1">Career</a>
                    <a href="#" class="hover:text-brandOrange transition-colors py-1">BIM</a>
                    <a href="#" class="hover:text-brandOrange transition-colors py-1">Contact Us</a>
                </nav>
            </div>

</div>

<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 transform translate-x-full transition-transform duration-300 flex flex-col p-6 xl:hidden">
            <div class="flex items-center justify-between pb-6 border-b border-slate-800">
                <span class="text-xl font-black">WIKA Gedung</span>
                <button id="mobile-close-btn" class="text-xl text-slate-400 hover:text-white">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="flex-1 overflow-y-auto py-6 space-y-4 text-sm">
                <a href="#" class="block py-2 text-[#C68A12] font-semibold border-b border-slate-800">Company Info</a>
                <a href="#" class="block py-2 hover:text-brandOrange border-b border-slate-800">Line Of Business</a>
                <a href="#" class="block py-2 hover:text-brandOrange border-b border-slate-800">Sustainability</a>
                <a href="#" class="block py-2 hover:text-brandOrange border-b border-slate-800">Investor</a>
                <a href="#" class="block py-2 hover:text-brandOrange border-b border-slate-800">Media</a>
                <a href="#" class="block py-2 hover:text-brandOrange border-b border-slate-800">GCG</a>
                <a href="#" class="block py-2 hover:text-brandOrange border-b border-slate-800">Career</a>
                <a href="#" class="block py-2 hover:text-brandOrange border-b border-slate-800">BIM</a>
                <a href="#" class="block py-2 hover:text-brandOrange border-b border-slate-800">Contact Us</a>
                <div class="pt-4 flex justify-between text-xs font-semibold">
                    <a href="#">Sitemap</a>
                    <div>
                        <span>Indonesia</span> | <a href="#" class="text-[#C68A12]">English</a>
                    </div>
                </div>
            </div>
        </div>
    </header>

<section class="py-20 bg-slate-900 text-slate-100">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    
    <div class="text-center max-w-3xl mx-auto mb-16">
      <span class="text-amber-500 font-semibold tracking-wider uppercase text-sm">Tata Kelola Perusahaan</span>
      <h2 class="text-3xl sm:text-4xl font-bold tracking-tight mt-2 text-white">Dewan Direksi Wika Gedung</h2>
      <p class="text-slate-400 mt-4 text-base">Jajaran pimpinan eksekutif yang berkomitmen mendorong pertumbuhan berkelanjutan dan inovasi konstruksi terdepan.</p>
    </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      
      
      <div class="bg-slate-800/60 backdrop-blur-md border border-slate-700/80 rounded-2xl p-6 flex flex-col justify-between hover:border-amber-500/50 transition-all duration-300 shadow-xl">
        <div>
          <div class="relative w-full h-64 mb-6 overflow-hidden rounded-xl bg-slate-700">
            
            <img src="/assets/img/bod-hadian.jpg" alt="Hadian Pramudita" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-500">
          </div>
          <h3 class="text-xl font-bold text-white">Hadian Pramudita</h3>
          <p class="text-amber-400 text-sm font-medium mt-1">Direktur Utama</p>
          <p class="text-slate-400 text-sm mt-3 leading-relaxed">Memimpin arah strategis korporasi dan ekspansi bisnis properti serta konstruksi modular.</p>
        </div>
        <div class="mt-6 pt-4 border-t border-slate-700/60 flex justify-between items-center">
          <span class="text-xs text-slate-500 uppercase font-mono">WEGE BOD</span>
          <a href="#profile-hadian" class="text-xs font-semibold text-amber-400 hover:text-amber-300 flex items-center gap-1">Profil Lengkap &rarr;</a>
        </div>
      </div>

<div class="bg-slate-800/60 backdrop-blur-md border border-slate-700/80 rounded-2xl p-6 flex flex-col justify-between hover:border-amber-500/50 transition-all duration-300 shadow-xl">
        <div>
          <div class="relative w-full h-64 mb-6 overflow-hidden rounded-xl bg-slate-700">
            <img src="/assets/img/bod-dwi.jpg" alt="Dwi Pangripto" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-500">
          </div>
          <h3 class="text-xl font-bold text-white">Dwi Pangripto</h3>
          <p class="text-amber-400 text-sm font-medium mt-1">Direktur Operasi</p>
          <p class="text-slate-400 text-sm mt-3 leading-relaxed">Mengawasi eksekusi proyek gedung tinggi dan efisiensi operasional lapangan secara menyeluruh.</p>
        </div>
        <div class="mt-6 pt-4 border-t border-slate-700/60 flex justify-between items-center">
          <span class="text-xs text-slate-500 uppercase font-mono">WEGE BOD</span>
          <a href="#profile-dwi" class="text-xs font-semibold text-amber-400 hover:text-amber-300 flex items-center gap-1">Profil Lengkap &rarr;</a>
        </div>
      </div>

<div class="bg-slate-800/60 backdrop-blur-md border border-slate-700/80 rounded-2xl p-6 flex flex-col justify-between hover:border-amber-500/50 transition-all duration-300 shadow-xl">
        <div>
          <div class="relative w-full h-64 mb-6 overflow-hidden rounded-xl bg-slate-700">
            <img src="/assets/img/bod-yulianto.jpg" alt="Yulianto Tri Baskoro" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-500">
          </div>
          <h3 class="text-xl font-bold text-white">Yulianto Tri Baskoro</h3>
          <p class="text-amber-400 text-sm font-medium mt-1">Direktur Keuangan & HC</p>
          <p class="text-slate-400 text-sm mt-3 leading-relaxed">Mengelola struktur finansial, pendanaan strategis, dan pengembangan talenta SDM korporasi.</p>
        </div>
        <div class="mt-6 pt-4 border-t border-slate-700/60 flex justify-between items-center">
          <span class="text-xs text-slate-500 uppercase font-mono">WEGE BOD</span>
          <a href="#profile-yulianto" class="text-xs font-semibold text-amber-400 hover:text-amber-300 flex items-center gap-1">Profil Lengkap &rarr;</a>
        </div>
      </div>

<div class="bg-slate-800/60 backdrop-blur-md border border-slate-700/80 rounded-2xl p-6 flex flex-col justify-between hover:border-amber-500/50 transition-all duration-300 shadow-xl">
        <div>
          <div class="relative w-full h-64 mb-6 overflow-hidden rounded-xl bg-slate-700">
            <img src="/assets/img/bod-purba.jpg" alt="Purba Yudha Tama" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-500">
          </div>
          <h3 class="text-xl font-bold text-white">Purba Yudha Tama</h3>
          <p class="text-amber-400 text-sm font-medium mt-1">Direktur Teknik & Pengembangan</p>
          <p class="text-slate-400 text-sm mt-3 leading-relaxed">Mengarahkan inovasi teknologi konstruksi, implementasi BIM, dan inisiatif green building.</p>
        </div>
        <div class="mt-6 pt-4 border-t border-slate-700/60 flex justify-between items-center">
          <span class="text-xs text-slate-500 uppercase font-mono">WEGE BOD</span>
          <a href="#profile-purba" class="text-xs font-semibold text-amber-400 hover:text-amber-300 flex items-center gap-1">Profil Lengkap &rarr;</a>
        </div>
      </div>

</div>
  </div>
</section>

<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">
    
    
    <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>

<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>

<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>

<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>

<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>

<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>

<div class="lg:col-span-2 space-y-6">
                
                <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">
                        
                        <div class="bg-white p-1.5 rounded-lg shadow-sm w-24 h-14 flex items-center justify-center">
                            <span class="text-[10px] font-bold text-slate-900 text-center leading-tight">bsi. ISO 19650-1 & -2</span>
                        </div>
                        
                        <div class="bg-white p-1.5 rounded-lg shadow-sm w-20 h-14 flex items-center justify-center">
                            <span class="text-[10px] font-bold text-slate-900 text-center leading-tight">TÜV NORD ISO/IEC 27001</span>
                        </div>
                    </div>
                </div>

<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>

<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>

<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>

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>

<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 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');

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
            };

document.querySelectorAll('.fade-in-section').forEach(section => {
                observer.observe(section);
            });
        });
    </script>
</body>
</html>

URL Publik: https://remark.co.id/micro/demo/bod/