@ably/ui 8.7.0-dev.d7ea27d → 8.7.0-dev.d827b89

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

@@ -1,12 +1,12 @@
-<footer class="bg-light-grey font-sans antialiased" data-id="footer">
+<footer class="bg-light-grey font-manrope antialiased leading-normal" 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">
         <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
-        <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
+        <h2 class="text-overline2 col-span-full font-jetbrains_mono font-bold uppercase tracking-widen-0.16">The Ably Platform</h2>
       </div>
       <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
-        <p class="text-p3 py-16 font-medium p-menu-row-snug">
+        <p class="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>
@@ -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 leading-normal" 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 leading-normal;
   }
 
   .ui-meganav-media-copy {
-    @apply text-p3 text-dark-grey font-light;
+    @apply text-p3 font-manrope font-medium text-dark-grey leading-normal;
   }
 
   .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,9 +64,17 @@
             </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">
         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.html.erb

@@ -7,7 +7,7 @@
         <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
       </div>
 
-      <p class="text-p2 font-medium text-cool-black mb-24" style="max-width: 330px">
+      <p class="text-p2 font-bold text-cool-black mb-24 leading-normal" style="max-width: 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/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 leading-normal" 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

@@ -6,12 +6,13 @@
           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,16 +36,25 @@
         </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-tech-apachekafka", size: "2.5rem")) %>
+            <%= 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>
@@ -54,7 +64,7 @@
       </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>
@@ -92,11 +102,8 @@
       </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">
-        &nbsp;
-      </h3>
-      <ul aria-labelledby="meganav-use-cases-panel-solutions">
+    <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>

package/src/core/MeganavContentUseCases/component.jsx

@@ -16,8 +16,8 @@ const MeganavContentUseCases = ({ absUrl }) => (
             <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,16 +41,25 @@ 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-tech-apachekafka" size="2.5rem" />
+              <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>
@@ -60,7 +69,7 @@ const MeganavContentUseCases = ({ absUrl }) => (
         </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>
@@ -98,11 +107,8 @@ const MeganavContentUseCases = ({ absUrl }) => (
         </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">
-          &nbsp;
-        </h3>
-        <ul aria-labelledby="meganav-use-cases-panel-solutions">
+      <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>

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>

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

@@ -0,0 +1,13 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42 16.75H6V15.25H42V16.75Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 14C5.25 11.3766 7.37665 9.25 10 9.25H38C40.6234 9.25 42.75 11.3766 42.75 14V38C42.75 40.6234 40.6234 42.75 38 42.75H10C7.37665 42.75 5.25 40.6234 5.25 38V14ZM10 10.75C8.20507 10.75 6.75 12.2051 6.75 14V38C6.75 39.7949 8.20507 41.25 10 41.25H38C39.7949 41.25 41.25 39.7949 41.25 38V14C41.25 12.2051 39.7949 10.75 38 10.75H10Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.75 7C17.1642 7 17.5 7.33579 17.5 7.75L17.5 12.25C17.5 12.6642 17.1642 13 16.75 13C16.3358 13 16 12.6642 16 12.25L16 7.75C16 7.33579 16.3358 7 16.75 7Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.75 7C32.1642 7 32.5 7.33579 32.5 7.75L32.5 12.25C32.5 12.6642 32.1642 13 31.75 13C31.3358 13 31 12.6642 31 12.25L31 7.75C31 7.33579 31.3358 7 31.75 7Z" fill="#03020D"/>
+<path d="M10 21C10 20.4477 10.4477 20 11 20H17C17.5523 20 18 20.4477 18 21V27C18 27.5523 17.5523 28 17 28H11C10.4477 28 10 27.5523 10 27V21Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 21.5V26.5H16.5V21.5H11.5ZM11 20C10.4477 20 10 20.4477 10 21V27C10 27.5523 10.4477 28 11 28H17C17.5523 28 18 27.5523 18 27V21C18 20.4477 17.5523 20 17 20H11Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 31.5V36.5H16.5V31.5H11.5ZM11 30C10.4477 30 10 30.4477 10 31V37C10 37.5523 10.4477 38 11 38H17C17.5523 38 18 37.5523 18 37V31C18 30.4477 17.5523 30 17 30H11Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5 21.5V26.5H26.5V21.5H21.5ZM21 20C20.4477 20 20 20.4477 20 21V27C20 27.5523 20.4477 28 21 28H27C27.5523 28 28 27.5523 28 27V21C28 20.4477 27.5523 20 27 20H21Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5 31.5V36.5H26.5V31.5H21.5ZM21 30C20.4477 30 20 30.4477 20 31V37C20 37.5523 20.4477 38 21 38H27C27.5523 38 28 37.5523 28 37V31C28 30.4477 27.5523 30 27 30H21Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5 21.5V26.5H36.5V21.5H31.5ZM31 20C30.4477 20 30 20.4477 30 21V27C30 27.5523 30.4477 28 31 28H37C37.5523 28 38 27.5523 38 27V21C38 20.4477 37.5523 20 37 20H31Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5 31.5V36.5H36.5V31.5H31.5ZM31 30C30.4477 30 30 30.4477 30 31V37C30 37.5523 30.4477 38 31 38H37C37.5523 38 38 37.5523 38 37V31C38 30.4477 37.5523 30 37 30H31Z" fill="#03020D"/>
+</svg>

package/src/core/icons/icon-display-kafka-at-the-edge-col.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 3.59888C9.81598 5.842 3 14.125 3 24C3 33.875 9.81598 42.158 19 44.4011M29 3.59888C32.9541 4.56464 36.4693 6.65 39.1905 9.49999M44.1304 18C44.6962 19.9011 45 21.9151 45 24C45 26.2687 44.6403 28.4533 43.9747 30.5M38.8336 38.8649C36.1649 41.528 32.7834 43.477 29 44.4011" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="42" cy="13.5" r="2" fill="#FF5416"/>
+<circle cx="24" cy="3" r="2" fill="#FF5416"/>
+<circle cx="24" cy="45" r="2" fill="#FF5416"/>
+<circle cx="42" cy="35" r="2" fill="#FF5416"/>
+<path d="M32.8453 25.5085C31.7549 25.5085 30.7774 25.9916 30.108 26.7521L28.3927 25.5378C28.5748 25.0365 28.6793 24.4982 28.6793 23.9347C28.6793 23.381 28.5784 22.8518 28.4023 22.3578L30.1138 21.1564C30.7831 21.9131 31.7581 22.3935 32.8453 22.3935C34.8578 22.3935 36.4954 20.7562 36.4954 18.7434C36.4954 16.7306 34.8578 15.0933 32.8453 15.0933C30.8328 15.0933 29.1952 16.7306 29.1952 18.7434C29.1952 19.1037 29.2496 19.4511 29.3473 19.7801L27.6347 20.9822C26.9193 20.0946 25.8892 19.475 24.7156 19.2858V17.2217C26.369 16.8745 27.6147 15.4054 27.6147 13.6501C27.6147 11.6373 25.9772 10 23.9647 10C21.9521 10 20.3146 11.6373 20.3146 13.6501C20.3146 15.3819 21.5281 16.8328 23.1484 17.2049V19.2958C20.9371 19.6839 19.25 21.6138 19.25 23.9347C19.25 26.267 20.9538 28.2039 23.1811 28.5789V30.7867C21.5442 31.1465 20.3146 32.6063 20.3146 34.3499C20.3146 36.3627 21.9521 38 23.9647 38C25.9772 38 27.6147 36.3627 27.6147 34.3499C27.6147 32.6063 26.3851 31.1465 24.7482 30.7867V28.5788C25.8988 28.3851 26.9099 27.7776 27.618 26.9098L29.3447 28.132C29.2489 28.458 29.1952 28.802 29.1952 29.1586C29.1952 31.1714 30.8328 32.8087 32.8453 32.8087C34.8578 32.8087 36.4954 31.1714 36.4954 29.1586C36.4954 27.1458 34.8578 25.5085 32.8453 25.5085V25.5085ZM32.8453 16.9737C33.8212 16.9737 34.615 17.7678 34.615 18.7434C34.615 19.7191 33.8212 20.5131 32.8453 20.5131C31.8694 20.5131 31.0756 19.7191 31.0756 18.7434C31.0756 17.7678 31.8694 16.9737 32.8453 16.9737V16.9737ZM22.1949 13.6501C22.1949 12.6745 22.9887 11.8804 23.9647 11.8804C24.9406 11.8804 25.7343 12.6745 25.7343 13.6501C25.7343 14.6258 24.9406 15.4198 23.9647 15.4198C22.9887 15.4198 22.1949 14.6258 22.1949 13.6501V13.6501ZM25.7343 34.3499C25.7343 35.3255 24.9406 36.1196 23.9647 36.1196C22.9887 36.1196 22.1949 35.3255 22.1949 34.3499C22.1949 33.3742 22.9887 32.5802 23.9647 32.5802C24.9406 32.5802 25.7343 33.3742 25.7343 34.3499ZM23.9645 26.4028C22.6034 26.4028 21.4961 25.2958 21.4961 23.9347C21.4961 22.5736 22.6034 21.4663 23.9645 21.4663C25.3256 21.4663 26.4328 22.5736 26.4328 23.9347C26.4328 25.2958 25.3256 26.4028 23.9645 26.4028V26.4028ZM32.8453 30.9284C31.8694 30.9284 31.0756 30.1343 31.0756 29.1586C31.0756 28.183 31.8694 27.3889 32.8453 27.3889C33.8212 27.3889 34.615 28.183 34.615 29.1586C34.615 30.1343 33.8212 30.9284 32.8453 30.9284Z" fill="#03020D"/>
+</svg>

package/src/core/icons/icon-display-push-notifications-col.svg

@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.5 8L7.38462 8C4.46154 7.99973 3 9.49973 3 12.4997V39.5C3 42.5 4.46154 44 7.38462 44H36.6154C39.5385 44 41 42.5 41 39.5V21.5" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.25 10C29.25 5.16751 33.1675 1.25 38 1.25C42.8325 1.25 46.75 5.16751 46.75 10C46.75 14.8325 42.8325 18.75 38 18.75C33.1675 18.75 29.25 14.8325 29.25 10Z" fill="#FF5416"/>
+<path d="M39 6.5V13.5H37.5788V7.90479H37.5394L36 8.90967V7.59717L37.6641 6.5H39Z" fill="white"/>
+<path d="M28.7528 19H14.2551C13.6569 19 13.0832 19.232 12.6603 19.6446C12.2374 20.0573 12 20.6166 12 21.2002V30.4808C12 31.0643 12.2374 31.6245 12.6603 32.0371C13.0832 32.4498 13.6569 32.6817 14.2551 32.6817H27.6977L30.0498 34.8505C30.13 34.9242 30.2304 34.9731 30.3389 34.9917C30.4474 35.0103 30.5587 34.9975 30.6598 34.9549C30.7609 34.9122 30.8471 34.8421 30.9076 34.7523C30.968 34.6625 31.0001 34.5573 31 34.4499V21.2002C31 20.618 30.7636 20.0594 30.3424 19.6469C29.9212 19.2345 29.3495 19.0021 28.7528 19Z" stroke="#03020D" stroke-width="1.5"/>
+</svg>