na

app/assets/images/ico-soil.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="19" viewBox="0 0 22 19"><path d="M10.88,2.25c-1.34,0-2.01,0-2.64.26-.37.15-.7.38-.99.64-.49-1.16-1.39-2.06-2.55-2.54-.87-.36-1.86-.36-3.82-.36H.12v.75C.12,2.96.12,3.94.49,4.82c.49,1.17,1.4,2.08,2.57,2.57.75.31,1.59.35,3.07.36h0v3.5H.88v1.5h10v-1.5h-3.25v-3.5h0c.86-.01,1.39-.05,1.89-.26.84-.35,1.5-1.01,1.85-1.85.26-.63.26-1.3.26-2.64v-.75h-.75ZM3.63,6c-.79-.33-1.43-.97-1.76-1.76-.21-.51-.24-1.22-.25-2.49,1.28,0,1.99.04,2.49.25.79.33,1.43.97,1.76,1.76.21.51.24,1.22.25,2.49-1.28,0-1.99-.04-2.49-.25ZM9.98,5.07c-.2.47-.56.84-1.04,1.04-.26.11-.67.14-1.31.14,0-.65.03-1.05.14-1.31.2-.47.56-.84,1.04-1.04.26-.11.67-.14,1.31-.14,0,.65-.03,1.05-.14,1.31ZM21.88,15.75H.88v-1.5h21v1.5ZM21.88,18.75H.88v-1.5h21v1.5Z"/></svg>

app/assets/stylesheets/application.css

@@ -267,6 +267,10 @@ main {
   --clr-action: var(--clr-white);
 }
 
+.stage {
+  --clr-bg: var(--clr-sand-light);
+  --clr-action: var(--clr-white);
+}
 
 
 .hero-container, .carousel {
@@ -278,7 +282,7 @@ main {
   display: grid;
   grid-template: 1fr / 1fr;
     
-  & img {
+  & img, video {
     grid-area: 1 / 1;
     width: 100%;
     height: 100%;
@@ -287,11 +291,32 @@ main {
     min-height: 0;
   }
 
+  & article {
+    grid-area: 1 / 1;
+    place-self: start start;
+    z-index: 1;
+  }
+
+  &:has(video) {
+    color: var(--clr-white);
+    
+    & h2 {
+      text-align: left;
+      margin-top: 1em;
+    }
+  }
+
+
   & svg {
     grid-area: 1 / 1;
     place-self: end end;
     fill: var(--clr-bg, var(--clr-green));
   }
+
+  & .hero-link {
+    grid-area: 1 / 1;
+    z-index: 2;
+  }
 }
 
 .cta {
@@ -358,4 +383,33 @@ main {
       background-color: var(--clr-black);
     }
   }
+}
+
+.stage-header {
+  background-color: var(--clr-bg);
+  padding: 1rem;
+  display: flex;  
+  gap: 0.5rem;
+  align-items: center;
+
+  & h1 {
+    font: var(--td-base);
+    margin: 0;
+  }
+}
+
+.stage-icon {
+  width: 2.5rem;  
+  aspect-ratio: 1;
+  background-color: var(--clr-green);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stage-progress {
+  font: var(--td-s);
+  text-transform: uppercase;
+  font-weight: 700;
 }

app/controllers/site_controller.rb

@@ -16,6 +16,16 @@ class SiteController < ApplicationController
   end
 
 
+  def intro
+    @node = root_node&.children&.intro&.first
+  end
+
+
+  def stage
+    @node = root_node&.children&.stage&.first
+  end
+
+
 private
 
   def root_node

app/javascript/application.js

@@ -3,11 +3,13 @@ import { Application } from "@hotwired/stimulus"
 
 import LanguageMenuController from "language_menu_controller"
 import CarouselController from "carousel_controller"
+import IntroController from "intro_controller"
 
 const application = Application.start()
 
 application.register("language-menu", LanguageMenuController)
 application.register("carousel", CarouselController)
+application.register("intro", IntroController)
 
 // Configure Stimulus development experience
 application.debug = false

app/javascript/intro_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["video", "link"]
+
+  connect() {
+    this.videoTarget.addEventListener("ended", this.followLink)
+  }
+
+  disconnect() {
+    this.videoTarget.removeEventListener("ended", this.followLink)
+  }
+
+  followLink = () => {
+    this.linkTarget.click()
+  }
+}

app/models/node.rb

@@ -27,7 +27,9 @@ class Node < ApplicationRecord
 
   enum :template, {
     start: 0,
-    facts: 1
+    facts: 1,
+    intro: 2,
+    stage: 3
   }
 
   def available_templates
@@ -35,7 +37,7 @@ class Node < ApplicationRecord
 
     case depth
     when 1
-      [ :facts ]
+      [ :facts, :intro, :stage ]
     when 2
       []
     else

app/views/layouts/application.html.erb

@@ -17,7 +17,7 @@
     <link rel="icon" sizes="192x192" href="/ikea-favicon-300x300.png">    
 
     <%= stylesheet_link_tag "reset", "application" %>  
-    <%= frontend_javascript_importmap_tags %w[application @hotwired/turbo-rails @hotwired/stimulus language_menu_controller carousel_controller] %>  
+    <%= frontend_javascript_importmap_tags %w[application @hotwired/turbo-rails @hotwired/stimulus language_menu_controller carousel_controller intro_controller] %>  
   </head>
   <body>
     <%= content_for :header %>

app/views/site/facts.html.erb

@@ -28,6 +28,6 @@
 </div>
 
 <article>
-  <%= link_to tag.span(t("game.got_it_lets_get_started")), {action: "facts"}, class: "cta" %>
+  <%= link_to tag.span(t("game.got_it_lets_get_started")), {action: "intro"}, class: "cta" %>
 </article>
   

app/views/site/intro.html.erb

@@ -0,0 +1,21 @@
+<%- content_for :title, node_title(@node) %>
+
+<% video_attachment = @node.attachments.select { |a| a.asset&.file&.video? }[0] %>
+
+<div class="hero-container" data-controller="intro">
+  <% if video_attachment %>
+    <%= video_tag rails_storage_proxy_path(video_attachment.asset.file),
+                  autoplay: true,
+                  muted: true,
+                  loop: false,
+                  playsinline: true,
+                  preload: "auto",
+                  data: { intro_target: "video" } %>
+
+    <article>
+      <%= video_attachment.body.html_safe %>
+    </article>
+  <% end %>
+
+  <%= link_to url_for(action: "stage", id: 1), class: "hero-link", "aria-label": t("game.got_it_lets_get_started"), data: { intro_target: "link" } do %><% end %>
+</div>

app/views/site/stage.html.erb

@@ -0,0 +1,21 @@
+<%- content_for :title, node_title(@node) %>
+
+<div class="stage-header">
+  <div class="stage-icon"> 
+    <%= svg "ico-soil" %>
+  </div>
+  <div>
+    <%= tag.div t("game.stage_i_of_n", i: 1, n: 5), class: "stage-progress" %>
+    <%= tag.h1 @node.title %>
+  </div>
+</div>
+
+<div class="hero-container">
+  <%= render_responsive_picture(@node.icon, alt: "Hero", fetchpriority: "high") %>
+  <%= svg "ico-wave" %>
+</div>
+
+<article>
+  <%= tag.h1 t("game.intro_title").html_safe %>
+ 
+</article>

config/importmap.rb

@@ -16,3 +16,4 @@ pin "tom-select", to: "tom-select--dist--js--tom-select.base.min.js.js" # @2.4.3
 pin "application", preload: false
 pin "language_menu_controller", preload: false
 pin "carousel_controller", preload: false
+pin "intro_controller", preload: false

config/locales/en.yml

@@ -15,7 +15,8 @@ en:
     play_time: Play time 2-5 minutes
     go_to_slide: Go to slide
 
-    got_it_lets_get_started: Got it, let’s get started
+    got_it_lets_get_started: Got it, let’s get started    
+    stage_i_of_n: Stage %{i} of %{n}
 
   countries:  
     au: Australia
@@ -273,6 +274,8 @@ en:
     templates:
       start: Start
       facts: Facts
+      intro: Intro
+      stage: Stage
       
 
     categories: 

config/routes.rb

@@ -59,7 +59,12 @@ Rails.application.routes.draw do
 
   scope ":locale", constraints: { locale: /en|zh|hr|cs|da|nl|fi|fr|fr-CA|de|hu|it|ja|ko|nb|pl|pt|ro|sr|sk|sl|es|sv|uk/ } do
     # get "*url", to: "site#page", constraints: lambda { |req| req.path.exclude?("storage") }
+
     get "facts", to: "site#facts"
+    get "intro", to: "site#intro"
+
+    get "stage/:id", to: "site#stage"
+
     get "", to: "site#index", as: :locale_root
   end