@ably/ui 8.7.0-dev.4de588d → 8.7.0-dev.52da22c

package/src/core/HeadwayWidget/index.js

@@ -0,0 +1,5 @@
+import HeadwayWidget, { HeadwayWidgetTrigger } from "./HeadwayWidget";
+
+export default HeadwayWidget;
+
+export { HeadwayWidgetTrigger };

package/src/core/Meganav/MeganavHeadwayPortal.jsx

@@ -0,0 +1,20 @@
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import HeadwayWidget from "../HeadwayWidget/HeadwayWidget.jsx";
+
+export default function MeganavHeadwayPortal() {
+  const [headwayPortalNodes, setHeadwayPortalNodes] = useState([]);
+
+  useEffect(() => {
+    // Query all the elements with the .headwayPortal class
+    setHeadwayPortalNodes(Array.from(document.querySelectorAll(".headwayPortal")));
+  }, []);
+
+  return (
+    <>
+      {headwayPortalNodes.map((node, index) => {
+        return createPortal(<HeadwayWidget account={"yZ1rmJ"} badgePosition={"center-right"} id={`widget-${index}`} />, node, `headway-${index}`);
+      })}
+    </>
+  );
+}

package/src/core/Meganav/component.css

@@ -7,13 +7,13 @@
     z-index: var(--stacking-context-page-meganav);
 
     @apply fixed top-0 w-full;
-    @apply antialiased font-sans transition-colors;
+    @apply font-sans antialiased transition-colors;
   }
 
   .ui-meganav {
     height: var(--ui-meganav-height);
 
-    @apply flex justify-between items-center max-w-screen-xl mx-auto;
+    @apply flex items-center justify-between max-w-screen-xl mx-auto;
   }
 
   .ui-meganav-panel,
@@ -22,7 +22,7 @@
     z-index: var(--stacking-context-meganav-dropdown);
 
     @apply absolute left-0 right-0;
-    @apply border-mid-grey border-t shadow-container;
+    @apply border-t border-mid-grey shadow-container;
   }
 
   .ui-meganav-panel {
@@ -35,9 +35,9 @@
     /* Prevents momentum-based scrolling https://devdocs.io/css/-webkit-overflow-scrolling */
     -webkit-overflow-scrolling: auto;
 
-    @apply bg-white pt-16 border-0;
-    @apply border-mid-grey border-t shadow-container;
-    @apply fixed top-64 left-0 right-0 overflow-y-auto;
+    @apply pt-16 bg-white border-0;
+    @apply border-t border-mid-grey shadow-container;
+    @apply fixed left-0 right-0 overflow-y-auto top-64;
   }
 
   .ui-meganav-panel-account {
@@ -51,8 +51,8 @@
   }
 
   .ui-meganav-link {
-    @apply text-menu2 font-medium block;
-    @apply mr-12 lg:mr-24 px-0 py-20;
+    @apply block font-medium text-menu2;
+    @apply px-0 py-20 mr-12 lg:mr-24;
     @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
     @apply transition-colors;
   }
@@ -62,18 +62,18 @@
   }
 
   .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 relative p-menu-row -left-8 w-extend-8;
+    @apply block font-medium text-left text-menu2 text-cool-black;
     @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 relative block px-8 py-8 font-light rounded hover:bg-light-grey hover:text-gui-hover -left-8 text-menu3 w-extend-8;
   }
 
   .ui-meganav-content {
-    @apply max-w-screen-xl py-24 lg:py-32 mx-auto;
+    @apply max-w-screen-xl py-24 mx-auto lg:py-32;
     @apply grid grid-cols-1;
     @apply px-24 md:px-32 lg:px-32 xl:px-64;
   }
@@ -81,27 +81,27 @@
   /* This is implemented not as padding so we can change the color of just this space, while keeping the grid
      as close to the designs as possible */
   .ui-meganav-content-spacer {
-    @apply hidden md:block md:w-32 lg:w-32 xl:w-64 self-stretch flex-shrink-0 flex-grow-0;
+    @apply self-stretch flex-grow-0 flex-shrink-0 hidden md:block md:w-32 lg:w-32 xl:w-64;
   }
 
   .ui-meganav-media {
-    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+    @apply relative block px-8 py-8 rounded hover:bg-light-grey -left-8 w-extend-8;
   }
 
   .ui-meganav-media-with-image {
     grid-template-columns: max-content 1fr;
     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 relative block px-8 py-8 rounded hover:bg-light-grey -left-8 w-extend-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 font-medium text-menu3 text-cool-black group-hover:text-gui-hover group-focus:text-gui-focus;
   }
 
   .ui-meganav-media-copy {
-    @apply text-p3 text-dark-grey font-light;
+    @apply font-light text-p3 text-dark-grey;
   }
 
   .ui-meganav-overline {
@@ -112,3 +112,44 @@
     @apply my-0 text-mid-grey;
   }
 }
+
+.HW_badge {
+  width: 1.25rem !important;
+  height: 1.25rem !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  font-size: 14px !important;
+  top: 2px !important;
+  left: 20px !important;
+  transition: none !important;
+  pointer-events: none !important;
+}
+
+.HW_animated {
+  animation: none !important;
+}
+
+.invisible .HW_badge {
+  visibility: hidden !important;
+  display: none !important;
+}
+
+.invisible .HW_frame {
+  visibility: hidden !important;
+  display: none !important;
+}
+
+.HW_badge_cont.HW_visible {
+  display: block !important;
+}
+
+.HW_badge_cont {
+  visibility: unset !important;
+  display: none !important;
+  pointer-events: none !important;
+}
+
+[class^="HW_widget_component_widget-"] {
+  pointer-events: none !important;
+}

package/src/core/Meganav/component.json

@@ -29,7 +29,7 @@
     }
   },
   "panels": [
-    { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
+    { "label": "Products", "shortLabel": "Products", "id": "products-panel", "component": "MeganavContentProducts" },
     { "label": "Solutions", "shortLabel": "Solutions", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
     { "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
     { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }

package/src/core/Meganav/component.jsx

@@ -1,30 +1,32 @@
-import React, { useEffect, useState } from "react";
 import T from "prop-types";
+import React, { useEffect, useState } from "react";
 
 import { connectState } from "../remote-data-store";
 import { selectSessionData } from "../remote-session-data";
 
 import Logo from "../Logo/component.jsx";
 
-import MeganavScripts from "./component.js";
 import MeganavItemsDesktop from "../MeganavItemsDesktop/component.jsx";
-import MeganavItemsSignedIn from "../MeganavItemsSignedIn/component.jsx";
 import MeganavItemsMobile from "../MeganavItemsMobile/component.jsx";
+import MeganavItemsSignedIn from "../MeganavItemsSignedIn/component.jsx";
 import Notice from "../Notice/component.jsx";
-import MeganavData from "./component.json";
 import _absUrl from "../url-base";
+import MeganavScripts from "./component.js";
+import MeganavData from "./component.json";
 
-import MeganavContentPlatform from "../MeganavContentPlatform/component.jsx";
-import MeganavContentUseCases from "../MeganavContentUseCases/component.jsx";
 import MeganavContentCompany from "../MeganavContentCompany/component.jsx";
 import MeganavContentDevelopers from "../MeganavContentDevelopers/component.jsx";
+import MeganavContentProducts from "../MeganavContentProducts/component.jsx";
+import MeganavContentUseCases from "../MeganavContentUseCases/component.jsx";
 import MeganavSearch from "../MeganavSearch/component.jsx";
 
+import MeganavHeadwayPortal from "./MeganavHeadwayPortal.jsx";
+
 const SignIn = ({ sessionState, theme, loginLink, absUrl }) => {
   return sessionState.signedIn ? (
     <MeganavItemsSignedIn absUrl={absUrl} sessionState={sessionState} theme={theme} />
   ) : (
-    <ul className="hidden md:flex items-center">
+    <ul className="items-center hidden md:flex">
       <li className="ui-meganav-item">
         <a href={absUrl("/contact")} className={`ui-meganav-link ${theme.textColor}`} data-id="meganav-link">
           Contact us
@@ -58,10 +60,10 @@ SignIn.propTypes = {
 const SignInPlaceholder = () => <div />;
 
 const panels = {
-  MeganavContentPlatform: MeganavContentPlatform,
-  MeganavContentUseCases: MeganavContentUseCases,
-  MeganavContentCompany: MeganavContentCompany,
-  MeganavContentDevelopers: MeganavContentDevelopers,
+  MeganavContentProducts,
+  MeganavContentUseCases,
+  MeganavContentCompany,
+  MeganavContentDevelopers,
 };
 
 export default function Meganav({ paths, themeName = "white", notice, loginLink = "/login", urlBase, addSearchApiKey }) {
@@ -95,6 +97,8 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
         {sessionState ? <SignIn sessionState={sessionState} theme={theme} loginLink={loginLink} absUrl={absUrl} /> : <SignInPlaceholder />}
 
         <MeganavItemsMobile panels={panels} sessionState={sessionState || {}} paths={paths} theme={theme} loginLink={loginLink} absUrl={absUrl} />
+
+        <MeganavHeadwayPortal />
       </div>
     </nav>
   );

package/src/core/Meganav/component.rb

@@ -30,10 +30,10 @@ module AblyUi
       def panels
         [
           {
-            label: 'Platform',
-            short_label: 'Platform',
-            id: 'platform-panel',
-            class: 'AblyUi::Core::MeganavContentPlatform'
+            label: 'Products',
+            short_label: 'Products',
+            id: 'products-panel',
+            class: 'AblyUi::Core::MeganavContentProducts'
           },
           {
             label: 'Solutions',

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

@@ -1,8 +1,8 @@
 <div class="flex max-w-screen-xl mx-auto">
   <div class="ui-meganav-content-spacer"></div>
-  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
-    <div class="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
-      <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
+  <section class="grid w-full grid-cols-12 ui-grid-gap-x">
+    <div class="px-24 pt-24 col-span-full md:col-span-4 md:py-24 lg:py-32 sm:px-32 md:pl-0 md:pr-24">
+      <h3 class="uppercase ui-meganav-overline" id="meganav-developers-panel-explore">
         Explore
       </h3>
       <ul aria-labelledby="meganav-developers-panel-explore">
@@ -33,10 +33,18 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/examples"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-examples-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Live examples</p>
+              <p class="ui-meganav-media-copy">Discover our features and their use cases.</p>
+            </div>
+          <% end %>
+        </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">
+    <div class="px-24 pb-8 col-span-full md:col-span-4 md:py-24 lg:py-32 sm:px-32 md:px-0">
       <ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
         <li>
           <%= link_to abs_url("/download"), class: "ui-meganav-media-with-image group" do %>
@@ -65,16 +73,24 @@
             </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">
+    <div class="px-24 pt-8 pb-24 col-span-full md:col-span-4 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <h3 class="uppercase ui-meganav-overline" id="meganav-developers-panel-quick-links">
         Quick links
       </h3>
       <ul aria-labelledby="meganav-developers-panel-quick-links">
         <li>
-          <%= link_to "https://discord.gg/jwBPhEZ9g5", class: "group ui-meganav-media py-12" do %>
+          <%= link_to "https://discord.gg/jwBPhEZ9g5", class: "py-12 group ui-meganav-media" do %>
             <p class="ui-meganav-media-heading">Discord</p>
           <% end %>
         </li>
@@ -84,25 +100,26 @@
           <% end %>
         </li>
         <li>
-          <%= link_to "https://changelog.ably.com/", class: "group ui-meganav-media py-12" do %>
+          <%= link_to "https://changelog.ably.com/", class: "py-12 group ui-meganav-media", target: "_blank", rel: "noopener noreferrer" do %>
             <p class="ui-meganav-media-heading">Changelog</p>
+            <span className="headwayPortal"></span>
           <% end %>
         </li>
         <li>
-          <a href="https://status.ably.com/" class="group ui-meganav-media py-12">
+          <a href="https://status.ably.com/" class="py-12 group ui-meganav-media">
             <p class="ui-meganav-media-heading">
               Status<iframe
                 src="https://status.ably.com/embed/icon"
                 allowtransparency="true"
                 frameborder="0"
                 scrolling="no"
-                class="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
+                class="w-24 h-24 ml-4 align-middle border-none pointer-events-none"
               ></iframe>
             </p>
           </a>
         </li>
         <li>
-          <%= link_to abs_url("/support"), class: "group ui-meganav-media py-12" do %>
+          <%= link_to abs_url("/support"), class: "py-12 group ui-meganav-media" do %>
             <p class="ui-meganav-media-heading">Support & FAQs</p>
           <% end %>
         </li>

package/src/core/MeganavContentDevelopers/component.js

@@ -0,0 +1,16 @@
+export default () => {
+  // See https://docs.headwayapp.co/widget for more configuration options.
+
+  // eslint-disable-next-line no-unused-vars
+  const HW_config = {
+    selector: '.headwayPortal',
+    account:  'yZ1rmJ'
+  };
+
+  const script = document.createElement('script');
+  script.async = true;
+  script.src = 'https://cdn.headwayapp.co/widget.js';
+  script.type = 'script/javascript';
+  const head = document.getElementsByTagName('head')[0];
+  head.appendChild(script);
+};

package/src/core/MeganavContentDevelopers/component.jsx

@@ -1,14 +1,14 @@
-import React from "react";
 import T from "prop-types";
+import React from "react";
 
 import Icon from "../Icon/component.jsx";
 
 const MeganavContentDevelopers = ({ absUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">
     <div className="ui-meganav-content-spacer"></div>
-    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
-      <div className="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
-        <h3 className="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
+    <section className="grid w-full grid-cols-12 ui-grid-gap-x">
+      <div className="px-24 pt-24 col-span-full md:col-span-4 md:py-24 lg:py-32 sm:px-32 md:pl-0 md:pr-24">
+        <h3 className="uppercase ui-meganav-overline" id="meganav-developers-panel-explore">
           Explore
         </h3>
         <ul aria-labelledby="meganav-developers-panel-explore">
@@ -39,10 +39,19 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               </div>
             </a>
           </li>
+          <li>
+            <a href={absUrl("/examples")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-examples-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Live examples</p>
+                <p className="ui-meganav-media-copy">Discover our features and their use cases.</p>
+              </div>
+            </a>
+          </li>
         </ul>
       </div>
 
-      <div className="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <div className="px-24 pb-8 col-span-full md:col-span-4 md:py-24 lg:py-32 sm:px-32 md:px-0">
         <ul className="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
           <li>
             <a href={absUrl("/download")} className="ui-meganav-media-with-image group">
@@ -58,7 +67,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,45 +80,56 @@ 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>
 
-      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
-        <h3 className="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
+      <div className="px-24 pt-8 pb-24 col-span-full md:col-span-4 md:py-24 lg:py-32 sm:px-32 md:px-0">
+        <h3 className="uppercase ui-meganav-overline" id="meganav-developers-panel-quick-links">
           Quick links
         </h3>
         <ul aria-labelledby="meganav-developers-panel-quick-links">
           <li>
-            <a href="https://discord.gg/jwBPhEZ9g5" className="group ui-meganav-media py-12">
+            <a href="https://discord.gg/jwBPhEZ9g5" className="py-12 group ui-meganav-media">
               <p className="ui-meganav-media-heading">Discord</p>
             </a>
           </li>
           <li>
-            <a href="https://github.com/ably" className="group ui-meganav-media py-12">
+            <a href="https://github.com/ably" className="py-12 group ui-meganav-media">
               <p className="ui-meganav-media-heading">GitHub</p>
             </a>
           </li>
           <li>
-            <a href="https://changelog.ably.com/" className="group ui-meganav-media py-12">
-              <p className="ui-meganav-media-heading">Changelog</p>
+            <a href="https://changelog.ably.com/" className="py-12 group ui-meganav-media" rel="noopener noreferrer" target="_blank">
+              <span className="ui-meganav-media-heading">Changelog</span>
+              <span className="headwayPortal"></span>
             </a>
           </li>
           <li>
-            <a href="https://status.ably.com/" className="group ui-meganav-media py-12">
+            <a href="https://status.ably.com/" className="py-12 group ui-meganav-media">
               <p className="ui-meganav-media-heading">
                 Status
                 <iframe
+                  title="Ably status"
                   src="https://status.ably.com/embed/icon"
                   allowtransparency="true"
                   frameBorder="0"
                   scrolling="no"
-                  className="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
+                  className="w-24 h-24 ml-4 align-middle border-none pointer-events-none"
                 ></iframe>
               </p>
             </a>
           </li>
           <li>
-            <a href={absUrl("/support")} className="group ui-meganav-media py-12">
+            <a href={absUrl("/support")} className="py-12 group ui-meganav-media">
               <p className="ui-meganav-media-heading">Support & FAQs</p>
             </a>
           </li>

package/src/core/{MeganavContentPlatform → MeganavContentProducts}/component.html.erb

@@ -16,52 +16,34 @@
     </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">
-      <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">Our Examples</h3>
-      <ul class="mb-16" aria-labelledby="meganav-platform-panel-list-examples">
+      <h3 class="ui-meganav-overline" id="meganav-products-panel-list-examples">
+        Products
+      </h3>
+      <ul class="mb-16" aria-labelledby="meganav-products-panel-list-examples">
         <li>
-          <%= link_to abs_url("/examples/avatar-stack"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Avatar Stack</p>
-            <p class="ui-meganav-media-copy">See who is connected in a digital space.</p>
+          <%= link_to abs_url("/solutions/channels"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Pub/Sub Channels</p>
+            <p class="ui-meganav-media-copy">Build infinitely scalable realtime applications.</p>
           <% end %>
         </li>
         <li>
-          <%= link_to abs_url("/examples/emoji-reactions"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Emoji Reactions</p>
-            <p class="ui-meganav-media-copy">React with an emoji to a message.</p>
+          <%= link_to abs_url("/spaces"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Spaces (Beta)</p>
+            <p class="ui-meganav-media-copy">Create multi-user collaborative environments.</p>
           <% end %>
         </li>
         <li>
-          <%= link_to abs_url("/examples/activity-feed"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Activity Feed</p>
-            <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>
-            <p class="ui-meganav-media-copy">Track all cursors in realtime.</p>
-          <% end %>
-        </li>
-        <li>
-          <%= link_to abs_url("/examples/typing-indicator"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Typing Indicator</p>
-            <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
+          <%= link_to abs_url("/livesync"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">LiveSync (Pre release)</p>
+            <p class="ui-meganav-media-copy">Keep clients in sync with any relational database.</p>
           <% end %>
         </li>
       </ul>
-
-      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"), text_size: 'text-p3')) do %>Explore all live examples<% end %>
     </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-platform-panel-list-our-technology">Our technology</h3>
-      <ul class="mb-16" aria-labelledby="meganav-platform-panel-list-our-technology">
+      <h3 class="ui-meganav-overline" id="meganav-products-panel-list-our-technology">Technology</h3>
+      <ul class="mb-16" aria-labelledby="meganav-products-panel-list-our-technology">
         <li>
           <%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %>
             <p class="ui-meganav-media-heading">Predictable performance</p>