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.
This commit is contained in:
David Montero 2026-07-22 22:56:32 +02:00
parent 249fb24ebb
commit 4766789632
2 changed files with 12 additions and 12 deletions

View File

@ -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 ─────────────────────────────────────────── */

View File

@ -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>