@ably/ui 8.5.0 → 8.7.0-dev.05d9441

package/src/core/Logo/component.jsx

@@ -1,46 +1,10 @@
-import React, { useMemo } from "react";
+import React from "react";
 import T from "prop-types";
-import { nanoid } from "nanoid/non-secure";
-
-const Logo = ({ dataId, href = "/" }) => {
-  // This fixes a bug where if the logo is rendered more than once on the page, and one of the instances
-  // if it is hidden, the other instance will not show the ably shape from the logo.
-
-  // This is because the defs in this SVG reference ids that need to be unique ids. The browser discards the "newer"
-  // linearGradients defined in the other logo, and inherits the `hidden` style from the first.
-  const gradientIds = useMemo(() => [nanoid(), nanoid()], []);
 
+const Logo = ({ dataId, logoUrl, href = "/", additionalImgAttrs, additionalLinkAttrs }) => {
   return (
-    <a href={href} className="h-32">
-      <svg data-id={dataId} className="text-cool-black transition-colors" width="108" height="32" viewBox="0 0 108 32" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M62.922 24.9786V4.08813H66.6933V11.6512C67.9709 10.435 69.6164 9.76044 71.3538 9.76044C75.4318 9.76044 79.0498 12.8674 79.0498 17.5484C79.0498 22.2293 75.4318 25.3465 71.3538 25.3465C69.5244 25.3465 67.7971 24.6209 66.5094 23.3024V24.9786H62.922ZM75.2785 17.5484C75.2785 14.932 73.4183 13.1025 70.9859 13.1025C68.6148 13.1025 66.7853 14.84 66.6933 17.3644V17.5484C66.6933 20.1648 68.5534 21.9942 70.9859 21.9942C73.4183 21.9942 75.2785 20.1648 75.2785 17.5484ZM80.7975 24.9786V4.08813H84.5688V24.9786H80.7975ZM89.8425 30.3954L92.0399 25.1523L86.0712 10.1284H90.1491L93.9511 20.6247L97.8144 10.1284H101.954L93.8591 30.4056H89.8425V30.3954ZM56.9329 10.1284V12.0191C55.6247 10.5883 53.7952 9.77066 51.9147 9.77066C47.8367 9.77066 44.2187 12.8777 44.2187 17.5586C44.2187 22.2497 47.8367 25.3465 51.9147 25.3465C53.8668 25.3465 55.7166 24.4982 57.0555 22.9754V24.9888H60.3465V10.1284H56.9329ZM56.5649 17.5484C56.5649 20.1341 54.7048 21.9942 52.2724 21.9942C49.8399 21.9942 47.9798 20.1341 47.9798 17.5484C47.9798 14.9626 49.8399 13.1025 52.2724 13.1025C54.6435 13.1025 56.473 14.8706 56.5649 17.3644V17.5484Z"
-          fill="currentColor"
-        />
-        <path
-          d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z"
-          fill={`url(#${gradientIds[0]})`}
-        />
-        <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill={`url(#${gradientIds[1]})`} />
-        <defs>
-          <linearGradient id={gradientIds[0]} x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#FF5416" />
-            <stop offset="0.2535" stopColor="#FF5115" />
-            <stop offset="0.461" stopColor="#FF4712" />
-            <stop offset="0.6523" stopColor="#FF350E" />
-            <stop offset="0.8327" stopColor="#FF1E08" />
-            <stop offset="1" stopColor="#FF0000" />
-          </linearGradient>
-          <linearGradient id={gradientIds[1]} x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#FF5416" />
-            <stop offset="0.2535" stopColor="#FF5115" />
-            <stop offset="0.461" stopColor="#FF4712" />
-            <stop offset="0.6523" stopColor="#FF350E" />
-            <stop offset="0.8327" stopColor="#FF1E08" />
-            <stop offset="1" stopColor="#FF0000" />
-          </linearGradient>
-        </defs>
-      </svg>
+    <a href={href} data-id={dataId} className="block" style={{ height: "2.125rem" }} {...additionalLinkAttrs}>
+      <img src={logoUrl} width="108px" alt="Ably logo" {...additionalImgAttrs} />
     </a>
   );
 };
@@ -48,6 +12,9 @@ const Logo = ({ dataId, href = "/" }) => {
 Logo.propTypes = {
   dataId: T.string,
   href: T.string,
+  logoUrl: T.string,
+  additionalImgAttrs: T.object,
+  additionalLinkAttrs: T.object,
 };
 
 export default React.memo(Logo);

package/src/core/Logo/component.rb

@@ -1,17 +1,26 @@
-require 'securerandom'
-
 module AblyUi
   module Core
     class Logo < ViewComponent::Base
       include AblyUi::Core::MeganavConfig
 
-      attr_reader :href, :data_id, :gradient_id_0, :gradient_id_1
+      attr_reader :href,
+                  :logo_url,
+                  :data_id,
+                  :additional_img_attrs,
+                  :additional_link_attrs
 
-      def initialize(data_id: '', href:)
+      def initialize(
+        href:,
+        logo_url:,
+        data_id: '',
+        additional_img_attrs: {},
+        additional_link_attrs: {}
+      )
         @data_id = data_id
         @href = href
-        @gradient_id_0 = "paint_linear_#{SecureRandom.uuid}"
-        @gradient_id_1 = "paint_linear_#{SecureRandom.uuid}"
+        @logo_url = logo_url
+        @additional_img_attrs = additional_img_attrs
+        @additional_link_attrs = additional_link_attrs
       end
 
       def logo_href

package/src/core/Meganav/component.css

@@ -51,7 +51,7 @@
   }
 
   .ui-meganav-link {
-    @apply text-menu2 font-medium block;
+    @apply text-menu2 font-bold block font-sans;
     @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-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-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-sans 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-sans 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-mono tracking-widen-0.16 p-overline;
   }
 
   .ui-meganav-hr {

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

@@ -3,7 +3,7 @@
 
   <div class="ui-meganav ui-grid-px">
     <div className="mr-24">
-      <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %>
+      <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link, logo_url: ably_logo)) %>
     </div>
     <%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
 

package/src/core/Meganav/component.json

@@ -29,8 +29,8 @@
     }
   },
   "panels": [
-    { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
-    { "label": "Use Cases & Solutions", "shortLabel": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
+    { "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

@@ -14,7 +14,7 @@ import Notice from "../Notice/component.jsx";
 import MeganavData from "./component.json";
 import _absUrl from "../url-base";
 
-import MeganavContentPlatform from "../MeganavContentPlatform/component.jsx";
+import MeganavContentProducts from "../MeganavContentProducts/component.jsx";
 import MeganavContentUseCases from "../MeganavContentUseCases/component.jsx";
 import MeganavContentCompany from "../MeganavContentCompany/component.jsx";
 import MeganavContentDevelopers from "../MeganavContentDevelopers/component.jsx";
@@ -58,7 +58,7 @@ SignIn.propTypes = {
 const SignInPlaceholder = () => <div />;
 
 const panels = {
-  MeganavContentPlatform: MeganavContentPlatform,
+  MeganavContentProducts: MeganavContentProducts,
   MeganavContentUseCases: MeganavContentUseCases,
   MeganavContentCompany: MeganavContentCompany,
   MeganavContentDevelopers: MeganavContentDevelopers,
@@ -86,7 +86,7 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
       {notice && <Notice {...notice.props} config={notice.config} />}
       <div className="ui-meganav ui-grid-px">
         <div className="mr-24">
-          <Logo dataId="meganav-logo" href={urlBase} />
+          <Logo dataId="meganav-logo" href={urlBase} logoUrl={paths.logo} />
         </div>
 
         <MeganavItemsDesktop panels={panels} paths={paths} theme={theme} absUrl={absUrl} />

package/src/core/Meganav/component.rb

@@ -6,6 +6,7 @@ module AblyUi
     class Meganav < ViewComponent::Base
       include MeganavConfig
       include Util
+      include SharedAssets
       attr_reader :options, :login_link, :logo_link, :url_base
 
       renders_one :notice, AblyUi::Core::Notice
@@ -29,14 +30,14 @@ 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: 'Use Cases & Solutions',
-            short_label: 'Use Cases',
+            label: 'Solutions',
+            short_label: 'Solutions',
             id: 'use-cases-panel',
             class: 'AblyUi::Core::MeganavContentUseCases'
           },

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

@@ -16,26 +16,34 @@
           <% end %>
         </li>
         <li>
-          <%= link_to abs_url("/docs/key-concepts"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-lightbulb-col", size: "2.5rem")) %>
+          <%= link_to abs_url("/docs/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Concepts</p>
-              <p class="ui-meganav-media-copy">Read about core Ably platform concepts.</p>
+              <p class="ui-meganav-media-heading">Quickstart guides</p>
+              <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
             </div>
           <% end %>
         </li>
         <li>
-          <%= link_to abs_url("/docs/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
+          <%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
-              <p class="ui-meganav-media-heading">Quickstart guides</p>
-              <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
+              <p class="ui-meganav-media-heading">Integrations</p>
+              <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
+            </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">
       <ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
         <li>
@@ -56,9 +64,26 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/reference-guide-chat"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Chat apps reference guide</p>
+              <p class="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
+            </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
@@ -71,7 +96,7 @@
         </li>
         <li>
           <%= link_to "https://github.com/ably", class: "group ui-meganav-media py-12" do %>
-            <p class="ui-meganav-media-heading">Github</p>
+            <p class="ui-meganav-media-heading">GitHub</p>
           <% end %>
         </li>
         <li>

package/src/core/MeganavContentDevelopers/component.jsx

@@ -22,20 +22,29 @@ const MeganavContentDevelopers = ({ absUrl }) => (
             </a>
           </li>
           <li>
-            <a href={absUrl("/docs/key-concepts")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-lightbulb-col" size="2.5rem" />
+            <a href={absUrl("/docs/quick-start-guide")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-quickstart-guides-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Concepts</p>
-                <p className="ui-meganav-media-copy">Read about core Ably platform concepts.</p>
+                <p className="ui-meganav-media-heading">Quickstart guides</p>
+                <p className="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/docs/quick-start-guide")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-quickstart-guides-col" size="2.5rem" />
+            <a href={absUrl("/integrations")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-integrations-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Quickstart guides</p>
-                <p className="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
+                <p className="ui-meganav-media-heading">Integrations</p>
+                <p className="ui-meganav-media-copy">Find out more about Ably integrations. </p>
+              </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>
@@ -58,7 +67,25 @@ 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>
+          <li>
+            <a href={absUrl("/reference-guide-chat")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-chat-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Chat apps reference guide</p>
+                <p className="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
+              </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>
@@ -77,7 +104,7 @@ const MeganavContentDevelopers = ({ absUrl }) => (
           </li>
           <li>
             <a href="https://github.com/ably" className="group ui-meganav-media py-12">
-              <p className="ui-meganav-media-heading">Github</p>
+              <p className="ui-meganav-media-heading">GitHub</p>
             </a>
           </li>
           <li>
@@ -90,6 +117,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 → MeganavContentProducts}/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>
@@ -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>

package/src/core/{MeganavContentPlatform → MeganavContentProducts}/component.jsx

@@ -3,7 +3,7 @@ import T from "prop-types";
 
 import FeaturedLink from "../FeaturedLink/component.jsx";
 
-const MeganavContentPlatform = ({ paths, absUrl }) => (
+const MeganavContentProducts = ({ paths, absUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">
     <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
     <section className="grid grid-cols-12 ui-grid-gap-x w-full">
@@ -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>
@@ -23,57 +23,36 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
       </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">
-        <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-examples">
-          Our Examples
+        <h3 className="ui-meganav-overline" id="meganav-products-panel-list-examples">
+          Products
         </h3>
-        <ul className="mb-16" aria-labelledby="meganav-platform-panel-list-examples">
+        <ul className="mb-16" aria-labelledby="meganav-products-panel-list-examples">
           <li>
-            <a href={absUrl("/examples/avatar-stack")} className="group ui-meganav-media">
-              <p className="ui-meganav-media-heading">Avatar Stack</p>
-              <p className="ui-meganav-media-copy">See who is connected in a digital space.</p>
+            <a href={absUrl("/solutions/channels")} className="group ui-meganav-media">
+              <p className="ui-meganav-media-heading">Pub/Sub Channels</p>
+              <p className="ui-meganav-media-copy">Build infinitely scalable realtime applications.</p>
             </a>
           </li>
           <li>
-            <a href={absUrl("/examples/emoji-reactions")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Emoji Reactions</p>
-              <p className="ui-meganav-media-copy">React with an emoji to a message.</p>
+            <a href={absUrl("/spaces")} className="group ui-meganav-media">
+              <p className="ui-meganav-media-heading">Spaces (Beta)</p>
+              <p className="ui-meganav-media-copy">Create multi-user collaborative environments.</p>
             </a>
           </li>
           <li>
-            <a href={absUrl("/examples/activity-feed")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Activity Feed</p>
-              <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>
-              <p className="ui-meganav-media-copy">Track all cursors in realtime.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/examples/typing-indicator")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Typing Indicator</p>
-              <p className="ui-meganav-media-copy">See when a user is typing a message.</p>
+            <a href={absUrl("/livesync")} className="group ui-meganav-media">
+              <p className="ui-meganav-media-heading">LiveSync (Pre release)</p>
+              <p className="ui-meganav-media-copy">Keep clients in sync with any relational database.</p>
             </a>
           </li>
         </ul>
-        <FeaturedLink url={absUrl("/examples")} textSize="text-p3">
-          Explore all live examples
-        </FeaturedLink>
       </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-platform-panel-list-our-technology">
-          Our technology
+        <h3 className="ui-meganav-overline" id="meganav-products-panel-list-our-technology">
+          Technology
         </h3>
-        <ul className="mb-16" aria-labelledby="meganav-platform-panel-list-our-technology">
+        <ul className="mb-16" aria-labelledby="meganav-products-panel-list-our-technology">
           <li>
             <a href={absUrl("/four-pillars-of-dependability#performance")} className="ui-meganav-media group">
               <p className="ui-meganav-media-heading">Predictable performance</p>
@@ -115,7 +94,7 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
   </div>
 );
 
-MeganavContentPlatform.propTypes = {
+MeganavContentProducts.propTypes = {
   paths: T.shape({
     ablyStack: T.string,
     iconSprites: T.string,
@@ -123,4 +102,4 @@ MeganavContentPlatform.propTypes = {
   absUrl: T.func,
 };
 
-export default MeganavContentPlatform;
+export default MeganavContentProducts;

package/src/core/{MeganavContentPlatform → MeganavContentProducts}/component.rb

@@ -1,6 +1,6 @@
 module AblyUi
   module Core
-    class MeganavContentPlatform < ViewComponent::Base
+    class MeganavContentProducts < ViewComponent::Base
       include SharedAssets
       include Util