feat: add a short "How it works" section to the home page (draft, for discussion)

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;
   }
 }

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:

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:

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:

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:

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"

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"

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"

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"

layouts/home.html

@@ -7,7 +7,28 @@ <h2>{{ .Params.about.title }}</h2>
       {{ partial "figures.html" . }}
     </div>
   </section>
-  <section class="section section--alt" id="discover">
+  {{- with .Params.howItWorks }}
+  <section class="section section--alt" id="how-it-works">
+    <div class="container">
+      <h2>{{ .title }}</h2>
+      <p class="intro">{{ .intro }}</p>
+      {{- $icons := slice "img/cards_icons/cctv.svg" "img/cards_icons/radio-tower.svg" "img/cards_icons/siren.svg" }}
+      <div class="cards steps">
+        {{- range $i, $step := .steps }}
+        <article class="card step">
+          <span class="card__icon" style="--icon: url('{{ index $icons $i | relURL }}')"></span>
+          <h3>{{ $step.title }}</h3>
+          <p>{{ $step.text }}</p>
+        </article>
+        {{- end }}
+      </div>
+      {{- with site.GetPage "/how-it-works" }}
+      <p class="more"><a class="btn" href="{{ .RelPermalink }}">{{ i18n "seeHowItWorks" }}</a></p>
+      {{- end }}
+    </div>
+  </section>
+  {{- end }}
+  <section class="section" id="discover">
     <div class="container">
       <h2>{{ i18n "discover" }}</h2>
       <div class="cards cards--pages">
@@ -23,7 +44,7 @@ <h3>{{ .Title }}</h3>
     </div>
   </section>
   {{- with site.GetPage "/deployments" }}
-  <section class="section" id="partners">
+  <section class="section section--alt" id="partners">
     <div class="container">
       <p class="eyebrow">{{ .Params.partners.eyebrow }}</p>
       <h2>{{ .Params.partners.title }}</h2>
@@ -36,7 +57,7 @@ <h2>{{ .Params.partners.title }}</h2>
     </div>
   </section>
   {{- end }}
-  <section class="section section--alt" id="media">
+  <section class="section" id="media">
     <div class="container">
       <p class="eyebrow">{{ .Params.media.eyebrow }}</p>
       <h2>{{ .Params.media.title }}</h2>

static/img/cards_icons/sources.txt

@@ -5,4 +5,5 @@ rocket.svg CC BY 4.0 https://iconduck.com/icons/22306/rocket
 eco.scg Apache 2 https://iconduck.com/icons/28790/eco 
 savings-solid.svg MIT https://iconduck.com/icons/100582/savings-solid
 grid-view-solid.svg MIT https://iconduck.com/icons/100862/grid-view-solid
-share.svg MIT https://iconduck.com/icons/109278/share
+share.svg MIT https://iconduck.com/icons/109278/share
+cctv.svg, radio-tower.svg, siren.svg ISC https://lucide.dev (lucide-static 0.469.0)