@ably/ui 8.2.1 → 8.5.0

package/core/styles.css

@@ -306,6 +306,10 @@
     @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32;
   }
 
+  .ui-grid-gap-x {
+    @apply gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32;
+  }
+
   .ui-grid-px {
     @apply px-24 sm:px-32 md:px-40 lg:px-64;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.2.1",
+  "version": "8.5.0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

package/src/core/Flash/component.jsx

@@ -167,5 +167,5 @@ BackendFlashes.propTypes = {
   flashes: T.arrayOf(T.arrayOf(T.string)),
 };
 
-export { reducerFlashes, FLASH_DATA_ID };
+export { reducerFlashes, FLASH_DATA_ID, Flashes };
 export default BackendFlashes;

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

@@ -141,7 +141,7 @@
           <%= link_to 'Open protocol policy', abs_url("/open-policy"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
-          <a href="https://www.notion.so/ably/Ably-Press-Center-551152f5be724d4495a7c2e29d9f51c7" target="_blank" rel="noopener" class="ui-footer-menu-row-link">Press & Media</a>
+         <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
           <%= link_to 'Contact us', abs_url("/contact"), class: "ui-footer-menu-row-link" %>

package/src/core/Footer/component.jsx

@@ -219,12 +219,7 @@ export default function Footer({ paths, urlBase }) {
               </a>
             </li>
             <li className="p-menu-row-snug">
-              <a
-                href="https://www.notion.so/ably/Ably-Press-Center-551152f5be724d4495a7c2e29d9f51c7"
-                rel="noopener noreferrer"
-                target="_blank"
-                className="ui-footer-menu-row-link"
-              >
+              <a href={absUrl("/press-center")} className="ui-footer-menu-row-link">
                 Press & Media
               </a>
             </li>

package/src/core/Meganav/component.css

@@ -46,6 +46,10 @@
     @apply bg-white rounded-t-none;
   }
 
+  .ui-meganav-panel-split-bg {
+    background: linear-gradient(to right, #fafafb 33%, white 33%, white 100%);
+  }
+
   .ui-meganav-link {
     @apply text-menu2 font-medium block;
     @apply mr-12 lg:mr-24 px-0 py-20;
@@ -74,6 +78,12 @@
     @apply px-24 md:px-32 lg:px-32 xl:px-64;
   }
 
+  /* 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;
+  }
+
   .ui-meganav-media {
     @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
   }
@@ -83,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-16;
+    @apply grid gap-x-8;
   }
 
   .ui-meganav-media-heading {

package/src/core/Meganav/component.json

@@ -29,9 +29,9 @@
     }
   },
   "panels": [
-    { "label": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
-    { "label": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
-    { "label": "Why Ably", "id": "why-ably-panel", "component": "MeganavContentWhyAbly" },
-    { "label": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }
+    { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
+    { "label": "Use Cases & Solutions", "shortLabel": "Use Cases", "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

@@ -16,7 +16,7 @@ import _absUrl from "../url-base";
 
 import MeganavContentPlatform from "../MeganavContentPlatform/component.jsx";
 import MeganavContentUseCases from "../MeganavContentUseCases/component.jsx";
-import MeganavContentWhyAbly from "../MeganavContentWhyAbly/component.jsx";
+import MeganavContentCompany from "../MeganavContentCompany/component.jsx";
 import MeganavContentDevelopers from "../MeganavContentDevelopers/component.jsx";
 import MeganavSearch from "../MeganavSearch/component.jsx";
 
@@ -60,7 +60,7 @@ const SignInPlaceholder = () => <div />;
 const panels = {
   MeganavContentPlatform: MeganavContentPlatform,
   MeganavContentUseCases: MeganavContentUseCases,
-  MeganavContentWhyAbly: MeganavContentWhyAbly,
+  MeganavContentCompany: MeganavContentCompany,
   MeganavContentDevelopers: MeganavContentDevelopers,
 };
 

package/src/core/Meganav/component.rb

@@ -30,21 +30,25 @@ module AblyUi
         [
           {
             label: 'Platform',
+            short_label: 'Platform',
             id: 'platform-panel',
             class: 'AblyUi::Core::MeganavContentPlatform'
           },
           {
-            label: 'Use Cases',
+            label: 'Use Cases & Solutions',
+            short_label: 'Use Cases',
             id: 'use-cases-panel',
             class: 'AblyUi::Core::MeganavContentUseCases'
           },
           {
-            label: 'Why Ably',
-            id: 'why-ably-panel',
-            class: 'AblyUi::Core::MeganavContentWhyAbly'
+            label: 'Company',
+            short_label: 'Company',
+            id: 'company-panel',
+            class: 'AblyUi::Core::MeganavContentCompany'
           },
           {
             label: 'Developers',
+            short_label: 'Developers',
             id: 'developers-panel',
             class: 'AblyUi::Core::MeganavContentDevelopers'
           }

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

@@ -1,5 +1,5 @@
-<div class="hidden" data-id="meganav-why-ably-panel-blog-section">
-  <h3 class="ui-meganav-overline" id="meganav-why-ably-panel-recent-blog-posts">Blog</h3>
-  <ul class="mb-8" aria-labelledby="meganav-why-ably-panel-recent-blog-posts" data-id="meganav-why-ably-panel-recent-blog-posts"></ul>
-  <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/blog"))) do %>More from our Blog<% end %>
+<div class="hidden 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" data-id="meganav-company-panel-blog-section">
+  <h3 class="ui-meganav-overline" id="meganav-company-panel-recent-blog-posts">Blog</h3>
+  <ul class="mb-8" aria-labelledby="meganav-company-panel-recent-blog-posts" data-id="meganav-company-panel-recent-blog-posts"></ul>
+  <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/blog"), text_size: 'text-p3')) do %>More from our Blog<% end %>
 </div>

package/src/core/MeganavBlogPostsList/component.js

@@ -26,8 +26,8 @@ const template = ({ link, title, pubDate }) => {
 export default () => {
   connectState(selectRecentBlogPosts, (recentBlogPosts) => {
     if (Array.isArray(recentBlogPosts) && recentBlogPosts.length > 0) {
-      const sections = queryIdAll("meganav-why-ably-panel-blog-section");
-      const containers = queryIdAll("meganav-why-ably-panel-recent-blog-posts");
+      const sections = queryIdAll("meganav-company-panel-blog-section");
+      const containers = queryIdAll("meganav-company-panel-recent-blog-posts");
 
       Array.from(containers).forEach((container) => {
         const fragment = document.createDocumentFragment();

package/src/core/MeganavBlogPostsList/component.jsx

@@ -5,11 +5,11 @@ import FeaturedLink from "../FeaturedLink/component.jsx";
 
 const MeganavBlogPostsList = ({ recentBlogPosts, absUrl }) =>
   recentBlogPosts ? (
-    <div>
-      <h3 className="ui-meganav-overline" id="meganav-why-ably-panel-list-blog">
+    <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" id="meganav-company-panel-list-blog">
         Blog
       </h3>
-      <ul className="mb-8" aria-labelledby="meganav-why-ably-panel-list-blog">
+      <ul className="mb-8" aria-labelledby="meganav-company-panel-list-blog">
         {recentBlogPosts.map((post) => (
           <li key={post.link}>
             <a href={post.link} className="ui-meganav-media group">
@@ -20,7 +20,9 @@ const MeganavBlogPostsList = ({ recentBlogPosts, absUrl }) =>
         ))}
       </ul>
 
-      <FeaturedLink url={absUrl("/blog")}>More from our Blog</FeaturedLink>
+      <FeaturedLink url={absUrl("/blog")} textSize="text-p3">
+        More from our Blog
+      </FeaturedLink>
     </div>
   ) : null;
 

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

@@ -0,0 +1,81 @@
+<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" id="meganav-company-panel-list-why-companies">Why companies choose Ably</h3>
+      <ul aria-labelledby="meganav-company-panel-list-why-companies">
+        <li>
+          <%= link_to abs_url("/customers"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-customers-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Customers</p>
+              <p class="ui-meganav-media-copy">Ably supports customers across multiple industries.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/case-studies"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-case-studies-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Case studies</p>
+              <p class="ui-meganav-media-copy">Discover how customers are benefiting from Ably.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/compare"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-compare-tech-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Compare our tech</p>
+              <p class="ui-meganav-media-copy">Choose the right realtime service.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/aws"), class: "ui-meganav-media-with-image group" do %>
+            <%= image_tag(aws_logo_path, alt: "AWS logo") %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Partners</p>
+              <p class="ui-meganav-media-copy">Ably collaborates and integrates with AWS.</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-company-panel-list-why-companies">
+        <li>
+          <%= link_to abs_url("/resources"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-resources-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Resources</p>
+              <p class="ui-meganav-media-copy">Learn more about realtime with our handy resources.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/about"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-about-ably-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">About Ably</p>
+              <p class="ui-meganav-media-copy">Find out more about Ably’s mission.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/careers"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-careers-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Careers</p>
+              <p class="ui-meganav-media-copy">Discover our open roles and core Ably values.</p>
+            </div>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+
+    <%= render(AblyUi::Core::MeganavBlogPostsList.new(url_base: url_base)) %>
+  </section>
+  <div class="ui-meganav-content-spacer"></div>
+</div>

package/src/core/MeganavContentCompany/component.jsx

@@ -0,0 +1,108 @@
+import React from "react";
+import T from "prop-types";
+
+import MeganavBlogPostsList from "../MeganavBlogPostsList/component.jsx";
+import ConnectStateWrapper from "../ConnectStateWrapper/component.jsx";
+
+import { selectRecentBlogPosts } from "../remote-blogs-posts";
+
+import Icon from "../Icon/component.jsx";
+
+const MeganavContentCompany = ({ paths, absUrl }) => {
+  const BlogPostsList = ConnectStateWrapper(MeganavBlogPostsList, { recentBlogPosts: selectRecentBlogPosts });
+
+  return (
+    <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" id="meganav-company-panel-list-why-companies">
+            Why companies choose Ably
+          </h3>
+          <ul aria-labelledby="meganav-company-panel-list-why-companies">
+            <li>
+              <a href={absUrl("/customers")} className="ui-meganav-media-with-image group">
+                <Icon name="icon-display-customers-col" size="2.5rem" />
+                <div className="flex flex-col justify-center">
+                  <p className="ui-meganav-media-heading">Customers</p>
+                  <p className="ui-meganav-media-copy">Ably supports customers across multiple industries.</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href={absUrl("/case-studies")} className="ui-meganav-media-with-image group">
+                <Icon name="icon-display-case-studies-col" size="2.5rem" />
+                <div className="flex flex-col justify-center">
+                  <p className="ui-meganav-media-heading">Case studies</p>
+                  <p className="ui-meganav-media-copy">Discover how customers are benefiting from Ably.</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href={absUrl("/compare")} className="ui-meganav-media-with-image group">
+                <Icon name="icon-display-compare-tech-col" size="2.5rem" />
+                <div className="flex flex-col justify-center">
+                  <p className="ui-meganav-media-heading">Compare our tech</p>
+                  <p className="ui-meganav-media-copy">Choose the right realtime service.</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href={absUrl("/aws")} className="ui-meganav-media-with-image group">
+                <img src={paths.awsLogo} alt="AWS logo" />
+                <div className="flex flex-col justify-center">
+                  <p className="ui-meganav-media-heading">Partners</p>
+                  <p className="ui-meganav-media-copy">Ably collaborates and integrates with AWS.</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">
+          <ul className="md:mt-40" aria-labelledby="meganav-company-panel-list-why-companies">
+            <li>
+              <a href={absUrl("/resources")} className="ui-meganav-media-with-image group">
+                <Icon name="icon-display-resources-col" size="2.5rem" />
+                <div className="flex flex-col justify-center">
+                  <p className="ui-meganav-media-heading">Resources</p>
+                  <p className="ui-meganav-media-copy">Learn more about realtime with our handy resources.</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href={absUrl("/about")} className="ui-meganav-media-with-image group">
+                <Icon name="icon-display-about-ably-col" size="2.5rem" />
+                <div className="flex flex-col justify-center">
+                  <p className="ui-meganav-media-heading">About Ably</p>
+                  <p className="ui-meganav-media-copy">Find out more about Ably’s mission.</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href={absUrl("/careers")} className="ui-meganav-media-with-image group">
+                <Icon name="icon-display-careers-col" size="2.5rem" />
+                <div className="flex flex-col justify-center">
+                  <p className="ui-meganav-media-heading">Careers</p>
+                  <p className="ui-meganav-media-copy">Discover our open roles and core Ably values.</p>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <BlogPostsList absUrl={absUrl} />
+      </section>
+      <div className="ui-meganav-content-spacer"></div>
+    </div>
+  );
+};
+
+MeganavContentCompany.propTypes = {
+  absUrl: T.func,
+  paths: T.shape({
+    awsLogo: T.string,
+  }),
+};
+
+export default MeganavContentCompany;

package/src/core/{MeganavContentWhyAbly → MeganavContentCompany}/component.rb

@@ -1,7 +1,8 @@
 module AblyUi
   module Core
-    class MeganavContentWhyAbly < ViewComponent::Base
+    class MeganavContentCompany < ViewComponent::Base
       include Util
+      include SharedAssets
 
       attr_reader :url_base
 

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

@@ -1,83 +1,104 @@
-<section class="ui-meganav-content ui-grid-gap md:grid-cols-3">
-  <div>
-    <h3 class="ui-meganav-overline md:mb-8">Documentation</h3>
-    <div class="relative mb-16">
-      <%= tag.form class: "relative", action: abs_url("/search"), method: "get" do %>
-        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css: "absolute top-8 left-8 pt-1 mt-1")) %>
-        <input type="search" name="q" class="ui-input pl-48" placeholder="Search docs" />
-      <% end %>
+<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">
+        Explore
+      </h3>
+      <ul aria-labelledby="meganav-developers-panel-explore">
+        <li>
+          <%= link_to abs_url("/docs"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-docs-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Documentation</p>
+              <p class="ui-meganav-media-copy">Technical guides to help you build with Ably.</p>
+            </div>
+          <% 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")) %>
+            <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>
+            </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")) %>
+            <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>
+            </div>
+          <% end %>
+        </li>
+      </ul>
     </div>
-    <p class="text-p1 font-medium text-cool-black mb-20">
-      Docs, quick start guides, tutorials, and API reference to help you start building with Ably’s platform and APIs.
-    </p>
 
-    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/docs"))) do %>Visit Documentation<% end %>
-  </div>
-
-  <div>
-    <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">Explore</h3>
-    <ul aria-labelledby="meganav-developers-panel-explore">
-      <li>
-        <%= link_to abs_url("/integrations"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Third-party integrations & plugins</p>
-          <p class="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/protocols"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Multi-protocol messaging</p>
-          <p class="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/hub"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Streaming data sources</p>
-          <p class="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
-         <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/periodic-table-of-realtime"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">The Periodic Table of Realtime</p>
-          <p class="ui-meganav-media-copy">A compendium for all things realtime and event-driven.</p>
-         <% end %>
-      </li>
-    </ul>
-  </div>
-
-  <div>
-    <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">Quick links</h3>
-    <ul aria-labelledby="meganav-developers-panel-quick-links">
-      <li>
-        <%= link_to abs_url("/download"), class: "group ui-meganav-media py-12" do %>
-          <p class="ui-meganav-media-heading">Download an SDK</p>
-        <% end %>
-      </li>
-
-      <li>
-        <a href="https://changelog.ably.com/" class="group ui-meganav-media py-12">
-          <p class="ui-meganav-media-heading">Platform changelog</p>
-        </a>
-      </li>
-
-      <li>
-        <%= link_to abs_url("/support"), class: "group ui-meganav-media py-12" do %>
-          <p class="ui-meganav-media-heading">Support & FAQs</p>
-        <% end %>
-      </li>
+    <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>
+          <%= link_to abs_url("/download"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-sdks-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">SDKs</p>
+              <p class="ui-meganav-media-copy">Download an SDK to help you build realtime apps faster.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/tutorials"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-tutorials-demos-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Tutorials & Demos</p>
+              <p class="ui-meganav-media-copy">Get stuck in with our hands-on resources. </p>
+            </div>
+          <% end %>
+        </li>
+      </ul>
+    </div>
 
-      <li>
-        <a href="https://status.ably.com/" class="group ui-meganav-media py-12">
-          <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"
-            ></iframe>
-          </p>
-        </a>
-      </li>
-    </ul>
-  </div>
-</section>
+    <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
+      </h3>
+      <ul aria-labelledby="meganav-developers-panel-quick-links">
+        <li>
+          <%= link_to "https://discord.gg/jwBPhEZ9g5", class: "group ui-meganav-media py-12" do %>
+            <p class="ui-meganav-media-heading">Discord</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to "https://github.com/ably", class: "group ui-meganav-media py-12" do %>
+            <p class="ui-meganav-media-heading">Github</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to "https://changelog.ably.com/", class: "group ui-meganav-media py-12" do %>
+            <p class="ui-meganav-media-heading">Changelog</p>
+          <% end %>
+        </li>
+        <li>
+          <a href="https://status.ably.com/" class="group ui-meganav-media py-12">
+            <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"
+              ></iframe>
+            </p>
+          </a>
+        </li>
+        <li>
+          <%= link_to abs_url("/support"), class: "group ui-meganav-media py-12" do %>
+            <p class="ui-meganav-media-heading">Support & FAQs</p>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+  </section>
+  <div class="ui-meganav-content-spacer"></div>
+</div>