@ably/ui 8.2.1 → 8.3.0

package/core/MeganavContentPlatform.jsx

@@ -321,10 +321,14 @@ __webpack_require__.r(__webpack_exports__);
 var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   var paths = _ref.paths,
       absUrl = _ref.absUrl;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
-    className: "ui-meganav-content ui-grid-gap sm:grid-cols-2 md:grid-cols-3"
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "sm:col-span-full md:col-span-1"
+    className: "ui-meganav-content-spacer bg-extra-light-grey"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
+    className: "grid grid-cols-12 ui-grid-gap-x w-full"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "flex mb-20"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
@@ -333,13 +337,20 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline ml-24"
   }, "The Ably Platform")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "text-p2 font-medium text-cool-black mb-8"
+    className: "text-p2 font-medium text-cool-black mb-24",
+    style: {
+      maxWidth: "330px"
+    }
   }, "Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything realtime, and lets you focus on your code."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/platform")
-  }, "Explore how it works")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    url: absUrl("/platform"),
+    textSize: "text-p2"
+  }, "Explore how it works")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("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"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-platform-panel-list-examples"
-  }, "Examples"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+  }, "Our Examples"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    className: "mb-16",
     "aria-labelledby": "meganav-platform-panel-list-examples"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/examples/avatar-stack"),
@@ -384,12 +395,15 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   }, "Typing Indicator"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "See when a user is typing a message.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/examples")
-  }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    url: absUrl("/examples"),
+    textSize: "text-p3"
+  }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("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"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-platform-panel-list-our-technology"
   }, "Our technology"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "mb-8",
+    className: "mb-16",
     "aria-labelledby": "meganav-platform-panel-list-our-technology"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/four-pillars-of-dependability#performance"),
@@ -398,37 +412,40 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
     className: "ui-meganav-media-heading"
   }, "Predictable performance"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "We provide predictability so you can be confident your realtime application will always perform as expected."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "A low-latency and high-throughput global network."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/four-pillars-of-dependability#integrity"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Guaranteed ordering & delivery"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "We guarantee in-order data delivery, even after disconnections."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Data is delivered - in order - even after disconnections."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/four-pillars-of-dependability#reliability"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Fault tolerant infrastructure"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Redundant at regional and global levels with 99.999% uptime SLAs."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Redundancy is built in at global and regional levels."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/four-pillars-of-dependability#availability"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "High scalability & availability"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Elastic, battle-tested global infrastructure for massive scale."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Built for scale with legitimate 99.999% uptime SLAs."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/network"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Global edge network"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "An edge network of 15 core routing datacenters and 200+ PoPs.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/four-pillars-of-dependability")
-  }, "Explore our technology")));
+  }, "An edge network of 15 core routing datacenters and 205+ PoPs.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    url: absUrl("/four-pillars-of-dependability"),
+    textSize: "text-p3"
+  }, "Explore Four Pillars of Dependability"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "ui-meganav-content-spacer"
+  }));
 };
 
 MeganavContentPlatform.propTypes = {

package/core/MeganavContentUseCases.jsx

@@ -11,6 +11,59 @@
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ 9008:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9281);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5697);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+var _excluded = ["name", "size", "color", "additionalCSS"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+var Icon = function Icon(_ref) {
+  var name = _ref.name,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "0.75rem" : _ref$size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "" : _ref$color,
+      _ref$additionalCSS = _ref.additionalCSS,
+      additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
+      additionalAttributes = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", _extends({
+    className: "".concat(color, " ").concat(additionalCSS),
+    style: {
+      width: size,
+      height: size
+    }
+  }, additionalAttributes), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("use", {
+    xlinkHref: "#sprite-".concat(name)
+  }));
+};
+
+Icon.propTypes = {
+  name: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string.isRequired),
+  size: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  color: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Icon);
+
+/***/ }),
+
 /***/ 2703:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -210,105 +263,144 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5697);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9008);
+
 
 
 
 var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
   var absUrl = _ref.absUrl;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
-    className: "ui-meganav-content ui-grid-gap md:grid-cols-2 gap-y-0 md:gap-y-32"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "flex max-w-screen-xl mx-auto"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "ui-meganav-content-spacer bg-extra-light-grey"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
+    className: "grid grid-cols-12 ui-grid-gap-x w-full"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
-    id: "meganav-use-cases-panel-industry-use-cases"
-  }, "By use case"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    id: "meganav-use-cases-panel-use-cases"
+  }, "Use cases"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     "aria-labelledby": "meganav-use-cases-panel-industry-use-cases"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/edtech"),
-    className: "ui-meganav-media group"
+    href: absUrl("/solutions/chat"),
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    name: "icon-display-chat-stack-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "flex flex-col justify-center"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "EdTech"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Chat"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Deliver interactive learning experiences like multi-user classrooms with chat."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Deliver highly reliable chat experiences at scale. ")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/virtual-events"),
-    className: "ui-meganav-media group"
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    name: "icon-display-virtual-events-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "flex flex-col justify-center"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Virtual Events"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Power engaging virtual events with interactive realtime features."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/sports-and-media"),
+  }, "Power engaging virtual events with realtime features.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("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"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    className: "ui-meganav-overline",
+    id: "meganav-use-cases-panel-industry"
+  }, "Industry"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    "aria-labelledby": "meganav-use-cases-panel-industry"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/edtech"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Sports & Media"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "EdTech"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Deliver global realtime experiences to keep fans informed, engaged, entertained."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Deliver interactive learning experiences."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/fintech"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Fintech"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Deliver fast, personalised fintech data in realtime to mobile & web customers."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/gaming"),
-    className: "ui-meganav-media group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "ui-meganav-media-heading"
-  }, "Gaming"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "ui-meganav-media-copy"
-  }, "Power interactive gaming experiences that are wicked fast and utterly reliable."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Deliver personalised financial data in realtime."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/automotive-logistics-and-mobility"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Automotive, Logistics, & Mobility"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Power asset tracking, live transit updates, race-critical diagnostics, and more."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "md:mt-40"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Power diagnostics, order tracking and more."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/b2b-platforms"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "B2B Platforms"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Empower customers with realtime technology that gives them a competitive edge."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Empower your customers with realtime solutions."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/healthcare"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Healthcare"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Healthcare (HIPAA)"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Provide HIPAA-compliant realtime apps healthcare professionals can depend on."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Provide trustworthy, HIPAA-compliant realtime apps."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/ecommerce-and-retail"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "eCommerce & Retail"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Enable realtime pricing, inventory, and transactions to enrich user experiences."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/iot-and-connected-devices"),
+  }, "Enrich customer experiences with realtime updates."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/sports-and-media"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "IoT & Connected Devices"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Sports, Media & Audience Engagement"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Monitor and control global IoT deployments of any kind in realtime."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/asset-tracking"),
+  }, "Deliver engaging global realtime experiences."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/gaming"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Asset Tracking"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Gaming"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Power ultra fast and reliable gaming experiences."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/iot-and-connected-devices"),
+    className: "ui-meganav-media group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "IoT & Connected Devices"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Track assets in realtime with a solution optimized for last mile logistics, food delivery applications, and urban mobility services."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Monitor and control global IoT deployments in realtime."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("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"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    className: "ui-meganav-overline",
+    id: "meganav-use-cases-panel-solutions"
+  }, "Solutions"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    "aria-labelledby": "meganav-use-cases-panel-solutions"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/extend-kafka-to-the-edge"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Extend Kafka to the edge"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Enhance and reliably expand Kafka's event streaming capabilities beyond your private network."))))));
+  }, "Reliably expand Kafka\u2019s event streaming beyond your private network."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/asset-tracking"),
+    className: "ui-meganav-media group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Asset Tracking"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Track assets in realtime with a solution optimised for last mile logistics.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "ui-meganav-content-spacer"
+  }));
 };
 
 MeganavContentUseCases.propTypes = {

package/core/MeganavControl/component.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{A:()=>n,n:()=>i});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))},i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var i=t[n];if(void 0!==i)return i.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>i});var e=r(9581);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const i=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),i=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),o=function(e){return"search"===e.dataset.control},a=function(e,n,o){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(i,")")).matches&&!r.some((function(e){return e===document.activeElement}))&&!function(){var e=document.querySelector('[data-id="meganav-panel"]#panel-search');if(e)return!e.classList.contains("invisible")}()){var a,c=["invisible","visible"];(a=n.classList).replace.apply(a,function(e){if(Array.isArray(e))return t(e)}(u=o?c:c.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),e.setAttribute("aria-expanded",o)}var u};return r.map((function(t){var i,c,u=t.parentNode,l=document.querySelector("#".concat(t.getAttribute("aria-controls"))),s=function(t,i){return function(){if(r.forEach((function(e){return e!==t&&e.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==i&&e.classList.replace("visible","invisible")})),"true"===t.getAttribute("aria-expanded")?(t.setAttribute("aria-expanded",!1),i.classList.replace("visible","invisible")):(t.setAttribute("aria-expanded",!0),i.classList.replace("invisible","visible")),o(t)){var a=(0,e.A)("meganav-search-input",i);if(!a)return;a.focus()}else t.focus()}}(t,l);return t.addEventListener("click",s),o(t)||(i=function(e,t){return function(){return a(e,t,!0)}}(t,l),c=function(e,t){return function(){return a(e,t,!1)}}(t,l),u.addEventListener("mouseenter",i),u.addEventListener("mouseleave",c)),[{teardown:function(){i&&c&&(u.removeEventListener("mouseenter",i),u.removeEventListener("mouseleave",c)),t.removeEventListener("click",s)},clear:function(){t.setAttribute("aria-expanded",!1),l.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{A:()=>n,n:()=>o});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))},o=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>o});var e=r(9581);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const o=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),o=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),a=function(e){return"search"===e.dataset.control},i=function(e,n,a){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(o,")")).matches&&!r.some((function(e){return e===document.activeElement}))&&!function(){var e=document.querySelector('[data-id="meganav-panel"]#panel-search');if(e)return!e.classList.contains("invisible")}()){var i,c=["invisible","visible"];(i=n.classList).replace.apply(i,function(e){if(Array.isArray(e))return t(e)}(u=a?c:c.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),e.setAttribute("aria-expanded",a),e.dataset.hover=a}var u};return r.map((function(t){var o,c,u=t.parentNode,s=document.querySelector("#".concat(t.getAttribute("aria-controls"))),l=function(t,o){return function(){r.forEach((function(e){return e!==t&&e.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==o&&e.classList.replace("visible","invisible")}));var i=t.getAttribute("aria-expanded"),c="true"===t.dataset.hover;if("true"!==i||c?(t.setAttribute("aria-expanded",!0),o.classList.replace("invisible","visible")):(t.setAttribute("aria-expanded",!1),o.classList.replace("visible","invisible")),c&&(t.dataset.hover=!1),a(t)){var u=(0,e.A)("meganav-search-input",o);if(!u)return;u.focus()}else t.focus()}}(t,s);return t.addEventListener("click",l),a(t)||(o=function(e,t){return function(){return i(e,t,!0)}}(t,s),c=function(e,t){return function(){return i(e,t,!1)}}(t,s),u.addEventListener("mouseenter",o),u.addEventListener("mouseleave",c)),[{teardown:function(){o&&c&&(u.removeEventListener("mouseenter",o),u.removeEventListener("mouseleave",c)),t.removeEventListener("click",l)},clear:function(){t.setAttribute("aria-expanded",!1),s.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));

package/core/MeganavControl.jsx

@@ -270,6 +270,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
       theme = _ref.theme,
       additionalCSS = _ref.additionalCSS;
@@ -279,7 +280,7 @@ var MeganavControl = function MeganavControl(_ref) {
     className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     name: "icon-gui-disclosure-arrow",
     color: "text-cool-black",
@@ -290,6 +291,7 @@ var MeganavControl = function MeganavControl(_ref) {
 
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)

package/core/MeganavControlMobilePanelClose.jsx

@@ -269,7 +269,9 @@ __webpack_require__.r(__webpack_exports__);
 
 
 var MeganavControlMobilePanelClose = function MeganavControlMobilePanelClose(_ref) {
-  var ariaControls = _ref.ariaControls;
+  var ariaControls = _ref.ariaControls,
+      _ref$displayHr = _ref.displayHr,
+      displayHr = _ref$displayHr === void 0 ? true : _ref$displayHr;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "mx-24 md:mx-32"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
@@ -284,13 +286,14 @@ var MeganavControlMobilePanelClose = function MeganavControlMobilePanelClose(_re
     color: "text-cool-black",
     size: "1.5rem",
     additionalCSS: "relative -top-1 transform rotate-180"
-  }), "Back"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("hr", {
+  }), "Back"), displayHr ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("hr", {
     className: "ui-meganav-hr"
-  }));
+  }) : null);
 };
 
 MeganavControlMobilePanelClose.propTypes = {
-  ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
+  ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  displayHr: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavControlMobilePanelClose);
 })();

package/core/MeganavItemsDesktop.jsx

@@ -82,6 +82,7 @@ Icon.propTypes = {
 
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
       theme = _ref.theme,
       additionalCSS = _ref.additionalCSS;
@@ -91,7 +92,7 @@ var MeganavControl = function MeganavControl(_ref) {
     className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     name: "icon-gui-disclosure-arrow",
     color: "text-cool-black",
@@ -102,6 +103,7 @@ var MeganavControl = function MeganavControl(_ref) {
 
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
@@ -225,7 +227,7 @@ module.exports = ReactPropTypesSecret;
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"h":[{"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"}]}');
+module.exports = JSON.parse('{"h":[{"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"}]}');
 
 /***/ }),
 
@@ -334,14 +336,20 @@ var MeganavDesktopItems = function MeganavDesktopItems(_ref) {
     "data-id": "meganav-items-desktop"
   }, _Meganav_component_json__WEBPACK_IMPORTED_MODULE_2__/* .panels.map */ .h.map(function (panel) {
     var PanelComponent = panels[panel.component];
+    var bgCSS = ["platform-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       className: "ui-meganav-item",
       key: panel.id
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
       theme: theme,
-      ariaControls: panel.id
-    }, panel.label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "ui-meganav-panel invisible",
+      ariaControls: panel.id,
+      ariaLabel: panel.label
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+      className: "hidden lg:inline"
+    }, panel.label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+      className: "lg:hidden"
+    }, panel.shortLabel)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "ui-meganav-panel invisible ".concat(bgCSS),
       id: panel.id,
       "data-id": "meganav-panel"
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PanelComponent, {

package/core/MeganavItemsMobile.jsx

@@ -177,7 +177,9 @@ MeganavControlMobileDropdown.propTypes = {
 
 
 var MeganavControlMobilePanelClose = function MeganavControlMobilePanelClose(_ref) {
-  var ariaControls = _ref.ariaControls;
+  var ariaControls = _ref.ariaControls,
+      _ref$displayHr = _ref.displayHr,
+      displayHr = _ref$displayHr === void 0 ? true : _ref$displayHr;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "mx-24 md:mx-32"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
@@ -192,13 +194,14 @@ var MeganavControlMobilePanelClose = function MeganavControlMobilePanelClose(_re
     color: "text-cool-black",
     size: "1.5rem",
     additionalCSS: "relative -top-1 transform rotate-180"
-  }), "Back"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("hr", {
+  }), "Back"), displayHr ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("hr", {
     className: "ui-meganav-hr"
-  }));
+  }) : null);
 };
 
 MeganavControlMobilePanelClose.propTypes = {
-  ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
+  ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  displayHr: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavControlMobilePanelClose);
 
@@ -503,7 +506,7 @@ module.exports = ReactPropTypesSecret;
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"h":[{"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"}]}');
+module.exports = JSON.parse('{"h":[{"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"}]}');
 
 /***/ }),
 
@@ -694,6 +697,7 @@ var MeganavItemsMobile = function MeganavItemsMobile(_ref) {
     "data-id": "meganav-mobile-panel-controls"
   }, _Meganav_component_json__WEBPACK_IMPORTED_MODULE_5__/* .panels.map */ .h.map(function (panel) {
     var PanelComponent = panels[panel.component];
+    var displayHr = ["company-panel", "developers-panel"].includes(panel.id);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       className: "ui-meganav-mobile-item",
       key: "".concat(panel.id, "-mobile")
@@ -704,7 +708,8 @@ var MeganavItemsMobile = function MeganavItemsMobile(_ref) {
       id: "".concat(panel.id, "-mobile"),
       "data-scroll-lock-scrollable": true
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControlMobilePanelClose_component_jsx__WEBPACK_IMPORTED_MODULE_7__.default, {
-      ariaControls: "".concat(panel.id, "-mobile")
+      ariaControls: "".concat(panel.id, "-mobile"),
+      displayHr: displayHr
     }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PanelComponent, {
       paths: paths,
       absUrl: absUrl

package/core/MeganavItemsSignedIn.jsx

@@ -132,6 +132,7 @@ Icon.propTypes = {
 
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
       theme = _ref.theme,
       additionalCSS = _ref.additionalCSS;
@@ -141,7 +142,7 @@ var MeganavControl = function MeganavControl(_ref) {
     className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     name: "icon-gui-disclosure-arrow",
     color: "text-cool-black",
@@ -152,6 +153,7 @@ var MeganavControl = function MeganavControl(_ref) {
 
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
@@ -644,6 +646,7 @@ var MeganavItemsSignedIn = function MeganavItemsSignedIn(_ref) {
     className: "ui-meganav-item relative"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     ariaControls: "account-panel",
+    ariaLabel: "Account",
     theme: theme,
     additionalCSS: "mr-0"
   }, accountName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {

package/core/images/icon-tech-aws.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4021 17.3463C11.4021 17.8287 11.4542 18.2198 11.5455 18.5066C11.6498 18.7934 11.7802 19.1063 11.9627 19.4452C12.0279 19.5495 12.0539 19.6538 12.0539 19.7451C12.0539 19.8754 11.9757 20.0058 11.8062 20.1362L10.9849 20.6837C10.8676 20.7619 10.7503 20.801 10.646 20.801C10.5156 20.801 10.3852 20.7359 10.2549 20.6185C10.0724 20.423 9.91592 20.2144 9.78555 20.0058C9.65518 19.7842 9.52482 19.5365 9.38141 19.2366C8.36455 20.436 7.08695 21.0357 5.54862 21.0357C4.45354 21.0357 3.58008 20.7228 2.94128 20.0971C2.30248 19.4713 1.97656 18.6369 1.97656 17.594C1.97656 16.4859 2.36766 15.5864 3.1629 14.9084C3.95814 14.2305 5.01412 13.8916 6.3569 13.8916C6.80014 13.8916 7.25643 13.9307 7.73879 13.9959C8.22114 14.0611 8.71654 14.1653 9.23801 14.2827V13.331C9.23801 12.3402 9.02942 11.6493 8.62528 11.2451C8.20811 10.841 7.50413 10.6454 6.5003 10.6454C6.04401 10.6454 5.57469 10.6976 5.09234 10.8149C4.60998 10.9322 4.14066 11.0756 3.68437 11.2582C3.47578 11.3494 3.31934 11.4016 3.22809 11.4276C3.13683 11.4537 3.07165 11.4668 3.0195 11.4668C2.83699 11.4668 2.74573 11.3364 2.74573 11.0626V10.4238C2.74573 10.2152 2.7718 10.0588 2.83699 9.96753C2.90217 9.87627 3.0195 9.78502 3.20201 9.69376C3.6583 9.4591 4.20584 9.26355 4.84464 9.10711C5.48344 8.93763 6.16135 8.85941 6.87836 8.85941C8.42973 8.85941 9.56393 9.2114 10.294 9.91538C11.011 10.6194 11.376 11.6884 11.376 13.1224V17.3463H11.4021ZM6.1092 19.3279C6.53941 19.3279 6.98266 19.2497 7.45198 19.0932C7.9213 18.9368 8.33848 18.65 8.69047 18.2589C8.89905 18.0112 9.05549 17.7374 9.13371 17.4245C9.21194 17.1116 9.26408 16.7336 9.26408 16.2903V15.7428C8.88602 15.6515 8.48188 15.5733 8.0647 15.5212C7.64753 15.469 7.24339 15.4429 6.83925 15.4429C5.9658 15.4429 5.327 15.6124 4.89678 15.9644C4.46657 16.3164 4.25799 16.8118 4.25799 17.4636C4.25799 18.0764 4.41443 18.5326 4.74034 18.8455C5.05323 19.1714 5.50951 19.3279 6.1092 19.3279ZM16.5777 20.7359C16.343 20.7359 16.1866 20.6967 16.0823 20.6055C15.978 20.5273 15.8867 20.3447 15.8085 20.0971L12.7449 10.0197C12.6667 9.75894 12.6276 9.58946 12.6276 9.49821C12.6276 9.28962 12.7318 9.17229 12.9404 9.17229H14.218C14.4657 9.17229 14.6352 9.2114 14.7265 9.30266C14.8308 9.38088 14.909 9.56339 14.9872 9.81109L17.1774 18.4414L19.2111 9.81109C19.2763 9.55035 19.3545 9.38088 19.4588 9.30266C19.5631 9.22444 19.7456 9.17229 19.9803 9.17229H21.0232C21.2709 9.17229 21.4404 9.2114 21.5447 9.30266C21.649 9.38088 21.7402 9.56339 21.7924 9.81109L23.8522 18.5457L26.1075 9.81109C26.1857 9.55035 26.277 9.38088 26.3682 9.30266C26.4725 9.22444 26.642 9.17229 26.8767 9.17229H28.0891C28.2977 9.17229 28.415 9.27658 28.415 9.49821C28.415 9.56339 28.402 9.62858 28.3889 9.7068C28.3759 9.78502 28.3498 9.88931 28.2977 10.0327L25.1558 20.1101C25.0776 20.3708 24.9863 20.5403 24.8821 20.6185C24.7778 20.6967 24.6083 20.7489 24.3867 20.7489H23.2655C23.0178 20.7489 22.8483 20.7098 22.744 20.6185C22.6397 20.5273 22.5485 20.3578 22.4963 20.0971L20.4756 11.6884L18.468 20.084C18.4028 20.3447 18.3246 20.5142 18.2203 20.6055C18.116 20.6967 17.9335 20.7359 17.6988 20.7359H16.5777ZM33.3298 21.0878C32.6519 21.0878 31.974 21.0096 31.3222 20.8532C30.6704 20.6967 30.1619 20.5273 29.823 20.3317C29.6144 20.2144 29.471 20.084 29.4188 19.9667C29.3667 19.8494 29.3406 19.719 29.3406 19.6017V18.9368C29.3406 18.663 29.4449 18.5326 29.6405 18.5326C29.7187 18.5326 29.7969 18.5457 29.8751 18.5718C29.9533 18.5978 30.0707 18.65 30.201 18.7021C30.6443 18.8977 31.1266 19.0541 31.6351 19.1584C32.1565 19.2627 32.665 19.3148 33.1864 19.3148C34.0078 19.3148 34.6465 19.1714 35.0898 18.8846C35.533 18.5978 35.7677 18.1807 35.7677 17.6462C35.7677 17.2811 35.6504 16.9813 35.4157 16.7336C35.1811 16.4859 34.7378 16.2643 34.099 16.0557L32.2087 15.469C31.257 15.1692 30.553 14.7259 30.1228 14.1393C29.6926 13.5657 29.471 12.9269 29.471 12.249C29.471 11.7014 29.5883 11.2191 29.823 10.8019C30.0576 10.3847 30.3705 10.0197 30.7616 9.73287C31.1527 9.43302 31.596 9.2114 32.1174 9.05496C32.6389 8.89852 33.1864 8.83334 33.7601 8.83334C34.0469 8.83334 34.3467 8.84637 34.6335 8.88548C34.9334 8.92459 35.2071 8.97674 35.4809 9.02889C35.7416 9.09407 35.9893 9.15925 36.224 9.23747C36.4586 9.31569 36.6412 9.39391 36.7715 9.47213C36.954 9.57643 37.0844 9.68072 37.1626 9.79805C37.2409 9.90235 37.28 10.0457 37.28 10.2283V10.841C37.28 11.1148 37.1757 11.2582 36.9801 11.2582C36.8758 11.2582 36.7063 11.206 36.4847 11.1017C35.7416 10.7628 34.9073 10.5933 33.9817 10.5933C33.2386 10.5933 32.6519 10.7106 32.2478 10.9583C31.8437 11.206 31.6351 11.5841 31.6351 12.1186C31.6351 12.4836 31.7654 12.7965 32.0262 13.0442C32.2869 13.2919 32.7693 13.5396 33.4602 13.7612L35.3114 14.3479C36.2501 14.6477 36.928 15.0649 37.3321 15.5994C37.7362 16.1339 37.9318 16.7466 37.9318 17.4245C37.9318 17.9851 37.8145 18.4935 37.5928 18.9368C37.3582 19.38 37.0453 19.7711 36.6412 20.084C36.237 20.4099 35.7547 20.6446 35.1941 20.8141C34.6074 20.9966 33.9947 21.0878 33.3298 21.0878Z" fill="#252F3E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.5608 25.2204C33.9557 25.0509 37.0324 24.6859 37.5799 25.3899C38.1275 26.0808 36.9672 28.988 36.4457 30.2786C36.2893 30.6697 36.6283 30.8262 36.9802 30.5263C39.2747 28.5969 39.8744 24.5685 39.4051 23.9819C38.9357 23.4083 34.9074 22.9129 32.4565 24.6337C32.0784 24.9075 32.1436 25.2725 32.5608 25.2204ZM19.9152 32.2734C25.2733 32.2734 31.5048 30.5917 35.7939 27.4238C36.4979 26.9023 35.8852 26.1071 35.1681 26.433C30.3576 28.4667 25.1299 29.4575 20.3715 29.4575C13.3186 29.4575 6.50042 27.515 0.972856 24.308C0.490498 24.0212 0.12547 24.5166 0.529608 24.8816C5.64 29.4966 12.406 32.2734 19.9152 32.2734Z" fill="#FF9900"/>
+</svg>