From 4766789632d9ed5fb9941ffc4e8f05f6bd65001a Mon Sep 17 00:00:00 2001
From: David Montero <davidmonterocrespo24@gmail.com>
Date: Wed, 22 Jul 2026 22:56:32 +0200
Subject: [PATCH] feat(landing): hero shows the weather-station circuit gif
 running

Replaces the static hero-editor screenshot with the animated
estacion-meteorologica-esp32.gif (whole circuit executing). contain +
matching background so the full circuit stays visible instead of
cover-cropping it.
---
 frontend/src/pages/LandingPage.css |  6 +++++-
 frontend/src/pages/LandingPage.tsx | 18 +++++++-----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/LandingPage.css b/frontend/src/pages/LandingPage.css
index 6138ffa3..2deeed57 100644
--- a/frontend/src/pages/LandingPage.css
+++ b/frontend/src/pages/LandingPage.css
@@ -418,8 +418,12 @@
   inset: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  /* The hero is an animated GIF of a running circuit — contain (not
+     cover) so the whole circuit stays visible; the background matches
+     the GIF's canvas color so the letterbox bands blend in. */
+  object-fit: contain;
   object-position: center;
+  background: #181618;
 }
 
 /* ── Sections ─────────────────────────────────────────── */
diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index cc4c7e2f..c81ec5ca 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -710,17 +710,13 @@ export const LandingPage: React.FC = () => {
           <p className="hero-trust-line">{t('landing.hero.trustLine')}</p>
         </div>
         <div className="hero-right">
-          <picture>
-            <source srcSet="/marketing/hero-editor.webp" type="image/webp" />
-            <source srcSet="/marketing/hero-editor.png" type="image/png" />
-            <img
-              src="/marketing/hero-editor.png"
-              alt={t('landing.hero.imageAlt')}
-              className="hero-preview-img"
-              loading="eager"
-              fetchPriority="high"
-            />
-          </picture>
+          <img
+            src="/estacion-meteorologica-esp32.gif"
+            alt={t('landing.hero.imageAlt')}
+            className="hero-preview-img"
+            loading="eager"
+            fetchPriority="high"
+          />
         </div>
       </section>