@ably/ui 8.1.2 → 8.2.1-dev.f35b482

package/src/core/MeganavContentUseCases/component.html.erb

@@ -1,84 +1,113 @@
-<section class="ui-meganav-content ui-grid-gap md:grid-cols-2 gap-y-0 md:gap-y-32">
-  <div>
-    <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry-use-cases">By use case</h3>
-    <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
-      <li>
-        <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">EdTech</p>
-          <p class="ui-meganav-media-copy">Deliver interactive learning experiences like multi-user classrooms with chat.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Virtual Events</p>
-          <p class="ui-meganav-media-copy">Power engaging virtual events with interactive realtime features.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Sports & Media</p>
-          <p class="ui-meganav-media-copy">Deliver global realtime experiences to keep fans informed, engaged, entertained.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Fintech</p>
-          <p class="ui-meganav-media-copy">Deliver fast, personalised fintech data in realtime to mobile & web customers.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Gaming</p>
-          <p class="ui-meganav-media-copy">Power interactive gaming experiences that are wicked fast and utterly reliable.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
-          <p class="ui-meganav-media-copy">Power asset tracking, live transit updates, race-critical diagnostics, and more.</p>
-        <% end %>
-      </li>
-    </ul>
-  </div>
+<div class="flex">
+  <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
+  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
+    <div class="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
+          Use cases
+        </h3>
+      <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
+        <li>
+          <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Chat</p>
+              <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Virtual Events</p>
+              <p class="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
+            </div>
+          <% end %>
+        </li>
+      </ul>
+    </div>
 
-  <div>
-    <ul class="md:mt-40" aria-labelledby="meganav-use-cases-panel-industry-use-cases">
-      <li>
-        <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">B2B Platforms</p>
-          <p class="ui-meganav-media-copy">Empower customers with realtime technology that gives them a competitive edge.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Healthcare</p>
-          <p class="ui-meganav-media-copy">Provide HIPAA-compliant realtime apps healthcare professionals can depend on.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">eCommerce & Retail</p>
-          <p class="ui-meganav-media-copy">Enable realtime pricing, inventory, and transactions to enrich user experiences.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">IoT & Connected Devices</p>
-          <p class="ui-meganav-media-copy">Monitor and control global IoT deployments of any kind in realtime.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Asset Tracking</p>
-          <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimized for last mile logistics, food delivery applications, and urban mobility services.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
-          <p class="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
-        <% end %>
-      </li>
-    </ul>
-  </div>
-</section>
+    <div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
+        Industry
+      </h3>
+      <ul aria-labelledby="meganav-use-cases-panel-industry">
+        <li>
+          <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">EdTech</p>
+            <p class="ui-meganav-media-copy">Deliver interactive learning experiences.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Fintech</p>
+            <p class="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
+            <p class="ui-meganav-media-copy">Power diagnostics, order tracking and more.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">B2B Platforms</p>
+            <p class="ui-meganav-media-copy">Empower your customers with realtime solutions.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Healthcare (HIPAA)</p>
+            <p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">eCommerce & Retail</p>
+            <p class="ui-meganav-media-copy">Enrich customer experiences with realtime updates.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Sports, Media & Audience Engagement</p>
+            <p class="ui-meganav-media-copy">Deliver engaging global realtime experiences.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Gaming</p>
+            <p class="ui-meganav-media-copy">Power ultra fast and reliable gaming experiences.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">IoT & Connected Devices</p>
+            <p class="ui-meganav-media-copy">Monitor and control global IoT deployments in realtime.</p>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
+        Solutions
+      </h3>
+      <ul aria-labelledby="meganav-use-cases-panel-solutions">
+        <li>
+          <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
+            <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Asset Tracking</p>
+            <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+  </section>
+  <div class="ui-meganav-content-spacer"></div>
+</div>

package/src/core/MeganavContentUseCases/component.jsx

@@ -1,95 +1,122 @@
 import React from "react";
 import T from "prop-types";
 
+import Icon from "../Icon/component.jsx";
+
 const MeganavContentUseCases = ({ absUrl }) => (
-  <section className="ui-meganav-content ui-grid-gap md:grid-cols-2 gap-y-0 md:gap-y-32">
-    <div>
-      <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-industry-use-cases">
-        By use case
-      </h3>
-      <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
-        <li>
-          <a href={absUrl("/solutions/edtech")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">EdTech</p>
-            <p className="ui-meganav-media-copy">Deliver interactive learning experiences like multi-user classrooms with chat.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/virtual-events")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Virtual Events</p>
-            <p className="ui-meganav-media-copy">Power engaging virtual events with interactive realtime features.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/sports-and-media")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Sports & Media</p>
-            <p className="ui-meganav-media-copy">Deliver global realtime experiences to keep fans informed, engaged, entertained.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/fintech")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Fintech</p>
-            <p className="ui-meganav-media-copy">Deliver fast, personalised fintech data in realtime to mobile & web customers.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/gaming")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Gaming</p>
-            <p className="ui-meganav-media-copy">Power interactive gaming experiences that are wicked fast and utterly reliable.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/automotive-logistics-and-mobility")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
-            <p className="ui-meganav-media-copy">Power asset tracking, live transit updates, race-critical diagnostics, and more.</p>
-          </a>
-        </li>
-      </ul>
-    </div>
+  <div className="flex">
+    <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
+    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
+      <div className="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+        <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
+          Use cases
+        </h3>
+        <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
+          <li>
+            <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-chat-stack-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Chat</p>
+                <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/virtual-events")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-virtual-events-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Virtual Events</p>
+                <p className="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+        <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-industry">
+          Industry
+        </h3>
+        <ul aria-labelledby="meganav-use-cases-panel-industry">
+          <li>
+            <a href={absUrl("/solutions/edtech")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">EdTech</p>
+              <p className="ui-meganav-media-copy">Deliver interactive learning experiences.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/fintech")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Fintech</p>
+              <p className="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/automotive-logistics-and-mobility")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
+              <p className="ui-meganav-media-copy">Power diagnostics, order tracking and more.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/b2b-platforms")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">B2B Platforms</p>
+              <p className="ui-meganav-media-copy">Empower your customers with realtime solutions.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/healthcare")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Healthcare (HIPAA)</p>
+              <p className="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">eCommerce & Retail</p>
+              <p className="ui-meganav-media-copy">Enrich customer experiences with realtime updates.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/sports-and-media")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Sports, Media & Audience Engagement</p>
+              <p className="ui-meganav-media-copy">Deliver engaging global realtime experiences.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/gaming")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Gaming</p>
+              <p className="ui-meganav-media-copy">Power ultra fast and reliable gaming experiences.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/iot-and-connected-devices")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">IoT & Connected Devices</p>
+              <p className="ui-meganav-media-copy">Monitor and control global IoT deployments in realtime.</p>
+            </a>
+          </li>
+        </ul>
+      </div>
 
-    <div>
-      <ul className="md:mt-40">
-        <li>
-          <a href={absUrl("/solutions/b2b-platforms")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">B2B Platforms</p>
-            <p className="ui-meganav-media-copy">Empower customers with realtime technology that gives them a competitive edge.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/healthcare")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Healthcare</p>
-            <p className="ui-meganav-media-copy">Provide HIPAA-compliant realtime apps healthcare professionals can depend on.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">eCommerce & Retail</p>
-            <p className="ui-meganav-media-copy">Enable realtime pricing, inventory, and transactions to enrich user experiences.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/iot-and-connected-devices")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">IoT & Connected Devices</p>
-            <p className="ui-meganav-media-copy">Monitor and control global IoT deployments of any kind in realtime.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Asset Tracking</p>
-            <p className="ui-meganav-media-copy">
-              Track assets in realtime with a solution optimized for last mile logistics, food delivery applications, and urban mobility services.
-            </p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
-            <p className="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </section>
+      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+        <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
+          Solutions
+        </h3>
+        <ul aria-labelledby="meganav-use-cases-panel-solutions">
+          <li>
+            <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
+              <p className="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Asset Tracking</p>
+              <p className="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
+    <div className="ui-meganav-content-spacer"></div>
+  </div>
 );
 
 MeganavContentUseCases.propTypes = {

package/src/core/MeganavControlMobilePanelClose/component.html.erb

@@ -2,9 +2,11 @@
   <%= button_tag(type: "button",
                  class: "ui-meganav-mobile-link text-gui-default mb-16",
                  data: { id: "meganav-control-mobile-panel-close" },
-                 aria: { expanded: false, controls: @aria_controls, label: "Hide panel" }) do -%>
+                 aria: { expanded: false, controls: aria_controls, label: "Hide panel" }) do -%>
     <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "relative -top-1 transform rotate-180")) %>
     Back
   <% end %>
-  <hr class="ui-meganav-hr" />
+  <% if display_hr %>
+    <hr class="ui-meganav-hr" />
+  <% end %>
 </div>

package/src/core/MeganavControlMobilePanelClose/component.jsx

@@ -3,7 +3,7 @@ import T from "prop-types";
 
 import Icon from "../Icon/component.jsx";
 
-const MeganavControlMobilePanelClose = ({ ariaControls }) => (
+const MeganavControlMobilePanelClose = ({ ariaControls, displayHr = true }) => (
   <div className="mx-24 md:mx-32">
     <button
       type="button"
@@ -16,12 +16,13 @@ const MeganavControlMobilePanelClose = ({ ariaControls }) => (
       <Icon name="icon-gui-disclosure-arrow" color="text-cool-black" size="1.5rem" additionalCSS="relative -top-1 transform rotate-180" />
       Back
     </button>
-    <hr className="ui-meganav-hr" />
+    {displayHr ? <hr className="ui-meganav-hr" /> : null}
   </div>
 );
 
 MeganavControlMobilePanelClose.propTypes = {
   ariaControls: T.string,
+  displayHr: T.bool,
 };
 
 export default MeganavControlMobilePanelClose;

package/src/core/MeganavControlMobilePanelClose/component.rb

@@ -1,8 +1,11 @@
 module AblyUi
   module Core
     class MeganavControlMobilePanelClose < ViewComponent::Base
-      def initialize(aria_controls:)
+      attr_reader :aria_controls, :display_hr
+
+      def initialize(aria_controls:, display_hr: true)
         @aria_controls = aria_controls
+        @display_hr = display_hr
       end
     end
   end

package/src/core/MeganavItemsDesktop/component.html.erb

@@ -2,7 +2,8 @@
   <% panels.each do |panel| %>
     <li class="ui-meganav-item">
       <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], theme_name: @theme_name)) do %>
-        <%= panel[:label] %>
+        <span class="hidden lg:inline"><%= panel[:label] %></span>
+        <span class="lg:hidden"><%= panel[:short_label] %></span>
       <% end %>
 
       <%= content_tag :div, class: 'ui-meganav-panel invisible', data: { id: "meganav-panel" }, id: panel[:id] do %>

package/src/core/MeganavItemsDesktop/component.jsx

@@ -12,7 +12,8 @@ const MeganavDesktopItems = ({ panels, paths, theme, absUrl }) => (
       return (
         <li className="ui-meganav-item" key={panel.id}>
           <MeganavControl theme={theme} ariaControls={panel.id}>
-            {panel.label}
+            <span className="hidden lg:inline">{panel.label}</span>
+            <span className="lg:hidden">{panel.shortLabel}</span>
           </MeganavControl>
 
           <div className="ui-meganav-panel invisible" id={panel.id} data-id="meganav-panel">

package/src/core/MeganavItemsMobile/component.html.erb

@@ -48,7 +48,7 @@
               <% end %>
 
               <%= content_tag(:div, class: "ui-meganav-panel-mobile hidden", id: "#{panel[:id]}-mobile", data: { scroll_lock_scrollable: true }) do %>
-                <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile")) %>
+                <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile", display_hr: display_hr(panel[:id]))) %>
                 <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
               <% end %>
             </li>

package/src/core/MeganavItemsMobile/component.jsx

@@ -68,13 +68,14 @@ const MeganavItemsMobile = ({ panels, paths, sessionState, theme, loginLink, abs
             <ul className="mb-16" data-id="meganav-mobile-panel-controls">
               {MeganavData.panels.map((panel) => {
                 const PanelComponent = panels[panel.component];
+                const displayHr = ["company-panel", "developers-panel"].includes(panel.id);
 
                 return (
                   <li className="ui-meganav-mobile-item" key={`${panel.id}-mobile`}>
                     <MeganavControlMobilePanelOpen ariaControls={`${panel.id}-mobile`}>{panel.label}</MeganavControlMobilePanelOpen>
 
                     <div className="ui-meganav-panel-mobile hidden" id={`${panel.id}-mobile`} data-scroll-lock-scrollable>
-                      <MeganavControlMobilePanelClose ariaControls={`${panel.id}-mobile`} />
+                      <MeganavControlMobilePanelClose ariaControls={`${panel.id}-mobile`} displayHr={displayHr} />
                       <PanelComponent paths={paths} absUrl={absUrl} />
                     </div>
                   </li>

package/src/core/MeganavItemsMobile/component.rb

@@ -12,6 +12,10 @@ module AblyUi
         @login_link = login_link
         @url_base = url_base
       end
+
+      def display_hr(panel_id)
+        %w[company-panel developers-panel].include?(panel_id)
+      end
     end
   end
 end

package/src/core/MeganavSearchSuggestions/component.js

@@ -18,15 +18,16 @@ const getDistance = (e, touchStartX) =>
 
 const withinBuffer = (distance) => Math.abs(distance) < DRAG_BUFFER;
 
+const getItemsTotalWidth = (nodes) =>
+  nodes
+    .map((item) => item.getBoundingClientRect().width)
+    .reduce((acc, val) => acc + val, 0);
+
 const MeganavSearchSuggestions = () => {
   const suggestionsToggle = queryId("meganav-mobile-search-input");
   const suggestions = queryId("meganav-mobile-search-suggestions");
   const list = suggestions.querySelector("ul");
-  const listItems = list.querySelectorAll("li");
-
-  const itemsTotalWidth = Array.from(listItems)
-    .map((item) => item.getBoundingClientRect().width)
-    .reduce((acc, val) => acc + val, 0);
+  const listItems = Array.from(list.querySelectorAll("li"));
 
   const dragLeft = (distance, threshold) => {
     const currentTranslateX = getTranslateX(list);
@@ -50,6 +51,7 @@ const MeganavSearchSuggestions = () => {
     const listWidth = list.getBoundingClientRect().width;
     const currentTranslateX = getTranslateX(list);
     const translateX = Math.round(currentTranslateX + distance);
+    const itemsTotalWidth = getItemsTotalWidth(listItems);
 
     if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
       return;
@@ -61,6 +63,7 @@ const MeganavSearchSuggestions = () => {
   const dragRightEnd = (distance, threshold) => {
     const listWidth = list.getBoundingClientRect().width;
     const currentTranslateX = getTranslateX(list);
+    const itemsTotalWidth = getItemsTotalWidth(listItems);
     let translateX = Math.round(currentTranslateX + distance);
 
     if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
@@ -99,11 +102,18 @@ const MeganavSearchSuggestions = () => {
     suggestions.classList.remove("max-h-96");
   };
 
+  const wheelHandler = (e) => {
+    const distance = e.deltaY * 4;
+    if (withinBuffer(distance)) return;
+    distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);
+  };
+
   suggestionsToggle.addEventListener("focus", focusSuggestionsHandler);
   suggestionsToggle.addEventListener("blur", blurSuggestionsHandler);
   suggestions.addEventListener("touchstart", touchstartHandler);
   suggestions.addEventListener("touchmove", touchmoveHandler);
   suggestions.addEventListener("touchend", touchendHandler);
+  suggestions.addEventListener("wheel", wheelHandler);
 
   return {
     teardown: () => {

package/src/core/core.rb

@@ -34,6 +34,10 @@ module AblyUi
         asset_path 'ably_ui/core/images/ably-stack.svg'
       end
 
+      def aws_logo_path
+        asset_path 'ably_ui/core/images/icon-tech-aws.svg'
+      end
+
       def rocket_list
         asset_path 'ably_ui/core/images/rocket-list-2021.png'
       end

package/src/core/icons/icon-display-about-ably-col.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20.0002" cy="20.5" r="16.6667" fill="white" stroke="#03020D" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0272 27.0696L19.8526 10.9167H17.4716L9.30566 25.8623L11.0272 27.0696ZM28.801 27.0696L19.9756 10.9167H22.3566L26.4396 18.3895L30.5225 25.8623L28.801 27.0696ZM19.9141 20.3011L28.678 27.1647L26.8895 28.4167L19.9141 22.956L12.9387 28.4167L11.1501 27.1647L19.9141 20.3011Z" fill="#FF5416"/>
+</svg>

package/src/core/icons/icon-display-careers-col.svg

@@ -0,0 +1,9 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.33317 20.1358C7.59669 22.2892 7.16766 25.4578 9.58324 24.25C13.5972 22.243 17.4999 21.75 19.9999 21.75C22.4999 21.75 26.2499 22.5833 29.9999 24.25C32.7175 25.4578 32.3716 22.2892 31.658 20.1358" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M30.8332 24.25C30.8332 30.9234 25.9829 36.3333 19.9998 36.3333C14.0168 36.3333 9.1665 30.9234 9.1665 24.25" stroke="#03020D" stroke-width="1.5"/>
+<path d="M25.8332 28.8333H14.1665C14.7221 30.2222 16.6665 33 19.9998 33C23.3332 33 25.2776 30.2222 25.8332 28.8333Z" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<circle cx="23.75" cy="23.4167" r="1.25" fill="#03020D"/>
+<circle cx="16.25" cy="23.4167" r="1.25" fill="#03020D"/>
+<path d="M12.3922 5.81177C14.1833 4.70886 16.6689 4.04167 20.072 4.04167C22.8214 4.04167 24.9898 4.61745 26.675 5.58708C28.3615 6.55753 29.528 7.90188 30.3044 9.38272C31.647 11.9432 31.8294 14.9172 31.5602 17.1667C31.291 19.4161 30.0919 18.3888 29.583 18.2551C29.0741 18.1214 28.3702 17.973 27.4504 17.8366C25.7308 17.5816 23.3003 17.375 20.072 17.375C16.8436 17.375 14.4132 17.5816 12.6935 17.8366C11.6833 17.9864 10.9334 18.1507 10.4163 18.2941C9.89931 18.4375 8.83602 18.873 8.58578 17.1667C8.33554 15.4603 8.03534 12.6242 8.97021 10.0327C9.54628 8.43579 10.5926 6.91989 12.3922 5.81177Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5734 14.04L20.3288 7.16667H19.3138L15.833 13.5374L16.5622 14.0488L16.4547 14.133L17.2171 14.6667L20.1904 12.339L23.1638 14.6667L23.9262 14.133L20.1904 11.2073L16.5734 14.04ZM24.1431 14.0521L20.3812 7.16667H21.3961L24.8769 13.5374L24.1431 14.0521Z" fill="white"/>
+</svg>