diff --git a/assets/css/main.css b/assets/css/main.css
index e78df1b..5343ef6 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -373,6 +373,64 @@ h3 {
transform: translateY(-2px);
}
+/* Home "How it works": three steps linked by a flow, lit one after the other */
+.steps {
+ gap: 2.5rem;
+}
+
+.step {
+ position: relative;
+ text-align: center;
+}
+
+.step .card__icon {
+ width: 72px;
+ height: 72px;
+ margin-inline: auto;
+ animation: step-light 4.5s ease-in-out infinite;
+}
+
+.step:nth-child(2) .card__icon {
+ animation-delay: 1.5s;
+}
+
+.step:nth-child(3) .card__icon {
+ animation-delay: 3s;
+}
+
+@keyframes step-light {
+ 0%,
+ 30%,
+ 100% {
+ background: var(--teal);
+ transform: scale(1);
+ }
+
+ 10% {
+ background: var(--amber-dark);
+ transform: scale(1.2);
+ }
+}
+
+@media (min-width: 900px) {
+ .step:not(:last-child)::after {
+ content: "";
+ position: absolute;
+ top: calc(1.5rem + 36px);
+ left: 100%;
+ width: 2.5rem;
+ height: 2px;
+ background: repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 12px);
+ animation: step-flow 0.8s linear infinite;
+ }
+}
+
+@keyframes step-flow {
+ to {
+ background-position-x: 12px;
+ }
+}
+
/* Inner pages */
.page-header {
padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
@@ -938,5 +996,6 @@ h3 {
* {
transition: none !important;
+ animation: none !important;
}
}
diff --git a/content/_index.en.md b/content/_index.en.md
index 65025b0..40ce67f 100644
--- a/content/_index.en.md
+++ b/content/_index.en.md
@@ -10,6 +10,16 @@ about:
media:
eyebrow: News & Insights
title: Featured Stories
+howItWorks:
+ title: "How it works"
+ intro: "End-to-end detection, from the camera to the firefighter."
+ steps:
+ - title: "Detect"
+ text: "Cameras on high points watch the horizon. A lightweight AI analyses the images on site."
+ - title: "Alert"
+ text: "The alert is sent through several channels, so it does not depend on a single application, then analysed on our platform."
+ - title: "Respond"
+ text: "Users quickly assess the risk and launch operations sooner: precious tens of minutes gained against the flames."
contactForm:
title: Let us protect our forests
follow:
diff --git a/content/_index.es-ct.md b/content/_index.es-ct.md
index d38e1f3..685c0ff 100644
--- a/content/_index.es-ct.md
+++ b/content/_index.es-ct.md
@@ -10,6 +10,16 @@ about:
media:
eyebrow: Notícies i Perspectives
title: Destacats
+howItWorks:
+ title: "Com funciona"
+ intro: "Una detecció de punta a punta, de la càmera al bomber."
+ steps:
+ - title: "Detectar"
+ text: "Càmeres en punts alts vigilen l'horitzó. Una IA lleugera analitza les imatges in situ."
+ - title: "Alertar"
+ text: "L'alerta es difon per diversos canals, sense dependre d'una sola aplicació, i després s'analitza a la nostra plataforma."
+ - title: "Intervenir"
+ text: "Els usuaris avaluen ràpidament el risc i activen abans les operacions: valuoses desenes de minuts guanyades contra les flames."
contactForm:
title: Protegim els nostres boscos
follow:
diff --git a/content/_index.es.md b/content/_index.es.md
index 6054479..72baf61 100644
--- a/content/_index.es.md
+++ b/content/_index.es.md
@@ -10,6 +10,16 @@ about:
media:
eyebrow: Noticias y Perspectivas
title: Destacados
+howItWorks:
+ title: "Cómo funciona"
+ intro: "Una detección de principio a fin, de la cámara al bombero."
+ steps:
+ - title: "Detectar"
+ text: "Cámaras en puntos altos vigilan el horizonte. Una IA ligera analiza las imágenes en el lugar."
+ - title: "Alertar"
+ text: "La alerta se difunde por varios canales, sin depender de una sola aplicación, y luego se analiza en nuestra plataforma."
+ - title: "Intervenir"
+ text: "Los usuarios evalúan rápido el riesgo y activan antes las operaciones: valiosas decenas de minutos ganadas frente a las llamas."
contactForm:
title: Protejamos nuestros bosques
follow:
diff --git a/content/_index.fr.md b/content/_index.fr.md
index bdd5793..497f512 100644
--- a/content/_index.fr.md
+++ b/content/_index.fr.md
@@ -10,6 +10,16 @@ about:
media:
eyebrow: Actualités & Perspectives
title: En vedette
+howItWorks:
+ title: "Comment ça marche"
+ intro: "Une détection de bout en bout, de la caméra au pompier."
+ steps:
+ - title: "Détecter"
+ text: "Des caméras sur des points hauts surveillent l'horizon. Une IA sobre analyse les images sur place."
+ - title: "Alerter"
+ text: "L'alerte est diffusée sur plusieurs canaux, sans dépendre d'une seule application, puis analysée sur notre plateforme."
+ - title: "Intervenir"
+ text: "Les utilisateurs qualifient rapidement le risque et déclenchent plus tôt les opérations : de précieuses dizaines de minutes gagnées contre les flammes."
contactForm:
title: Protégeons nos forêts
follow:
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 9bc93ee..c29c8ce 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -24,3 +24,4 @@ tryDemo: "Launch the demo"
openDemo: "Open the demo on Hugging Face"
sending: "Sending…"
sendingNote: "This can take up to 30 seconds, please wait."
+seeHowItWorks: "See how it works"
diff --git a/i18n/es-ct.yaml b/i18n/es-ct.yaml
index d08dd40..1c33f14 100644
--- a/i18n/es-ct.yaml
+++ b/i18n/es-ct.yaml
@@ -24,3 +24,4 @@ tryDemo: "Inicia la demo"
openDemo: "Obre la demo a Hugging Face"
sending: "Enviant…"
sendingNote: "Pot trigar fins a 30 segons, espereu, si us plau."
+seeHowItWorks: "Veure com funciona"
diff --git a/i18n/es.yaml b/i18n/es.yaml
index 76be066..4998d73 100644
--- a/i18n/es.yaml
+++ b/i18n/es.yaml
@@ -24,3 +24,4 @@ tryDemo: "Iniciar la demo"
openDemo: "Abrir la demo en Hugging Face"
sending: "Enviando…"
sendingNote: "Puede tardar hasta 30 segundos, espere por favor."
+seeHowItWorks: "Ver cómo funciona"
diff --git a/i18n/fr.yaml b/i18n/fr.yaml
index 30c014f..818632b 100644
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@@ -24,3 +24,4 @@ tryDemo: "Lancer la démo"
openDemo: "Ouvrir la démo sur Hugging Face"
sending: "Envoi en cours…"
sendingNote: "Cela peut prendre jusqu'à 30 secondes, merci de patienter."
+seeHowItWorks: "Voir comment ça marche"
diff --git a/layouts/home.html b/layouts/home.html
index de0a040..b5be098 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -7,7 +7,28 @@