Pages
/
microsite
Edit Microsite
Kelola struktur HTML dan relasi halaman (Sub-Page).
← Kembali ke List
Judul Microsite:
Sub Halaman Dari (Opsional):
-- Berdiri Sendiri (Parent) --
ver2
demo
wg
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 Waskita Karya (Persero) Tbk (WSKT)</title> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Google Fonts: Plus Jakarta Sans --> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }, colors: { waskita: { 900: '#0b192c', 800: '#1e3e62', accent: '#ff6600', // Konstruksi Orange limeNeon: '#ccff00', // Warna hijau neon persis gambar limeCard: '#e4ff3b' } } } } } </script> <style> .hero-custom-bg { background-image: linear-gradient(to bottom, rgba(11, 25, 44, 0.45), rgba(11, 25, 44, 0.85)), url('https://images.unsplash.com/photo-1466611653911-95081537e5b7?q=80&w=1920&auto=format&fit=crop'); background-size: cover; background-position: center; } </style> </head> <body class="bg-white text-slate-800 antialiased font-sans"> <!-- ✅ Navbar / Header --> <nav class="absolute top-0 left-0 right-0 z-50 bg-transparent py-5 px-6 lg:px-12"> <div class="max-w-7xl mx-auto flex justify-between items-center"> <!-- Brand Logo --> <a href="#" class="flex items-center gap-2"> <div class="bg-waskita-accent text-white font-black text-lg px-3 py-1.5 rounded-lg tracking-wider">W</div> <div> <span class="block font-extrabold text-white text-base leading-tight">WASKITA</span> <span class="block text-[10px] font-bold text-waskita-limeNeon tracking-widest uppercase">Investor Relations</span> </div> </a> <!-- Nav Links (Desktop) --> <div class="hidden lg:flex items-center space-x-8 font-medium text-sm text-slate-200"> <a href="#corporate" class="hover:text-waskita-limeNeon transition">Corporate</a> <a href="#financial" class="hover:text-waskita-limeNeon transition">Financial Reports</a> <a href="#stock" class="hover:text-waskita-limeNeon transition">Stock & Bonds</a> <a href="#regulatory" class="hover:text-waskita-limeNeon transition">Regulatory Filings</a> <a href="#presentations" class="hover:text-waskita-limeNeon transition">Presentations</a> </div> <!-- Get Started Button --> <div class="hidden lg:block"> <a href="#contact" class="bg-waskita-limeNeon hover:bg-lime-400 text-slate-950 font-bold px-6 py-2.5 rounded-full text-sm transition shadow-lg"> Get Started </a> </div> <!-- Mobile Menu Toggle --> <button id="menu-btn" class="lg:hidden text-2xl text-white focus:outline-none"> <i class="fa-solid fa-bars"></i> </button> </div> <!-- Mobile Dropdown --> <div id="mobile-menu" class="hidden lg:hidden bg-waskita-900/95 backdrop-blur-md border border-slate-700 mt-4 rounded-2xl p-6 space-y-3 font-medium text-white"> <a href="#corporate" class="block hover:text-waskita-limeNeon">Corporate</a> <a href="#financial" class="block hover:text-waskita-limeNeon">Financial Reports</a> <a href="#stock" class="block hover:text-waskita-limeNeon">Stock & Bonds</a> <a href="#regulatory" class="block hover:text-waskita-limeNeon">Regulatory Filings</a> <a href="#presentations" class="block hover:text-waskita-limeNeon">Presentations</a> <div class="pt-2"> <a href="#contact" class="block text-center bg-waskita-limeNeon text-slate-950 font-bold py-2.5 rounded-full">Get Started</a> </div> </div> </nav> <!-- ✅ Hero Section (Persis Layout Gambar) --> <header class="hero-custom-bg text-white pt-36 pb-32 px-6 lg:px-12 relative overflow-hidden"> <div class="max-w-7xl mx-auto relative z-10"> <!-- Heading & Subtitle --> <div class="max-w-3xl mb-10"> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.15] mb-6"> Powering a Greener Future With Innovation </h1> <p class="text-slate-300 text-sm sm:text-base leading-relaxed max-w-2xl mb-8"> Laporan keuangan interim, tata kelola perusahaan, keterbukaan informasi, serta komitmen transformasi hijau PT Waskita Karya (Persero) Tbk untuk pertumbuhan berkelanjutan. </p> <a href="#financial" class="inline-block bg-waskita-limeNeon hover:bg-lime-400 text-slate-950 font-bold px-7 py-3.5 rounded-full text-sm transition shadow-xl"> Get Free Quote </a> </div> <!-- Floating Cards di dalam Hero (Persis Gambar) --> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mt-12"> <!-- Card 1 --> <div class="bg-white/90 backdrop-blur-md p-4 rounded-2xl text-slate-900 shadow-xl flex items-center gap-4 border border-white/20"> <img src="https://images.unsplash.com/photo-1541888946425-d0fbb18f86f7?q=80&w=300&auto=format&fit=crop" class="w-16 h-16 rounded-xl object-cover shrink-0" alt="Project"> <div> <h4 class="font-bold text-sm text-slate-900">Our Infrastructure & Success Stories</h4> <p class="text-xs text-slate-500 mt-0.5">Portofolio pembangunan jalan tol, bendungan, dan fasilitas energi terbarukan.</p> </div> </div> <!-- Card 2 --> <div class="bg-white/90 backdrop-blur-md p-4 rounded-2xl text-slate-900 shadow-xl flex items-center justify-between border border-white/20"> <div> <div class="flex -space-x-2 overflow-hidden mb-1"> <img class="inline-block h-7 w-7 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=100&auto=format&fit=crop" alt=""> <img class="inline-block h-7 w-7 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=100&auto=format&fit=crop" alt=""> <img class="inline-block h-7 w-7 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=100&auto=format&fit=crop" alt=""> </div> <span class="font-extrabold text-base text-slate-900">12M+</span> <p class="text-xs text-slate-500">Trusted Stakeholders</p> </div> <div class="text-xs font-semibold text-waskita-800 bg-blue-50 px-3 py-1.5 rounded-lg"> Verified IR </div> </div> </div> </div> <!-- Watermark Besar di Bawah Hero (Persis Teks GREEN POWER di Gambar) --> <div class="absolute bottom-2 left-0 right-0 text-center pointer-events-none select-none overflow-hidden"> <span class="text-[13vw] font-black tracking-widest text-white/[0.07] uppercase">GREEN POWER</span> </div> </header> <!-- ✅ Partner Logos Bar (Persis Gambar) --> <div class="bg-white py-10 border-b border-slate-100"> <div class="max-w-7xl mx-auto px-6 lg:px-12 text-center"> <p class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-6">Trusted by Leading Energy Innovators & Institutions</p> <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-60 text-slate-500 font-bold tracking-wider text-lg"> <span>KAGUJE</span> <span>Floor & Door</span> <span class="flex items-center gap-1 font-extrabold text-slate-700"><i class="fa-solid fa-circle-dot text-xs text-waskita-accent"></i> coreg.zip</span> <span>Taggore</span> <span>JAZZER</span> <span>adaptive</span> <span>Elegance</span> </div> </div> </div> <!-- ========================================== ✅ SECTION: SUSTAINABILITY-DRIVEN (Persis Gambar) ========================================== --> <section id="corporate" class="py-24 max-w-7xl mx-auto px-6 lg:px-12"> <!-- Badge Atas --> <div class="inline-flex items-center gap-2 bg-amber-100 text-amber-800 text-xs font-bold px-3.5 py-1.5 rounded-full mb-6"> <i class="fa-solid fa-bolt text-amber-600"></i> Serving Innovators Since 2012 </div> <!-- Judul Utama Persis Gambar --> <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-slate-900 leading-[1.2] max-w-5xl mb-16"> We are a Sustainability-Driven <span class="inline-block align-middle mx-1"><img src="https://images.unsplash.com/photo-1466611653911-95081537e5b7?q=80&w=150&auto=format&fit=crop" class="w-16 h-8 object-cover rounded-md inline-block shadow-sm"></span> -Driven focused on creating Positive Environmental Change. Our work supports Cleaner Energy, Reduced Waste, and responsible resource use. </h2> <!-- 3 Grid Cards Bawah (Persis Gambar: 1. Lime Neon, 2. Gambar Turbin, 3. Light Card dengan Tag) --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <!-- Card 1: Neon Lime --> <div class="bg-waskita-limeCard p-8 rounded-3xl flex flex-col justify-between shadow-sm"> <div> <span class="inline-block px-3 py-1 bg-white/60 text-slate-900 text-xs font-bold rounded-full mb-6">Performance</span> <h3 class="text-4xl font-extrabold text-slate-900 tracking-tight mb-2">98%</h3> <p class="text-slate-700 text-sm leading-relaxed">We deliver reliable solar solutions that ensure long-term savings and energy independence for our clients.</p> </div> <div class="mt-8 pt-6 border-t border-slate-900/10 flex items-center justify-between"> <span class="text-xs font-bold text-slate-900 uppercase">Efficiency Rate</span> <i class="fa-solid fa-arrow-right-long text-slate-900"></i> </div> </div> <!-- Card 2: Gambar Turbin Angin --> <div class="relative rounded-3xl overflow-hidden shadow-sm min-h-[350px] flex flex-col justify-end p-8 text-white"> <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1466611653911-95081537e5b7?q=80&w=800&auto=format&fit=crop');"></div> <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-slate-950/20 to-transparent"></div> <div class="relative z-10"> <h3 class="text-4xl font-extrabold text-white mb-2">500+</h3> <p class="text-slate-200 text-sm">We deliver reliable solar solutions that ensure long-term savings and energy independence for our clients.</p> </div> </div> <!-- Card 3: Light Box dengan Tags --> <div class="bg-slate-100 p-8 rounded-3xl flex flex-col justify-between border border-slate-200 shadow-sm"> <div> <h3 class="font-extrabold text-xl text-slate-900 mb-2">What We Do Best</h3> <p class="text-slate-600 text-sm mb-6">We design and deliver high-performance solar solutions that reduce energy costs and support a sustainable future.</p> <a href="#contact" class="inline-block font-bold text-slate-900 text-sm mb-8 hover:underline">Get Free Quote →</a> </div> <div class="flex flex-wrap gap-2"> <span class="bg-white px-3 py-1.5 rounded-full text-xs font-semibold text-slate-700 shadow-sm border border-slate-200">#SolarPower</span> <span class="bg-white px-3 py-1.5 rounded-full text-xs font-semibold text-slate-700 shadow-sm border border-slate-200">#GreenEnergy</span> <span class="bg-white px-3 py-1.5 rounded-full text-xs font-semibold text-slate-700 shadow-sm border border-slate-200">#CleanFuture</span> <span class="bg-white px-3 py-1.5 rounded-full text-xs font-semibold text-slate-700 shadow-sm border border-slate-200">#SolarSavings</span> </div> </div> </div> <!-- 4 Statistik Angka di Bawah Grid (Persis Gambar) --> <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-16 pt-12 border-t border-slate-200 text-center md:text-left"> <div> <span class="text-xs font-bold uppercase tracking-wider text-slate-400 block mb-1">Happy Customers</span> <h4 class="text-3xl lg:text-4xl font-extrabold text-slate-900">1000+</h4> </div> <div> <span class="text-xs font-bold uppercase tracking-wider text-slate-400 block mb-1">Solar Energy Installed</span> <h4 class="text-3xl lg:text-4xl font-extrabold text-slate-900">5MW+</h4> </div> <div> <span class="text-xs font-bold uppercase tracking-wider text-slate-400 block mb-1">Industry Experience</span> <h4 class="text-3xl lg:text-4xl font-extrabold text-slate-900">15+</h4> </div> <div> <span class="text-xs font-bold uppercase tracking-wider text-slate-400 block mb-1">On Electricity Bills</span> <h4 class="text-3xl lg:text-4xl font-extrabold text-slate-900">90%</h4> </div> </div> </section> <!-- ========================================== ✅ SECTION: FINANCIAL REPORTS & ANNUAL REPORTS ========================================== --> <section id="financial" class="py-20 bg-slate-50 border-t border-slate-200 px-6 lg:px-12"> <div class="max-w-7xl mx-auto"> <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4"> <div> <span class="text-waskita-800 font-bold text-sm uppercase tracking-wider">Financial Information</span> <h2 class="text-3xl lg:text-4xl font-extrabold text-slate-900 mt-1">Laporan Keuangan & Tahunan</h2> </div> <p class="text-slate-600 text-sm max-w-md">Akses dokumen resmi laporan keuangan interim, tahunan (audited), serta laporan keberlanjutan perseroan.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between"> <div> <div class="w-12 h-12 bg-orange-50 text-waskita-accent rounded-xl flex items-center justify-center text-xl font-bold mb-6"> <i class="fa-solid fa-book-bookmark"></i> </div> <h3 class="text-xl font-bold text-slate-900 mb-2">Annual Report 2025</h3> <p class="text-slate-600 text-sm mb-6">Laporan komprehensif pencapaian bisnis, laporan manajemen, dan tata kelola terbaru.</p> </div> <a href="https://investor.waskita.co.id/ar.html" target="_blank" class="inline-flex items-center justify-center gap-2 bg-slate-900 hover:bg-slate-800 text-white font-bold py-3 rounded-xl text-sm transition"> <i class="fa-solid fa-download"></i> Unduh PDF (13.09 MB) </a> </div> <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between"> <div> <div class="w-12 h-12 bg-orange-50 text-waskita-accent rounded-xl flex items-center justify-center text-xl font-bold mb-6"> <i class="fa-solid fa-chart-line"></i> </div> <h3 class="text-xl font-bold text-slate-900 mb-2">Financial Statement Q2-2026</h3> <p class="text-slate-600 text-sm mb-6">Laporan posisi keuangan interim, laba rugi, serta arus kas periode berjalan.</p> </div> <a href="#regulatory" class="inline-flex items-center justify-center gap-2 bg-slate-900 hover:bg-slate-800 text-white font-bold py-3 rounded-xl text-sm transition"> <i class="fa-solid fa-file-lines"></i> Lihat Dokumen IDX </a> </div> <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between"> <div> <div class="w-12 h-12 bg-orange-50 text-waskita-accent rounded-xl flex items-center justify-center text-xl font-bold mb-6"> <i class="fa-solid fa-seedling"></i> </div> <h3 class="text-xl font-bold text-slate-900 mb-2">Sustainability Report</h3> <p class="text-slate-600 text-sm mb-6">Komitmen perseroan terhadap aspek lingkungan, sosial, dan tata kelola perusahaan (ESG).</p> </div> <a href="#contact" class="inline-flex items-center justify-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold py-3 rounded-xl text-sm transition"> <i class="fa-solid fa-envelope"></i> Request Arsip ESG </a> </div> </div> </div> </section> <!-- ========================================== ✅ SECTION: STOCK & BONDS (WSKT) ========================================== --> <section id="stock" class="py-20 bg-waskita-900 text-white px-6 lg:px-12"> <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div> <span class="text-waskita-limeNeon font-bold text-sm uppercase tracking-wider">Stock & Bond Data</span> <h2 class="text-3xl lg:text-4xl font-extrabold mt-2 mb-4">Informasi Saham & Obligasi</h2> <p class="text-slate-300 mb-6 leading-relaxed">Waskita Karya senantiasa memenuhi keterbukaan informasi bagi pemegang obligasi (sukuk/obligasi berkelanjutan) serta mengelola komunikasi pemegang saham secara transparan.</p> <div class="space-y-4"> <div class="flex items-center gap-4 bg-white/5 p-4 rounded-xl border border-white/10"> <div class="text-waskita-limeNeon text-2xl font-bold"><i class="fa-solid fa-shield-halved"></i></div> <div> <h4 class="font-bold text-white">Rapat Umum Pemegang Obligasi (RUPO)</h4> <p class="text-xs text-slate-400 mt-0.5">Informasi pemanggilan, jadwal, dan hasil keputusan RUPO Shelf Registration Bond Waskita.</p> </div> </div> <div class="flex items-center gap-4 bg-white/5 p-4 rounded-xl border border-white/10"> <div class="text-waskita-limeNeon text-2xl font-bold"><i class="fa-solid fa-users"></i></div> <div> <h4 class="font-bold text-white">Laporan Bulanan Pemegang Saham</h4> <p class="text-xs text-slate-400 mt-0.5">Update berkala komposisi kepemilikan saham publik dan pengendali.</p> </div> </div> </div> </div> <div class="bg-white/5 border border-white/10 p-8 rounded-3xl backdrop-blur-sm"> <h3 class="text-xl font-bold text-white mb-4">Aksi Korporasi Terbaru</h3> <div class="space-y-4 text-sm text-slate-300"> <div class="pb-3 border-b border-white/10"> <span class="text-xs text-waskita-limeNeon font-bold">07 Agustus 2026</span> <p class="font-semibold text-white mt-1">Iklan Cetak Panggilan Kedua RUPO Obligasi Berkelanjutan III Waskita Karya Tahap IV Tahun 2019</p> </div> <div class="pb-3 border-b border-white/10"> <span class="text-xs text-waskita-limeNeon font-bold">06 Agustus 2026</span> <p class="font-semibold text-white mt-1">Laporan Bulanan Registrasi Pemegang Saham WSKT</p> </div> <div> <span class="text-xs text-waskita-limeNeon font-bold">21 Juli 2026</span> <p class="font-semibold text-white mt-1">Pemberitahuan Perubahan Sekretaris Perusahaan</p> </div> </div> </div> </div> </section> <!-- ========================================== ✅ SECTION: REGULATORY FILINGS & PRESENTATIONS ========================================== --> <section id="regulatory" class="py-20 max-w-7xl mx-auto px-6 lg:px-12 border-b border-slate-200"> <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4"> <div> <span class="text-waskita-800 font-bold text-sm uppercase tracking-wider">Regulatory Filings</span> <h2 class="text-3xl lg:text-4xl font-extrabold text-slate-900 mt-1">Keterbukaan Informasi & Pengumuman</h2> </div> <a href="https://investor.waskita.co.id/newsroom.html" target="_blank" class="text-waskita-800 font-bold text-sm hover:underline">Arsip Lengkap Berita →</a> </div> <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden"> <div class="overflow-x-auto"> <table class="w-full text-left border-collapse"> <thead> <tr class="bg-slate-100 text-slate-700 uppercase text-xs tracking-wider font-bold"> <th class="p-5">Tanggal</th> <th class="p-5">Judul Pengumuman / Regulasi</th> <th class="p-5 text-right">Aksi</th> </tr> </thead> <tbody class="divide-y divide-slate-100 text-sm font-medium text-slate-700"> <tr class="hover:bg-slate-50 transition"> <td class="p-5 text-slate-500 whitespace-nowrap">07 Aug 2026</td> <td class="p-5 font-bold text-slate-900">Print Advertisement of the 2nd Invitation to the General Meeting of Bondholders (RUPO)</td> <td class="p-5 text-right"><a href="#" class="text-waskita-accent hover:underline font-semibold"><i class="fa-solid fa-file-pdf"></i> View</a></td> </tr> <tr class="hover:bg-slate-50 transition"> <td class="p-5 text-slate-500 whitespace-nowrap">06 Aug 2026</td> <td class="p-5 font-bold text-slate-900">Monthly Report on Shareholder Register (Daftar Pemegang Saham)</td> <td class="p-5 text-right"><a href="#" class="text-waskita-accent hover:underline font-semibold"><i class="fa-solid fa-file-pdf"></i> View</a></td> </tr> <tr class="hover:bg-slate-50 transition"> <td class="p-5 text-slate-500 whitespace-nowrap">15 Jul 2026</td> <td class="p-5 font-bold text-slate-900">Unaudited Interim Financial Statement Q2-2026</td> <td class="p-5 text-right"><a href="#" class="text-waskita-accent hover:underline font-semibold"><i class="fa-solid fa-file-pdf"></i> View</a></td> </tr> </tbody> </table> </div> </div> </section> <!-- Presentasi & Materi --> <section id="presentations" class="py-20 max-w-7xl mx-auto px-6 lg:px-12"> <div class="text-center max-w-2xl mx-auto mb-16"> <span class="text-waskita-800 font-bold text-sm uppercase tracking-wider">Corporate Presentations</span> <h2 class="text-3xl lg:text-4xl font-extrabold text-slate-900 mt-1">Materi Presentasi Korporat</h2> <p class="text-slate-600 mt-3 text-sm">Unduh materi presentasi resmi perusahaan untuk analis dan paparan publik.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-200"> <div class="text-waskita-accent text-3xl mb-4"><i class="fa-solid fa-file-powerpoint"></i></div> <h3 class="font-bold text-xl text-slate-900 mb-2">Public Expose 2025/2026</h3> <p class="text-slate-600 text-sm mb-6">Materi paparan kinerja operasional dan strategi restrukturisasi perseroan.</p> <a href="#" class="text-waskita-accent font-bold text-sm hover:underline flex items-center gap-1">Unduh Materi (PDF) <i class="fa-solid fa-arrow-right text-xs"></i></a> </div> <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-200"> <div class="text-waskita-accent text-3xl mb-4"><i class="fa-solid fa-chart-pie"></i></div> <h3 class="font-bold text-xl text-slate-900 mb-2">Investor Presentation Q1</h3> <p class="text-slate-600 text-sm mb-6">Ringkasan perolehan kontrak baru, realisasi proyek, dan kondisi likuiditas.</p> <a href="#" class="text-waskita-accent font-bold text-sm hover:underline flex items-center gap-1">Unduh Materi (PDF) <i class="fa-solid fa-arrow-right text-xs"></i></a> </div> <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-200"> <div class="text-waskita-accent text-3xl mb-4"><i class="fa-solid fa-calendar-days"></i></div> <h3 class="font-bold text-xl text-slate-900 mb-2">Corporate Calendar</h3> <p class="text-slate-600 text-sm mb-6">Agenda penting jadwal RUPS, RUPO, dan rilis laporan keuangan berkala.</p> <a href="#" class="text-waskita-accent font-bold text-sm hover:underline flex items-center gap-1">Lihat Jadwal Lengkap <i class="fa-solid fa-arrow-right text-xs"></i></a> </div> </div> </section> <!-- ✅ Contact Section --> <section id="contact" class="bg-slate-100 py-16 px-6 lg:px-12 border-t border-slate-200"> <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <div> <span class="text-waskita-800 font-bold text-sm uppercase tracking-wider">Hubungi Kami</span> <h2 class="text-3xl font-extrabold text-slate-900 mt-1 mb-4">Investor Relations Team</h2> <p class="text-slate-600 mb-6 text-sm">Analis, investor, dan pemegang obligasi yang memerlukan informasi lebih lanjut dapat langsung menghubungi kantor pusat Waskita Karya.</p> <div class="space-y-3 text-sm text-slate-700"> <p class="flex items-center gap-3"><i class="fa-solid fa-location-dot text-waskita-accent"></i> Gedung Waskita Heritage, Jl. DI. Panjaitan Kav. No. 10, Jakarta Timur</p> <p class="flex items-center gap-3"><i class="fa-solid fa-envelope text-waskita-accent"></i> waskita@waskita.co.id</p> <p class="flex items-center gap-3"><i class="fa-solid fa-phone text-waskita-accent"></i> +62 (21) 8508510</p> </div> </div> <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-200"> <h3 class="font-bold text-lg text-slate-900 mb-4">Pendaftaran Email Alert</h3> <form class="space-y-4"> <div> <label class="block text-xs font-bold text-slate-600 mb-1">Nama Lengkap</label> <input type="text" class="w-full px-4 py-2.5 rounded-lg border border-slate-300 text-sm focus:outline-none focus:border-waskita-accent" placeholder="Nama Anda..."> </div> <div> <label class="block text-xs font-bold text-slate-600 mb-1">Email Institusi / Pribadi</label> <input type="email" class="w-full px-4 py-2.5 rounded-lg border border-slate-300 text-sm focus:outline-none focus:border-waskita-accent" placeholder="email@domain.com"> </div> <div> <label class="block text-xs font-bold text-slate-600 mb-1">Pertanyaan / Pesan</label> <textarea rows="3" class="w-full px-4 py-2.5 rounded-lg border border-slate-300 text-sm focus:outline-none focus:border-waskita-accent" placeholder="Tuliskan pertanyaan Anda..."></textarea> </div> <button type="button" class="w-full bg-waskita-accent hover:bg-orange-600 text-white font-bold py-3 rounded-lg text-sm transition">Kirim Permintaan</button> </form> </div> </div> </section> <!-- ✅ Footer --> <footer class="bg-waskita-900 text-slate-400 py-12 px-6 lg:px-12 border-t border-slate-800"> <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6 text-center md:text-left"> <div> <div class="text-white font-extrabold text-xl mb-1">PT WASKITA KARYA (PERSERO) TBK</div> <p class="text-xs text-slate-400">Badan Usaha Milik Negara (BUMN) — Sektor Konstruksi & Infrastruktur</p> </div> <div class="text-xs text-slate-400"> <p>© 2026 PT Waskita Karya (Persero) Tbk. All rights reserved.</p> <p class="mt-1"><a href="#" class="hover:underline">Disclaimer</a> • <a href="#" class="hover:underline">Privacy Policy</a></p> </div> </div> </footer> <!-- Mobile Menu Script --> <script> const btn = document.getElementById('menu-btn'); const menu = document.getElementById('mobile-menu'); btn.addEventListener('click', () => { menu.classList.toggle('hidden'); }); </script> </body> </html>
🖥️ Live Responsive Preview
Desktop
Tablet
Mobile
URL Publik:
https://remark.co.id/micro/waskita/
Simpan Microsite