HF space page update

index.html

@@ -54,17 +54,14 @@
 
           <div class="hero-visual">
             <div class="glass-card">
-              <div class="media" role="img" aria-label="Demo GIF placeholder">
+              <div class="media" role="img" aria-label="Reachy Phone Home demo">
                 <div class="media-inner">
                   <img
-                    src="reachy_phone_home/assets/reachy_phone_home.PNG"
-                    alt="Reachy Phone Home preview"
+                    src="reachy_phone_home/assets/reachy-phone-home.gif"
+                    alt="Reachy Phone Home demo showing phone tracking and reactions"
                     class="hero-media"
                     loading="eager"
                   />
-                  <div class="media-overlay">
-                    <div class="overlay-title">Demo GIF goes here</div>
-                  </div>
                 </div>
               </div>
               <p class="caption">
@@ -88,8 +85,8 @@
         <div class="feature-grid">
           <div class="feature-card">
             <img
-              src="reachy_phone_home/assets/phone_home_view.png"
-              alt="Phone Home view preview"
+              src="reachy_phone_home/assets/detection.gif"
+              alt="Phone and person detection in action"
               class="feature-image"
               loading="lazy"
             />
@@ -98,23 +95,23 @@
           </div>
           <div class="feature-card">
             <img
-              src="reachy_phone_home/assets/phone_home_view.png"
-              alt="Phone Home view preview"
+              src="reachy_phone_home/assets/reachy-reacts.gif"
+              alt="Reachy expressing emotions and reactions"
               class="feature-image"
               loading="lazy"
             />
-            <h3>Home zone tracking</h3>
-            <p>Define a “home” spot in front of the camera. Phone stays home? Focus vibes.</p>
+            <h3>Expressive reactions</h3>
+            <p>Movements + emotion make accountability feel like a companion, not a timer.</p>
           </div>
           <div class="feature-card">
             <img
-              src="reachy_phone_home/assets/phone_home_view.png"
-              alt="Phone Home view preview"
+              src="reachy_phone_home/assets/phone-home-zone.gif"
+              alt="Phone home zone tracking demonstration"
               class="feature-image"
               loading="lazy"
             />
-            <h3>Expressive reactions</h3>
-            <p>Movements + emotion make accountability feel like a companion, not a timer.</p>
+            <h3>Home zone tracking</h3>
+            <p>Define a "home" spot in front of the camera. Phone stays home? Focus vibes.</p>
           </div>
         </div>
       </section>
@@ -131,18 +128,14 @@
         <div class="webapp-grid">
           <div class="webapp-visual">
             <div class="glass-card">
-              <div class="media" role="img" aria-label="Web app screenshot placeholder">
+              <div class="media" role="img" aria-label="Web app interface">
                 <div class="media-inner">
                   <img
-                    src="reachy_phone_home/assets/reachy_phone_home.PNG"
-                    alt="Web app interface preview"
+                    src="reachy_phone_home/assets/web-app.gif"
+                    alt="Web app interface showing live status and settings"
                     class="hero-media"
                     loading="lazy"
                   />
-                  <div class="media-overlay">
-                    <div class="overlay-title">Web UI screenshot goes here</div>
-                    <div class="overlay-sub">Show the settings panel and status view.</div>
-                  </div>
                 </div>
               </div>
               <p class="caption">
@@ -189,18 +182,14 @@
 
           <div class="install-visual">
             <div class="glass-card">
-              <div class="media" role="img" aria-label="Install GIF placeholder">
+              <div class="media" role="img" aria-label="Installation process">
                 <div class="media-inner">
                   <img
-                    src="reachy_phone_home/assets/reachy_phone_home.PNG"
-                    alt="Install demo placeholder"
+                    src="reachy_phone_home/assets/install.gif"
+                    alt="Installation process demonstration"
                     class="hero-media"
                     loading="lazy"
                   />
-                  <div class="media-overlay">
-                    <div class="overlay-title">Install GIF goes here</div>
-                    <div class="overlay-sub">Show: open assistant → install app → run.</div>
-                  </div>
                 </div>
               </div>
               <p class="caption">

style.css

@@ -250,9 +250,12 @@ a {
 .hero-media {
   display: block;
   width: 100%;
+  max-width: 600px;
+  max-height: 420px;
+  margin: 0 auto;
   height: auto;
-  aspect-ratio: 16 / 10;
-  object-fit: cover;
+  object-fit: contain;
+  background: rgba(0, 0, 0, 0.4);
 }
 
 .media-overlay {
@@ -333,21 +336,25 @@ a {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: linear-gradient(180deg, var(--card2), var(--card));
   box-shadow: var(--shadow2);
+  display: flex;
+  flex-direction: column;
+  min-height: 430px;
 }
 
 .feature-image {
   display: block;
   width: calc(100% - 10px);
+  max-height: 220px;
   margin-left: auto;
   margin-right: auto;
   height: auto;
-  aspect-ratio: 16 / 10;
-  object-fit: cover;
+  object-fit: contain;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.18);
+  background: rgba(0, 0, 0, 0.4);
   margin-bottom: 12px;
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
+  flex-shrink: 0;
 }
 
 .icon {