@ably/ui 8.7.0-dev.7021bee → 8.7.0-dev.7072b07

package/src/core/Footer/component.jsx

@@ -9,22 +9,21 @@ export default function Footer({ paths, urlBase }) {
 
   return (
     <footer className="bg-light-grey font-sans antialiased" data-id="footer">
-      <div className="max-w-screen-xl mx-auto py-32 sm:py-40 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
+      <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>
           </div>
-
-          <div className="grid grid-cols-4">
-            <p className="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
+          <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">
               Easily power any realtime experience in your application via a simple API that handles everything realtime.
             </p>
           </div>
 
-          <ul className="grid gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32 sm:grid-cols-2 md:grid-cols-1">
+          <ul className="grid grid-cols-1">
             <li className="p-menu-row-snug">
-              <a href={absUrl("/pub-sub-messaging")} className="ui-footer-menu-row-link">
+              <a href={absUrl("/solutions/channels")} className="ui-footer-menu-row-link">
                 Pub/sub messaging
               </a>
             </li>
@@ -43,15 +42,10 @@ export default function Footer({ paths, urlBase }) {
                 Multiple protocol messaging
               </a>
             </li>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/hub")} className="ui-footer-menu-row-link">
-                Streaming data sources
-              </a>
-            </li>
           </ul>
         </div>
 
-        <div className="col-span-full sm:col-span-3 md:col-span-1">
+        <div className="col-span-full xs:col-span-3 md:col-span-1">
           <h2 className="ui-footer-col-title">Ably is for</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -84,11 +78,6 @@ export default function Footer({ paths, urlBase }) {
                 Healthcare
               </a>
             </li>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/hub")} className="ui-footer-menu-row-link">
-                Streaming data sources
-              </a>
-            </li>
             <li className="p-menu-row-snug">
               <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-footer-menu-row-link">
                 eCommerce &amp; Retail
@@ -112,7 +101,7 @@ export default function Footer({ paths, urlBase }) {
           </ul>
         </div>
 
-        <div className="col-span-full sm:col-span-3 md:col-span-1">
+        <div className="col-span-full xs:col-span-3 md:col-span-1">
           <h2 className="ui-footer-col-title">Developers</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -145,16 +134,23 @@ 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" src="https://status.ably.com/embed/icon" allowtransparency="true" frameBorder="0" scrolling="no"></iframe>
+              <iframe
+                className="w-20 h-20 mb-2"
+                src="https://status.ably.com/embed/icon"
+                allowtransparency="true"
+                frameBorder="0"
+                scrolling="no"
+                title="System Status"
+              ></iframe>
             </li>
           </ul>
         </div>
 
-        <div className="col-span-full sm:col-span-3 md:col-span-1">
+        <div className="col-span-full xs:col-span-3 md:col-span-1">
           <h2 className="ui-footer-col-title">WHY ABLY</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -190,7 +186,7 @@ export default function Footer({ paths, urlBase }) {
           </ul>
         </div>
 
-        <div className="col-span-full sm:col-span-3 md:col-span-1">
+        <div className="col-span-full xs:col-span-3 md:col-span-1">
           <h2 className="ui-footer-col-title">ABOUT</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -231,14 +227,87 @@ export default function Footer({ paths, urlBase }) {
           </ul>
         </div>
       </div>
-
       <div className="max-w-screen-xl ui-grid-px mx-auto">
-        <hr className="border-t border-mid-grey" />
+        <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-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="">
+              <div className="flex pb-24">
+                <a className="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on X">
+                  <Icon name="icon-social-x" size="1.5rem" />
+                </a>
+                <a
+                  className="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
+                  href="https://www.linkedin.com/company/ably-realtime"
+                  title="Ably on LinkedIn"
+                >
+                  <Icon name="linkedin" size="1.5rem" />
+                </a>
+                <a className="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/" title="Ably on Github">
+                  <Icon name="github" size="1.5rem" />
+                </a>
+                <a className="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5" title="Ably on Discord">
+                  <Icon name="discord" size="1.5rem" />
+                </a>
+              </div>
+            </div>
+            {/* GLASSDOOR on SM and Above */}
+            <div className="xs:hidden sm:block ui-footer-glassdoor">
+              <div className="flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24">
+                <a
+                  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+                  className="h-24 text-cool-black hover:text-icon-glassdoor"
+                  title="Ably reviews on glassdoor"
+                >
+                  <Icon name="glassdoor" size="1.5rem" />
+                </a>
+                <div className="pl-16 text-menu3 font-light">
+                  <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
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* GlassDoor on XS ONLY */}
+          <div className="xs:block sm:hidden">
+            <div className="border-t border-mid-grey w-full"></div>
+            <div className="flex py-24">
+              <a
+                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">
+                <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
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <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 2023" />
+          <img className="mr-24 h-80" src={paths.bestSupport} alt="Best Support 2023" />
+          <img className="mr-24 h-80" src={paths.fastestImplementation} alt="Fastest Implementation 2023" />
+          <img className="mr-24 h-80" src={paths.highestPerformer} alt="High Performer 2023" />
+        </div>
       </div>
 
-      <div className="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px grid-cols-2">
-        <div className="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
-          <div className="inline-flex">
+      <div className="max-w-screen-xl ui-grid-px mx-auto">
+        <hr className="border-t border-mid-grey my-0" />
+      </div>
+      <div className="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px">
+        <div className="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
+          <div className="flex">
             <a href={absUrl("/privacy")} className="pr-24 ui-footer-link">
               Cookies
             </a>
@@ -252,40 +321,36 @@ export default function Footer({ paths, urlBase }) {
               Privacy
             </a>
           </div>
-
-          <div className="pt-32 flex items-center">
-            <a className="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime">
-              <Icon name="twitter" size="1.5rem" />
-            </a>
-            <a className="h-24 pr-24 text-cool-black hover:text-icon-linkedin" href="https://www.linkedin.com/company/ably-realtime">
-              <Icon name="linkedin" size="1.5rem" />
-            </a>
-            <a className="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/">
-              <Icon name="github" size="1.5rem" />
-            </a>
-            <a className="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5">
-              <Icon name="discord" size="1.5rem" />
-            </a>
-            <div className="border-l border-mid-grey h-40"></div>
-            <a
-              className="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"
-              href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
-            >
-              <Icon name="glassdoor" size="1.5rem" />
-            </a>
-            <div className="pl-16 text-menu3 font-light">
-              <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
-              </a>
-              &nbsp;at Glassdoor
+        </div>
+        <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>
+            </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>
+            </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>
+            </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>
             </div>
           </div>
-        </div>
-
-        <div className="md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto">
-          <img className="mr-24 w-96 h-96" src={paths.rocketList} alt="Rocket List 2021" />
-          <img className="w-96 h-96" src={paths.flexibleCompanies} alt="Flexible Companies 2021" />
         </div>
       </div>
     </footer>
@@ -295,8 +360,10 @@ export default function Footer({ paths, urlBase }) {
 Footer.propTypes = {
   paths: T.shape({
     ablyStack: T.string,
-    rocketList: T.string,
-    flexibleCompanies: T.string,
+    highestPerformer: T.string,
+    highestUserAdoption: T.string,
+    bestSupport: T.string,
+    fastestImplementation: T.string,
   }),
   urlBase: T.string,
 };

package/src/core/Meganav/component.css

@@ -93,7 +93,7 @@
     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 {

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,

package/src/core/Meganav/component.rb

@@ -30,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>
@@ -57,17 +65,25 @@
           <% end %>
         </li>
         <li>
-          <%= 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")) %>
+          <%= 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">Integrations</p>
-              <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
+              <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

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,16 +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("/integrations")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-integrations-col" size="2.5rem" />
+            <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">Integrations</p>
-                <p className="ui-meganav-media-copy">Find out more about Ably integrations. </p>
+                <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>
@@ -99,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

@@ -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>