update: popup dan video tutorial

Views/Website/Home/Index.cshtml

@@ -9,3 +9,5 @@
 <partial name="~/Views/Website/Shared/Components/Frontend/_Peran.cshtml" />
 <partial name="~/Views/Website/Shared/Components/Frontend/_Laksanakan.cshtml" />
 <partial name="~/Views/Website/Shared/Components/Frontend/_Pengelolaan.cshtml" />
+
+<partial name="~/Views/Website/Shared/Components/Frontend/_FlyerPopup.cshtml" />

Views/Website/Shared/Components/Frontend/_FlyerPopup.cshtml

@@ -0,0 +1,70 @@
+<div id="flyerPopup" class="fixed inset-0 bg-black/50 items-center justify-center z-50 hidden">
+    <div class="relative bg-white rounded-lg shadow-2xl max-w-4xl max-h-[90vh] overflow-hidden">
+        <button id="closeFlyerPopup" class="absolute top-4 right-4 text-white bg-black/50 rounded-full p-2 z-10 transition-all duration-200">
+            <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="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+        </button>
+        
+        <div class="relative">
+            <img src="~/website/images/flyer.webp" alt="Flyer Pesapakawan" class="w-full h-auto max-h-[85vh] object-contain">
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const popup = document.getElementById('flyerPopup');
+    const closeBtn = document.getElementById('closeFlyerPopup');
+    
+    setTimeout(() => {
+        popup.classList.remove('hidden');
+    }, 1000);
+    
+    function closePopup() {
+        popup.classList.add('hidden');
+    }
+    
+    closeBtn.addEventListener('click', closePopup);
+    
+    popup.addEventListener('click', function(e) {
+        if (e.target === popup) {
+            closePopup();
+        }
+    });
+    
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && !popup.classList.contains('hidden')) {
+            closePopup();
+        }
+    });
+});
+</script>
+
+<style>
+#flyerPopup {
+    transition: opacity 0.3s ease-in-out;
+    display: flex;
+}
+
+#flyerPopup.hidden {
+    opacity: 0;
+    pointer-events: none;
+    display: none;
+}
+
+#flyerPopup:not(.hidden) {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+@@media (max-width: 768px) {
+    #flyerPopup .relative {
+        margin: 1rem;
+    }
+    
+    #flyerPopup img {
+        max-height: 80vh;
+    }
+}
+</style>

Views/Website/Tutorial/Index.cshtml

@@ -57,7 +57,7 @@
                         <iframe
                             width="100%" 
                             height="100%"
-                            src="https://www.youtube.com/embed/id_video_disini_ya"
+                            src="https://www.youtube.com/embed/OQJl47UgXEM"
                             title="Tutorial Sistem Informasi Pesapakawan" 
                             frameborder="0" 
                             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"