@ably/ui 8.7.0-dev.3fee7c0 → 8.7.0-dev.40be3cd

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

@@ -1,4 +1,4 @@
-<footer class="bg-light-grey font-sans antialiased" data-id="footer">
+<footer class="bg-light-grey font-manrope antialiased" data-id="footer">
   <div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
     <div class="col-span-full md:col-span-2">
       <div class="flex flex-row p-menu-row-snug">
@@ -180,7 +180,7 @@
                 >
               <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
             </a>
-            <div class="pl-16 text-menu3 font-light">
+            <div class="pl-16 text-menu3 font-manrope font-medium">
               <strong class="block font-medium">We&apos;re hiring!</strong>
               <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
                 Learn more at Glassdoor
@@ -200,7 +200,7 @@
               >
             <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
           </a>
-          <div class="text-menu3 font-light">
+          <div class="text-menu3 font-manrope font-medium">
             <strong class="block font-medium">We&apos;re hiring!</strong>
             <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
               Learn more at Glassdoor
@@ -231,29 +231,29 @@
       <div class="flex mr-24">
         <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
-          <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
+          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
         </div>
       </div>
       <div class="flex mr-24 md:col-start-2">
         <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
-          <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
+          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
         </div>
       </div>
       <div class="flex mr-24 md:col-start-3">
         <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
-          <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
+          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
         </div>
       </div>
       <div class="flex mr-24 md:col-start-4">
         <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
-          <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
+          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
         </div>
       </div>
     </div>

package/src/core/Footer/component.jsx

@@ -8,15 +8,15 @@ export default function Footer({ paths, urlBase }) {
   const absUrl = (path) => _absUrl(path, urlBase);
 
   return (
-    <footer className="bg-light-grey font-sans antialiased" data-id="footer">
+    <footer className="bg-light-grey font-manrope antialiased" data-id="footer">
       <div className="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
         <div className="col-span-full md:col-span-2">
           <div className="flex flex-row p-menu-row-snug">
             <img className="mr-24 -mt-16" src={paths.ablyStack} alt="Ably homepage" />
-            <h2 className="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
+            <h2 className="text-overline2 font-jetbrains_mono font-bold col-span-full uppercase tracking-widen-0.16">The Ably Platform</h2>
           </div>
           <div className="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
-            <p className="text-p3 py-16 font-medium p-menu-row-snug">
+            <p className="font-manrope text-p3 py-16 font-bold p-menu-row-snug">
               Easily power any realtime experience in your application via a simple API that handles everything realtime.
             </p>
           </div>
@@ -274,7 +274,7 @@ export default function Footer({ paths, urlBase }) {
                 >
                   <Icon name="glassdoor" size="1.5rem" />
                 </a>
-                <div className="pl-16 text-menu3 font-light">
+                <div className="pl-16 text-menu3 font-manrope font-medium">
                   <strong className="block font-medium">We&apos;re hiring!</strong>
                   <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
                     Learn more at Glassdoor
@@ -294,7 +294,7 @@ export default function Footer({ paths, urlBase }) {
               >
                 <Icon name="glassdoor" size="1.5rem" />
               </a>
-              <div className="text-menu3 font-light">
+              <div className="text-menu3 font-manrope font-medium">
                 <strong className="block font-medium">We&apos;re hiring!</strong>
                 <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
                   Learn more at Glassdoor
@@ -335,29 +335,29 @@ export default function Footer({ paths, urlBase }) {
           <div className="flex mr-24">
             <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
-              <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
+              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
+              <p className="ui-footer-compliance-text font-medium mb-24">Certified</p>
             </div>
           </div>
           <div className="flex mr-24 md:col-start-2">
             <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
-              <p className="ui-footer-compliance-text font-light mb-24">Compliant</p>
+              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
+              <p className="ui-footer-compliance-text font-medium mb-24">Compliant</p>
             </div>
           </div>
           <div className="flex mr-24 md:col-start-3">
             <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12  ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
-              <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
+              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
+              <p className="ui-footer-compliance-text font-medium mb-24">Certified</p>
             </div>
           </div>
           <div className="flex mr-24 md:col-start-4">
             <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12  ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
-              <p className="ui-footer-compliance-text font-light mb-24">Encryption</p>
+              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
+              <p className="ui-footer-compliance-text font-medium mb-24">Encryption</p>
             </div>
           </div>
         </div>

package/src/core/Meganav/component.css

@@ -7,7 +7,7 @@
     z-index: var(--stacking-context-page-meganav);
 
     @apply fixed top-0 w-full;
-    @apply antialiased font-sans transition-colors;
+    @apply antialiased font-manrope transition-colors;
   }
 
   .ui-meganav {
@@ -51,7 +51,7 @@
   }
 
   .ui-meganav-link {
-    @apply text-menu2 font-medium block;
+    @apply text-menu2 font-bold block font-manrope;
     @apply mr-12 lg:mr-24 px-0 py-20;
     @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
     @apply transition-colors;
@@ -63,13 +63,13 @@
 
   .ui-meganav-mobile-link {
     @apply p-menu-row relative -left-8 w-extend-8;
-    @apply text-menu2 font-medium block text-cool-black text-left;
+    @apply text-menu2  font-bold font-jetbrains_mono font-medium block text-cool-black text-left;
     @apply flex items-center;
     @apply focus:text-gui-focus focus:outline-none;
   }
 
   .ui-meganav-account-link {
-    @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-light;
+    @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-jetbrains_mono;
   }
 
   .ui-meganav-content {
@@ -93,19 +93,19 @@
     grid-template-rows: min-content 1fr;
 
     @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
-    @apply grid gap-x-8;
+    @apply grid gap-x-16;
   }
 
   .ui-meganav-media-heading {
-    @apply text-menu3 text-cool-black font-medium group-hover:text-gui-hover group-focus:text-gui-focus;
+    @apply text-menu3 text-cool-black font-bold font-manrope group-hover:text-gui-hover group-focus:text-gui-focus;
   }
 
   .ui-meganav-media-copy {
-    @apply text-p3 text-dark-grey font-light;
+    @apply text-p3 font-manrope font-medium text-dark-grey;
   }
 
   .ui-meganav-overline {
-    @apply text-overline2 text-cool-black uppercase font-medium tracking-widen-0.15 p-overline;
+    @apply text-overline2 text-cool-black uppercase font-bold font-jetbrains_mono tracking-widen-0.16 p-overline;
   }
 
   .ui-meganav-hr {

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

@@ -72,6 +72,15 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/events"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-events-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Events</p>
+              <p class="ui-meganav-media-copy">Join Ably at upcoming events.</p>
+            </div>
+          <% end %>
+        </li>
       </ul>
     </div>
 

package/src/core/MeganavContentCompany/component.jsx

@@ -88,6 +88,15 @@ const MeganavContentCompany = ({ paths, absUrl }) => {
                 </div>
               </a>
             </li>
+            <li>
+              <a href={absUrl("/events")} className="ui-meganav-media-with-image group">
+                <Icon name="icon-display-events-col" size="2.5rem" />
+                <div className="flex flex-col justify-center">
+                  <p className="ui-meganav-media-heading">Events</p>
+                  <p className="ui-meganav-media-copy">Join Ably at upcoming events.</p>
+                </div>
+              </a>
+            </li>
           </ul>
         </div>
 

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

@@ -35,7 +35,6 @@
         </li>
       </ul>
     </div>
-
     <div class="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
       <ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
         <li>
@@ -65,11 +64,19 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/reference-guide-multiplayer"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Multiplayer reference guide</p>
+              <p class="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
+            </div>
+          <% 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 uppercase" id="meganav-developers-panel-quick-links">
+      <h3 class="ui-meganav-overline uppercase" id=meganav-developers-panel-quick-links">
         Quick links
       </h3>
       <ul aria-labelledby="meganav-developers-panel-quick-links">

package/src/core/MeganavContentDevelopers/component.jsx

@@ -58,7 +58,7 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               <Icon name="icon-display-tutorials-demos-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">Tutorials & Demos</p>
-                <p className="ui-meganav-media-copy">Get stuck in with our hands-on resources. </p>
+                <p className="ui-meganav-media-copy">Get stuck in with our hands-on resources.</p>
               </div>
             </a>
           </li>
@@ -71,6 +71,15 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               </div>
             </a>
           </li>
+          <li>
+            <a href={absUrl("/reference-guide-multiplayer")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Multiplayer reference guide</p>
+                <p className="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
+              </div>
+            </a>
+          </li>
         </ul>
       </div>
 
@@ -99,6 +108,7 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               <p className="ui-meganav-media-heading">
                 Status
                 <iframe
+                  title="Ably status"
                   src="https://status.ably.com/embed/icon"
                   allowtransparency="true"
                   frameBorder="0"

package/src/core/MeganavContentPlatform/component.jsx

@@ -12,7 +12,7 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
           <img src={paths.ablyStack} alt="Ably homepage" />
           <h3 className="ui-meganav-overline ml-24">The Ably Platform</h3>
         </div>
-        <p className="text-p2 font-medium text-cool-black mb-24" style={{ maxWidth: "330px" }}>
+        <p className="text-p2 font-bold text-cool-black mb-24" style={{ maxWidth: "330px" }}>
           Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
           realtime, and lets you focus on your code.
         </p>

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

@@ -3,15 +3,16 @@
   <section class="grid grid-cols-12 ui-grid-gap-x w-full">
     <div class="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
       <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
-          Use cases
+          Solutions
         </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>
+              <p class="ui-meganav-media-heading">Live Chat</p>
+              <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale.</p>
             </div>
           <% end %>
         </li>
@@ -26,7 +27,7 @@
         </li>
         <li>
           <%= link_to abs_url("/solutions/data-broadcast"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-data-broadcast-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
               <p class="ui-meganav-media-heading">Data Broadcast</p>
               <p class="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
@@ -35,17 +36,35 @@
         </li>
         <li>
           <%= link_to abs_url("/solutions/data-synchronization"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events", size: "2.5rem")) %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-data-synchronization-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
               <p class="ui-meganav-media-heading">Data Synchronization</p>
               <p class="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
             </div>
           <% end %>
         </li>
+         <li>
+          <%= link_to abs_url("/push-notifications"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-push-notifications-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Notifications</p>
+              <p class="ui-meganav-media-copy">Deliver cross-platform push notifications with a simple unified API.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-kafka-at-the-edge-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <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>
+            </div>
+          <% end %>
+        </li>
       </ul>
     </div>
 
-    <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 bg-white">
+    <div class="col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
       <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
         Industry
       </h3>
@@ -80,6 +99,11 @@
             <p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
           <% end %>
         </li>
+      </ul>
+    </div>
+
+    <div class="col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
+      <ul aria-labelledby="meganav-use-cases-panel-solutions" class="mt-0 md:mt-40">
         <li>
           <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
             <p class="ui-meganav-media-heading">eCommerce & Retail</p>
@@ -106,26 +130,6 @@
         </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 bg-white">
-      <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

@@ -9,15 +9,15 @@ const MeganavContentUseCases = ({ absUrl }) => (
     <section className="grid grid-cols-12 ui-grid-gap-x w-full">
       <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
         <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
-          Use cases
+          Solutions
         </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>
+                <p className="ui-meganav-media-heading">Live Chat</p>
+                <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale.</p>
               </div>
             </a>
           </li>
@@ -32,7 +32,7 @@ const MeganavContentUseCases = ({ absUrl }) => (
           </li>
           <li>
             <a href={absUrl("/solutions/data-broadcast")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-live-updates-results-metrics-col" size="2.5rem" />
+              <Icon name="icon-display-data-broadcast-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">Data Broadcast</p>
                 <p className="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
@@ -41,17 +41,35 @@ const MeganavContentUseCases = ({ absUrl }) => (
           </li>
           <li>
             <a href={absUrl("/solutions/data-synchronization")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-virtual-events" size="2.5rem" />
+              <Icon name="icon-display-data-synchronization-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">Data Synchronization</p>
                 <p className="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
               </div>
             </a>
           </li>
+          <li>
+            <a href={absUrl("/push-notifications")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-push-notifications-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Notifications</p>
+                <p className="ui-meganav-media-copy">Deliver cross-platform push notifications with a simple unified API.</p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-kafka-at-the-edge-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <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>
+              </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 bg-white">
+      <div className="col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
         <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-industry">
           Industry
         </h3>
@@ -86,6 +104,11 @@ const MeganavContentUseCases = ({ absUrl }) => (
               <p className="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
             </a>
           </li>
+        </ul>
+      </div>
+
+      <div className="col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
+        <ul aria-labelledby="meganav-use-cases-panel-solutions" className="mt-0 md:mt-40">
           <li>
             <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-meganav-media group">
               <p className="ui-meganav-media-heading">eCommerce & Retail</p>
@@ -112,26 +135,6 @@ const MeganavContentUseCases = ({ absUrl }) => (
           </li>
         </ul>
       </div>
-
-      <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 bg-white">
-        <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>

package/src/core/Notice/component.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-announcement {
-    @apply font-sans;
+    @apply font-manrope;
     max-height: 37.5rem;
     transition: max-height 300ms;
   }

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

@@ -1,8 +1,8 @@
 <%# Note the style attribute is used for entry animation %>
 <%= tag.div class: "ui-announcement #{bg_color} #{text_color}", data: { id: "ui-notice" }, style: "max-height: 0; overflow: hidden" do %>
   <div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
-    <%= content_wrapper class: "font-light w-full pr-8 text-p3 self-center" do %>
-      <strong class="font-medium whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
+    <%= content_wrapper class: "font-medium w-full pr-8 text-p3 self-center" do %>
+      <strong class="font-bold whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
       <span class="pr-4"><%= @contents[:body_text] %></span>
       <span class="underline cursor-pointer whitespace-nowrap"><%= @contents[:button_label] %></span>
     <% end %>

package/src/core/Notice/component.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import T from "prop-types";
 
-const contentWrapperClasses = "font-light w-full pr-8 text-p3 self-center";
+const contentWrapperClasses = "font-medium w-full pr-8 text-p3 self-center";
 
 import NoticeScripts from "./component.js";
 import Icon from "../Icon/component.jsx";
@@ -38,7 +38,7 @@ const Notice = ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bg
     <div className={wrapperClasses} data-id="ui-notice" style={{ maxHeight: 0, overflow: "hidden" }}>
       <div className="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
         <ContentWrapper buttonLink={buttonLink}>
-          <strong className="font-medium whitespace-nowrap pr-4">{title}</strong>
+          <strong className="font-bold whitespace-nowrap pr-4">{title}</strong>
           <span className="pr-4">{bodyText}</span>
           {buttonLabel && <span className="underline cursor-pointer whitespace-nowrap">{buttonLabel}</span>}
         </ContentWrapper>

package/src/core/fonts/jetBrains-mono.css

@@ -0,0 +1,3 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
+}

package/src/core/fonts/manrope.css

@@ -0,0 +1,3 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
+}

package/src/core/icons/icon-display-data-broadcast-col.svg

@@ -0,0 +1,26 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.5 9.5H33C30.3766 9.5 28.5 11.3766 28.5 14V23C28.5 24.5188 29.4812 25.75 31 25.75H39.75C41.2688 25.75 42.5 24.5188 42.5 23V15.5" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M31.4286 17.5H34.75V12.5H31.4286C31.4286 12.5 30.5 12.5 30.5 13.5V16.5C30.5 17.5 31.4286 17.5 31.4286 17.5Z" stroke="#03020D" stroke-linejoin="round"/>
+<path d="M40.5 15V16.5C40.5 17.5 39.5714 17.5 39.5714 17.5C38.6429 17.5 36.25 17.5 36.25 17.5V12.5H37" stroke="#03020D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.5 31L31.5 28" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M42 31L40 28" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M30.5 29.5H41" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="31.5" cy="21.5" r="1.5" fill="#03020D"/>
+<circle cx="39.5" cy="21.5" r="1.5" fill="#03020D"/>
+<path d="M14.5 4.12444C14.0122 4.0426 13.5111 4 13 4C8.02947 4 4.00003 8.02944 4.00003 13C4.00003 17.9706 8.02947 22 13 22C17.9706 22 22 17.9706 22 13C22 12.047 21.8519 11.1286 21.5774 10.2666" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M10.3121 12.0403L12.3515 10.3026C12.7252 9.98417 13.2749 9.98417 13.6486 10.3026L15.6879 12.0403C16.0221 12.325 16.1315 12.7943 15.9577 13.1974L15.1176 15.1459C14.9596 15.5125 14.5986 15.75 14.1993 15.75H11.8007C11.4015 15.75 11.0405 15.5125 10.8824 15.1459L10.0424 13.1974C9.86861 12.7943 9.978 12.325 10.3121 12.0403Z" fill="#03020D" stroke="#03020D" stroke-width="1.5"/>
+<path d="M10.1954 4.61029L12.3515 6.44738C12.7252 6.76583 13.2749 6.76583 13.6486 6.44738L14.2736 5.91483C14.4966 5.72484 14.625 5.44662 14.625 5.15367L14.625 4.21875" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M21.775 13.5001L19.0118 11.5963C18.8872 11.5104 18.8433 11.3467 18.9083 11.21V11.21C19.0391 10.9352 19.9843 10.2787 20.2844 10.2279C20.5919 10.1758 20.9897 10.1021 21.5 10" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M5.37081 7.59113L6.83859 10.6776C7.04946 11.1211 6.9072 11.652 6.50287 11.9306L3.68849 13.8696" stroke="#03020D" stroke-width="1.5"/>
+<path d="M16 18.5L17 18L20 18.5L18 20.5L15.5 21.5L16 18.5Z" fill="#03020D"/>
+<path d="M5.31416 18.3281L8.71616 18.0006C9.20491 17.9535 9.65552 18.2683 9.77955 18.7434L10.6429 22.0503" stroke="#03020D" stroke-width="1.5"/>
+<path d="M15.3563 22.0504L16.22 18.7436C16.3441 18.2686 16.7947 17.9539 17.2835 18.001L20.6854 18.3288" stroke="#03020D" stroke-width="1.5"/>
+<path d="M18.1185 27.5C17.2809 27.1759 16.3772 27 15.448 27C7.936 27.0233 8.2 33.6262 8.104 34.3261C5.8 34.5594 4 36.4726 4 38.7825C4 41.2556 6.064 43 8.608 43H22.288C25.456 42.93 28 40.6723 28 37.5692C28 36.2139 27.514 34.9733 26.7009 34" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 30C19 27.7909 20.7909 26 23 26C25.2091 26 27 27.7909 27 30C27 32.2091 25.2091 34 23 34C20.7909 34 19 32.2091 19 30Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 5C16 2.79086 17.7909 1 20 1C22.2091 1 24 2.79086 24 5C24 7.20914 22.2091 9 20 9C17.7909 9 16 7.20914 16 5Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38 10C38 7.79086 39.7909 6 42 6C44.2091 6 46 7.79086 46 10C46 12.2091 44.2091 14 42 14C39.7909 14 38 12.2091 38 10Z" fill="#FF5416"/>
+<path d="M7 11.5V10.5L5.5 8.5L4 11V13.5L7 11.5Z" fill="#03020D"/>
+<path d="M10 19L9 18L6 18.5L8 20.5L10 21.5V19Z" fill="#03020D"/>
+<path d="M19 11L21 10L22 12L21.5 13L19.5 12L19 11Z" fill="#03020D"/>
+<path d="M14.5 5.5L13 6.5L11 5V4H14.5V5.5Z" fill="#03020D"/>
+</svg>

package/src/core/icons/icon-display-data-synchronization-col.svg

@@ -0,0 +1,14 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39 10C39 6.13401 31.3888 3 22 3C12.6112 3 5 6.13401 5 10" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M39 18C39 21.866 31.3888 25 22 25C12.6112 25 5 21.866 5 18" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M5 26C5 29.6251 11.6922 32.6066 20.2671 32.9641" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M39 10C39 13.866 31.3888 17 22 17C12.6112 17 5 13.866 5 10" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M5 34C5 37.6953 11.9538 40.7218 20.7671 40.9819" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M5 10V34" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M39 10V25" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<circle cx="33.5" cy="37" r="10.5" fill="#FF5416"/>
+<path d="M36.6529 39.0294L38.7706 38.5L39.3 40.6176" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.7706 38.5C38.3787 39.6105 37.6668 40.5802 36.7247 41.2868C35.7825 41.9934 34.6523 42.4053 33.4765 42.4706C32.3895 42.4708 31.3288 42.1364 30.4385 41.5129C29.5482 40.8893 28.8714 40.0068 28.5 38.9853" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.1471 35.7938L28.0294 36.3232L27.5 34.2056" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.3824 35.9706C29.1235 33.9412 31.4 32 33.6765 32C34.7687 32.0031 35.8333 32.3439 36.7242 32.9758C37.6152 33.6076 38.2889 34.4996 38.6529 35.5294" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>