Add video demo and FAQ sections to index.html

Added a video demo section with a placeholder video and FAQ section with common questions about the system.

Author: indway

index.html

@@ -259,6 +259,76 @@ <h4 class="font-bold text-lg">Auto Multi-platform</h4>
     </div>
   </section>
 
+  <!-- Video Demo -->
+  <section id="demo" class="max-w-6xl mx-auto px-6 py-24 relative z-10 border-t border-white/5">
+    <div class="mb-16 text-center max-w-2xl mx-auto">
+      <h2 class="text-3xl font-bold mb-4">Demo Hasil Render</h2>
+      <p class="text-gray-400">Tonton sekilas kualitas output produksi mandiri menggunakan sistem rotasi aset VIGEN. Rendering 100% menggunakan script secara massal.</p>
+    </div>
+    
+    <div class="relative max-w-4xl mx-auto">
+      <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-600 rounded-3xl blur-md opacity-30"></div>
+      <div class="relative glass-panel rounded-3xl overflow-hidden aspect-[9/16] md:aspect-video bg-black flex items-center justify-center p-2 shadow-2xl">
+        <!-- Placeholder for video -->
+        <video controls class="w-full h-full rounded-2xl object-cover z-20" poster="https://files.catbox.moe/k9mbsy.jpg">
+          <source src="demo/sample.mp4" type="video/mp4">
+          Your browser does not support the video tag.
+        </video>
+        <!-- Overlay if no video available (fallback style behind) -->
+        <div class="absolute text-center z-10 p-8">
+          <svg class="w-16 h-16 mx-auto mb-4 text-gray-700 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
+          <p class="text-gray-600 font-medium">Upload sample video ke <code>demo/sample.mp4</code></p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section id="faq" class="max-w-[800px] mx-auto px-6 py-24 relative z-10 border-t border-white/5">
+    <div class="mb-16 text-center">
+      <h2 class="text-3xl font-bold mb-4">Yang Sering Ditanyakan (FAQ)</h2>
+      <p class="text-gray-400">Informasi ringkas agar kamu memahami cara arsitektur VIGEN bertugas.</p>
+    </div>
+
+    <div class="space-y-4">
+      <details class="glass-panel group [&_summary::-webkit-details-marker]:hidden bg-[#0a0a0a]/50">
+        <summary class="flex cursor-pointer items-center justify-between gap-1.5 p-6 font-medium text-white transition-colors group-hover:text-purple-400">
+          <h3 class="text-lg font-semibold">Apakah sistem ini wajib langganan bulanan?</h3>
+          <span class="shrink-0 transition duration-300 group-open:-rotate-180">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+          </span>
+        </summary>
+        <div class="px-6 pb-6 text-gray-400 leading-relaxed border-t border-white/5 pt-4 mt-2">
+          Sama sekali <strong>tidak</strong>. VIGEN adalah engine lokal yang berjalan di ekosistem kamu sendiri. Tidak ada cloud server dari pihak kami, sehingga kamu bebas melakukan render video sepuasnya secara gratis (hanya mengkonsumsi baterai HP/Server kamu).
+        </div>
+      </details>
+
+      <details class="glass-panel group [&_summary::-webkit-details-marker]:hidden bg-[#0a0a0a]/50">
+        <summary class="flex cursor-pointer items-center justify-between gap-1.5 p-6 font-medium text-white transition-colors group-hover:text-blue-400">
+          <h3 class="text-lg font-semibold">HP saya kentang, apa sanggup menjalankan Script Render ini?</h3>
+          <span class="shrink-0 transition duration-300 group-open:-rotate-180">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+          </span>
+        </summary>
+        <div class="px-6 pb-6 text-gray-400 leading-relaxed border-t border-white/5 pt-4 mt-2">
+          Engine berbasis Python di terminal (Termux) jauh lebih ringan dibandingkan kamu membuka aplikasi editor video berat. Proses penyatuan frame dan tipografi sangat teroptimasi menggunakan library kompilasi rendah. 4GB RAM Android terbaru sangat mumpuni merekayasa puluhan klip per malam.
+        </div>
+      </details>
+
+      <details class="glass-panel group [&_summary::-webkit-details-marker]:hidden bg-[#0a0a0a]/50">
+        <summary class="flex cursor-pointer items-center justify-between gap-1.5 p-6 font-medium text-white transition-colors group-hover:text-purple-400">
+          <h3 class="text-lg font-semibold">Tersedia untuk layout dan jenis platform apa saja?</h3>
+          <span class="shrink-0 transition duration-300 group-open:-rotate-180">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+          </span>
+        </summary>
+        <div class="px-6 pb-6 text-gray-400 leading-relaxed border-t border-white/5 pt-4 mt-2">
+          Hasil video didesain untuk video vertikal 9:16 cocok untuk (TikTok, YouTube Shorts, dan IG Reels). Ada 26 koleksi template dinamis seperti <strong>Berita, Dialog, Reminder, Peringatan, QnA, Fakta Random, Hadits</strong> dsb.
+        </div>
+      </details>
+    </div>
+  </section>
+
   <!-- CTA -->
   <section class="border-t border-white/5 py-24 relative overflow-hidden">
     <div class="glow-circle" style="top: 50%; width: 800px; height: 800px; opacity: 0.5;"></div>