@ably/ui 8.7.0-dev.7706f12 → 8.7.0-dev.779bcfa

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">
@@ -87,9 +87,9 @@
         <li class="p-menu-row-snug">
           <%= link_to 'SDKs', abs_url("/download"), class: "ui-footer-menu-row-link" %>
         </li>
-        <li class="p-menu-row-snug flex items-center">
+        <li class="p-menu-row-snug flex items-center -mt-4">
           <a class="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">System status</a>
-          <iframe class="w-24 h-24 mt-4" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
+          <iframe class="w-20 h-20 mb-2" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
         </li>
       </ul>
     </div>
@@ -147,7 +147,7 @@
     <hr class="border-t border-mid-grey my-0"/>
   </div>
   <%# Twitter + Glassdoor SM * above + Glassdoor XS  + Badges %>
-  <div class="max-w-screen-xl mx-auto py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
+  <div class="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
     <div class="md:flex md:items-center">
       <div class="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
         <div class="">
@@ -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
@@ -194,13 +194,13 @@
         <div class="border-t border-mid-grey w-full"></div>
         <div class="flex py-24">
           <a
-                class="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
+                class="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
                 href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
                 title="Ably reviews on glassdoor"
               >
             <%= 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
@@ -210,9 +210,9 @@
       </div>
     </div>
     <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
-      <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 w-96 h-96") %>
-      <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 w-96 h-96") %>
-      <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 w-96 h-96") %>
+      <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 h-80") %>
+      <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 h-80") %>
+      <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 h-80") %>
     </div>
   </div>
   <div class="max-w-screen-xl ui-grid-px mx-auto">
@@ -227,33 +227,33 @@
         <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
       </div>
     </div>
-    <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-0 ">
+    <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
       <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")) %>
+        <%= 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">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")) %>
+        <%= 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">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")) %>
+        <%= 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">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>
@@ -144,12 +144,12 @@ export default function Footer({ paths, urlBase }) {
                 SDKs
               </a>
             </li>
-            <li className="p-menu-row-snug flex items-center">
+            <li className="p-menu-row-snug flex items-center -mt-4">
               <a className="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">
                 System status
               </a>
               <iframe
-                className="w-24 h-24 mt-4"
+                className="w-20 h-20 mb-2"
                 src="https://status.ably.com/embed/icon"
                 allowtransparency="true"
                 frameBorder="0"
@@ -240,8 +240,8 @@ export default function Footer({ paths, urlBase }) {
       <div className="max-w-screen-xl ui-grid-px mx-auto">
         <hr className="border-t border-mid-grey my-0" />
       </div>
-      {/* Twitter + Glassdoor SM * above + Glassdoor XS  + Badges*/}
-      <div className="max-w-screen-xl mx-auto py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2 ">
+      {/* Twitter + Glassdoor SM & above + Glassdoor XS  + Badges*/}
+      <div className="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
         <div className="md:flex md:items-center">
           <div className="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
             <div className="">
@@ -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
@@ -288,13 +288,13 @@ export default function Footer({ paths, urlBase }) {
             <div className="border-t border-mid-grey w-full"></div>
             <div className="flex py-24">
               <a
-                className="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
+                className="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
                 href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
                 title="Ably reviews on glassdoor"
               >
                 <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
@@ -304,10 +304,10 @@ export default function Footer({ paths, urlBase }) {
           </div>
         </div>
 
-        <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto">
-          <img className="mr-24 w-96 h-96" src={paths.highestUserAdoption} alt="Highest User Adoption 2022" />
-          <img className="mr-24 w-96 h-96" src={paths.usersLoveUs} alt="Users Love Us" />
-          <img className="mr-24 w-96 h-96" src={paths.highestPerformer} alt="High Performer 2022" />
+        <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
+          <img className="mr-24 h-80" src={paths.highestUserAdoption} alt="Highest User Adoption 2022" />
+          <img className="mr-24 h-80" src={paths.usersLoveUs} alt="Users Love Us" />
+          <img className="mr-24 h-80" src={paths.highestPerformer} alt="High Performer 2022" />
         </div>
       </div>
 
@@ -331,33 +331,33 @@ export default function Footer({ paths, urlBase }) {
             </a>
           </div>
         </div>
-        <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
+        <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
           <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" />
+            <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">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" />
+            <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">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" />
+            <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">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.html.erb

@@ -36,12 +36,6 @@
             <p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
           <% end %>
         </li>
-        <li>
-          <%= link_to abs_url("/examples/live-charts"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Live Charts</p>
-            <p class="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
-          <% end %>
-        </li>
         <li>
           <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %>
             <p class="ui-meganav-media-heading">Live Cursors</p>
@@ -54,6 +48,12 @@
             <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/examples/chat-admin-privileges"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Chat Admin Privileges</p>
+            <p class="ui-meganav-media-copy">Control who can take admin actions in a digital space.</p>
+          <% end %>
+        </li>
       </ul>
 
       <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"), text_size: 'text-p3')) do %>Explore all live examples<% end %>

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>
@@ -45,12 +45,6 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
               <p className="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
             </a>
           </li>
-          <li>
-            <a href={absUrl("/examples/live-charts")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Live Charts</p>
-              <p className="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
-            </a>
-          </li>
           <li>
             <a href={absUrl("/examples/live-cursors")} className="ui-meganav-media group">
               <p className="ui-meganav-media-heading">Live Cursors</p>
@@ -63,6 +57,12 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
               <p className="ui-meganav-media-copy">See when a user is typing a message.</p>
             </a>
           </li>
+          <li>
+            <a href={absUrl("/examples/chat-admin-privileges")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Chat Admin Privileges</p>
+              <p className="ui-meganav-media-copy">Control who can take admin actions in a digital space.</p>
+            </a>
+          </li>
         </ul>
         <FeaturedLink url={absUrl("/examples")} textSize="text-p3">
           Explore all live examples

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

@@ -3,49 +3,68 @@
   <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/live-updates-results-metrics"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
+          <%= 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">Live updates, results & metrics</p>
-              <p class="ui-meganav-media-copy">Deliver live updates to keep users informed.</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>
         <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")) %>
+          <%= link_to abs_url("/solutions/multiplayer-collaboration"), 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">Chat</p>
-              <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
+              <p class="ui-meganav-media-heading">Multiplayer Collaboration</p>
+              <p class="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</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")) %>
+          <%= link_to abs_url("/solutions/data-broadcast"), class: "ui-meganav-media-with-image group" do %>
+            <%= 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">Virtual Events</p>
-              <p class="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
+              <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>
             </div>
           <% end %>
         </li>
         <li>
-          <%= link_to abs_url("/solutions/multi-user-virtual-spaces"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
+          <%= link_to abs_url("/solutions/data-synchronization"), class: "ui-meganav-media-with-image group" do %>
+            <%= 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">Multi-user virtual spaces</p>
-              <p class="ui-meganav-media-copy">Build live and interactive multi-user applications.</p>
+              <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>