diff --git a/src/components/pages/kedaimaster.html b/src/components/pages/kedaimaster.html
new file mode 100644
index 0000000..fdcd843
--- /dev/null
+++ b/src/components/pages/kedaimaster.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="description" content="Kedai Master - Platform Point of Sale untuk kafe & restoran" />
+  <meta name="author" content="Kediri Technopark" />
+  <link rel="icon" href="assets/images/kediri-technopark-logo.png" />
+
+  <title>Kedai Master | Kediri Technopark</title>
+
+  <!-- Fonts & Icons -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
+
+  <!-- Bootstrap (CDN) -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+
+  <!-- Base Styles -->
+  <style>
+    :root{
+      --brand:#92a103;
+      --brand-2:#5c5a02;
+      --ink:#023047;
+      --bg:linear-gradient(90deg,#e4f0a3 0%,#e5f6ff 100%);
+      --gold:#ffd02a;
+    }
+    html{scroll-behavior:smooth}
+    body{
+      margin:0;
+      font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
+      color:var(--ink);
+      background:var(--bg);
+      overflow-x:hidden;
+    }
+
+    /* Header */
+    .app-header{
+      position:sticky; top:0; z-index:1000; background:#ffffffcc; backdrop-filter:saturate(180%) blur(8px);
+      border-bottom:1px solid rgba(0,0,0,.06);
+    }
+    .nav-brand img{height:44px}
+    .nav-toggle{border:none;background:transparent;font-size:1.5rem;display:none}
+    .nav-links{
+      display:flex; gap:1rem; align-items:center;
+    }
+    .nav-links a{
+      text-decoration:none; color:var(--ink); font-weight:500;
+      padding:.5rem .75rem; border-radius:.5rem;
+    }
+    .nav-links a.active,.nav-links a:hover{background:rgba(146,161,3,.12)}
+    .profile-wrapper{position:relative; display:inline-block;}
+    .profile-image{width:40px;height:40px;border-radius:50%;object-fit:cover;cursor:pointer;border:2px solid rgba(0,0,0,.05)}
+    .tooltip-box{
+      display:none; position:absolute; right:0; margin-top:.5rem;
+      background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:.75rem;
+      box-shadow:0 10px 30px rgba(0,0,0,.08); padding:.75rem; min-width:180px;
+    }
+    .signout-button{
+      width:100%; border:none; background:#ef4444; color:#fff; padding:.5rem .75rem;
+      border-radius:.5rem; font-weight:600; cursor:pointer;
+    }
+
+    /* Hero */
+    .hero{
+      display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:3rem;
+      padding:clamp(2rem, 4vw, 4rem) 0;
+    }
+    .hero h1{
+      font-size:clamp(1.8rem, 4vw, 3rem);
+      background: linear-gradient(90deg,var(--brand-2), var(--brand));
+      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:1rem;
+    }
+    .hero p{font-size:clamp(1rem, 1.4vw, 1.15rem); color:#244; line-height:1.7}
+    .move-image img{
+      width:100%; max-width:640px; border-radius:20px; box-shadow:0 0 50px rgba(2,4,5,.12);
+    }
+    .floating-image{animation:float 3s ease-in-out infinite}
+    @keyframes float {
+      0%{ transform: translateY(18px) }
+      50%{ transform: translateY(-10px) }
+      100%{ transform: translateY(18px) }
+    }
+
+    /* Features */
+    .features{padding:2rem 0}
+    .features h2,.pricing-title{
+      text-align:center; font-weight:800; letter-spacing:.3px;
+      font-size:clamp(1.35rem,3.5vw,2.2rem);
+    }
+    .feature-grid{
+      display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:1rem;
+    }
+    .feature{
+      background: radial-gradient(ellipse at center, rgba(120,161,5,.18), transparent 70%);
+      border-radius:14px; padding:1.25rem; border:1px solid rgba(146,161,3,.2);
+      box-shadow:0 4px 18px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease;
+    }
+    .feature:hover{ transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,.08) }
+    .feature h3{font-size:1.05rem; margin-bottom:.5rem}
+    .feature p{color:#2a2a2a; margin:0}
+
+    /* Showcases (copx) */
+    .copx{display:flex; gap:1.5rem; align-items:center; justify-content:center; padding:2rem 0 1rem}
+    .copx-moving{height:auto; width:min(420px,90vw); border-radius:18px}
+    .copx-moving2{height:auto; width:min(220px,60vw); border-radius:18px}
+    .copx-shadow-container{position:relative; animation:float 3s ease-in-out infinite}
+    .copx-shadow-container::before{
+      content:""; position:absolute; top:100%; left:50%; width:80%; height:16px;
+      background: radial-gradient(ellipse at center, rgba(0,0,0,.25), transparent); transform: translateX(-50%);
+      border-radius:50%; filter:blur(3px); z-index:-1;
+    }
+
+    .copx-section{
+      display:grid; grid-template-columns: auto auto 1fr; gap:1.25rem; align-items:center;
+      border-radius:16px; padding:1.25rem; max-width:1100px; margin-inline:auto; overflow:hidden;
+    }
+    .copx-image img{ width:100%; max-width:200px; border-radius:14px }
+    .copx-description h2{ color:#818f08; font-size:clamp(1.2rem,2.4vw,1.6rem); margin-bottom:.35rem }
+    .copx-description p{ color:#050404; line-height:1.7 }
+
+    /* CTA */
+    .cta{
+      text-align:center; padding:2rem 1rem; background:linear-gradient(90deg,#cbe4e9,#f5ff69);
+      border-radius:20px; margin-top:3rem;
+    }
+    .cta a{
+      display:inline-block; background:#a85c04; color:#fff; padding:.8rem 1.3rem; border-radius:100px;
+      text-decoration:none; font-weight:700;
+    }
+    .cta a:hover{ background:#00c3ff }
+
+    /* Pricing */
+    .back-pricing{
+      background: linear-gradient(135deg, var(--gold), #494507, var(--gold));
+      border:2px solid rgba(255,215,0,.3);
+      box-shadow:0 12px 40px rgba(255,208,42,.28), inset 0 0 12px rgba(255,255,255,.18);
+      padding: clamp(1.2rem,2.5vw,2rem); margin: clamp(1.5rem,3vw,3rem) 0; border-radius: 32px; position:relative; overflow:hidden;
+    }
+    .back-pricing::after{
+      content:""; position:absolute; inset:-20% -20% auto auto; width:160%; height:160%;
+      background: radial-gradient(circle, rgba(255,231,133,.22), transparent 70%);
+      filter: blur(60px); z-index:0; pointer-events:none;
+    }
+    .product-mrkyai-pricing{
+      position:relative; z-index:1; color:#383400; text-align:center;
+      background: rgba(255,255,255,.15); backdrop-filter: blur(14px); border:1px solid rgba(255,255,255,.25);
+      border-radius: 28px; padding: clamp(1rem,2.5vw,2rem);
+    }
+    .pricing-title{ color:#fafbe6; margin-bottom:1.25rem }
+    .pricing-options{
+      display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; align-items:stretch;
+    }
+    .price-card{
+      background: linear-gradient(90deg,#e9e7cb,#f5ff69); border:2px solid #b1ae0a; border-radius:16px;
+      padding:1rem; transition: transform .25s ease, box-shadow .25s ease;
+      display:flex; flex-direction:column; justify-content:space-between;
+    }
+    .price-card:hover{ transform:translateY(-6px); box-shadow: 0 10px 24px rgba(25,135,84,.28) }
+    .pack-title{ font-size:1.1rem; margin:.25rem 0 .5rem; color:#3c3d00; font-weight:800 }
+    .justlist{ list-style:none; padding-left:0; margin:0 0 1rem; display:flex; flex-direction:column; gap:.55rem; text-align:left }
+    .justlist li{ position:relative; padding-left:28px; font-weight:500; color:#2e2e2e; line-height:1.45 }
+    .justlist li::before{ content:"✔"; position:absolute; left:0; top:0; color:#7c6f00; font-weight:900 }
+    .pack-price{ font-size:1.3rem; font-weight:900; color:#3c3d00; margin:.25rem 0 1rem }
+    .select-btn{ background:#198754; color:#fff; border:none; padding:.7rem 1rem; border-radius:10px; font-weight:700; }
+    .select-btn:hover{ background:#0f7a49 }
+    .recommended{ border-color:#ffd900; box-shadow:0 0 20px rgba(255,230,0,.28) }
+    .recommended::before{
+      content:"Rekomendasi"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
+      background:#fffb00; color:#000; font-size:.75rem; font-weight:800; padding:.25rem .6rem; border-radius:.5rem;
+    }
+
+    /* Dynamic Products */
+    #dynamic-products{ padding-top:2rem }
+    .product-grid{
+      display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1rem;
+    }
+    .product-card{
+      background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:1rem;
+      box-shadow:0 6px 20px rgba(0,0,0,.06);
+      display:flex; flex-direction:column; gap:.6rem;
+    }
+    .product-card img{ width:100%; height:180px; object-fit:cover; border-radius:10px }
+    .product-price{ font-weight:900; color:#3c3d00 }
+
+    /* Footer */
+    footer{
+      background:#111; color:#fff; padding:2rem 0 2.5rem; margin-top:2rem;
+      border-top-left-radius: 20px; border-top-right-radius:20px;
+    }
+    footer a{ color:#a3d8ff; text-decoration:none }
+    footer a:hover{ text-decoration:underline }
+
+    /* Utilities */
+    .container-narrow{max-width:1200px;margin:auto;padding:0 16px}
+    .gradient-button a{ display:inline-block; background:linear-gradient(90deg,#7cab00,#b6d313); color:#fff; padding:.55rem .9rem; border-radius:.8rem; text-decoration:none; font-weight:800 }
+    .skeleton{
+      background:linear-gradient(90deg, #eee, #f7f7f7, #eee);
+      background-size:200% 100%; animation:shine 1.3s linear infinite; border-radius:12px;
+    }
+    @keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}
+
+    /* Responsive */
+    @media (max-width: 1200px){
+      .feature-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
+      .product-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
+      .pricing-options{ grid-template-columns:repeat(3, minmax(0,1fr)); }
+    }
+    @media (max-width: 992px){
+      .hero{ grid-template-columns:1fr; gap:1.5rem; text-align:center }
+      .feature-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
+      .product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
+      .pricing-options{ grid-template-columns:repeat(2, minmax(0,1fr)) }
+      .copx{ flex-direction:column }
+      .copx-section{ grid-template-columns: 1fr; text-align:center }
+      .nav-toggle{ display:inline-flex }
+      .nav-links{ position:absolute; left:0; right:0; top:64px; background:#fff; border-bottom:1px solid rgba(0,0,0,.06); flex-direction:column; padding: .75rem; display:none }
+      .nav-links.show{ display:flex }
+    }
+    @media (max-width: 576px){
+      .feature-grid{ grid-template-columns:1fr }
+      .product-grid{ grid-template-columns:1fr }
+      .pricing-options{ grid-template-columns:1fr }
+      .price-card{ padding:1rem }
+      .product-card img{ height:160px }
+    }
+
+    /* Respect reduced motion */
+    @media (prefers-reduced-motion: reduce){
+      .floating-image, .copx-shadow-container{ animation:none }
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Header -->
+  <header class="app-header">
+    <div class="container-narrow py-2">
+      <div class="d-flex align-items-center justify-content-between">
+        <a href="index.html" class="nav-brand d-flex align-items-center gap-2 text-decoration-none">
+          <img src="assets/images/kediri-technopark-logo.png" alt="Kediri Technopark" />
+          <strong class="text-dark">Kedai Master</strong>
+        </a>
+
+        <button class="nav-toggle" id="navToggle" aria-label="Buka menu">
+          <i class="fas fa-bars"></i>
+        </button>
+
+        <nav>
+          <ul class="nav-links m-0" id="navLinks">
+            <li><a class="active" href="index.html">Home</a></li>
+            <li><a class="scroll-to-section" href="#services">Services</a></li>
+            <li><a class="scroll-to-section" href="#produk">Product</a></li>
+            <li><a class="scroll-to-section" href="#academy">Academy</a></li>
+            <li><a class="scroll-to-section" href="#about">About</a></li>
+            <li><a class="scroll-to-section" href="#contact">Contact</a></li>
+            <li><a id="usernameTop" class="fw-bold"></a></li>
+
+            <li>
+              <div id="authArea" class="d-flex align-items-center">
+                <div class="gradient-button me-2" id="loginBtnWrapper">
+                  <a id="modal_trigger" href="#modal"><i class="fa fa-sign-in-alt"></i> Sign In Now</a>
+                </div>
+                <div id="profileWrapper" class="profile-wrapper" style="display:none;">
+                  <img id="profileImage" src="" alt="Profile" class="profile-image" />
+                  <div id="tooltip" class="tooltip-box">
+                    <div class="tooltip-content">
+                      <p id="usernameTooltip" class="fw-bold mb-2"></p>
+                      <button id="signOutBtn" class="signout-button">Sign Out</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </header>
+
+  <main>
+    <div class="container-narrow">
+
+      <!-- Hero -->
+      <section class="hero" id="home">
+        <div class="hero-text">
+          <h1>Kedai Master</h1>
+          <p>Platform Point of Sale berbasis web untuk kebutuhan operasional kafe & restoran masa kini—fleksibel, interaktif, dan efisien.</p>
+        </div>
+        <div class="move-image">
+          <img src="assets/images/cupcoffekedmas.jpeg.jpg" alt="Mockup Aplikasi Kedai Master" class="floating-image" loading="lazy" />
+        </div>
+      </section>
+
+      <!-- Features -->
+      <section class="features" id="services">
+        <h2>Fitur Unggulan</h2>
+        <div class="feature-grid mt-3">
+          <div class="feature">
+            <h3>Manajemen Tenant & Kasir</h3>
+            <p>Tenant dapat mendaftar dan mengelola kafe serta akun kasir secara mandiri.</p>
+          </div>
+          <div class="feature">
+            <h3>QR Pemesanan di Meja</h3>
+            <p>Tamu memesan langsung dari meja melalui QR code unik.</p>
+          </div>
+          <div class="feature">
+            <h3>Otomatisasi Pesanan & Keuangan</h3>
+            <p>Transaksi tercatat otomatis, lengkap dengan laporan keuangan.</p>
+          </div>
+          <div class="feature">
+            <h3>Request & Voting Lagu</h3>
+            <p>Tamu dapat memilih lagu untuk meningkatkan interaksi & suasana.</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Motion Images -->
+      <section class="copx" aria-label="Demo Gambar Aplikasi">
+        <div class="copx-shadow-container">
+          <img src="assets/images/kemasmoving.gif" alt="Menu bergerak" class="copx-moving" loading="lazy" />
+        </div>
+        <div class="copx-shadow-container">
+          <img src="assets/images/kedaimaster2.png" alt="Tampilan Kedai Master" class="copx-moving2" loading="lazy" />
+        </div>
+      </section>
+
+      <!-- Showcase -->
+      <section class="copx-section" id="about">
+        <div class="copx-image">
+          <img src="assets/images/kemasmenuimage.png" alt="Gambar menu 1" loading="lazy" />
+        </div>
+        <div class="copx-image">
+          <img src="assets/images/kedaimaster1.png" alt="Gambar menu 2" loading="lazy" />
+        </div>
+        <div class="copx-description">
+          <h2>Desain Menu Modern</h2>
+          <p>Tampilan menu bersih, interaktif, dan mudah dipahami pelanggan—memberi pengalaman visual yang memudahkan memilih hidangan favorit. Cocok untuk kafe & restoran masa kini.</p>
+        </div>
+      </section>
+
+      <!-- CTA -->
+      <section class="cta" id="academy">
+        <h2 class="mb-3">Siap Tingkatkan Bisnis Anda?</h2>
+        <a href="contactkm.html" class="mt-2">Coba Kedai Master Sekarang</a>
+      </section>
+
+      <!-- Pricing -->
+      <section class="back-pricing" id="produk" aria-label="Paket Harga">
+        <div class="product-mrkyai-pricing">
+          <h2 class="pricing-title">OUR PACK KEDAI MASTER</h2>
+          <div class="pricing-options mt-3">
+            <article class="price-card">
+              <h3 class="pack-title">Starter Pack</h3>
+              <ul class="justlist">
+                <li>Manajemen menu & kategori</li>
+                <li>Dashboard penjualan dasar</li>
+                <li>1 user akses admin</li>
+                <li>Support via email</li>
+              </ul>
+              <div class="pack-price">Rp 249.000</div>
+              <button class="select-btn" onclick="window.location.href='contactkm.html'">Pilih Paket</button>
+            </article>
+
+            <article class="price-card recommended">
+              <h3 class="pack-title">Professional Pack</h3>
+              <ul class="justlist">
+                <li>Semua fitur Starter</li>
+                <li>Integrasi kasir & printer thermal</li>
+                <li>AI pencatatan & prediksi stok</li>
+                <li>Notifikasi transaksi ke pelanggan</li>
+                <li>Support via WhatsApp</li>
+              </ul>
+              <div class="pack-price">Rp 499.000</div>
+              <button class="select-btn" onclick="window.location.href='contactkm.html'">Pilih Paket</button>
+            </article>
+
+            <article class="price-card">
+              <h3 class="pack-title">Enterprise Pack</h3>
+              <ul class="justlist">
+                <li>Semua fitur Professional</li>
+                <li>AI analitik performa menu & outlet</li>
+                <li>Multi outlet & multi user</li>
+                <li>Integrasi loyalty customer</li>
+                <li>Priority support 24/7</li>
+              </ul>
+              <div class="pack-price">Rp 849.000</div>
+              <button class="select-btn" onclick="window.location.href='contactkm.html'">Pilih Paket</button>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <!-- Dynamic Products from API -->
+      <section class="features" id="dynamic-products" aria-live="polite" aria-busy="true">
+        <h2>Produk Lainnya</h2>
+        <div id="product-grid" class="product-grid mt-3">
+          <!-- Skeleton Loading -->
+          <div class="product-card">
+            <div class="skeleton" style="height:180px;"></div>
+            <div class="skeleton" style="height:18px; width:70%;"></div>
+            <div class="skeleton" style="height:14px; width:90%;"></div>
+            <div class="skeleton" style="height:20px; width:40%;"></div>
+          </div>
+          <div class="product-card">
+            <div class="skeleton" style="height:180px;"></div>
+            <div class="skeleton" style="height:18px; width:70%;"></div>
+            <div class="skeleton" style="height:14px; width:90%;"></div>
+            <div class="skeleton" style="height:20px; width:40%;"></div>
+          </div>
+          <div class="product-card">
+            <div class="skeleton" style="height:180px;"></div>
+            <div class="skeleton" style="height:18px; width:70%;"></div>
+            <div class="skeleton" style="height:14px; width:90%;"></div>
+            <div class="skeleton" style="height:20px; width:40%;"></div>
+          </div>
+          <div class="product-card">
+            <div class="skeleton" style="height:180px;"></div>
+            <div class="skeleton" style="height:18px; width:70%;"></div>
+            <div class="skeleton" style="height:14px; width:90%;"></div>
+            <div class="skeleton" style="height:20px; width:40%;"></div>
+          </div>
+        </div>
+        <p id="product-empty" class="text-center mt-3 d-none">Belum ada produk yang dapat ditampilkan.</p>
+      </section>
+
+      <!-- Contact in Footer -->
+    </div>
+  </main>
+
+  <!-- Footer -->
+  <footer id="contact">
+    <div class="container-narrow">
+      <div class="row justify-content-center g-4">
+        <div class="col-lg-6">
+          <div class="text-center">
+            <h4>Contact Us</h4>
+            <p style="color:#eee;">Sunan Giri GG. I No. 11, Rejomulyo, Kediri, Jawa Timur 64129</p>
+            <p><a href="tel:+6281318894994">0813 1889 4994</a></p>
+            <p><a href="mailto:marketing@kediritechnopark.com">marketing@kediritechnopark.com</a></p>
+            <p><a href="https://instagram.com/kediri.technopark" target="_blank" rel="noopener">@kediri.technopark</a></p>
+            <p><a href="https://kediritechnopark.com" target="_blank" rel="noopener">www.KEDIRITECHNOPARK.com</a></p>
+            <div class="mt-2">
+              <a href="https://wa.me/6281318894994" target="_blank" rel="noopener" style="margin-right:10px; font-size:20px;"><i class="fab fa-whatsapp"></i></a>
+              <a href="https://instagram.com/kediri.technopark" target="_blank" rel="noopener" style="font-size:20px;"><i class="fab fa-instagram"></i></a>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-lg-6 text-center">
+          <h4>About Our Company</h4>
+          <div class="mb-3">
+            <img src="assets/images/logo-white.png" alt="Logo" style="height:46px" />
+          </div>
+          <p>Kediri Technopark adalah pusat pengembangan inovasi digital dan aplikasi untuk masyarakat dan pelaku usaha.</p>
+        </div>
+
+        <div class="col-12 text-center">
+          <div class="mt-2" style="opacity:.9">
+            <p>
+              &copy; 2025 Kediri Technopark. All Rights Reserved.<br />
+              Design by <a href="https://templatemo.com/" target="_blank" rel="noopener">TemplateMo</a><br />
+              Distributed by <a href="https://themewagon.com/" target="_blank" rel="noopener">ThemeWagon</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+  <!-- Scripts -->
+  <script>
+    // Simple mobile nav toggle
+    const navToggle = document.getElementById('navToggle');
+    const navLinks  = document.getElementById('navLinks');
+    if(navToggle && navLinks){
+      navToggle.addEventListener('click', () => {
+        navLinks.classList.toggle('show');
+      });
+      // Close menu on link click (mobile)
+      navLinks.querySelectorAll('a').forEach(a=>{
+        a.addEventListener('click', ()=> navLinks.classList.remove('show'));
+      });
+    }
+
+    // Auth UI (based on JWT in localStorage)
+    function parseJwt(token) {
+      try {
+        const base64Url = token.split('.')[1];
+        const base64 = decodeURIComponent(atob(base64Url).split('').map(c =>
+          '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
+        return JSON.parse(base64);
+      } catch (e) { return null; }
+    }
+    document.addEventListener("DOMContentLoaded", function () {
+      const token = localStorage.getItem("token");
+
+      const loginBtnWrapper = document.getElementById("loginBtnWrapper");
+      const profileWrapper = document.getElementById("profileWrapper");
+      const profileImage = document.getElementById("profileImage");
+      const tooltip = document.getElementById("tooltip");
+      const signOutBtn = document.getElementById("signOutBtn");
+      const usernameTop = document.getElementById("usernameTop");
+      const usernameTooltip = document.getElementById("usernameTooltip");
+
+      if (token) {
+        const payload = parseJwt(token);
+        const username = payload?.username || "User";
+
+        if (loginBtnWrapper) loginBtnWrapper.style.display = "none";
+        if (profileWrapper) profileWrapper.style.display = "inline-block";
+        if (usernameTop) usernameTop.innerText = username;
+        if (usernameTooltip) usernameTooltip.innerText = username;
+
+        if (profileImage)
+          profileImage.src = "https://ui-avatars.com/api/?background=EEE&color=333&name=" + encodeURIComponent(username);
+
+        if (profileImage && tooltip) {
+          profileImage.addEventListener("click", function (e) {
+            e.stopPropagation();
+            tooltip.style.display = tooltip.style.display === "block" ? "none" : "block";
+          });
+        }
+
+        document.addEventListener("click", function (e) {
+          if (tooltip && !tooltip.contains(e.target)) {
+            tooltip.style.display = "none";
+          }
+        });
+
+        if (signOutBtn) {
+          signOutBtn.addEventListener("click", function () {
+            localStorage.removeItem("token");
+            window.location.reload();
+          });
+        }
+
+      } else {
+        if (loginBtnWrapper) loginBtnWrapper.style.display = "inline-block";
+        if (profileWrapper) profileWrapper.style.display = "none";
+      }
+    });
+
+    // Smooth scroll for internal anchors
+    document.querySelectorAll('a[href^="#"]').forEach(anchor=>{
+      anchor.addEventListener('click', function(e){
+        const id = this.getAttribute('href').slice(1);
+        const target = document.getElementById(id);
+        if(target){
+          e.preventDefault();
+          target.scrollIntoView({behavior:'smooth', block:'start'});
+        }
+      });
+    });
+
+    // Fetch dynamic products
+    (function loadProducts(){
+      const grid = document.getElementById('product-grid');
+      const empty = document.getElementById('product-empty');
+      if(!grid) return;
+
+      fetch("https://bot.kediritechnopark.com/webhook/store-production/products", {
+        headers: {
+          "accept": "*/*",
+          "content-type": "application/json"
+        },
+        method: "POST",
+        mode: "cors",
+        credentials: "omit",
+        body: JSON.stringify({ type: "product" })
+      })
+      .then(res => res.json())
+      .then(list => {
+        grid.innerHTML = ""; // clear skeleton
+        if(!Array.isArray(list) || list.length===0){
+          empty.classList.remove('d-none');
+          document.getElementById('dynamic-products').setAttribute('aria-busy','false');
+          return;
+        }
+        let visible = 0;
+        list.forEach(product => {
+          if(product?.is_visible !== true) return;
+          visible++;
+
+          const card = document.createElement('article');
+          card.className = 'product-card';
+
+          const imgUrl = product.image && product.image.trim() !== "" ? product.image : 'assets/images/no-image.png';
+
+          card.innerHTML = `
+            <img src="${imgUrl}" alt="${product.name ?? 'Produk'}" loading="lazy" />
+            <h3 class="h6 m-0">${product.name ?? ''}</h3>
+            <p class="m-0" style="color:#333">${product.description ?? ''}</p>
+            <div class="product-price mt-1">Rp ${Number(product.price||0).toLocaleString('id-ID')}</div>
+            ${product.site_url ? `<a class="btn btn-sm btn-outline-success mt-2" href="${product.site_url}" target="_blank" rel="noopener">Lihat Detail</a>` : `<button class="btn btn-sm btn-success mt-2" onclick="window.location.href='contactkm.html'">Tanyakan Produk</button>`}
+          `;
+          grid.appendChild(card);
+        });
+
+        if(visible===0){
+          empty.classList.remove('d-none');
+        }
+        document.getElementById('dynamic-products').setAttribute('aria-busy','false');
+      })
+      .catch(err => {
+        console.error("Error fetching products:", err);
+        // keep skeleton but show message
+        const msg = document.createElement('p');
+        msg.className="text-center mt-3";
+        msg.textContent = "Gagal memuat produk. Silakan refresh halaman.";
+        grid.after(msg);
+        document.getElementById('dynamic-products').setAttribute('aria-busy','false');
+      });
+    })();
+  </script>
+
+  <!-- Bootstrap Bundle (for potential components you might add later) -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
