feat(home): explainer band + Imagineering Loom on visitor home

app/views/home/_visitor.html.erb

@@ -25,6 +25,56 @@
     </div>
   </section>
 
+  <%# Why / How / What — explainer band %>
+  <section data-home-section="explainer" class="mt-20">
+    <p class="text-xs font-bold uppercase tracking-widest text-imasus-dark-green/50">
+      <%= t(".explainer.eyebrow") %>
+    </p>
+
+    <%
+      pillar_styles = {
+        why:  "bg-imasus-mint/40",
+        how:  "bg-imasus-light-blue/30",
+        what: "bg-imasus-light-pink/40"
+      }
+    %>
+    <div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      <% pillar_styles.each do |pillar, bg_class| %>
+        <article data-explainer-card data-pillar="<%= pillar %>"
+                 class="flex flex-col rounded-2xl border border-imasus-dark-green/10 p-6 <%= bg_class %>">
+          <p class="text-xs font-bold uppercase tracking-widest text-imasus-dark-green/50">
+            <%= t(".explainer.#{pillar}.eyebrow") %>
+          </p>
+          <h3 class="mt-3 text-lg font-bold leading-snug text-imasus-dark-green">
+            <%= t(".explainer.#{pillar}.heading") %>
+          </h3>
+          <p class="mt-3 text-sm leading-relaxed text-imasus-dark-green/70">
+            <%= t(".explainer.#{pillar}.lead") %>
+          </p>
+        </article>
+      <% end %>
+    </div>
+  </section>
+
+  <%# The Imagineering Loom — diagram of how an IMASUS workshop moves %>
+  <section data-home-section="imagineering-loom" class="mt-20">
+    <p class="text-xs font-bold uppercase tracking-widest text-imasus-dark-green/50">
+      <%= t(".loom.eyebrow") %>
+    </p>
+    <h2 class="mt-3 text-2xl font-bold tracking-tight text-imasus-dark-green sm:text-3xl">
+      <%= t(".loom.heading") %>
+    </h2>
+    <p class="mt-3 max-w-2xl text-sm leading-relaxed text-imasus-dark-green/60">
+      <%= t(".loom.lead") %>
+    </p>
+
+    <div class="mt-10">
+      <%= image_tag "loom.png",
+                    alt: t(".loom.diagram_alt"),
+                    class: "mx-auto h-auto w-full max-w-4xl" %>
+    </div>
+  </section>
+
   <%# Workshops %>
   <section id="workshops" class="mt-20">
     <h2 class="text-2xl font-bold tracking-tight text-imasus-dark-green sm:text-3xl">

config/locales/el.yml

@@ -40,6 +40,27 @@ el:
         lead: "IMASUS App is the workshop platform for participants and facilitators developing new responses to large textile-industry challenges through the imagineering approach inspired by Diane Nijs."
         see_workshops: "Δείτε τα εργαστήρια"
         log_in: "Σύνδεση"
+      # TODO: translate
+      loom:
+        eyebrow: "The method"
+        heading: "How an IMASUS workshop moves"
+        lead: "Materials, training and challenges weave through the imagineering steps into a shared vision and a set of concrete proposals."
+        diagram_alt: "The Imagineering Loom — a diagrammatic loom showing how an IMASUS workshop weaves together the platform's resources (Materials Database, Training Modules, Challenge Cards), the four imagineering steps (A Appreciating, B Breathing, C Creating, D Developing) and the workshop's outputs (pre-work submission, system map, Creative Tension Engine formulation, final proposal with material references, individual next steps). A caption below the loom names the Creative Tension Engine — held in the balance of tension and intention."
+      # TODO: translate
+      explainer:
+        eyebrow: "About IMASUS"
+        why:
+          eyebrow: "Why"
+          heading: "The textile industry we want"
+          lead: "Textiles are among the largest contributors to environmental degradation. IMASUS treats that as a generative starting point — not just a problem to fix."
+        how:
+          eyebrow: "How"
+          heading: "Imagineering as a method"
+          lead: "A creative-leadership approach by Diane Nijs that moves teams through three design spaces — Inspiration, Ideation, Implementation — to reframe complex challenges into shared visions."
+        what:
+          eyebrow: "What"
+          heading: "Open workshops, open knowledge"
+          lead: "Workshops for young textile professionals in Zaragoza, Prato and Athens, backed by an open platform of materials, training modules and industry challenges."
       workshops:
         heading: "Επερχόμενα και προηγούμενα εργαστήρια"
         lead: "Each IMASUS workshop brings interdisciplinary teams together to work on real sustainability challenges. Workshops are open to participants beyond the host school."

config/locales/en.yml

@@ -37,6 +37,25 @@ en:
         lead: "IMASUS App is the workshop platform for participants and facilitators developing new responses to large textile-industry challenges through the imagineering approach inspired by Diane Nijs."
         see_workshops: "See workshops"
         log_in: "Log in"
+      explainer:
+        eyebrow: "About IMASUS"
+        why:
+          eyebrow: "Why"
+          heading: "The textile industry we want"
+          lead: "Textiles are among the largest contributors to environmental degradation. IMASUS treats that as a generative starting point — not just a problem to fix."
+        how:
+          eyebrow: "How"
+          heading: "Imagineering as a method"
+          lead: "A creative-leadership approach by Diane Nijs that moves teams through three design spaces — Inspiration, Ideation, Implementation — to reframe complex challenges into shared visions."
+        what:
+          eyebrow: "What"
+          heading: "Open workshops, open knowledge"
+          lead: "Workshops for young textile professionals in Zaragoza, Prato and Athens, backed by an open platform of materials, training modules and industry challenges."
+      loom:
+        eyebrow: "The method"
+        heading: "How an IMASUS workshop moves"
+        lead: "Materials, training and challenges weave through the imagineering steps into a shared vision and a set of concrete proposals."
+        diagram_alt: "The Imagineering Loom — a diagrammatic loom showing how an IMASUS workshop weaves together the platform's resources (Materials Database, Training Modules, Challenge Cards), the four imagineering steps (A Appreciating, B Breathing, C Creating, D Developing) and the workshop's outputs (pre-work submission, system map, Creative Tension Engine formulation, final proposal with material references, individual next steps). A caption below the loom names the Creative Tension Engine — held in the balance of tension and intention."
       workshops:
         heading: "Upcoming and past workshops"
         lead: "Each IMASUS workshop brings interdisciplinary teams together to work on real sustainability challenges. Workshops are open to participants beyond the host school."

config/locales/es.yml

@@ -37,6 +37,27 @@ es:
         lead: "IMASUS App es la plataforma de talleres para participantes y facilitación que desarrollan nuevas respuestas a grandes desafíos de la industria textil con el enfoque imagineering inspirado en Diane Nijs."
         see_workshops: "Ver talleres"
         log_in: "Iniciar sesión"
+      # TODO: translate
+      loom:
+        eyebrow: "The method"
+        heading: "How an IMASUS workshop moves"
+        lead: "Materials, training and challenges weave through the imagineering steps into a shared vision and a set of concrete proposals."
+        diagram_alt: "The Imagineering Loom — a diagrammatic loom showing how an IMASUS workshop weaves together the platform's resources (Materials Database, Training Modules, Challenge Cards), the four imagineering steps (A Appreciating, B Breathing, C Creating, D Developing) and the workshop's outputs (pre-work submission, system map, Creative Tension Engine formulation, final proposal with material references, individual next steps). A caption below the loom names the Creative Tension Engine — held in the balance of tension and intention."
+      # TODO: translate
+      explainer:
+        eyebrow: "About IMASUS"
+        why:
+          eyebrow: "Why"
+          heading: "The textile industry we want"
+          lead: "Textiles are among the largest contributors to environmental degradation. IMASUS treats that as a generative starting point — not just a problem to fix."
+        how:
+          eyebrow: "How"
+          heading: "Imagineering as a method"
+          lead: "A creative-leadership approach by Diane Nijs that moves teams through three design spaces — Inspiration, Ideation, Implementation — to reframe complex challenges into shared visions."
+        what:
+          eyebrow: "What"
+          heading: "Open workshops, open knowledge"
+          lead: "Workshops for young textile professionals in Zaragoza, Prato and Athens, backed by an open platform of materials, training modules and industry challenges."
       workshops:
         heading: "Talleres en curso y pasados"
         lead: "Cada taller IMASUS reúne equipos interdisciplinares para trabajar sobre retos reales de sostenibilidad. Los talleres están abiertos a personas más allá de la institución anfitriona."

config/locales/it.yml

@@ -40,6 +40,27 @@ it:
         lead: "IMASUS App is the workshop platform for participants and facilitators developing new responses to large textile-industry challenges through the imagineering approach inspired by Diane Nijs."
         see_workshops: "Apri i workshop"
         log_in: "Accedi"
+      # TODO: translate
+      loom:
+        eyebrow: "The method"
+        heading: "How an IMASUS workshop moves"
+        lead: "Materials, training and challenges weave through the imagineering steps into a shared vision and a set of concrete proposals."
+        diagram_alt: "The Imagineering Loom — a diagrammatic loom showing how an IMASUS workshop weaves together the platform's resources (Materials Database, Training Modules, Challenge Cards), the four imagineering steps (A Appreciating, B Breathing, C Creating, D Developing) and the workshop's outputs (pre-work submission, system map, Creative Tension Engine formulation, final proposal with material references, individual next steps). A caption below the loom names the Creative Tension Engine — held in the balance of tension and intention."
+      # TODO: translate
+      explainer:
+        eyebrow: "About IMASUS"
+        why:
+          eyebrow: "Why"
+          heading: "The textile industry we want"
+          lead: "Textiles are among the largest contributors to environmental degradation. IMASUS treats that as a generative starting point — not just a problem to fix."
+        how:
+          eyebrow: "How"
+          heading: "Imagineering as a method"
+          lead: "A creative-leadership approach by Diane Nijs that moves teams through three design spaces — Inspiration, Ideation, Implementation — to reframe complex challenges into shared visions."
+        what:
+          eyebrow: "What"
+          heading: "Open workshops, open knowledge"
+          lead: "Workshops for young textile professionals in Zaragoza, Prato and Athens, backed by an open platform of materials, training modules and industry challenges."
       workshops:
         heading: "Workshop in corso e passati"
         lead: "Each IMASUS workshop brings interdisciplinary teams together to work on real sustainability challenges. Workshops are open to participants beyond the host school."

test/controllers/home_controller_test.rb

@@ -124,6 +124,26 @@ def make_published_project(workshop:, title:, published_at: Time.current)
     assert_select "[data-resource-card][data-resource=challenges]"
   end
 
+  test "visitor home renders the why-how-what explainer band" do
+    get root_url
+    assert_select "[data-home-section=explainer]" do
+      assert_select "[data-explainer-card][data-pillar=why] *",
+                    text: I18n.t("home.visitor.explainer.why.heading")
+      assert_select "[data-explainer-card][data-pillar=how] *",
+                    text: I18n.t("home.visitor.explainer.how.heading")
+      assert_select "[data-explainer-card][data-pillar=what] *",
+                    text: I18n.t("home.visitor.explainer.what.heading")
+    end
+  end
+
+  test "visitor home renders the imagineering loom diagram" do
+    get root_url
+    assert_select "[data-home-section=imagineering-loom]" do
+      assert_select "img[alt=?]", I18n.t("home.visitor.loom.diagram_alt")
+    end
+    assert_match I18n.t("home.visitor.loom.heading"), response.body
+  end
+
   # ---------------------------------------------------------------------
   # Participant variant
   # ---------------------------------------------------------------------