feat: add new video resources for exam preparation and enhance LandingPage with GitHub link and demo section. Introduce interactive elements and improve button layouts for better user engagement.

apps/web/public/attempt exam.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d4de92ea9cac91bc7731d97126fdbcb9b0c1764150e9e53155a1b0acf480de77
+size 1113284

apps/web/public/generate soal.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:21dd9d8620058d16308ddca2c17061efe48da4c3327882f1ea89f8baeabb393b
+size 6167807

apps/web/public/paket soal.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c6a3b8bfd988333e7244ea497f6eaf38103a1e7a74cd108e18917bf8b1dfa89b
+size 2073297

apps/web/src/components/routes/LandingPage.tsx

@@ -59,14 +59,21 @@ export function LandingPage() {
           <img src="/logo.png" alt="Labas Logo" className="h-10 w-auto object-contain" />
           <span className="font-headline font-semibold text-2xl tracking-[-0.64px] text-[var(--clay-black)] hidden sm:block">Labas</span>
         </div>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2 sm:gap-4">
+          <a href="https://github.com/rogasper/labas-bahasa" target="_blank" rel="noopener noreferrer" className="text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors p-2 hidden sm:flex items-center gap-2" aria-label="GitHub Repository">
+            <svg viewBox="0 0 24 24" className="w-6 h-6 fill-current" aria-hidden="true">
+              <path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+            </svg>
+            <span className="font-semibold text-base">Star us</span>
+          </a>
+          <div className="w-px h-6 bg-[var(--oat-border)] hidden sm:block mx-2"></div>
           <Link to="/login">
-            <Button variant="ghost" className="text-[var(--clay-black)] font-semibold hover:bg-[var(--oat-light)] rounded-[12px] text-lg px-6 h-12">
+            <Button variant="ghost" className="text-[var(--clay-black)] font-semibold hover:bg-[var(--oat-light)] rounded-[12px] text-lg px-4 sm:px-6 h-12">
               Masuk
             </Button>
           </Link>
           <Link to="/login">
-            <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--dark-charcoal)] rounded-[24px] h-12 px-8 font-semibold text-lg clay-hover clay-shadow">
+            <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--dark-charcoal)] rounded-[24px] h-12 px-6 sm:px-8 font-semibold text-lg clay-hover clay-shadow">
               Mulai Gratis
             </Button>
           </Link>
@@ -90,12 +97,20 @@ export function LandingPage() {
               Persiapkan dirimu untuk ujian bahasa asing dengan latihan soal interaktif, mock test realistis, dan AI Generator super cepat.
             </p>
             
-            <div className="flex flex-col sm:flex-row items-center gap-6 justify-center xl:justify-start pt-6">
+            <div className="flex flex-col sm:flex-row items-center gap-4 justify-center xl:justify-start pt-6">
               <Link to="/login" className="w-full sm:w-auto">
-                <Button className="w-full sm:w-auto bg-[var(--pure-white)] text-[var(--clay-black)] rounded-[24px] h-[64px] px-10 text-xl font-semibold border-2 border-[var(--oat-border)] clay-shadow clay-hover">
+                <Button className="w-full sm:w-auto bg-[var(--pure-white)] text-[var(--clay-black)] rounded-[24px] h-[64px] px-8 text-xl font-semibold border-2 border-[var(--oat-border)] clay-shadow clay-hover">
                   Mulai Latihan Sekarang
                 </Button>
               </Link>
+              <a href="https://github.com/rogasper/labas-bahasa" target="_blank" rel="noopener noreferrer" className="w-full sm:w-auto">
+                <Button variant="ghost" className="w-full sm:w-auto text-[var(--clay-black)] rounded-[24px] h-[64px] px-8 text-xl font-semibold hover:bg-[var(--oat-light)] border-2 border-transparent flex items-center gap-3">
+                  <svg viewBox="0 0 24 24" className="w-6 h-6 fill-current" aria-hidden="true">
+                    <path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+                  </svg>
+                  Lihat di GitHub
+                </Button>
+              </a>
             </div>
           </div>
           
@@ -121,6 +136,185 @@ export function LandingPage() {
           </div>
         </section>
 
+        {/* VIDEO DEMO SECTION - DYNAMIC ZIGZAG */}
+        <section id="demo" className="w-full bg-[var(--warm-cream)] py-20 pb-32 relative overflow-hidden">
+          {/* Decorative background elements */}
+          <div className="absolute top-40 -left-64 w-[500px] h-[500px] bg-[var(--matcha-300)]/30 rounded-full blur-3xl pointer-events-none"></div>
+          <div className="absolute bottom-40 -right-64 w-[600px] h-[600px] bg-[var(--slushie-500)]/20 rounded-full blur-3xl pointer-events-none"></div>
+
+          <div className="max-w-7xl mx-auto px-6 md:px-12 lg:px-16 relative z-10">
+            <div className="text-center max-w-3xl mx-auto mb-24 space-y-6">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--ube-300)]/30 border-2 border-[var(--ube-300)] text-[var(--ube-800)] uppercase-label shadow-sm">
+                <MaterialIcon name="play_circle" className="text-sm" />
+                <span>Lihat Aksinya</span>
+              </div>
+              <h2 className="text-[50px] md:text-[60px] font-headline font-semibold text-[var(--clay-black)] tracking-[-2.4px] leading-tight drop-shadow-sm">
+                Pengalaman Belajar Generasi Baru
+              </h2>
+            </div>
+
+            <div className="space-y-32">
+              {/* Feature 1: Hero Showcase - Generate AI */}
+              <div className="flex flex-col items-center text-center pb-8 pt-4">
+                <div className="max-w-3xl space-y-5 mb-10">
+                  <div className="inline-block px-4 py-1.5 rounded-full bg-[var(--ube-300)]/20 border-2 border-[var(--ube-300)]/50 text-[var(--ube-800)] text-sm font-bold tracking-wide uppercase-label mb-2">✨ Fitur Unggulan</div>
+                  <h3 className="text-[36px] md:text-[45px] lg:text-[55px] font-headline font-semibold text-[var(--clay-black)] leading-[1.1] tracking-[-1.5px]">
+                    Generate Soal <br className="hidden sm:block md:hidden" /> <span className="text-[var(--ube-800)]">Agentic AI</span>
+                  </h3>
+                  <p className="text-lg md:text-xl text-[var(--warm-charcoal)] leading-relaxed max-w-2xl mx-auto">
+                    Masukkan teks bacaan bahasa asing, dan biarkan sistem <i>Multi-step Agentic Pipeline</i> kami (Validasi → Generasi → Self-check) menyusun paket soal bermutu secara otomatis.
+                  </p>
+                </div>
+                
+                <div className="w-full relative group max-w-5xl mx-auto">
+                  <div className="absolute inset-0 bg-gradient-to-tr from-[var(--ube-400)] via-[var(--matcha-300)] to-[var(--lemon-400)] rounded-[48px] transform rotate-1 group-hover:rotate-2 transition-transform duration-700 opacity-60 blur-xl"></div>
+                  <div className="absolute inset-0 bg-gradient-to-tr from-[var(--ube-400)] via-[var(--matcha-300)] to-[var(--lemon-400)] rounded-[48px] transform rotate-1 group-hover:rotate-2 transition-transform duration-700"></div>
+                  <div className="relative rounded-[48px] overflow-hidden border-[6px] border-[var(--pure-white)] shadow-[0_30px_80px_rgba(0,0,0,0.2)] bg-[var(--oat-light)] transform transition-transform duration-700 group-hover:-translate-y-2">
+                    <video 
+                      className="w-full aspect-video object-cover" 
+                      autoPlay 
+                      muted 
+                      loop
+                      playsInline
+                    >
+                      <source src="/generate%20soal.mp4" type="video/mp4" />
+                      Browser Anda tidak mendukung tag video.
+                    </video>
+                  </div>
+                  
+                  {/* Floating badge 1 */}
+                  <div className="absolute -bottom-8 right-4 md:-right-8 bg-[var(--pure-white)] border-2 border-[var(--oat-border)] p-4 md:p-5 rounded-[24px] md:rounded-[28px] shadow-2xl clay-hover transform -rotate-3 z-20 flex items-center gap-3 md:gap-4">
+                    <div className="w-12 h-12 md:w-14 md:h-14 rounded-full bg-[var(--ube-300)] flex items-center justify-center">
+                      <MaterialIcon name="smart_toy" className="text-2xl md:text-3xl text-[var(--ube-800)]" />
+                    </div>
+                    <div className="text-left">
+                      <p className="text-base md:text-lg font-bold text-[var(--clay-black)] leading-tight">Agentic Pipeline</p>
+                      <p className="text-xs md:text-sm text-[var(--warm-charcoal)]">Generasi & Self-Check</p>
+                    </div>
+                  </div>
+                  
+                  {/* Floating badge 2 */}
+                  <div className="absolute -top-8 left-4 md:-left-8 bg-[var(--pure-white)] border-2 border-[var(--oat-border)] p-4 rounded-[24px] shadow-2xl clay-hover transform rotate-3 z-20 flex items-center gap-3 hidden md:flex">
+                    <div className="w-12 h-12 rounded-full bg-[var(--lemon-400)] flex items-center justify-center">
+                      <MaterialIcon name="verified" className="text-2xl text-[var(--lemon-800)]" />
+                    </div>
+                    <div className="text-left">
+                      <p className="font-bold text-[var(--clay-black)] leading-tight">Kualitas Tinggi</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">Evaluasi Otomatis</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Feature 2: Zigzag Right - Manajemen Paket */}
+              <div className="flex flex-col lg:flex-row-reverse items-center gap-12 lg:gap-20">
+                <div className="flex-1 w-full lg:w-1/2 relative group">
+                  <div className="absolute inset-0 bg-gradient-to-tr from-[var(--matcha-400)] to-[var(--lemon-400)] rounded-[40px] transform -rotate-3 group-hover:-rotate-6 transition-transform duration-700"></div>
+                  <div className="relative rounded-[40px] overflow-hidden border-4 border-[var(--pure-white)] shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform transition-transform duration-700 group-hover:-translate-y-2 bg-[var(--oat-light)]">
+                    <video 
+                      className="w-full aspect-video object-cover" 
+                      autoPlay 
+                      muted 
+                      loop
+                      playsInline
+                    >
+                      <source src="/paket%20soal.mp4" type="video/mp4" />
+                      Browser Anda tidak mendukung tag video.
+                    </video>
+                  </div>
+                  
+                  {/* Floating badge */}
+                  <div className="absolute -top-6 -left-6 md:-left-10 bg-[var(--pure-white)] border-2 border-[var(--oat-border)] p-4 rounded-[24px] shadow-xl clay-hover transform rotate-6 z-20 flex items-center gap-3">
+                    <div className="w-12 h-12 rounded-full bg-[var(--matcha-300)] flex items-center justify-center">
+                      <MaterialIcon name="source" className="text-2xl text-[var(--matcha-800)]" />
+                    </div>
+                    <div>
+                      <p className="font-bold text-[var(--clay-black)] leading-tight">Bank Soal</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">Koleksi Lengkap</p>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="flex-1 w-full lg:w-1/2 space-y-6">
+                  <h3 className="text-[40px] lg:text-[50px] font-headline font-semibold text-[var(--clay-black)] leading-[1.1] tracking-[-1.5px]">
+                    Kustomisasi <br/> <span className="text-[var(--matcha-600)]">Paket Belajar</span>
+                  </h3>
+                  <p className="text-xl text-[var(--warm-charcoal)] leading-relaxed">
+                    Eksplorasi Bank Soal untuk merakit paket latihan Anda sendiri. Publikasikan paket soal buatan Anda, atau gunakan paket pilihan dari daftar Editor's Pick.
+                  </p>
+                  <ul className="space-y-4 pt-4">
+                    <li className="flex items-center gap-3">
+                      <div className="w-8 h-8 rounded-full bg-[var(--matcha-300)]/50 flex items-center justify-center">
+                        <MaterialIcon name="check" className="text-[var(--matcha-800)]" />
+                      </div>
+                      <span className="text-lg font-medium text-[var(--clay-black)]">Bank Soal Terintegrasi</span>
+                    </li>
+                    <li className="flex items-center gap-3">
+                      <div className="w-8 h-8 rounded-full bg-[var(--matcha-300)]/50 flex items-center justify-center">
+                        <MaterialIcon name="check" className="text-[var(--matcha-800)]" />
+                      </div>
+                      <span className="text-lg font-medium text-[var(--clay-black)]">Sistem Publikasi Paket</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              {/* Feature 3: Zigzag Left - Simulasi */}
+              <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
+                <div className="flex-1 w-full lg:w-1/2 relative group">
+                  <div className="absolute inset-0 bg-gradient-to-tr from-[var(--slushie-500)] to-[var(--ube-400)] rounded-[40px] transform rotate-3 group-hover:rotate-6 transition-transform duration-700"></div>
+                  <div className="relative rounded-[40px] overflow-hidden border-4 border-[var(--pure-white)] shadow-[0_20px_60px_rgba(0,0,0,0.15)] transform transition-transform duration-700 group-hover:-translate-y-2 bg-[var(--oat-light)]">
+                    <video 
+                      className="w-full aspect-video object-cover" 
+                      autoPlay 
+                      muted 
+                      loop
+                      playsInline
+                    >
+                      <source src="/attempt%20exam.mp4" type="video/mp4" />
+                      Browser Anda tidak mendukung tag video.
+                    </video>
+                  </div>
+
+                  {/* Floating badge */}
+                  <div className="absolute -bottom-6 -right-6 md:-right-10 bg-[var(--pure-white)] border-2 border-[var(--oat-border)] p-4 rounded-[24px] shadow-xl clay-hover transform -rotate-6 z-20 flex items-center gap-3">
+                    <div className="w-12 h-12 rounded-full bg-[var(--slushie-500)] flex items-center justify-center">
+                      <MaterialIcon name="timer" className="text-2xl text-[var(--clay-black)]" />
+                    </div>
+                    <div>
+                      <p className="font-bold text-[var(--clay-black)] leading-tight">Anti-Curang</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">Validasi Waktu</p>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="flex-1 w-full lg:w-1/2 space-y-6">
+                  <h3 className="text-[40px] lg:text-[50px] font-headline font-semibold text-[var(--clay-black)] leading-[1.1] tracking-[-1.5px]">
+                    Simulasi Ujian <br/> <span className="text-[var(--slushie-600)]">Fokus Penuh</span>
+                  </h3>
+                  <p className="text-xl text-[var(--warm-charcoal)] leading-relaxed">
+                    Kerjakan latihan dengan antarmuka ujian sesungguhnya. Selesaikan tes dengan sistem timer yang tervalidasi secara akurat, dan dapatkan kalkulasi skor serta akurasi secara instan.
+                  </p>
+                  <ul className="space-y-4 pt-4">
+                    <li className="flex items-center gap-3">
+                      <div className="w-8 h-8 rounded-full bg-[var(--slushie-500)]/30 flex items-center justify-center">
+                        <MaterialIcon name="check" className="text-[var(--clay-black)]" />
+                      </div>
+                      <span className="text-lg font-medium text-[var(--clay-black)]">Sistem Timer Tervalidasi</span>
+                    </li>
+                    <li className="flex items-center gap-3">
+                      <div className="w-8 h-8 rounded-full bg-[var(--slushie-500)]/30 flex items-center justify-center">
+                        <MaterialIcon name="check" className="text-[var(--clay-black)]" />
+                      </div>
+                      <span className="text-lg font-medium text-[var(--clay-black)]">Kalkulasi Skor Otomatis</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* Feature Cards Section */}
         <section id="features" className="w-full bg-[var(--pure-white)] py-32 border-y-2 border-dashed border-[var(--oat-border)]">
           <div className="max-w-7xl mx-auto px-6 md:px-12 lg:px-16">
@@ -227,6 +421,8 @@ export function LandingPage() {
           </div>
         </section>
 
+
+
         {/* SWATCH ROOM 1: Ube FAQ Section */}
         <section className="w-full bg-[var(--ube-800)] py-32 rounded-t-[40px] mt-[-40px] z-10 relative shadow-[0_-10px_40px_rgba(0,0,0,0.1)] border-t-2 border-[var(--oat-border)]/20">
           <div className="max-w-4xl mx-auto px-6 md:px-12 lg:px-16">
@@ -286,6 +482,27 @@ export function LandingPage() {
 
       {/* Footer */}
       <footer className="w-full bg-[var(--pure-white)] py-12 border-t-2 border-[var(--oat-border)] text-center relative z-30">
+        <div className="flex flex-col items-center gap-4 mb-8">
+          <p className="text-[var(--warm-charcoal)] font-semibold text-lg">Hubungi Kami</p>
+          <div className="flex flex-wrap justify-center items-center gap-6 text-[var(--clay-black)]">
+            <a href="mailto:admin@rogasper.com" className="flex items-center gap-2 hover:text-[var(--matcha-700)] transition-colors">
+              <MaterialIcon name="mail" />
+              <span className="font-semibold">admin@rogasper.com</span>
+            </a>
+            <a href="https://instagram.com/rogasper" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:text-[var(--matcha-700)] transition-colors">
+              <MaterialIcon name="photo_camera" />
+              <span className="font-semibold">@rogasper</span>
+            </a>
+            <a href="https://github.com/rogasper/labas-bahasa" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:text-[var(--matcha-700)] transition-colors">
+              <MaterialIcon name="code" />
+              <span className="font-semibold">GitHub</span>
+            </a>
+            <a href="https://rogasper.com" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:text-[var(--matcha-700)] transition-colors">
+              <MaterialIcon name="language" />
+              <span className="font-semibold">rogasper.com</span>
+            </a>
+          </div>
+        </div>
         <p className="text-[var(--warm-charcoal)] font-semibold text-lg">
           &copy; {new Date().getFullYear()} Labas. Didesain dengan penuh kehangatan.
         </p>