@ably/ui 8.2.1 → 8.5.0

package/core/Meganav.jsx

@@ -3474,7 +3474,7 @@ FeaturedLink.propTypes = {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "FLASH_DATA_ID": () => (/* binding */ FLASH_DATA_ID)
 /* harmony export */ });
-/* unused harmony export reducerFlashes */
+/* unused harmony exports reducerFlashes, Flashes */
 /* 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 dompurify__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7856);
@@ -3931,12 +3931,14 @@ Logo.propTypes = {
 var MeganavBlogPostsList = function MeganavBlogPostsList(_ref) {
   var recentBlogPosts = _ref.recentBlogPosts,
       absUrl = _ref.absUrl;
-  return recentBlogPosts ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+  return recentBlogPosts ? /*#__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"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
-    id: "meganav-why-ably-panel-list-blog"
+    id: "meganav-company-panel-list-blog"
   }, "Blog"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     className: "mb-8",
-    "aria-labelledby": "meganav-why-ably-panel-list-blog"
+    "aria-labelledby": "meganav-company-panel-list-blog"
   }, recentBlogPosts.map(function (post) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       key: post.link
@@ -3949,7 +3951,8 @@ var MeganavBlogPostsList = function MeganavBlogPostsList(_ref) {
       className: "ui-meganav-media-copy"
     }, post.pubDate)));
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/blog")
+    url: absUrl("/blog"),
+    textSize: "text-p3"
   }, "More from our Blog")) : null;
 };
 
@@ -3965,6 +3968,271 @@ MeganavBlogPostsList.propTypes = {
 
 /***/ }),
 
+/***/ 1505:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ MeganavContentCompany_component)
+});
+
+// EXTERNAL MODULE: external {"commonjs":"react","commonjs2":"react"}
+var external_commonjs_react_commonjs2_react_ = __webpack_require__(9281);
+var external_commonjs_react_commonjs2_react_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_react_commonjs2_react_);
+// EXTERNAL MODULE: ./node_modules/prop-types/index.js
+var prop_types = __webpack_require__(5697);
+var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
+// EXTERNAL MODULE: ./src/core/MeganavBlogPostsList/component.jsx
+var component = __webpack_require__(2725);
+// EXTERNAL MODULE: ./src/core/ConnectStateWrapper/component.jsx
+var ConnectStateWrapper_component = __webpack_require__(9787);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/regenerator/index.js
+var regenerator = __webpack_require__(7757);
+;// CONCATENATED MODULE: ./src/core/remote-blogs-posts.js
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+
+
+var fetchBlogPosts = /*#__PURE__*/(/* unused pure expression or super */ null && (function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(store, blogUrl) {
+    var res, payload;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+
+            if (blogUrl) {
+              _context.next = 4;
+              break;
+            }
+
+            console.log("Skipping fetching blog posts, invalid blogUrl: \"".concat(blogUrl, "\""));
+            return _context.abrupt("return");
+
+          case 4:
+            _context.next = 6;
+            return fetch(blogUrl);
+
+          case 6:
+            res = _context.sent;
+
+            if (!isJsonResponse(res.headers.get("content-type"))) {
+              _context.next = 14;
+              break;
+            }
+
+            _context.next = 10;
+            return res.json();
+
+          case 10:
+            payload = _context.sent;
+            store.dispatch({
+              type: "blog/loaded",
+              payload: payload
+            });
+            _context.next = 15;
+            break;
+
+          case 14:
+            throw new Error("Blog posts url is not serving json");
+
+          case 15:
+            _context.next = 20;
+            break;
+
+          case 17:
+            _context.prev = 17;
+            _context.t0 = _context["catch"](0);
+            console.warn("Could not fetch blog posts due to error:", _context.t0);
+
+          case 20:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 17]]);
+  }));
+
+  return function fetchBlogPosts(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}()));
+
+var initialState = {
+  recent: null
+};
+var REDUCER_KEY = "blogPosts";
+
+var reducerBlogPosts = _defineProperty({}, REDUCER_KEY, function () {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+
+  switch (action.type) {
+    case "blog/loaded":
+      return _objectSpread(_objectSpread({}, state), {}, {
+        recent: action.payload
+      });
+
+    default:
+      return state;
+  }
+});
+
+var selectRecentBlogPosts = function selectRecentBlogPosts(store) {
+  var _store$getState$REDUC;
+
+  return (_store$getState$REDUC = store.getState()[REDUCER_KEY]) === null || _store$getState$REDUC === void 0 ? void 0 : _store$getState$REDUC.recent;
+};
+
+
+// EXTERNAL MODULE: ./src/core/Icon/component.jsx
+var Icon_component = __webpack_require__(9008);
+;// CONCATENATED MODULE: ./src/core/MeganavContentCompany/component.jsx
+
+
+
+
+
+
+
+var MeganavContentCompany = function MeganavContentCompany(_ref) {
+  var paths = _ref.paths,
+      absUrl = _ref.absUrl;
+  var BlogPostsList = (0,ConnectStateWrapper_component.default)(component.default, {
+    recentBlogPosts: selectRecentBlogPosts
+  });
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex max-w-screen-xl mx-auto"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "ui-meganav-content-spacer"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("section", {
+    className: "grid grid-cols-12 ui-grid-gap-x w-full"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("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"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h3", {
+    className: "ui-meganav-overline",
+    id: "meganav-company-panel-list-why-companies"
+  }, "Why companies choose Ably"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
+    "aria-labelledby": "meganav-company-panel-list-why-companies"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/customers"),
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {
+    name: "icon-display-customers-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex flex-col justify-center"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Customers"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Ably supports customers across multiple industries.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/case-studies"),
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {
+    name: "icon-display-case-studies-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex flex-col justify-center"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Case studies"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Discover how customers are benefiting from Ably.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/compare"),
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {
+    name: "icon-display-compare-tech-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex flex-col justify-center"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Compare our tech"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Choose the right realtime service.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/aws"),
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
+    src: paths.awsLogo,
+    alt: "AWS logo"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex flex-col justify-center"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Partners"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Ably collaborates and integrates with AWS.")))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("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"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
+    className: "md:mt-40",
+    "aria-labelledby": "meganav-company-panel-list-why-companies"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/resources"),
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {
+    name: "icon-display-resources-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex flex-col justify-center"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Resources"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Learn more about realtime with our handy resources.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/about"),
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {
+    name: "icon-display-about-ably-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex flex-col justify-center"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "About Ably"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Find out more about Ably\u2019s mission.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/careers"),
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {
+    name: "icon-display-careers-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex flex-col justify-center"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Careers"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Discover our open roles and core Ably values.")))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(BlogPostsList, {
+    absUrl: absUrl
+  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "ui-meganav-content-spacer"
+  }));
+};
+
+MeganavContentCompany.propTypes = {
+  absUrl: (prop_types_default()).func,
+  paths: prop_types_default().shape({
+    awsLogo: (prop_types_default()).string
+  })
+};
+/* harmony default export */ const MeganavContentCompany_component = (MeganavContentCompany);
+
+/***/ }),
+
 /***/ 2619:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -3976,93 +4244,114 @@ MeganavBlogPostsList.propTypes = {
 /* 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 _FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5751);
-/* harmony import */ var _Icon_component_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9008);
-
+/* harmony import */ var _Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9008);
 
 
 
 
 var MeganavContentDevelopers = function MeganavContentDevelopers(_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-3"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
-    className: "ui-meganav-overline md:mb-8"
-  }, "Documentation"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "mb-16"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("form", {
-    className: "relative",
-    action: absUrl("/search"),
-    method: "get"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
-    name: "icon-gui-search",
-    color: "text-cool-black",
-    size: "1.5rem",
-    additionalCSS: "absolute top-8 left-8 pt-1 mt-1"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
-    type: "search",
-    name: "q",
-    className: "ui-input pl-48",
-    placeholder: "Search docs"
-  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "text-p1 font-medium text-cool-black mb-20"
-  }, "Docs, quick start guides, tutorials, and API reference to help you start building with Ably\u2019s platform and APIs."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/docs")
-  }, "Visit Documentation")), /*#__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"
+  }), /*#__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 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline uppercase",
     id: "meganav-developers-panel-explore"
-  }, "EXPLORE"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+  }, "Explore"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     "aria-labelledby": "meganav-developers-panel-explore"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/integrations"),
-    className: "ui-meganav-media group"
+    href: absUrl("/docs"),
+    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-docs-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"
-  }, "Third-party integrations & plugins"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Documentation"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Integrate and extend Ably with cloud services like AWS Kinesis."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/protocols"),
-    className: "ui-meganav-media group"
+  }, "Technical guides to help you build with Ably.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/docs/key-concepts"),
+    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-lightbulb-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"
-  }, "Multi-protocol messaging"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Concepts"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "We support pub/sub over WebSockets, MQTT, SSE, and more."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/hub"),
-    className: "ui-meganav-media group"
+  }, "Read about core Ably platform concepts.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/docs/quick-start-guide"),
+    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-quickstart-guides-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"
-  }, "Streaming data sources"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Quickstart guides"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Augment your apps with realtime updates like weather or transit."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/periodic-table-of-realtime"),
-    className: "ui-meganav-media group"
+  }, "Documentation to help you get started quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("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"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    className: "md:mt-40",
+    "aria-labelledby": "meganav-developers-panel-explore"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/download"),
+    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-sdks-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"
-  }, "The Periodic Table of Realtime"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "SDKs"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "A compendium for all things realtime and event-driven."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+  }, "Download an SDK to help you build realtime apps faster.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/tutorials"),
+    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-tutorials-demos-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"
+  }, "Tutorials & Demos"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Get stuck in with our hands-on resources. ")))))), /*#__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"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline uppercase",
     id: "meganav-developers-panel-quick-links"
   }, "Quick links"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     "aria-labelledby": "meganav-developers-panel-quick-links"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/download"),
+    href: "https://discord.gg/jwBPhEZ9g5",
     className: "group ui-meganav-media py-12"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Download an SDK"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: "https://changelog.ably.com/",
+  }, "Discord"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: "https://github.com/ably",
     className: "group ui-meganav-media py-12"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Platform changelog"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/support"),
+  }, "Github"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: "https://changelog.ably.com/",
     className: "group ui-meganav-media py-12"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Support & FAQs"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Changelog"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "https://status.ably.com/",
     className: "group ui-meganav-media py-12"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
@@ -4073,7 +4362,14 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
     frameBorder: "0",
     scrolling: "no",
     className: "w-24 h-24 ml-4 border-none pointer-events-none align-middle"
-  })))))));
+  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/support"),
+    className: "group ui-meganav-media py-12"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Support & FAQs")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "ui-meganav-content-spacer"
+  }));
 };
 
 MeganavContentDevelopers.propTypes = {
@@ -4102,10 +4398,14 @@ MeganavContentDevelopers.propTypes = {
 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: "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: "sm:col-span-full md:col-span-1"
+    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", {
@@ -4114,13 +4414,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"),
@@ -4165,12 +4472,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"),
@@ -4179,37 +4489,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 = {
@@ -4234,336 +4547,150 @@ MeganavContentPlatform.propTypes = {
 /* 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"
-  }, "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", {
-    href: absUrl("/solutions/extend-kafka-to-the-edge"),
+  }, "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"
-  }, "Extend Kafka to the edge"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "IoT & Connected Devices"), /*#__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."))))));
-};
-
-MeganavContentUseCases.propTypes = {
-  absUrl: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)
-};
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavContentUseCases);
-
-/***/ }),
-
-/***/ 4681:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "default": () => (/* binding */ MeganavContentWhyAbly_component)
-});
-
-// EXTERNAL MODULE: external {"commonjs":"react","commonjs2":"react"}
-var external_commonjs_react_commonjs2_react_ = __webpack_require__(9281);
-var external_commonjs_react_commonjs2_react_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_react_commonjs2_react_);
-// EXTERNAL MODULE: ./node_modules/prop-types/index.js
-var prop_types = __webpack_require__(5697);
-var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ./src/core/FeaturedLink/component.jsx
-var component = __webpack_require__(5751);
-// EXTERNAL MODULE: ./src/core/MeganavBlogPostsList/component.jsx
-var MeganavBlogPostsList_component = __webpack_require__(2725);
-// EXTERNAL MODULE: ./src/core/ConnectStateWrapper/component.jsx
-var ConnectStateWrapper_component = __webpack_require__(9787);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/regenerator/index.js
-var regenerator = __webpack_require__(7757);
-;// CONCATENATED MODULE: ./src/core/remote-blogs-posts.js
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-
-
-var fetchBlogPosts = /*#__PURE__*/(/* unused pure expression or super */ null && (function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(store, blogUrl) {
-    var res, payload;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-
-            if (blogUrl) {
-              _context.next = 4;
-              break;
-            }
-
-            console.log("Skipping fetching blog posts, invalid blogUrl: \"".concat(blogUrl, "\""));
-            return _context.abrupt("return");
-
-          case 4:
-            _context.next = 6;
-            return fetch(blogUrl);
-
-          case 6:
-            res = _context.sent;
-
-            if (!isJsonResponse(res.headers.get("content-type"))) {
-              _context.next = 14;
-              break;
-            }
-
-            _context.next = 10;
-            return res.json();
-
-          case 10:
-            payload = _context.sent;
-            store.dispatch({
-              type: "blog/loaded",
-              payload: payload
-            });
-            _context.next = 15;
-            break;
-
-          case 14:
-            throw new Error("Blog posts url is not serving json");
-
-          case 15:
-            _context.next = 20;
-            break;
-
-          case 17:
-            _context.prev = 17;
-            _context.t0 = _context["catch"](0);
-            console.warn("Could not fetch blog posts due to error:", _context.t0);
-
-          case 20:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee, null, [[0, 17]]);
-  }));
-
-  return function fetchBlogPosts(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}()));
-
-var initialState = {
-  recent: null
-};
-var REDUCER_KEY = "blogPosts";
-
-var reducerBlogPosts = _defineProperty({}, REDUCER_KEY, function () {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
-  var action = arguments.length > 1 ? arguments[1] : undefined;
-
-  switch (action.type) {
-    case "blog/loaded":
-      return _objectSpread(_objectSpread({}, state), {}, {
-        recent: action.payload
-      });
-
-    default:
-      return state;
-  }
-});
-
-var selectRecentBlogPosts = function selectRecentBlogPosts(store) {
-  var _store$getState$REDUC;
-
-  return (_store$getState$REDUC = store.getState()[REDUCER_KEY]) === null || _store$getState$REDUC === void 0 ? void 0 : _store$getState$REDUC.recent;
-};
-
-
-;// CONCATENATED MODULE: ./src/core/MeganavContentWhyAbly/component.jsx
-
-
-
-
-
-
-
-var MeganavContentWhyAbly = function MeganavContentWhyAbly(_ref) {
-  var absUrl = _ref.absUrl;
-  var BlogPostsList = (0,ConnectStateWrapper_component.default)(MeganavBlogPostsList_component.default, {
-    recentBlogPosts: selectRecentBlogPosts
-  });
-  return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("section", {
-    className: "ui-meganav-content ui-grid-gap md:grid-cols-3"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h3", {
+  }, "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-why-ably-panel-list-why-companies"
-  }, "Why companies choose Ably"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
-    "aria-labelledby": "meganav-why-ably-panel-list-why-companies"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/customers"),
-    className: "group ui-meganav-media py-12"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-meganav-media-heading"
-  }, "Customers"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/case-studies"),
-    className: "group ui-meganav-media py-12"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-meganav-media-heading"
-  }, "Case studies"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/compare"),
-    className: "group ui-meganav-media py-12"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-meganav-media-heading"
-  }, "Compare our tech"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/aws"),
-    className: "group ui-meganav-media py-12"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-meganav-media-heading"
-  }, "Ably & AWS"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/resources"),
-    className: "group ui-meganav-media py-12"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-meganav-media-heading"
-  }, "Resources"))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h3", {
-    className: "ui-meganav-overline",
-    id: "meganav-why-ably-panel-list-four-pillars"
-  }, "Four pillars of dependability"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
-    className: "mb-8",
-    "aria-labelledby": "meganav-why-ably-panel-list-four-pillars"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/four-pillars-of-dependability#performance"),
-    className: "ui-meganav-media group"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-meganav-media-heading"
-  }, "Predictable performance"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-meganav-media-copy"
-  }, "A low-latency global edge network across 200+ PoPs."))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/four-pillars-of-dependability#integrity"),
-    className: "ui-meganav-media group"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-meganav-media-heading"
-  }, "Guaranteed ordering & delivery"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-meganav-media-copy"
-  }, "We guarantee in-order data delivery, even after disconnections."))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/four-pillars-of-dependability#reliability"),
+    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__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Fault tolerant infrastructure"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+  }, "Extend Kafka to the edge"), /*#__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__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/four-pillars-of-dependability#availability"),
+  }, "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__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "High scalability & availability"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+  }, "Asset Tracking"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Elastic, battle-tested global infrastructure for massive scale.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
-    url: absUrl("/four-pillars-of-dependability")
-  }, "Explore our Four Pillars of Dependability")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(BlogPostsList, {
-    absUrl: absUrl
+  }, "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"
   }));
 };
 
-MeganavContentWhyAbly.propTypes = {
-  absUrl: (prop_types_default()).func
+MeganavContentUseCases.propTypes = {
+  absUrl: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)
 };
-/* harmony default export */ const MeganavContentWhyAbly_component = (MeganavContentWhyAbly);
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavContentUseCases);
 
 /***/ }),
 
@@ -4585,6 +4712,7 @@ MeganavContentWhyAbly.propTypes = {
 
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
       theme = _ref.theme,
       additionalCSS = _ref.additionalCSS;
@@ -4594,7 +4722,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",
@@ -4605,6 +4733,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)
@@ -4676,7 +4805,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", {
@@ -4691,13 +4822,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);
 
@@ -4773,14 +4905,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, {
@@ -4923,6 +5061,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")
@@ -4933,7 +5072,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
@@ -5023,6 +5163,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", {
@@ -10497,7 +10638,7 @@ var scrollLock = _objectSpread({
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"n":{"white":{"backgroundColor":"bg-white","textColor":"text-cool-black","buttonBackgroundColor":"","buttonTextColor":"","mobileMenuColor":"text-cool-black","logoTextColor":"text-cool-black","barShadow":"shadow-subtle"},"black":{"backgroundColor":"bg-cool-black","textColor":"text-white","buttonBackgroundColor":"bg-white","buttonTextColor":"text-cool-black","mobileMenuColor":"text-white","logoTextColor":"text-white","barShadow":""},"transparentToWhite":{"backgroundColor":"bg-transparent","textColor":"text-white","buttonBackgroundColor":"bg-white","buttonTextColor":"text-cool-black","mobileMenuColor":"text-white","logoTextColor":"text-white","barShadow":""}},"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('{"n":{"white":{"backgroundColor":"bg-white","textColor":"text-cool-black","buttonBackgroundColor":"","buttonTextColor":"","mobileMenuColor":"text-cool-black","logoTextColor":"text-cool-black","barShadow":"shadow-subtle"},"black":{"backgroundColor":"bg-cool-black","textColor":"text-white","buttonBackgroundColor":"bg-white","buttonTextColor":"text-cool-black","mobileMenuColor":"text-white","logoTextColor":"text-white","barShadow":""},"transparentToWhite":{"backgroundColor":"bg-transparent","textColor":"text-white","buttonBackgroundColor":"bg-white","buttonTextColor":"text-cool-black","mobileMenuColor":"text-white","logoTextColor":"text-white","barShadow":""}},"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"}]}');
 
 /***/ }),
 
@@ -10790,6 +10931,7 @@ var MeganavControl = function MeganavControl() {
       (_panel$classList = panel.classList).replace.apply(_panel$classList, _toConsumableArray(open ? classes : classes.reverse()));
 
       control.setAttribute("aria-expanded", open);
+      control.dataset.hover = open;
     }
   };
 
@@ -10813,9 +10955,11 @@ var MeganavControl = function MeganavControl() {
       panels.forEach(function (node) {
         return node !== panel && node.classList.replace("visible", "invisible");
       });
-      var ariaExpanded = control.getAttribute("aria-expanded");
+      var ariaExpanded = control.getAttribute("aria-expanded"); // Prevent closing of the panel if it was already opened by hovering
 
-      if (ariaExpanded === "true") {
+      var openedByHover = control.dataset.hover === "true";
+
+      if (ariaExpanded === "true" && !openedByHover) {
         control.setAttribute("aria-expanded", false);
         panel.classList.replace("visible", "invisible");
       } else {
@@ -10823,6 +10967,10 @@ var MeganavControl = function MeganavControl() {
         panel.classList.replace("invisible", "visible");
       }
 
+      if (openedByHover) {
+        control.dataset.hover = false;
+      }
+
       if (isSearchControl(control)) {
         var searchInput = (0,dom_query/* queryId */.A)("meganav-search-input", panel);
         if (!searchInput) return;
@@ -11487,8 +11635,8 @@ var absUrl = function absUrl(path) {
 var MeganavContentPlatform_component = __webpack_require__(6654);
 // EXTERNAL MODULE: ./src/core/MeganavContentUseCases/component.jsx
 var MeganavContentUseCases_component = __webpack_require__(1118);
-// EXTERNAL MODULE: ./src/core/MeganavContentWhyAbly/component.jsx + 1 modules
-var MeganavContentWhyAbly_component = __webpack_require__(4681);
+// EXTERNAL MODULE: ./src/core/MeganavContentCompany/component.jsx + 1 modules
+var MeganavContentCompany_component = __webpack_require__(1505);
 // EXTERNAL MODULE: ./src/core/MeganavContentDevelopers/component.jsx
 var MeganavContentDevelopers_component = __webpack_require__(2619);
 // EXTERNAL MODULE: ./src/core/MeganavSearch/component.jsx
@@ -11577,7 +11725,7 @@ var SignInPlaceholder = function SignInPlaceholder() {
 var panels = {
   MeganavContentPlatform: MeganavContentPlatform_component.default,
   MeganavContentUseCases: MeganavContentUseCases_component.default,
-  MeganavContentWhyAbly: MeganavContentWhyAbly_component.default,
+  MeganavContentCompany: MeganavContentCompany_component.default,
   MeganavContentDevelopers: MeganavContentDevelopers_component.default
 };
 function component_Meganav(_ref2) {