From 17bfefdbfa4d4616298643ef43b85680a6dbd16e Mon Sep 17 00:00:00 2001
From: Z User <z@container>
Date: Tue, 12 May 2026 20:43:06 +0000
Subject: [PATCH] Add media section with YouTube Short embed before footer

- New 'See Moxie in Action' section with heading and subtitle
- Embedded YouTube Short (b4ly_hECE_I) in a responsive 16:9 container
- Decorative emerald glow effects and rounded card styling
- 'Watch on YouTube' link with YouTube icon below the embed
- Scroll-animate integration for reveal on scroll
---
 admin.html     |   0
 dashboard.html |   0
 index-o.html   |   0
 index.html     |  42 ++++++++++++++++++++++++++++++++++++++++++
 js/api.js      |   0
 js/auth.js     |   0
 js/config.js   |   0
 logo.png       | Bin
 logo.svg       |   0
 test.md        |   0
 10 files changed, 42 insertions(+)
 mode change 100644 => 100755 admin.html
 mode change 100644 => 100755 dashboard.html
 mode change 100644 => 100755 index-o.html
 mode change 100644 => 100755 index.html
 mode change 100644 => 100755 js/api.js
 mode change 100644 => 100755 js/auth.js
 mode change 100644 => 100755 js/config.js
 mode change 100644 => 100755 logo.png
 mode change 100644 => 100755 logo.svg
 mode change 100644 => 100755 test.md

diff --git a/admin.html b/admin.html
old mode 100644
new mode 100755
diff --git a/dashboard.html b/dashboard.html
old mode 100644
new mode 100755
diff --git a/index-o.html b/index-o.html
old mode 100644
new mode 100755
diff --git a/index.html b/index.html
old mode 100644
new mode 100755
index d71d110..37ea162
--- a/index.html
+++ b/index.html
@@ -746,6 +746,48 @@
         </div>
     </div>
 
+    <!-- MEDIA SECTION -->
+    <section id="media" class="py-20 border-b border-slate-800 scroll-animate">
+        <div class="max-w-screen-2xl mx-auto px-8">
+            <div class="text-center mb-12 scroll-animate">
+                <h2 class="text-5xl font-semibold tracking-[-1px] mb-3" style="font-family: 'Space Grotesk', sans-serif;">See Moxie in Action.</h2>
+                <p class="text-slate-400 text-xl max-w-xl mx-auto">Watch how our algorithms deliver real-time AI inference on consumer hardware.</p>
+            </div>
+
+            <div class="max-w-3xl mx-auto scroll-animate">
+                <div class="relative bg-slate-900 border border-slate-700 rounded-3xl overflow-hidden shadow-2xl shadow-emerald-400/5 group">
+                    <!-- Decorative glow -->
+                    <div class="absolute -top-20 -left-20 w-60 h-60 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none"></div>
+                    <div class="absolute -bottom-20 -right-20 w-60 h-60 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none"></div>
+
+                    <!-- Video embed container (9:16 portrait for Shorts, displayed as 16:9 card) -->
+                    <div class="relative w-full" style="padding-top: 56.25%;">
+                        <iframe
+                            src="https://www.youtube.com/embed/b4ly_hECE_I"
+                            title="Moxiegen Demo"
+                            frameborder="0"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                            allowfullscreen
+                            class="absolute inset-0 w-full h-full rounded-3xl"
+                            loading="lazy"
+                        ></iframe>
+                    </div>
+                </div>
+
+                <!-- Caption below video -->
+                <div class="flex items-center justify-center gap-3 mt-6">
+                    <div class="h-px flex-1 bg-gradient-to-r from-transparent to-slate-700"></div>
+                    <a href="https://youtube.com/shorts/b4ly_hECE_I" target="_blank" rel="noopener noreferrer"
+                       class="text-emerald-400 hover:text-emerald-300 font-medium text-sm flex items-center gap-2 transition-colors">
+                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
+                        Watch on YouTube
+                    </a>
+                    <div class="h-px flex-1 bg-gradient-to-l from-transparent to-slate-700"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- FOOTER -->
     <footer class="bg-slate-950 border-t border-slate-800 py-8">
         <div class="max-w-screen-2xl mx-auto px-8 flex flex-col md:flex-row justify-between items-center gap-4 text-slate-400 text-sm">
diff --git a/js/api.js b/js/api.js
old mode 100644
new mode 100755
diff --git a/js/auth.js b/js/auth.js
old mode 100644
new mode 100755
diff --git a/js/config.js b/js/config.js
old mode 100644
new mode 100755
diff --git a/logo.png b/logo.png
old mode 100644
new mode 100755
diff --git a/logo.svg b/logo.svg
old mode 100644
new mode 100755
diff --git a/test.md b/test.md
old mode 100644
new mode 100755