Pages
/
microsite
Edit Microsite
Kelola struktur HTML dan relasi halaman (Sub-Page).
← Kembali ke List
Judul Microsite:
Sub Halaman Dari (Opsional):
-- Berdiri Sendiri (Parent) --
ver2
demo
Waskita
timah
</>
HTML & Tailwind Code Source
Tekan TAB untuk indentasi
<!DOCTYPE html> <html lang="id" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Investor Relations - PT Wijaya Karya Bangunan Gedung Tbk (WEGE)</title> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Alpine.js untuk Interaktivitas Mega Menu, Slider, & Dropdown --> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <!-- Google Fonts Inter --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { colors: { wege: { navy: '#06283D', blue: '#1363DF', light: '#EEEFF2', accent: '#00FFCA', teal: '#00CDAC' } }, fontFamily: { sans: ['Inter', 'sans-serif'], } } } } </script> <style> .glass-nav { background: rgba(6, 40, 61, 0.95); backdrop-filter: blur(10px); } </style> </head> <body class="bg-slate-950 text-slate-100 font-sans antialiased selection:bg-wege-accent selection:text-slate-950" x-data="{ mobileMenu: false, activeMegaMenu: null, activeFaq: null }"> <!-- 1. HEADER DENGAN MEGA MENU & ANIMASI HOVER --> <header class="sticky top-0 z-50 glass-nav border-b border-slate-800 transition-all duration-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-20"> <!-- Logo --> <a href="#" class="flex items-center gap-3"> <div class="w-11 h-11 rounded-xl bg-gradient-to-tr from-wege-blue to-wege-accent flex items-center justify-center font-black text-slate-950 text-xl shadow-lg shadow-wege-blue/30"> WG </div> <div> <span class="text-lg font-extrabold tracking-wider block text-white">WIKA GEDUNG</span> <span class="text-[10px] text-wege-accent tracking-widest block font-semibold">INVESTOR RELATIONS</span> </div> </a> <!-- Desktop Navigation with Mega Menu --> <nav class="hidden lg:flex items-center space-x-6"> <a href="#" class="text-sm font-medium text-slate-300 hover:text-wege-accent transition-colors py-2">Beranda</a> <!-- Mega Menu 1: Tentang Kami --> <div class="relative" @mouseleave="activeMegaMenu = null"> <button @mouseover="activeMegaMenu = 'tentang'" class="flex items-center text-sm font-medium text-slate-300 hover:text-wege-accent transition-colors py-6"> <span>Tentang Kami</span> <svg class="w-4 h-4 ml-1 transition-transform duration-200" :class="activeMegaMenu === 'tentang' ? 'rotate-180 text-wege-accent' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> </button> <!-- Mega Menu Panel --> <div x-show="activeMegaMenu === 'tentang'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" class="absolute top-full left-[-100px] w-[600px] bg-slate-900 border border-slate-800 shadow-2xl rounded-2xl p-6 grid grid-cols-2 gap-6 z-50"> <div> <h4 class="text-xs font-bold text-wege-accent uppercase tracking-wider mb-3">Profil Korporasi</h4> <ul class="space-y-2"> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Sekapur Sirih</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Visi, Misi & Budaya</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Jejak Langkah</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Struktur Organisasi</a></li> </ul> </div> <div> <h4 class="text-xs font-bold text-wege-accent uppercase tracking-wider mb-3">Tata Kelola</h4> <ul class="space-y-2"> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Dewan Komisaris & Direksi</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Komite Audit & Lainnya</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Sekretaris Perusahaan</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Kode Etik Perusahaan</a></li> </ul> </div> </div> </div> <!-- Mega Menu 2: Hubungan Investor --> <div class="relative" @mouseleave="activeMegaMenu = null"> <button @mouseover="activeMegaMenu = 'investor'" class="flex items-center text-sm font-medium text-slate-300 hover:text-wege-accent transition-colors py-6"> <span>Hubungan Investor</span> <svg class="w-4 h-4 ml-1 transition-transform duration-200" :class="activeMegaMenu === 'investor' ? 'rotate-180 text-wege-accent' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> </button> <!-- Mega Menu Panel --> <div x-show="activeMegaMenu === 'investor'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" class="absolute top-full left-[-150px] w-[650px] bg-slate-900 border border-slate-800 shadow-2xl rounded-2xl p-6 grid grid-cols-2 gap-6 z-50"> <div> <h4 class="text-xs font-bold text-wege-accent uppercase tracking-wider mb-3">Informasi Saham & Obligasi</h4> <ul class="space-y-2"> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Harga Saham & Grafik (WEGE)</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Kalkulator Saham</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Komposisi Pemegang Saham</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Dividen Perusahaan</a></li> </ul> </div> <div> <h4 class="text-xs font-bold text-wege-accent uppercase tracking-wider mb-3">Laporan & Publikasi</h4> <ul class="space-y-2"> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Laporan Tahunan (Annual Report)</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Laporan Keuangan Triwulanan</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">Paparan Publik (Public Expose)</a></li> <li><a href="#" class="text-sm text-slate-300 hover:text-wege-accent block py-1 transition-colors">RUPS & Pengumuman</a></li> </ul> </div> </div> </div> <a href="#" class="text-sm font-medium text-slate-300 hover:text-wege-accent transition-colors">Bisnis & Proyek</a> <a href="#" class="text-sm font-medium text-slate-300 hover:text-wege-accent transition-colors">ESG & Keberlanjutan</a> <a href="#" class="text-sm font-medium text-slate-300 hover:text-wege-accent transition-colors">Media & Berita</a> </nav> <!-- Mobile Menu Button --> <div class="lg:hidden flex items-center"> <button @click="mobileMenu = !mobileMenu" class="text-slate-300 hover:text-white p-2"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> </button> </div> </div> </div> <!-- Mobile Menu Dropdown --> <div x-show="mobileMenu" x-transition class="lg:hidden bg-slate-900 border-b border-slate-800 px-4 pt-3 pb-6 space-y-3"> <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-slate-200 hover:bg-slate-800">Beranda</a> <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-slate-200 hover:bg-slate-800">Tentang Kami</a> <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-slate-200 hover:bg-slate-800">Hubungan Investor</a> <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-slate-200 hover:bg-slate-800">Bisnis & Proyek</a> <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-slate-200 hover:bg-slate-800">ESG</a> </div> </header> <main> <!-- 2. HERO SLIDER DENGAN GAMBAR WIKA GEDUNG & TEKS DINAMIS --> <section class="relative h-[85vh] w-full overflow-hidden bg-slate-900" x-data="{ currentSlide: 0, slides: [ { title: 'Inovasi Konstruksi & Modular Terdepan', subtitle: 'Membangun masa depan melalui efisiensi tinggi, kualitas terbaik, dan pembangunan berkelanjutan.', img: 'https://images.unsplash.com/photo-1541888946425-d0fbb18f86f3?auto=format&fit=crop&w=1920&q=80' }, { title: 'Pertumbuhan Kinerja Keuangan Berkelanjutan', subtitle: 'Komitmen kuat manajemen dalam memberikan nilai tambah dan return optimal bagi para pemegang saham.', img: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=80' }, { title: 'Transformasi Digital & Tata Kelola Unggul', subtitle: 'Penerapan standar Good Corporate Governance (GCG) di seluruh lini operasional bisnis perusahaan.', img: 'https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1920&q=80' } ], init() { setInterval(() => { this.currentSlide = (this.currentSlide + 1) % this.slides.length }, 6000) }}"> <template x-for="(slide, index) in slides" :key="index"> <div x-show="currentSlide === index" x-transition:enter="transition-opacity ease-out duration-1000" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-1000" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0"> <img :src="slide.img" class="w-full h-full object-cover" alt="Wika Gedung Project"> <div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-950/80 to-transparent"></div> <div class="absolute inset-0 flex items-center"> <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 w-full"> <div class="max-w-2xl space-y-6"> <span class="px-3.5 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest bg-wege-accent/20 text-wege-accent border border-wege-accent/40 backdrop-blur-md"> PT Wijaya Karya Bangunan Gedung Tbk </span> <h1 class="text-4xl sm:text-6xl font-extrabold text-white tracking-tight leading-tight" x-text="slide.title"></h1> <p class="text-slate-300 text-lg sm:text-xl font-normal leading-relaxed" x-text="slide.subtitle"></p> <div class="flex items-center gap-4 pt-4"> <a href="#" class="px-8 py-3.5 rounded-xl bg-wege-blue text-white font-semibold hover:bg-wege-blue/80 transition-all shadow-xl shadow-wege-blue/30">Jelajahi Investor</a> <a href="#" class="px-8 py-3.5 rounded-xl bg-slate-900/80 border border-slate-700 text-white font-semibold hover:bg-slate-800 transition-all backdrop-blur-md">Laporan Tahunan</a> </div> </div> </div> </div> </div> </template> <!-- Slider Indicators --> <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-30 flex space-x-3"> <template x-for="(slide, index) in slides" :key="index"> <button @click="currentSlide = index" class="w-10 h-1.5 rounded-full transition-all duration-300" :class="currentSlide === index ? 'bg-wege-accent w-12' : 'bg-slate-600 hover:bg-slate-500'"></button> </template> </div> </section> <!-- 3. SIAPA WEGE --> <section class="py-24 bg-slate-950 relative overflow-hidden"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="space-y-6"> <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-wege-blue/10 border border-wege-blue/30 text-wege-accent text-xs font-semibold tracking-wider uppercase"> Tentang Perusahaan </div> <h2 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight leading-tight"> Siapa PT Wijaya Karya Bangunan Gedung Tbk (WEGE)? </h2> <p class="text-slate-300 text-base sm:text-lg leading-relaxed"> WEGE (IDX: WEGE) adalah anak perusahaan dari PT Wijaya Karya (Persero) Tbk yang bergerak di bidang pembangunan gedung terintegrasi, modular, dan EPC. Kami menghadirkan standar kualitas konstruksi tertinggi dengan portofolio proyek nasional bertaraf internasional. </p> <div class="grid grid-cols-2 gap-6 pt-4"> <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800"> <span class="block text-3xl sm:text-4xl font-black text-wege-accent">15+</span> <span class="text-slate-400 text-sm mt-1 block">Tahun Pengalaman Konstruksi</span> </div> <div class="p-6 rounded-2xl bg-slate-900 border border-slate-800"> <span class="block text-3xl sm:text-4xl font-black text-wege-accent">100+</span> <span class="text-slate-400 text-sm mt-1 block">Proyek Ikonik Nasional</span> </div> </div> </div> <div class="relative"> <div class="relative h-[420px] w-full rounded-3xl overflow-hidden border border-slate-800 shadow-2xl"> <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover" alt="Wika Gedung Building"> <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent"></div> </div> </div> </div> </div> </section> <!-- 4. KEUNGGULAN WEGE & ANIMASI DROPDOWN --> <section class="py-24 bg-slate-900 border-t border-slate-800"> <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="px-3 py-1 rounded-full bg-wege-accent/10 border border-wege-accent/30 text-wege-accent text-xs font-semibold tracking-wider uppercase"> Keunggulan Kompetitif </span> <h2 class="text-3xl sm:text-4xl font-extrabold text-white mt-4 mb-4">Mengapa Berinvestasi di WEGE?</h2> <p class="text-slate-400 text-base">Pilar kekuatan strategis yang menjadikan WEGE sebagai pemimpin pasar konstruksi modular dan gedung terintegrasi di Indonesia.</p> </div> <!-- Accordion / Dropdown Animation Container --> <div class="max-w-4xl mx-auto space-y-4"> <!-- Item 1 --> <div class="bg-slate-950 rounded-2xl border border-slate-800 overflow-hidden transition-all duration-300"> <button @click="activeFaq = activeFaq === 1 ? null : 1" class="w-full flex items-center justify-between p-6 text-left focus:outline-none"> <div class="flex items-center gap-4"> <div class="w-10 h-10 rounded-xl bg-wege-blue/20 text-wege-accent flex items-center justify-center font-bold">01</div> <span class="text-lg font-bold text-white">Inovasi Teknologi Konstruksi Modular Terdepan</span> </div> <svg class="w-5 h-5 text-wege-accent transform transition-transform duration-300" :class="activeFaq === 1 ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> </button> <div x-show="activeFaq === 1" x-transition class="px-6 pb-6 text-slate-300 text-sm leading-relaxed border-t border-slate-900 pt-4"> WEGE adalah pionir dalam teknologi bangunan modular di Indonesia. Sistem konstruksi ini menawarkan kecepatan pembangunan hingga 50% lebih cepat dibandingkan metode konvensional dengan kontrol kualitas pabrik yang sangat presisi dan ramah lingkungan. </div> </div> <!-- Item 2 --> <div class="bg-slate-950 rounded-2xl border border-slate-800 overflow-hidden transition-all duration-300"> <button @click="activeFaq = activeFaq === 2 ? null : 2" class="w-full flex items-center justify-between p-6 text-left focus:outline-none"> <div class="flex items-center gap-4"> <div class="w-10 h-10 rounded-xl bg-wege-blue/20 text-wege-accent flex items-center justify-center font-bold">02</div> <span class="text-lg font-bold text-white">Tata Kelola Perusahaan yang Kuat & Transparan (GCG)</span> </div> <svg class="w-5 h-5 text-wege-accent transform transition-transform duration-300" :class="activeFaq === 2 ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> </button> <div x-show="activeFaq === 2" x-transition class="px-6 pb-6 text-slate-300 text-sm leading-relaxed border-t border-slate-900 pt-4"> Sebagai emiten terbuka di Bursa Efek Indonesia (IDX), WEGE menjunjung tinggi prinsip Good Corporate Governance, akuntabilitas, serta keterbukaan informasi publik yang optimal bagi seluruh investor institusi maupun ritel. </div> </div> <!-- Item 3 --> <div class="bg-slate-950 rounded-2xl border border-slate-800 overflow-hidden transition-all duration-300"> <button @click="activeFaq = activeFaq === 3 ? null : 3" class="w-full flex items-center justify-between p-6 text-left focus:outline-none"> <div class="flex items-center gap-4"> <div class="w-10 h-10 rounded-xl bg-wege-blue/20 text-wege-accent flex items-center justify-center font-bold">03</div> <span class="text-lg font-bold text-white">Portofolio Proyek Skala Nasional & Internasional</span> </div> <svg class="w-5 h-5 text-wege-accent transform transition-transform duration-300" :class="activeFaq === 3 ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> </button> <div x-show="activeFaq === 3" x-transition class="px-6 pb-6 text-slate-300 text-sm leading-relaxed border-t border-slate-900 pt-4"> Portofolio kami mencakup pembangunan gedung perkantoran tinggi (high-rise), fasilitas publik, hunian vertikal, bandara, hingga infrastruktur strategis nasional yang dikerjakan dengan standar keselamatan K3 tertinggi. </div> </div> </div> </div> </section> <!-- 5. SLIDER RINGKASAN PEKERJAAN --> <section class="py-24 bg-slate-950"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex flex-col md:flex-row md:items-end justify-between mb-12"> <div> <span class="px-3 py-1 rounded-full bg-wege-blue/10 border border-wege-blue/30 text-wege-accent text-xs font-semibold tracking-wider uppercase"> Portofolio Utama </span> <h2 class="text-3xl sm:text-4xl font-extrabold text-white mt-4">Ringkasan Proyek & Pekerjaan</h2> </div> <a href="#" class="mt-4 md:mt-0 text-sm font-semibold text-wege-accent hover:underline flex items-center gap-1"> Lihat Semua Proyek <svg class="w-4 h-4" 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"></path></svg> </a> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <!-- Project Card 1 --> <div class="group bg-slate-900 rounded-2xl overflow-hidden border border-slate-800 hover:border-wege-accent/40 transition-all"> <div class="h-60 w-full overflow-hidden relative"> <img src="https://images.unsplash.com/photo-1541888946425-d0fbb18f86f3?auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="High Rise Building"> <span class="absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-semibold bg-wege-navy/80 text-wege-accent border border-wege-accent/30 backdrop-blur-md">Komersial</span> </div> <div class="p-6 space-y-3"> <h3 class="text-xl font-bold text-white group-hover:text-wege-accent transition-colors">Pembangunan Gedung Perkantoran Modern</h3> <p class="text-slate-400 text-sm">Konstruksi struktur terintegrasi dengan penerapan sistem smart building ramah lingkungan.</p> </div> </div> <!-- Project Card 2 --> <div class="group bg-slate-900 rounded-2xl overflow-hidden border border-slate-800 hover:border-wege-accent/40 transition-all"> <div class="h-60 w-full overflow-hidden relative"> <img src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="Modular Construction"> <span class="absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-semibold bg-wege-navy/80 text-wege-accent border border-wege-accent/30 backdrop-blur-md">Modular</span> </div> <div class="p-6 space-y-3"> <h3 class="text-xl font-bold text-white group-hover:text-wege-accent transition-colors">Proyek Konstruksi Modular Nasional</h3> <p class="text-slate-400 text-sm">Solusi cepat tanggap dan efisien untuk fasilitas hunian serta perkantoran daerah.</p> </div> </div> <!-- Project Card 3 --> <div class="group bg-slate-900 rounded-2xl overflow-hidden border border-slate-800 hover:border-wege-accent/40 transition-all"> <div class="h-60 w-full overflow-hidden relative"> <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="Public Facility"> <span class="absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-semibold bg-wege-navy/80 text-wege-accent border border-wege-accent/30 backdrop-blur-md">Fasilitas Publik</span> </div> <div class="p-6 space-y-3"> <h3 class="text-xl font-bold text-white group-hover:text-wege-accent transition-colors">Infrastruktur Gedung Publik & Layanan</h3> <p class="text-slate-400 text-sm">Pembangunan fasilitas publik berskala besar dengan standar mutu keselamatan tertinggi.</p> </div> </div> </div> </div> </section> <!-- 6. STOCK INFO WIKA GEDUNG --> <section class="py-24 bg-slate-900 border-t border-slate-800"> <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="px-3 py-1 rounded-full bg-wege-accent/10 border border-wege-accent/30 text-wege-accent text-xs font-semibold tracking-wider uppercase"> Kinerja Saham IDX: WEGE </span> <h2 class="text-3xl sm:text-4xl font-extrabold text-white mt-4">Stock Info Real-Time</h2> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <!-- Main Stock Card --> <div class="bg-slate-950 p-8 rounded-3xl border border-slate-800 flex flex-col justify-between"> <div> <div class="flex items-center justify-between mb-4"> <span class="text-sm font-bold text-slate-400">IDX: WEGE</span> <span class="px-2.5 py-1 rounded-full text-xs font-bold bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">+2.45%</span> </div> <div class="text-4xl sm:text-5xl font-black text-white tracking-tight">Rp 126</div> <p class="text-xs text-slate-500 mt-2">Terakhir diperbarui: 12 Sep 2026</p> </div> <div class="mt-8 pt-6 border-t border-slate-900 grid grid-cols-2 gap-4"> <div> <span class="text-xs text-slate-500 block">Open</span> <span class="text-base font-bold text-white">Rp 123</span> </div> <div> <span class="text-xs text-slate-500 block">Volume</span> <span class="text-base font-bold text-white">1.45M</span> </div> </div> </div> <!-- Stock Stats Grid --> <div class="lg:col-span-2 grid grid-cols-2 sm:grid-cols-3 gap-6"> <div class="bg-slate-950 p-6 rounded-2xl border border-slate-800 flex flex-col justify-center"> <span class="text-xs text-slate-400 font-medium">Market Cap</span> <span class="text-xl sm:text-2xl font-bold text-white mt-2">Rp 1.21 Triliun</span> </div> <div class="bg-slate-950 p-6 rounded-2xl border border-slate-800 flex flex-col justify-center"> <span class="text-xs text-slate-400 font-medium">P/E Ratio</span> <span class="text-xl sm:text-2xl font-bold text-white mt-2">11.42x</span> </div> <div class="bg-slate-950 p-6 rounded-2xl border border-slate-800 flex flex-col justify-center"> <span class="text-xs text-slate-400 font-medium">52W High</span> <span class="text-xl sm:text-2xl font-bold text-white mt-2">Rp 145</span> </div> <div class="bg-slate-950 p-6 rounded-2xl border border-slate-800 flex flex-col justify-center"> <span class="text-xs text-slate-400 font-medium">52W Low</span> <span class="text-xl sm:text-2xl font-bold text-white mt-2">Rp 102</span> </div> <div class="bg-slate-950 p-6 rounded-2xl border border-slate-800 flex flex-col justify-center"> <span class="text-xs text-slate-400 font-medium">EPS</span> <span class="text-xl sm:text-2xl font-bold text-white mt-2">Rp 11.03</span> </div> <div class="bg-slate-950 p-6 rounded-2xl border border-slate-800 flex flex-col justify-center"> <span class="text-xs text-slate-400 font-medium">Dividend Yield</span> <span class="text-xl sm:text-2xl font-bold text-white mt-2">4.15%</span> </div> </div> </div> </div> </section> <!-- 7. SECTION ESG & CTA KE ESG --> <section class="py-24 bg-gradient-to-b from-slate-950 to-slate-900 relative overflow-hidden"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div class="bg-gradient-to-r from-wege-navy to-slate-900 border border-slate-800 rounded-3xl p-8 sm:p-14 shadow-2xl flex flex-col lg:flex-row items-center justify-between gap-8"> <div class="space-y-4 max-w-2xl"> <span class="px-3 py-1 rounded-full bg-wege-accent/20 text-wege-accent text-xs font-bold uppercase tracking-widest border border-wege-accent/30"> Sustainability & ESG </span> <h2 class="text-3xl sm:text-4xl font-extrabold text-white tracking-tight"> Komitmen Lingkungan, Sosial & Tata Kelola (ESG) </h2> <p class="text-slate-300 text-base leading-relaxed"> WEGE mengintegrasikan prinsip keberlanjutan dalam setiap proyek konstruksi modular ramah lingkungan, pemberdayaan komunitas lokal, serta standar tata kelola perusahaan yang bersih. </p> </div> <div> <a href="#" class="inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-wege-accent text-slate-950 font-bold hover:bg-wege-accent/90 transition-all shadow-xl shadow-wege-accent/20"> <span>Jelajahi Laporan ESG</span> <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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg> </a> </div> </div> </div> </section> <!-- 8. UPCOMING EVENTS & QUICK LINKS (Pembaruan Layout Baru) --> <section class="py-24 bg-slate-950 border-t border-slate-800"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start"> <!-- Left Column: Upcoming Events / Financial Calendar --> <div class="lg:col-span-5 bg-slate-900/90 border border-slate-800/80 rounded-3xl p-8 shadow-2xl space-y-8"> <div> <span class="text-xs font-bold uppercase tracking-widest text-wege-accent bg-wege-accent/10 px-3 py-1 rounded-full border border-wege-accent/20">Financial Calendar</span> <h2 class="text-2xl sm:text-3xl font-extrabold text-white mt-3">Upcoming Events</h2> <p class="text-slate-400 text-sm mt-1">Agenda penting dan rilis keuangan perusahaan.</p> </div> <div class="space-y-6 divide-y divide-slate-800/60"> <!-- Event 1 --> <div class="pt-6 first:pt-0 flex items-start gap-4 group"> <div class="w-3 h-3 rounded-full bg-wege-accent mt-1.5 shrink-0 shadow-[0_0_10px_#00FFCA]"></div> <div> <span class="text-xs font-bold tracking-wide text-wege-accent uppercase">31 Jul 2026</span> <h4 class="text-base font-bold text-white group-hover:text-wege-accent transition-colors mt-0.5">Q2 2026 Financial Results Release</h4> <p class="text-xs text-slate-400 mt-1">Publikasi laporan keuangan kuartal kedua.</p> </div> </div> <!-- Event 2 --> <div class="pt-6 flex items-start gap-4 group"> <div class="w-3 h-3 rounded-full bg-wege-blue mt-1.5 shrink-0 shadow-[0_0_10px_#1363DF]"></div> <div> <span class="text-xs font-bold tracking-wide text-wege-blue uppercase">15 Sep 2026</span> <h4 class="text-base font-bold text-white group-hover:text-wege-accent transition-colors mt-0.5">Public Expose 2026</h4> <p class="text-xs text-slate-400 mt-1">Paparan publik kinerja dan strategi korporat.</p> </div> </div> <!-- Event 3 --> <div class="pt-6 flex items-start gap-4 group"> <div class="w-3 h-3 rounded-full bg-amber-400 mt-1.5 shrink-0 shadow-[0_0_10px_rgba(251,191,36,0.5)]"></div> <div> <span class="text-xs font-bold tracking-wide text-amber-400 uppercase">30 Oct 2026</span> <h4 class="text-base font-bold text-white group-hover:text-wege-accent transition-colors mt-0.5">Q3 2026 Financial Results Release</h4> <p class="text-xs text-slate-400 mt-1">Publikasi laporan keuangan kuartal ketiga.</p> </div> </div> </div> <div class="pt-2"> <a href="#" class="w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-sm font-semibold flex items-center justify-center gap-2 transition-all border border-slate-700"> <span>Lihat Kalender Lengkap</span> <svg class="w-4 h-4" 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"></path></svg> </a> </div> </div> <!-- Right Column: Quick Links --> <div class="lg:col-span-7 space-y-6"> <div> <span class="text-xs font-bold uppercase tracking-widest text-wege-blue bg-wege-blue/10 px-3 py-1 rounded-full border border-wege-blue/20">Akses Cepat</span> <h2 class="text-2xl sm:text-3xl font-extrabold text-white mt-3">Quick Links</h2> <p class="text-slate-400 text-sm mt-1">Dokumen dan laporan korporat yang sering diakses.</p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-5"> <!-- Link Card 1 --> <a href="#" class="group bg-slate-900 border border-slate-800 hover:border-wege-accent/50 p-6 rounded-3xl transition-all duration-300 flex items-center gap-5 hover:shadow-xl hover:shadow-wege-accent/5"> <div class="w-14 h-14 rounded-2xl bg-slate-950 border border-slate-800 flex items-center justify-center shrink-0 group-hover:bg-wege-accent/10 group-hover:border-wege-accent/30 transition-all"> <svg class="w-6 h-6 text-wege-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg> </div> <div> <h4 class="text-base font-bold text-white group-hover:text-wege-accent transition-colors">Annual Report 2025</h4> <p class="text-xs text-slate-400 mt-1 leading-relaxed">Full-year performance & strategy</p> </div> </a> <!-- Link Card 2 --> <a href="#" class="group bg-slate-900 border border-slate-800 hover:border-wege-accent/50 p-6 rounded-3xl transition-all duration-300 flex items-center gap-5 hover:shadow-xl hover:shadow-wege-accent/5"> <div class="w-14 h-14 rounded-2xl bg-slate-950 border border-slate-800 flex items-center justify-center shrink-0 group-hover:bg-wege-accent/10 group-hover:border-wege-accent/30 transition-all"> <svg class="w-6 h-6 text-wege-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg> </div> <div> <h4 class="text-base font-bold text-white group-hover:text-wege-accent transition-colors">Financial Reports</h4> <p class="text-xs text-slate-400 mt-1 leading-relaxed">Quarterly & annual statements</p> </div> </a> <!-- Link Card 3 --> <a href="#" class="group bg-slate-900 border border-slate-800 hover:border-wege-accent/50 p-6 rounded-3xl transition-all duration-300 flex items-center gap-5 hover:shadow-xl hover:shadow-wege-accent/5"> <div class="w-14 h-14 rounded-2xl bg-slate-950 border border-slate-800 flex items-center justify-center shrink-0 group-hover:bg-wege-accent/10 group-hover:border-wege-accent/30 transition-all"> <svg class="w-6 h-6 text-wege-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path></svg> </div> <div> <h4 class="text-base font-bold text-white group-hover:text-wege-accent transition-colors">Investor Presentation</h4> <p class="text-xs text-slate-400 mt-1 leading-relaxed">Latest corporate update deck</p> </div> </a> <!-- Link Card 4 --> <a href="#" class="group bg-slate-900 border border-slate-800 hover:border-wege-accent/50 p-6 rounded-3xl transition-all duration-300 flex items-center gap-5 hover:shadow-xl hover:shadow-wege-accent/5"> <div class="w-14 h-14 rounded-2xl bg-slate-950 border border-slate-800 flex items-center justify-center shrink-0 group-hover:bg-wege-accent/10 group-hover:border-wege-accent/30 transition-all"> <svg class="w-6 h-6 text-wege-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg> </div> <div> <h4 class="text-base font-bold text-white group-hover:text-wege-accent transition-colors">Regulatory Filings</h4> <p class="text-xs text-slate-400 mt-1 leading-relaxed">Disclosures to the exchange & regulators</p> </div> </a> </div> </div> </div> </div> </section> <!-- 9. KONTAK IR --> <section class="py-24 bg-slate-900 border-t border-slate-800"> <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="px-3 py-1 rounded-full bg-wege-blue/10 border border-wege-blue/30 text-wege-accent text-xs font-semibold tracking-wider uppercase"> Hubungi Kami </span> <h2 class="text-3xl sm:text-4xl font-extrabold text-white mt-4">Sekretariat & Investor Relations</h2> <p class="text-slate-400 text-base mt-2">Tim hubungan investor kami siap membantu pertanyaan Anda terkait informasi korporat dan saham WEGE.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> <div class="bg-slate-950 p-8 rounded-3xl border border-slate-800 text-center space-y-4"> <div class="w-14 h-14 mx-auto rounded-2xl bg-wege-blue/20 text-wege-accent flex items-center justify-center"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path></svg> </div> <h3 class="text-lg font-bold text-white">Kantor Pusat</h3> <p class="text-slate-400 text-sm leading-relaxed">WIKA Tower 2, Lt. 1-3, Jl. D.I. Panjaitan Kav. 9-10, Jakarta Timur 13340</p> </div> <div class="bg-slate-950 p-8 rounded-3xl border border-slate-800 text-center space-y-4"> <div class="w-14 h-14 mx-auto rounded-2xl bg-wege-blue/20 text-wege-accent flex items-center justify-center"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg> </div> <h3 class="text-lg font-bold text-white">Email Resmi IR</h3> <p class="text-slate-400 text-sm leading-relaxed">investor.relations@wikagedung.co.id<br>corsec@wikagedung.co.id</p> </div> <div class="bg-slate-950 p-8 rounded-3xl border border-slate-800 text-center space-y-4"> <div class="w-14 h-14 mx-auto rounded-2xl bg-wege-blue/20 text-wege-accent flex items-center justify-center"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg> </div> <h3 class="text-lg font-bold text-white">Telepon / Fax</h3> <p class="text-slate-400 text-sm leading-relaxed">Telp: (021) 8590 8882<br>Fax: (021) 8590 8883</p> </div> </div> </div> </section> </main> <!-- 10. FOOTER SEPERTI SITUS WIKAGEDUNG.CO.ID --> <footer class="bg-slate-950 border-t border-slate-800 pt-16 pb-12 text-slate-400 text-sm"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 mb-12"> <!-- Col 1: Brand Info --> <div class="lg:col-span-2 space-y-4"> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-wege-blue to-wege-accent flex items-center justify-center font-black text-slate-950 text-xl"> WG </div> <span class="text-lg font-extrabold text-white">PT Wijaya Karya Bangunan Gedung Tbk</span> </div> <p class="text-slate-400 text-sm leading-relaxed pr-6"> Anak perusahaan PT Wijaya Karya (Persero) Tbk yang berfokus pada pembangunan gedung terintegrasi, modular, dan layanan EPC berkualitas tinggi. </p> </div> <!-- Col 2: Tautan Cepat --> <div class="space-y-4"> <h4 class="text-white font-bold text-base">Tautan Cepat</h4> <ul class="space-y-2.5"> <li><a href="#" class="hover:text-wege-accent transition-colors">Tentang Kami</a></li> <li><a href="#" class="hover:text-wege-accent transition-colors">Proyek Kami</a></li> <li><a href="#" class="hover:text-wege-accent transition-colors">Hubungan Investor</a></li> <li><a href="#" class="hover:text-wege-accent transition-colors">Karir</a></li> </ul> </div> <!-- Col 3: Hubungan Investor --> <div class="space-y-4"> <h4 class="text-white font-bold text-base">Investor</h4> <ul class="space-y-2.5"> <li><a href="#" class="hover:text-wege-accent transition-colors">Informasi Saham</a></li> <li><a href="#" class="hover:text-wege-accent transition-colors">Laporan Tahunan</a></li> <li><a href="#" class="hover:text-wege-accent transition-colors">Keterbukaan Informasi</a></li> <li><a href="#" class="hover:text-wege-accent transition-colors">RUPS</a></li> </ul> </div> <!-- Col 4: Regulasi & Lainnya --> <div class="space-y-4"> <h4 class="text-white font-bold text-base">Regulasi & Legal</h4> <ul class="space-y-2.5"> <li><a href="#" class="hover:text-wege-accent transition-colors">Good Corporate Governance</a></li> <li><a href="#" class="hover:text-wege-accent transition-colors">Whistleblowing System</a></li> <li><a href="#" class="hover:text-wege-accent transition-colors">Kebijakan Privasi</a></li> </ul> </div> </div> <div class="border-t border-slate-800 pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-500"> <p>© 2026 PT Wijaya Karya Bangunan Gedung Tbk. All rights reserved.</p> <div class="flex space-x-6 mt-4 sm:mt-0"> <a href="#" class="hover:text-wege-accent transition-colors">Syarat & Ketentuan</a> <a href="#" class="hover:text-wege-accent transition-colors">Peta Situs</a> </div> </div> </div> </footer> </body> </html>
🖥️ Live Responsive Preview
Desktop
Tablet
Mobile
URL Publik:
https://remark.co.id/micro/wg/
Simpan Microsite