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-page {
    padding: 30px 100px;
}
.absolute.inset-0.bg-gradient-to-r.from-blue-700/80.via-blue-600/70.to-blue-800/80.mix-blend-multiply {
    background-color: #1483ac;
    --tw-gradient-to: none !important;
}
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 {}
        .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;
        }

p.text-xs.text-gray-500.font-light.leading-relaxed {
    font-size: 0.9em;
    font-weight: 400;
}
button#slide-right {
    background-color: #00aeef;
}
p.text-gray-500.font-light.text-sm.leading-relaxed.mb-6.group-hover:text-gray-700.transition-colors {
    font-size: 0.9em;
    font-weight: 400;
}
pan {
    font-weight: 400;
}
p.text-gray-500.font-light.text-sm.leading-relaxed.mb-6.group-hover:text-gray-700.transition-colors {
    font-weight: 400;
}
.text-blue-600 {
    --tw-text-opacity: 1;
    color: #00aeef;
    font-weight: 800;
}
.space-y-4.text-gray-600.font-light.leading-relaxed p {
    font-weight: 400!important;
}

span {
    font-weight: 400!important;
}

p.text-gray-500.font-light.text-sm.leading-relaxed.mb-6.group-hover:text-gray-700.transition-colors {
    font-weight: 400!important;
}

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

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

<div class="flex items-center justify-between pt-1 border-t border-slate-200 transition-colors duration-300 relative">
                
                
                <nav class="hidden xl:flex items-center space-x-8 text-sm font-medium">
                    
                    
                    <div class="group py-1">
                        <a href="https://remark.co.id/micro" 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>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">About Us</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/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/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/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/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/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/Corporate-Secretary/" class="block text-slate-800 hover:text-brandBlue transition">Corporate Secretary</a></div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Financials</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>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Shareholders</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>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Governance</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>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">News & Events</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>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Stock Information</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>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Contact</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>

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

<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">About Us</a>
                </nav>
            </div>

</div>

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

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

<section class="relative w-full h-[280px] md:h-[340px] mt-[120px] bg-slate-900 overflow-hidden flex items-center justify-center">
    
    <div class="absolute inset-0 z-0">
        <img src="https://www.wikagedung.co.id/_next/image?url=https%3A%2F%2Fadmin-web.wikagedung.id%2Fimages%2Finformation%2F6a9791a4e9e5217883181165426fc8466f8d6591ba9ea5f7e8b65a40f8.jpg&w=3840&q=75" 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>

<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">
            About Us
        </h1>
    </div>
</section>

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

<section id="tentang" class="relative pt-28 pb-20 lg:pt-36 lg:pb-32 bg-white overflow-hidden border-b border-gray-100">
        <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                <span>Investor Relations &bull; PT Wijaya Karya Bangunan Gedung Tbk</span>
            </div>
            <h1 class="text-4xl lg:text-6xl font-light tracking-tight text-slate-900 mb-6 leading-tight">
                Integrated Space Provider with <span class="font-semibold block mt-2 text-slate-900">Design Thinking Through Technology</span>
            </h1>
            <p class="mt-4 max-w-3xl mx-auto text-lg lg:text-xl font-light leading-relaxed text-gray-500">
                PT Wijaya Karya Bangunan Gedung Tbk (WEGE) stands as an integrated space provider committed to deep client empathy, good corporate governance (GCG) compliance, and accelerating the transition toward Net Zero Emissions.
            </p>
        </div>
    </section>

<section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 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">Corporate Profile</h2>
                    <h3 class="text-3xl font-semibold text-slate-900 mb-6">Creating the Best Spaces for Human Life</h3>
                    <div class="space-y-4 text-gray-600 font-light leading-relaxed">
                        <p>
                            Established in 2008 as a subsidiary of PT Wijaya Karya (Persero) Tbk, WEGE subsequently took a strategic step to become a public company through an Initial Public Offering (IPO) under the ticker code <strong class="text-slate-900 font-semibold">WEGE</strong>.
                        </p>
                        <p>
                            We apply the ethos of <em>Design Thinking</em> across every business line—ranging from commercial construction and public facilities to residential spaces. This approach focuses on stakeholder satisfaction and empathy toward environmental, social, and economic considerations.
                        </p>
                    </div>
                    <div class="mt-8 grid grid-cols-2 gap-6 pt-6 border-t border-gray-100">
                        <div>
                            <span class="block text-3xl font-bold text-slate-900">> 1 Decade</span>
                            <span class="text-xs text-gray-400 uppercase tracking-wider font-medium">Industry Experience</span>
                        </div>
                        <div>
                            <span class="block text-3xl font-bold text-slate-900">ISO 19650</span>
                            <span class="text-xs text-gray-400 uppercase tracking-wider font-medium">BIM Standard Certification</span>
                        </div>
                    </div>
                </div>
                <div class="space-y-6" data-aos="fade-left" data-aos-duration="1000">
                    
                    <div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition duration-300">
                        <div class="flex items-center space-x-3 mb-3">
                            <div class="p-2 bg-slate-900 text-white rounded-lg">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                            </div>
                            <h4 class="text-xs font-bold uppercase tracking-wider text-slate-400">Company Vision</h4>
                        </div>
                        <p class="text-xl font-medium text-slate-900 leading-snug">“To Be Preferred Partner in Creating Spaces for Better Human’s Life”</p>
                    </div>
                    
                    <div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition duration-300">
                        <h4 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-4">Core Values (AKHLAK)</h4>
                        <div class="grid grid-cols-2 gap-3 text-sm text-gray-700 font-light">
                            <div class="bg-slate-50/50 p-3.5 rounded-xl border border-gray-100 shadow-2xs flex items-center space-x-2"><span class="w-2 h-2 rounded-full bg-slate-900"></span><span><strong>A</strong>manah (Trustworthy)</span></div>
                            <div class="bg-slate-50/50 p-3.5 rounded-xl border border-gray-100 shadow-2xs flex items-center space-x-2"><span class="w-2 h-2 rounded-full bg-slate-900"></span><span><strong>K</strong>ompeten (Competent)</span></div>
                            <div class="bg-slate-50/50 p-3.5 rounded-xl border border-gray-100 shadow-2xs flex items-center space-x-2"><span class="w-2 h-2 rounded-full bg-slate-900"></span><span><strong>H</strong>armonis (Harmonious)</span></div>
                            <div class="bg-slate-50/50 p-3.5 rounded-xl border border-gray-100 shadow-2xs flex items-center space-x-2"><span class="w-2 h-2 rounded-full bg-slate-900"></span><span><strong>L</strong>oyal (Loyal)</span></div>
                            <div class="bg-slate-50/50 p-3.5 rounded-xl border border-gray-100 shadow-2xs flex items-center space-x-2"><span class="w-2 h-2 rounded-full bg-slate-900"></span><span><strong>A</strong>daptif (Adaptive)</span></div>
                            <div class="bg-slate-50/50 p-3.5 rounded-xl border border-gray-100 shadow-2xs flex items-center space-x-2"><span class="w-2 h-2 rounded-full bg-slate-900"></span><span><strong>K</strong>olaboratif (Collaborative)</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="pilar" 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-16" data-aos="fade-up" data-aos-duration="800">
                <h2 class="text-xs font-bold tracking-widest text-slate-400 uppercase mb-2">Core Business Model</h2>
                <h3 class="text-3xl font-semibold text-slate-900">WEGE's Three Main Pillars of Growth</h3>
                <div class="w-12 h-0.5 bg-slate-300 mx-auto mt-4"></div>
            </div>

<div class="relative z-10">
                        <div class="w-14 h-14 rounded-xl bg-slate-900 text-white flex items-center justify-center font-bold text-lg mb-6 shadow-md group-hover:bg-slate-800 transition-colors duration-300">01</div>
                        <h4 class="text-xl font-semibold text-slate-900 mb-3 group-hover:text-slate-950 transition-colors">Construction Services (On-Site)</h4>
                        <p class="text-gray-500 font-light text-sm leading-relaxed mb-6 group-hover:text-gray-700 transition-colors">
                            Providing end-to-end integrated construction services (Feasibility Study, Planning, Design, Construction, to MEP) for commercial buildings, public facilities, and offices.
                        </p>
                    </div>
                    <div class="pt-4 border-t border-gray-100 flex items-center justify-between text-xs font-semibold text-slate-500 uppercase tracking-wider relative z-10 group-hover:border-slate-300">
                        <span>Core Revenue Driver</span>
                        <svg class="w-4 h-4 text-slate-400 group-hover:translate-x-1.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </div>
                </div>

<div class="relative bg-white p-8 rounded-2xl border border-gray-100 shadow-sm flex flex-col justify-between overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 group min-h-[380px]">
                    
                    <div class="absolute inset-0 bg-cover bg-center opacity-0 group-hover:opacity-20 scale-100 group-hover:scale-110 transition-all duration-700 pointer-events-none" style="background-image: url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=800&q=80');"></div>
                    <div class="absolute inset-0 bg-gradient-to-t from-white via-white/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>

<div class="relative z-10">
                        <div class="w-14 h-14 rounded-xl bg-slate-900 text-white flex items-center justify-center font-bold text-lg mb-6 shadow-md group-hover:bg-slate-800 transition-colors duration-300">02</div>
                        <h4 class="text-xl font-semibold text-slate-900 mb-3 group-hover:text-slate-950 transition-colors">Modular & Precast Industry</h4>
                        <p class="text-gray-500 font-light text-sm leading-relaxed mb-6 group-hover:text-gray-700 transition-colors">
                            Pioneering off-site construction technology (Volumetric, WG Flatpack, Toilet Pods) offering time efficiency, high quality, eco-friendliness, and significant reduction in construction waste.
                        </p>
                    </div>
                    <div class="pt-4 border-t border-gray-100 flex items-center justify-between text-xs font-semibold text-slate-500 uppercase tracking-wider relative z-10 group-hover:border-slate-300">
                        <span>Green Innovation</span>
                        <svg class="w-4 h-4 text-slate-400 group-hover:translate-x-1.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </div>
                </div>

<div class="relative bg-white p-8 rounded-2xl border border-gray-100 shadow-sm flex flex-col justify-between overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 group min-h-[380px]">
                    
                    <div class="absolute inset-0 bg-cover bg-center opacity-0 group-hover:opacity-20 scale-100 group-hover:scale-110 transition-all duration-700 pointer-events-none" style="background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=800&q=80');"></div>
                    <div class="absolute inset-0 bg-gradient-to-t from-white via-white/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>

<div class="relative z-10">
                        <div class="w-14 h-14 rounded-xl bg-slate-900 text-white flex items-center justify-center font-bold text-lg mb-6 shadow-md group-hover:bg-slate-800 transition-colors duration-300">03</div>
                        <h4 class="text-xl font-semibold text-slate-900 mb-3 group-hover:text-slate-950 transition-colors">Concession & Investment</h4>
                        <p class="text-gray-500 font-light text-sm leading-relaxed mb-6 group-hover:text-gray-700 transition-colors">
                            Developing strategic property portfolios and long-term investments (such as BOT / Build-Operate-Transfer and PPP schemes) to generate sustainable recurring income.
                        </p>
                    </div>
                    <div class="pt-4 border-t border-gray-100 flex items-center justify-between text-xs font-semibold text-slate-500 uppercase tracking-wider relative z-10 group-hover:border-slate-300">
                        <span>Recurring Income Stream</span>
                        <svg class="w-4 h-4 text-slate-400 group-hover:translate-x-1.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="milestone" class="py-24 bg-white border-t border-gray-100 overflow-hidden">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 mb-8 flex flex-col md:flex-row md:items-end justify-between">
            <div data-aos="fade-up" data-aos-duration="800">
                <h2 class="text-xs font-bold tracking-widest text-slate-400 uppercase mb-2">Milestones</h2>
                <h3 class="text-3xl font-semibold text-slate-900">Corporate History & Transformation</h3>
                <p class="text-gray-500 font-light mt-2">The journey from a subsidiary entity to a trusted issuer on the Indonesia Stock Exchange.</p>
            </div>
            
            <div class="flex space-x-3 mt-6 md:mt-0">
                <button id="slide-left" class="p-3 rounded-full border border-gray-200 hover:bg-slate-900 hover:text-white transition-all duration-300 shadow-2xs" aria-label="Previous Slide">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                </button>
                <button id="slide-right" class="p-3 rounded-full border border-gray-200 hover:bg-slate-900 hover:text-white transition-all duration-300 shadow-2xs" aria-label="Next Slide">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </button>
            </div>
        </div>

<div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div id="milestone-slider" class="flex space-x-6 overflow-x-auto scrollbar-none snap-x snap-mandatory scroll-smooth pb-4 pt-2">
                
                
                <div class="min-w-[280px] md:min-w-[320px] snap-start p-6 bg-white rounded-2xl border border-gray-100 hover:border-slate-300 hover:shadow-xl transition-all duration-500 group">
                    <span class="text-2xl font-bold text-slate-900 block mb-2 group-hover:text-slate-700 transition-colors">2008</span>
                    <h4 class="font-semibold text-slate-800 text-sm mb-1">Establishment of WEGE</h4>
                    <p class="text-xs text-gray-500 font-light leading-relaxed">Officially established as a subsidiary of PT Wijaya Karya (Persero) Tbk focusing on building construction.</p>
                </div>
                
                
                <div class="min-w-[280px] md:min-w-[320px] snap-start p-6 bg-white rounded-2xl border border-gray-100 hover:border-slate-300 hover:shadow-xl transition-all duration-500 group">
                    <span class="text-2xl font-bold text-slate-900 block mb-2 group-hover:text-slate-700 transition-colors">2013</span>
                    <h4 class="font-semibold text-slate-800 text-sm mb-1">Commercial Project Expansion</h4>
                    <p class="text-xs text-gray-500 font-light leading-relaxed">Expanded portfolio into high-rise building development and national commercial public facilities.</p>
                </div>

<div class="min-w-[280px] md:min-w-[320px] snap-start p-6 bg-white rounded-2xl border border-gray-100 hover:border-slate-300 hover:shadow-xl transition-all duration-500 group">
                    <span class="text-2xl font-bold text-slate-900 block mb-2 group-hover:text-slate-700 transition-colors">2017</span>
                    <h4 class="font-semibold text-slate-800 text-sm mb-1">Initial Public Offering (IPO)</h4>
                    <p class="text-xs text-gray-500 font-light leading-relaxed">Listed on the Indonesia Stock Exchange under the ticker WEGE alongside full BIM technology adoption.</p>
                </div>

<div class="min-w-[280px] md:min-w-[320px] snap-start p-6 bg-white rounded-2xl border border-gray-100 hover:border-slate-300 hover:shadow-xl transition-all duration-500 group">
                    <span class="text-2xl font-bold text-slate-900 block mb-2 group-hover:text-slate-700 transition-colors">2018</span>
                    <h4 class="font-semibold text-slate-800 text-sm mb-1">Modular & Hotel Innovation</h4>
                    <p class="text-xs text-gray-500 font-light leading-relaxed">Development of initial concession lines such as Hotel de Braga by Artotel and launch of modular products.</p>
                </div>

<div class="min-w-[280px] md:min-w-[320px] snap-start p-6 bg-white rounded-2xl border border-gray-100 hover:border-slate-300 hover:shadow-xl transition-all duration-500 group">
                    <span class="text-2xl font-bold text-slate-900 block mb-2 group-hover:text-slate-700 transition-colors">2020</span>
                    <h4 class="font-semibold text-slate-800 text-sm mb-1">ISO 19650 BIM Certification</h4>
                    <p class="text-xs text-gray-500 font-light leading-relaxed">Became a pioneer contractor certified internationally with BSI Kitemark for BIM information management.</p>
                </div>

<div class="min-w-[280px] md:min-w-[320px] snap-start p-6 bg-white rounded-2xl border border-gray-100 hover:border-slate-300 hover:shadow-xl transition-all duration-500 group">
                    <span class="text-2xl font-bold text-slate-900 block mb-2 group-hover:text-slate-700 transition-colors">2021</span>
                    <h4 class="font-semibold text-slate-800 text-sm mb-1">Emergency Healthcare Facilities</h4>
                    <p class="text-xs text-gray-500 font-light leading-relaxed">Rapid construction of modular COVID-19 Emergency Hospitals using high-quality precast technology.</p>
                </div>

<div class="min-w-[280px] md:min-w-[320px] snap-start p-6 bg-white rounded-2xl border border-gray-100 hover:border-slate-300 hover:shadow-xl transition-all duration-500 group">
                    <span class="text-2xl font-bold text-slate-900 block mb-2 group-hover:text-slate-700 transition-colors">2023 - 2024</span>
                    <h4 class="font-semibold text-slate-800 text-sm mb-1">IKN Strategic Projects</h4>
                    <p class="text-xs text-gray-500 font-light leading-relaxed">Actively involved in developing office infrastructure and residential housing in the Nusantara Capital City.</p>
                </div>

<div class="min-w-[280px] md:min-w-[320px] snap-start p-6 bg-white rounded-2xl border border-gray-100 hover:border-slate-300 hover:shadow-xl transition-all duration-500 group">
                    <span class="text-2xl font-bold text-slate-900 block mb-2 group-hover:text-slate-700 transition-colors">Present</span>
                    <h4 class="font-semibold text-slate-800 text-sm mb-1">ESG & Net Zero Commitment</h4>
                    <p class="text-xs text-gray-500 font-light leading-relaxed">Accelerating sustainable green transformation to achieve Indonesia's Net Zero Emission 2060 target.</p>
                </div>

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

<section id="keunggulan" 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">Competitive Advantages</h2>
                    <h3 class="text-3xl font-semibold text-slate-900 mb-6">Pioneer of BIM Certification & International Standards</h3>
                    <p class="text-gray-600 font-light leading-relaxed mb-6">
                        WEGE is the first contractor in Indonesia to achieve the international <strong class="text-slate-900 font-semibold">ISO 19650-1 & ISO 19650-2 BSI Kitemark</strong> certification for the implementation of *Building Information Modelling* (BIM), ensuring transparency, budget efficiency, and on-time execution quality from planning through maintenance stages.
                    </p>
                    <ul class="space-y-3.5 text-sm text-gray-600 font-light">
                        <li class="flex items-center space-x-3 bg-white p-3.5 rounded-xl border border-gray-100 shadow-2xs">
                            <svg class="w-5 h-5 text-slate-900 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            <span>Healthy credit rating and streamlined financial balance sheet structure.</span>
                        </li>
                        <li class="flex items-center space-x-3 bg-white p-3.5 rounded-xl border border-gray-100 shadow-2xs">
                            <svg class="w-5 h-5 text-slate-900 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            <span>Customer Satisfaction Index scores consistently above 93%.</span>
                        </li>
                        <li class="flex items-center space-x-3 bg-white p-3.5 rounded-xl border border-gray-100 shadow-2xs">
                            <svg class="w-5 h-5 text-slate-900 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            <span>Full integration of Environmental, Social, and Governance (ESG) principles.</span>
                        </li>
                    </ul>
                </div>

<div id="saham-container" class="bg-white p-8 rounded-2xl border border-gray-100 shadow-sm space-y-6" data-aos="fade-left" data-aos-duration="1000">
                    <h4 class="text-lg font-semibold text-slate-900 border-b border-gray-100 pb-3 flex items-center justify-between">
                        <span>Major Shareholding Composition</span>
                        <span class="text-xs font-normal text-slate-400">Regularly Updated</span>
                    </h4>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="p-4 bg-slate-50/70 rounded-xl border border-gray-100">
                            <span id="saham-wika" class="block text-3xl md:text-4xl font-bold text-slate-900 mb-1 tabular-nums">0.0%</span>
                            <span class="text-xs text-gray-500 font-medium uppercase tracking-wider block">PT WIJAYA KARYA (PERSERO) TBK</span>
                        </div>
                        <div class="p-4 bg-slate-50/70 rounded-xl border border-gray-100">
                            <span id="saham-publik" class="block text-3xl md:text-4xl font-bold text-slate-900 mb-1 tabular-nums">0.0%</span>
                            <span class="text-xs text-gray-500 font-medium uppercase tracking-wider block">PUBLIC & COOPERATIVE</span>
                        </div>
                    </div>
                    <div class="pt-2">
                        
                        <div class="w-full bg-slate-300 h-3.5 rounded-full overflow-hidden flex p-0.5 relative">
                            <div id="bar-wika" class="bg-slate-900 h-full rounded-l-full transition-all duration-75 ease-out" style="width: 0%;"></div>
                            <div id="bar-publik" class="bg-slate-400 h-full rounded-r-full transition-all duration-75 ease-out" style="width: 0%;"></div>
                        </div>
                        <div class="flex justify-between text-xs font-medium text-gray-400 mt-2.5">
                            <span>Controlling Shareholder (WIKA)</span>
                            <span>Public</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<script>
    // 1. Milestone Slider
    const slider = document.getElementById('milestone-slider');
    const btnLeft = document.getElementById('slide-left');
    const btnRight = document.getElementById('slide-right');

if(slider && btnLeft && btnRight) {
        btnLeft.addEventListener('click', () => {
            slider.scrollBy({ left: -340, behavior: 'smooth' });
        });
        btnRight.addEventListener('click', () => {
            slider.scrollBy({ left: 340, behavior: 'smooth' });
        });
    }

// 2. Looping Count-Up Animation & Progress Bar Sync
    document.addEventListener("DOMContentLoaded", () => {
        const targetWika = 69.3;
        const targetPublik = 30.7;
        const duration = 2000; // Animation duration 2 seconds

const sahamWikaEl = document.getElementById("saham-wika");
        const sahamPublikEl = document.getElementById("saham-publik");
        const barWikaEl = document.getElementById("bar-wika");
        const barPublikEl = document.getElementById("bar-publik");
        const container = document.getElementById("saham-container");

let animated = false;

function animateShares() {
            let startTime = null;

function step(timestamp) {
                if (!startTime) startTime = timestamp;
                const progress = Math.min((timestamp - startTime) / duration, 1);
                
                // Ease-out cubic animation
                const easeOutProgress = 1 - Math.pow(1 - progress, 3);

const currentWika = (easeOutProgress * targetWika).toFixed(1);
                const currentPublik = (easeOutProgress * targetPublik).toFixed(1);

sahamWikaEl.textContent = `${currentWika}%`;
                sahamPublikEl.textContent = `${currentPublik}%`;

barWikaEl.style.width = `${currentWika}%`;
                barPublikEl.style.width = `${currentPublik}%`;

if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            }

window.requestAnimationFrame(step);
        }

// Trigger animation using IntersectionObserver when scrolling into view
        if ('IntersectionObserver' in window && container) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting && !animated) {
                        animated = true;
                        animateShares();
                    }
                });
            }, { threshold: 0.3 });

observer.observe(container);
        } else {
            // Fallback if IntersectionObserver is not supported
            animateShares();
        }
    });
</script>

<style>
    .scrollbar-none::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-none {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
</style>

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

<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/about-us/