na

Gemfile.lock

@@ -152,7 +152,7 @@ GEM
       kaminari-core (= 1.2.2)
     kaminari-core (1.2.2)
     language_server-protocol (3.17.0.5)
-    lexxy (0.9.19)
+    lexxy (0.9.20)
       rails (>= 8.0.2)
     lint_roller (1.1.0)
     logger (1.7.0)
@@ -463,7 +463,7 @@ CHECKSUMS
   kaminari-activerecord (1.2.2) sha256=0dd3a67bab356a356f36b3b7236bcb81cef313095365befe8e98057dd2472430
   kaminari-core (1.2.2) sha256=3bd26fec7370645af40ca73b9426a448d09b8a8ba7afa9ba3c3e0d39cdbb83ff
   language_server-protocol (3.17.0.5) sha256=fd1e39a51a28bf3eec959379985a72e296e9f9acfce46f6a79d31ca8760803cc
-  lexxy (0.9.19) sha256=e143748704b90969148a9694d52084a99f1041edcfcf0b3e81a9692420223166
+  lexxy (0.9.20) sha256=31b4e50b68302e9a4d00b5a3e104f3b27a0682d43510a1e9e6673da695038e6e
   lint_roller (1.1.0) sha256=2c0c845b632a7d172cb849cc90c1bce937a28c5c8ccccb50dfd46a485003cc87
   logger (1.7.0) sha256=196edec7cc44b66cfb40f9755ce11b392f21f7967696af15d274dde7edff0203
   loofah (2.25.1) sha256=d436c73dbd0c1147b16c4a41db097942d217303e1f7728704b37e4df9f6d2e04

app/assets/images/ico-wave.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="190" height="95" viewBox="0 0 190 95"><path d="M0,96h190c-8.68,0-18.02-1.28-27.76-3.75-27.52-7.02-57.98-23.68-84.83-48.34C62.22,29.96,49.83,14.97,40.53,0c3.7,7.29,6.63,14.51,8.75,21.52,3.83,12.63,5.01,24.56,3.37,35.06-1.64,10.49-6.11,19.49-13.55,26.32-7.44,6.83-17.24,10.93-28.67,12.44-3.35.44-6.83.66-10.44.66Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="190" height="96" viewBox="0 0 190 96"><path d="M.01,96h189.99c-8.68,0-18.02-1.28-27.76-3.75-27.52-7.02-57.98-23.68-84.83-48.34C62.23,29.96,49.84,14.97,40.54,0c3.7,7.29,6.63,14.51,8.75,21.52,3.83,12.63,5.01,24.56,3.37,35.06-1.64,10.49-6.11,19.49-13.55,26.32-7.44,6.83-17.24,10.93-28.67,12.44-3.35.44-6.83.66-10.44.66h.01Z"/></svg>

app/assets/stylesheets/application.css

@@ -131,6 +131,7 @@ body {
 
 .debug-score {
   position: fixed;
+  display: none;
   font-size: var(--fs-s);
   right: 0;
   top: 0;
@@ -401,6 +402,7 @@ main {
 .hero-container {
   display: grid;
   grid-template: 1fr / 1fr;
+  position: relative;
     
   & img, video {
     grid-area: 1 / 1;
@@ -434,12 +436,33 @@ main {
     fill: var(--clr-bg, var(--clr-green));
   }
 
+  #inter-ikea-systems {
+    position: absolute;
+    right: 0.5rem;
+    top: 1rem;    
+    fill: var(--clr-black);
+  }
+
+  &:has(img, video) {
+    #inter-ikea-systems {
+      fill: var(--clr-white);
+    }
+  }
+
+  
+
   & .hero-link {
     grid-area: 1 / 1;
     z-index: 2;
   }
 }
 
+body:has(header) {
+  .hero-container #inter-ikea-systems {
+    top: 25%;
+  }
+}
+
 form:has(.cta) {
   display: flex;
 
@@ -466,13 +489,51 @@ form:has(.cta) {
 }
 
 .share-container {
-  display: flex;
-  margin-block-end: 0.5rem;
-
-  & .cta {
+  display: flex;  
+  margin-block-start: 1rem;
+  & button {
+    font-size: var(--fs-base);
+    font-weight: 700;
+    color: var(--clr-black);
+    border: none;
     background-color: transparent;
-    border: 1px solid var(--clr-black);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
   }
+
+
+
+}
+
+.arrow {
+  display: block;
+  background-image: url("ico-arrow-right.svg");
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  width: 2rem;  
+  aspect-ratio: 1;
+  background-color: var(--clr-white);
+  border-radius: 50%;
+}
+
+.cta-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.5rem;
+  justify-content: stretch;
+  align-items: stretch;
+  margin: 0 1rem;
+  
+}
+
+.cta-link {
+  display: flex;
+  --clr-action: transparent;
+  border-radius: 100vw;
+  border: 1px solid var(--clr-black);
+  flex-grow: 1;
+  width: 100%;
 }
 
 .play-time {  
@@ -684,13 +745,21 @@ dialog::backdrop {
 
 .results-header {
   background-color: var(--clr-green);
-  padding: 2rem 1rem 3rem 1rem;
+  padding: 2rem 1rem 2rem 1rem;
 
   strong {
     display: block;
   }
 }
 
+.results-header {
+  background-image: url("inter-ikea-systems.svg");
+  background-repeat: no-repeat;
+  background-position: calc(100% - 0.5rem) 0.5rem;  
+}
+
+
+
 .results-tagline {
   display: grid;
   grid-template-columns: 1fr max-content;

app/views/game/done.html.erb

@@ -4,10 +4,10 @@
 <%= render partial: "stage_header" %>
 
 <div class="hero-container">
-  <%# render_responsive_picture(image_attachment.asset, alt: "Hero", fetchpriority: "high") %>
   <article>
     <%= @result_node.attachments[0]&.body&.html_safe %>
   </article>
+  <%= svg "inter-ikea-systems" %>
   <%= svg "ico-wave" %>
 </div>
 

app/views/game/facts.html.erb

@@ -6,6 +6,7 @@
     <li>
       <div class="hero-container">
         <%= render_responsive_picture(attachment.asset, alt: "Hero", fetchpriority: "high") %>
+        <%= svg "inter-ikea-systems" %>
         <%= svg "ico-wave" %>
       </div>
       <article>

app/views/game/intro.html.erb

@@ -15,6 +15,7 @@
     <article>
       <%= video_attachment.body.html_safe %>
     </article>
+    <%= svg "inter-ikea-systems" %>
   <% 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 %>

app/views/game/last_save.html.erb

@@ -9,6 +9,7 @@
   <article>
     <%= image_attachment.body.html_safe %>
   </article>
+  <%= svg "inter-ikea-systems" %>
   <%= svg "ico-wave" %>
 </div>
 

app/views/game/results.html.erb

@@ -2,11 +2,21 @@
 
 <div class="results-header">
   <h1><%= result_headline(current_player) %></h1>
+
+  <div class="share-container" data-controller="share" data-share-url-value="<%= root_url %>">
+    <button type="button" data-action="share#share">
+      <span class="arrow"></span>
+      <%= tag.span t("game.share") %>
+    </button>
+  </div>
+
 </div>
 <div class="results-tagline">
   <div>
     <div><%= result_description(current_player) %></div>
   </div>
+
+  
   <%= svg "ico-wave" %>
 </div>
 
@@ -72,17 +82,10 @@
 
 <div class="newsletter-container">
   <%= tag.h3 t("game.join_our_newsletter") %>
-  <%= tag.p t("game.join_our_newsletter_desc") %>
-
-  <%= link_to "#" do %>
-    <%= tag.span svg("ico-arrow-right") %>
-    <%= tag.span t("game.sounds_good") %>
-  <% end %>
-</div>
-
-<div class="share-container" data-controller="share" data-share-url-value="<%= root_url %>">
-  <button type="button" class="cta" data-action="share#share"><%= tag.span t("game.share") %></button>
+  <%= tag.p t("game.join_our_newsletter_desc") %>  
 </div>
 
-<%= button_to tag.span(t("game.save_another_tomato")), start_path, class: "cta" %>
-
+<div class="cta-container">
+  <%= link_to tag.span(t("game.subscribe_to_newsletter")), "#", class: "cta cta-link" %>
+  <%= button_to tag.span(t("game.save_another_tomato")), start_path, class: "cta" %>
+</div>

app/views/game/stage.html.erb

@@ -8,6 +8,7 @@
   <article>
     <%= image_attachment.body.html_safe %>
   </article>
+  <%= svg "inter-ikea-systems" %>
   <%= svg "ico-wave" %>
 </div>
 

app/views/game/stage_result.html.erb

@@ -4,10 +4,10 @@
 <%= render partial: "stage_header" %>
 
 <div class="hero-container">
-  <%# render_responsive_picture(image_attachment.asset, alt: "Hero", fetchpriority: "high") %>
   <article>
     <%= @result_node.attachments[0]&.body&.html_safe %>
   </article>
+  <%= svg "inter-ikea-systems" %>
   <%= svg "ico-wave" %>
 </div>
 

app/views/game/start.html.erb

@@ -6,6 +6,7 @@
 
 <div class="hero-container">
   <%= render_responsive_picture(@node.icon, alt: "Hero", fetchpriority: "high") %>
+  <%= svg "inter-ikea-systems" %>
   <%= svg "ico-wave" %>
 </div>
 

config/locales/en.yml

@@ -34,6 +34,7 @@ en:
     sounds_good: Sounds good!
     save_another_tomato: Save another tomato
     share: Share game
+    subscribe_to_newsletter: Subscribe to newsletter
 
     results:
       best: