@ably/ui 10.6.0 → 10.8.0

package/core/Footer/component.css

@@ -10,5 +10,15 @@
   .ui-footer-link {
     @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
   }
+
+  .ui-footer-compliance-text {
+    font-size: 12px;
+  }
+
+  @media screen {
+    .ui-footer-glassdoor {
+      display: none;
+    }
+  }
 }
 

package/core/Footer.jsx

@@ -193,7 +193,7 @@ function Footer(_ref) {
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "max-w-screen-xl mx-auto py-32 sm:py-40 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full md:col-span-2"
+    className: "col-span-full lg:col-span-2"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "flex flex-row p-menu-row-snug"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
@@ -203,11 +203,11 @@ function Footer(_ref) {
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "text-overline2 col-span-full font-medium uppercase tracking-widen-0.1"
   }, "The Ably Platform")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "grid grid-cols-4"
+    className: "grid grid-cols-4 lg:col-span-2"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "text-p3 py-16 font-medium p-menu-row-snug col-span-3"
   }, "Easily power any realtime experience in your application via a simple API that handles everything realtime.")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
-    className: "grid gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32 sm:grid-cols-2 md:grid-cols-1"
+    className: "grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
     className: "p-menu-row-snug"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
@@ -234,7 +234,7 @@ function Footer(_ref) {
     href: absUrl("/hub"),
     className: "ui-footer-menu-row-link"
   }, "Streaming data sources")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full sm:col-span-3 md:col-span-1"
+    className: "col-span-full xs:col-span-3 lg:col-span-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "ui-footer-col-title"
   }, "Ably is for"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -293,7 +293,7 @@ function Footer(_ref) {
     href: absUrl("/solutions/iot-and-connected-devices"),
     className: "ui-footer-menu-row-link"
   }, "IoT & Connected Devices")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full sm:col-span-3 md:col-span-1"
+    className: "col-span-full xs:col-span-3 lg:col-span-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "ui-footer-col-title"
   }, "Developers"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -336,9 +336,10 @@ function Footer(_ref) {
     src: "https://status.ably.com/embed/icon",
     allowtransparency: "true",
     frameBorder: "0",
-    scrolling: "no"
+    scrolling: "no",
+    title: "System Status"
   })))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full sm:col-span-3 md:col-span-1"
+    className: "col-span-full xs:col-span-3 lg:col-span-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "ui-footer-col-title"
   }, "WHY ABLY"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -372,7 +373,7 @@ function Footer(_ref) {
     href: absUrl("/integrations"),
     className: "ui-footer-menu-row-link"
   }, "Third-party integrations")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full sm:col-span-3 md:col-span-1"
+    className: "col-span-full xs:col-span-3 lg:col-span-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "ui-footer-col-title"
   }, "ABOUT"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -415,54 +416,51 @@ function Footer(_ref) {
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("hr", {
     className: "border-t border-mid-grey"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px grid-cols-2"
+    className: "max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1"
+    className: ""
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "inline-flex"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/privacy"),
-    className: "pr-24 ui-footer-link"
-  }, "Cookies"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/legals"),
-    className: "pr-24 ui-footer-link"
-  }, "Legals"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/data-protection"),
-    className: "pr-24 ui-footer-link"
-  }, "Data Protection"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/privacy"),
-    className: "ui-footer-link"
-  }, "Privacy")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "pt-32 flex items-center"
+    className: "flex flex-col lg:flex-row flex-auto ml-8 sm:col-span-1 lg:col-span-2"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: ""
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex items-center pb-24"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "h-24 pr-24 text-cool-black hover:text-icon-twitter",
-    href: "https://twitter.com/ablyrealtime"
+    href: "https://twitter.com/ablyrealtime",
+    title: "Ably on Twitter"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
     name: "twitter",
     size: "1.5rem"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "h-24 pr-24 text-cool-black hover:text-icon-linkedin",
-    href: "https://www.linkedin.com/company/ably-realtime"
+    href: "https://www.linkedin.com/company/ably-realtime",
+    title: "Ably on LinkedIn"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
     name: "linkedin",
     size: "1.5rem"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "h-24 pr-24 text-cool-black hover:text-icon-github",
-    href: "https://github.com/ably/"
+    href: "https://github.com/ably/",
+    title: "Ably on Github"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
     name: "github",
     size: "1.5rem"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "h-24 pr-24 text-cool-black hover:text-icon-discord",
-    href: "https://discord.gg/jwBPhEZ9g5"
+    href: "https://discord.gg/jwBPhEZ9g5",
+    title: "Ably on Discord"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
     name: "discord",
     size: "1.5rem"
-  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "border-l border-mid-grey h-40"
-  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    className: "flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor",
-    href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+  })))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "xs:hidden sm:block ui-footer-glassdoor"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex sm:pt-24 lg:pt-0 sm:border-t sm:border-l-0 lg:border-t-0 lg:border-l sm:border-mid-grey sm:w-3/4 lg:w-full lg:pl-24"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
+    className: "h-24 text-cool-black hover:text-icon-glassdoor",
+    title: "Ably reviews on glassdoor"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
     name: "glassdoor",
     size: "1.5rem"
@@ -473,23 +471,116 @@ function Footer(_ref) {
   }, "We're hiring!"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
     className: "ui-footer-link"
-  }, "Learn more"), "\xA0at Glassdoor"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto"
+  }, "Learn more at Glassdoor"))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "xs:block sm:hidden"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "border-t border-mid-grey w-full"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex py-24"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    className: "h-24 pr-24 text-cool-black hover:text-icon-glassdoor",
+    href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
+    title: "Ably reviews on glassdoor"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
+    name: "glassdoor",
+    size: "1.5rem"
+  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "text-menu3 font-light"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("strong", {
+    className: "block font-medium"
+  }, "We're hiring!"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
+    className: "ui-footer-link"
+  }, "Learn more at Glassdoor"))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "col-span-full sm:col-span-1 inline-flex sm:ml-auto"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
     className: "mr-24 w-96 h-96",
-    src: paths.rocketList,
-    alt: "Rocket List 2021"
+    src: paths.highestUserAdoption,
+    alt: "Highest User Adoption 2022"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
+    className: "mr-24 w-96 h-96",
+    src: paths.usersLoveUs,
+    alt: "Users Love Us"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
-    className: "w-96 h-96",
-    src: paths.flexibleCompanies,
-    alt: "Flexible Companies 2021"
-  }))));
+    className: "mr-24 w-96 h-96",
+    src: paths.highestPerformer,
+    alt: "High Performer 2022"
+  }))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "max-w-screen-xl ui-grid-px mx-auto"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("hr", {
+    className: "border-t border-mid-grey"
+  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px "
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "inline-flex"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/privacy"),
+    className: "pr-24 ui-footer-link"
+  }, "Cookies"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/legals"),
+    className: "pr-24 ui-footer-link"
+  }, "Legals"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/data-protection"),
+    className: "pr-24 ui-footer-link"
+  }, "Data Protection"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/privacy"),
+    className: "ui-footer-link"
+  }, "Privacy"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 "
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex mr-24"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
+    name: "icon-gui-tick",
+    color: "text-active-orange",
+    size: "1.5rem",
+    additionalCSS: "bg-white rounded-full mr-12"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-medium"
+  }, "SOC 2 Type 2"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-light mb-24"
+  }, "Certified"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex mr-24 sm:col-start-2"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
+    name: "icon-gui-tick",
+    color: "text-active-orange",
+    size: "1.5rem",
+    additionalCSS: "bg-white rounded-full mr-12"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-medium"
+  }, "HIPAA"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-light mb-24"
+  }, "Compliant"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex mr-24 sm:col-start-3"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
+    name: "icon-gui-tick",
+    color: "text-active-orange",
+    size: "1.5rem",
+    additionalCSS: "bg-white rounded-full mr-12"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-medium"
+  }, "EU GDPR"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-light mb-24"
+  }, "Certified"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex mr-24 sm:col-start-4"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
+    name: "icon-gui-tick",
+    color: "text-active-orange",
+    size: "1.5rem",
+    additionalCSS: "bg-white rounded-full mr-12"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-medium"
+  }, "256-bit AES"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-light mb-24"
+  }, "Encryption"))))));
 }
 Footer.propTypes = {
   paths: external_commonjs_prop_types_commonjs2_prop_types_default().shape({
     ablyStack: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
-    rocketList: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
-    flexibleCompanies: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
+    highestPerformer: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+    highestUserAdoption: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+    usersLoveUs: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
   }),
   urlBase: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
 };

package/core/Meganav/component.json

@@ -30,7 +30,7 @@
   },
   "panels": [
     { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
-    { "label": "Use Cases & Solutions", "shortLabel": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
+    { "label": "Solutions", "shortLabel": "Solutions", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
     { "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
     { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }
   ]

package/core/Meganav.jsx

@@ -3274,7 +3274,7 @@ try {
 /***/ ((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","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"}]}');
+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":"Solutions","shortLabel":"Solutions","id":"use-cases-panel","component":"MeganavContentUseCases"},{"label":"Company","shortLabel":"Company","id":"company-panel","component":"MeganavContentCompany"},{"label":"Developers","shortLabel":"Developers","id":"developers-panel","component":"MeganavContentDevelopers"}]}');
 
 /***/ }),
 

package/core/MeganavItemsDesktop.jsx

@@ -114,7 +114,7 @@ MeganavControl.propTypes = {
 /***/ 3379:
 /***/ ((module) => {
 
-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"}]}');
+module.exports = JSON.parse('{"h":[{"label":"Platform","shortLabel":"Platform","id":"platform-panel","component":"MeganavContentPlatform"},{"label":"Solutions","shortLabel":"Solutions","id":"use-cases-panel","component":"MeganavContentUseCases"},{"label":"Company","shortLabel":"Company","id":"company-panel","component":"MeganavContentCompany"},{"label":"Developers","shortLabel":"Developers","id":"developers-panel","component":"MeganavContentDevelopers"}]}');
 
 /***/ }),
 

package/core/MeganavItemsMobile.jsx

@@ -387,7 +387,7 @@ SignOutLink.propTypes = {
 /***/ 3379:
 /***/ ((module) => {
 
-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"}]}');
+module.exports = JSON.parse('{"h":[{"label":"Platform","shortLabel":"Platform","id":"platform-panel","component":"MeganavContentPlatform"},{"label":"Solutions","shortLabel":"Solutions","id":"use-cases-panel","component":"MeganavContentUseCases"},{"label":"Company","shortLabel":"Company","id":"company-panel","component":"MeganavContentCompany"},{"label":"Developers","shortLabel":"Developers","id":"developers-panel","component":"MeganavContentDevelopers"}]}');
 
 /***/ }),
 

package/package.json

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

package/src/core/Footer/component.css

@@ -10,4 +10,14 @@
   .ui-footer-link {
     @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
   }
+
+  .ui-footer-compliance-text {
+    font-size: 12px;
+  }
+
+  @media screen {
+    .ui-footer-glassdoor {
+      display: none;
+    }
+  }
 }

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

@@ -1,18 +1,16 @@
 <footer class="bg-light-grey font-sans antialiased" data-id="footer">
   <div class="max-w-screen-xl mx-auto py-32 sm:py-40 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
-    <div class="col-span-full md:col-span-2">
+    <div class="col-span-full lg:col-span-2">
       <div class="flex flex-row p-menu-row-snug">
         <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
         <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
       </div>
-
-      <div class="grid grid-cols-4">
+      <div class="grid grid-cols-4 lg:col-span-2">
         <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
           Easily power any realtime experience in your application via a simple API that handles everything realtime.
         </p>
       </div>
-
-      <ul class="grid gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32 sm:grid-cols-2 md:grid-cols-1">
+      <ul class="grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1">
         <li class="p-menu-row-snug">
           <%= link_to 'Pub/sub messaging', abs_url("/pub-sub-messaging"), class: "ui-footer-menu-row-link" %>
         </li>
@@ -30,8 +28,7 @@
         </li>
       </ul>
     </div>
-
-    <div class="col-span-full sm:col-span-3 md:col-span-1">
+    <div class="col-span-full xs:col-span-3 lg:col-span-1">
       <h2 class="ui-footer-col-title">Ably is for</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -69,8 +66,7 @@
         </li>
       </ul>
     </div>
-
-    <div class="col-span-full sm:col-span-3 md:col-span-1">
+    <div class="col-span-full xs:col-span-3 lg:col-span-1">
       <h2 class="ui-footer-col-title">Developers</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -97,8 +93,7 @@
         </li>
       </ul>
     </div>
-
-    <div class="col-span-full sm:col-span-3 md:col-span-1">
+    <div class="col-span-full xs:col-span-3 lg:col-span-1">
       <h2 class="ui-footer-col-title">WHY ABLY</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -121,8 +116,7 @@
         </li>
       </ul>
     </div>
-
-    <div class="col-span-full sm:col-span-3 md:col-span-1">
+    <div class="col-span-full xs:col-span-3 lg:col-span-1">
       <h2 class="ui-footer-col-title">ABOUT</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -141,7 +135,7 @@
           <%= link_to 'Open protocol policy', abs_url("/open-policy"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
-         <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
+          <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
           <%= link_to 'Contact us', abs_url("/contact"), class: "ui-footer-menu-row-link" %>
@@ -149,51 +143,119 @@
       </ul>
     </div>
   </div>
-
   <div class="max-w-screen-xl ui-grid-px mx-auto">
     <hr class="border-t border-mid-grey" />
   </div>
-
-  <div class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px grid-cols-2">
+  <%# Twitter + Glassdoor SM * above + Glassdoor XS  + Badges %>
+  <div class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
+    <div class="">
+      <div class="flex flex-col lg:flex-row flex-auto ml-8 sm:col-span-1 lg:col-span-2">
+        <div class="">
+          <div class="flex items-center pb-24">
+            <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
+              <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
+            </a>
+            <a
+                  class="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
+                  href="https://www.linkedin.com/company/ably-realtime"
+                  title="Ably on LinkedIn"
+                >
+              <%= render(AblyUi::Core::Icon.new(name: "linkedin", size: "1.5rem")) %>
+            </a>
+            <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/" title="Ably on Github">
+              <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
+            </a>
+            <a class="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5" title="Ably on Discord">
+              <%= render(AblyUi::Core::Icon.new(name: "discord", size: "1.5rem")) %>
+            </a>
+          </div>
+        </div>
+        <%# GLASSDOOR on SM and Above %>
+        <div class="xs:hidden sm:block ui-footer-glassdoor">
+          <div class="flex sm:pt-24 lg:pt-0 sm:border-t sm:border-l-0 lg:border-t-0 lg:border-l sm:border-mid-grey sm:w-3/4 lg:w-full lg:pl-24">
+            <a
+                  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+                  class="h-24 text-cool-black hover:text-icon-glassdoor"
+                  title="Ably reviews on glassdoor"
+                >
+              <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
+            </a>
+            <div class="pl-16 text-menu3 font-light">
+              <strong class="block font-medium">We&apos;re hiring!</strong>
+              <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
+                Learn more at Glassdoor
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <%# GlassDoor on XS ONLY %>
+      <div class="xs:block sm:hidden">
+        <div class="border-t border-mid-grey w-full"></div>
+        <div class="flex py-24">
+          <a
+                class="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
+                href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+                title="Ably reviews on glassdoor"
+              >
+            <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
+          </a>
+          <div class="text-menu3 font-light">
+            <strong class="block font-medium">We&apos;re hiring!</strong>
+            <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
+              Learn more at Glassdoor
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto">
+      <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 w-96 h-96") %>
+      <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 w-96 h-96") %>
+      <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 w-96 h-96") %>
+    </div>
+  </div>
+  <div class="max-w-screen-xl ui-grid-px mx-auto">
+    <hr class="border-t border-mid-grey" />
+  </div>
+  <div class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px ">
     <div class="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
       <div class="inline-flex">
-        <%= link_to 'Cookies', abs_url("/privacy"), class: "ui-footer-link pr-24" %>
-        <%= link_to 'Legals', abs_url("/legals"), class: "ui-footer-link pr-24" %>
-        <%= link_to 'Data Protection', abs_url("/data-protection"), class: "ui-footer-link pr-24" %>
+        <%= link_to 'Cookies', abs_url("/privacy"), class: "pr-24 ui-footer-link" %>
+        <%= link_to 'Legals', abs_url("/legals"), class: "pr-24 ui-footer-link" %>
+        <%= link_to 'Data Protection', abs_url("/data-protection"), class: "pr-24 ui-footer-link" %>
         <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
       </div>
-
-      <div class="pt-32 flex items-center">
-        <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime">
-          <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
-        </a>
-        <a class="h-24 pr-24 text-cool-black hover:text-icon-linkedin" href="https://www.linkedin.com/company/ably-realtime">
-          <%= render(AblyUi::Core::Icon.new(name: "linkedin", size: "1.5rem")) %>
-        </a>
-        <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/">
-          <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
-        </a>
-        <a class="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5">
-          <%= render(AblyUi::Core::Icon.new(name: "discord", size: "1.5rem")) %>
-        </a>
-        <div class="border-l border-mid-grey h-40"></div>
-        <a
-          class="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"
-          href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
-        >
-          <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
-        </a>
-        <div class="pl-16 text-menu3 font-light">
-          <strong class="block font-medium">We&apos;re hiring!</strong>
-          <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">Learn more</a>
-          at Glassdoor
+    </div>
+    <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
+      <div class="flex mr-24">
+        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
+        <div>
+          <p class="ui-footer-compliance-text font-medium">SOC 2 Type 2</p>
+          <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
+        </div>
+      </div>
+      <div class="flex mr-24 sm:col-start-2">
+        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
+        <div>
+          <p class="ui-footer-compliance-text font-medium">HIPAA</p>
+          <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
+        </div>
+      </div>
+      <div class="flex mr-24 sm:col-start-3">
+        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
+        <div>
+          <p class="ui-footer-compliance-text font-medium">EU GDPR</p>
+          <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
+        </div>
+      </div>
+      <div class="flex mr-24 sm:col-start-4">
+        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
+        <div>
+          <p class="ui-footer-compliance-text font-medium">256-bit AES</p>
+          <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
         </div>
       </div>
-    </div>
-
-    <div class="md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto">
-      <%= image_tag(rocket_list, alt: "Rocket List 2021", class: "mr-24 w-96 h-96") %>
-      <%= image_tag(flexible_companies, alt: "Flexible Companies 2021", class: "w-96 h-96") %>
     </div>
   </div>
 </footer>

package/src/core/Footer/component.jsx

@@ -10,19 +10,18 @@ export default function Footer({ paths, urlBase }) {
   return (
     <footer className="bg-light-grey font-sans antialiased" data-id="footer">
       <div className="max-w-screen-xl mx-auto py-32 sm:py-40 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
-        <div className="col-span-full md:col-span-2">
+        <div className="col-span-full lg:col-span-2">
           <div className="flex flex-row p-menu-row-snug">
             <img className="mr-24 -mt-16" src={paths.ablyStack} alt="Ably homepage" />
             <h2 className="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
           </div>
-
-          <div className="grid grid-cols-4">
+          <div className="grid grid-cols-4 lg:col-span-2">
             <p className="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
               Easily power any realtime experience in your application via a simple API that handles everything realtime.
             </p>
           </div>
 
-          <ul className="grid gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32 sm:grid-cols-2 md:grid-cols-1">
+          <ul className="grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1">
             <li className="p-menu-row-snug">
               <a href={absUrl("/pub-sub-messaging")} className="ui-footer-menu-row-link">
                 Pub/sub messaging
@@ -51,7 +50,7 @@ export default function Footer({ paths, urlBase }) {
           </ul>
         </div>
 
-        <div className="col-span-full sm:col-span-3 md:col-span-1">
+        <div className="col-span-full xs:col-span-3 lg:col-span-1">
           <h2 className="ui-footer-col-title">Ably is for</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -112,7 +111,7 @@ export default function Footer({ paths, urlBase }) {
           </ul>
         </div>
 
-        <div className="col-span-full sm:col-span-3 md:col-span-1">
+        <div className="col-span-full xs:col-span-3 lg:col-span-1">
           <h2 className="ui-footer-col-title">Developers</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -149,12 +148,19 @@ export default function Footer({ paths, urlBase }) {
               <a className="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">
                 System status
               </a>
-              <iframe className="w-24 h-24 mt-4" src="https://status.ably.com/embed/icon" allowtransparency="true" frameBorder="0" scrolling="no"></iframe>
+              <iframe
+                className="w-24 h-24 mt-4"
+                src="https://status.ably.com/embed/icon"
+                allowtransparency="true"
+                frameBorder="0"
+                scrolling="no"
+                title="System Status"
+              ></iframe>
             </li>
           </ul>
         </div>
 
-        <div className="col-span-full sm:col-span-3 md:col-span-1">
+        <div className="col-span-full xs:col-span-3 lg:col-span-1">
           <h2 className="ui-footer-col-title">WHY ABLY</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -190,7 +196,7 @@ export default function Footer({ paths, urlBase }) {
           </ul>
         </div>
 
-        <div className="col-span-full sm:col-span-3 md:col-span-1">
+        <div className="col-span-full xs:col-span-3 lg:col-span-1">
           <h2 className="ui-footer-col-title">ABOUT</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -231,12 +237,84 @@ export default function Footer({ paths, urlBase }) {
           </ul>
         </div>
       </div>
-
       <div className="max-w-screen-xl ui-grid-px mx-auto">
         <hr className="border-t border-mid-grey" />
       </div>
+      {/* Twitter + Glassdoor SM * above + Glassdoor XS  + Badges*/}
+      <div className="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
+        <div className="">
+          <div className="flex flex-col lg:flex-row flex-auto ml-8 sm:col-span-1 lg:col-span-2">
+            <div className="">
+              <div className="flex items-center pb-24">
+                <a className="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
+                  <Icon name="twitter" size="1.5rem" />
+                </a>
+                <a
+                  className="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
+                  href="https://www.linkedin.com/company/ably-realtime"
+                  title="Ably on LinkedIn"
+                >
+                  <Icon name="linkedin" size="1.5rem" />
+                </a>
+                <a className="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/" title="Ably on Github">
+                  <Icon name="github" size="1.5rem" />
+                </a>
+                <a className="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5" title="Ably on Discord">
+                  <Icon name="discord" size="1.5rem" />
+                </a>
+              </div>
+            </div>
+            {/* GLASSDOOR on SM and Above */}
+            <div className="xs:hidden sm:block ui-footer-glassdoor">
+              <div className="flex sm:pt-24 lg:pt-0 sm:border-t sm:border-l-0 lg:border-t-0 lg:border-l sm:border-mid-grey sm:w-3/4 lg:w-full lg:pl-24">
+                <a
+                  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+                  className="h-24 text-cool-black hover:text-icon-glassdoor"
+                  title="Ably reviews on glassdoor"
+                >
+                  <Icon name="glassdoor" size="1.5rem" />
+                </a>
+                <div className="pl-16 text-menu3 font-light">
+                  <strong className="block font-medium">We&apos;re hiring!</strong>
+                  <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
+                    Learn more at Glassdoor
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* GlassDoor on XS ONLY */}
+          <div className="xs:block sm:hidden">
+            <div className="border-t border-mid-grey w-full"></div>
+            <div className="flex py-24">
+              <a
+                className="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
+                href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+                title="Ably reviews on glassdoor"
+              >
+                <Icon name="glassdoor" size="1.5rem" />
+              </a>
+              <div className="text-menu3 font-light">
+                <strong className="block font-medium">We&apos;re hiring!</strong>
+                <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
+                  Learn more at Glassdoor
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
 
-      <div className="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px grid-cols-2">
+        <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto">
+          <img className="mr-24 w-96 h-96" src={paths.highestUserAdoption} alt="Highest User Adoption 2022" />
+          <img className="mr-24 w-96 h-96" src={paths.usersLoveUs} alt="Users Love Us" />
+          <img className="mr-24 w-96 h-96" src={paths.highestPerformer} alt="High Performer 2022" />
+        </div>
+      </div>
+
+      <div className="max-w-screen-xl ui-grid-px mx-auto">
+        <hr className="border-t border-mid-grey" />
+      </div>
+      <div className="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px ">
         <div className="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
           <div className="inline-flex">
             <a href={absUrl("/privacy")} className="pr-24 ui-footer-link">
@@ -252,40 +330,36 @@ export default function Footer({ paths, urlBase }) {
               Privacy
             </a>
           </div>
-
-          <div className="pt-32 flex items-center">
-            <a className="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime">
-              <Icon name="twitter" size="1.5rem" />
-            </a>
-            <a className="h-24 pr-24 text-cool-black hover:text-icon-linkedin" href="https://www.linkedin.com/company/ably-realtime">
-              <Icon name="linkedin" size="1.5rem" />
-            </a>
-            <a className="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/">
-              <Icon name="github" size="1.5rem" />
-            </a>
-            <a className="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5">
-              <Icon name="discord" size="1.5rem" />
-            </a>
-            <div className="border-l border-mid-grey h-40"></div>
-            <a
-              className="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"
-              href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
-            >
-              <Icon name="glassdoor" size="1.5rem" />
-            </a>
-            <div className="pl-16 text-menu3 font-light">
-              <strong className="block font-medium">We&apos;re hiring!</strong>
-              <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
-                Learn more
-              </a>
-              &nbsp;at Glassdoor
+        </div>
+        <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
+          <div className="flex mr-24">
+            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
+            <div>
+              <p className="ui-footer-compliance-text font-medium">SOC 2 Type 2</p>
+              <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
+            </div>
+          </div>
+          <div className="flex mr-24 sm:col-start-2">
+            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
+            <div>
+              <p className="ui-footer-compliance-text font-medium">HIPAA</p>
+              <p className="ui-footer-compliance-text font-light mb-24">Compliant</p>
+            </div>
+          </div>
+          <div className="flex mr-24 sm:col-start-3">
+            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
+            <div>
+              <p className="ui-footer-compliance-text font-medium">EU GDPR</p>
+              <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
+            </div>
+          </div>
+          <div className="flex mr-24 sm:col-start-4">
+            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
+            <div>
+              <p className="ui-footer-compliance-text font-medium">256-bit AES</p>
+              <p className="ui-footer-compliance-text font-light mb-24">Encryption</p>
             </div>
           </div>
-        </div>
-
-        <div className="md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto">
-          <img className="mr-24 w-96 h-96" src={paths.rocketList} alt="Rocket List 2021" />
-          <img className="w-96 h-96" src={paths.flexibleCompanies} alt="Flexible Companies 2021" />
         </div>
       </div>
     </footer>
@@ -295,8 +369,9 @@ export default function Footer({ paths, urlBase }) {
 Footer.propTypes = {
   paths: T.shape({
     ablyStack: T.string,
-    rocketList: T.string,
-    flexibleCompanies: T.string,
+    highestPerformer: T.string,
+    highestUserAdoption: T.string,
+    usersLoveUs: T.string,
   }),
   urlBase: T.string,
 };

package/src/core/Meganav/component.json

@@ -30,7 +30,7 @@
   },
   "panels": [
     { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
-    { "label": "Use Cases & Solutions", "shortLabel": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
+    { "label": "Solutions", "shortLabel": "Solutions", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
     { "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
     { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }
   ]

package/src/core/Meganav/component.rb

@@ -36,8 +36,8 @@ module AblyUi
             class: 'AblyUi::Core::MeganavContentPlatform'
           },
           {
-            label: 'Use Cases & Solutions',
-            short_label: 'Use Cases',
+            label: 'Solutions',
+            short_label: 'Solutions',
             id: 'use-cases-panel',
             class: 'AblyUi::Core::MeganavContentUseCases'
           },

package/src/core/core.rb

@@ -42,12 +42,16 @@ module AblyUi
         asset_path 'ably_ui/core/images/icon-tech-aws.svg'
       end
 
-      def rocket_list
-        asset_path 'ably_ui/core/images/rocket-list-2021.png'
+      def highest_performer
+        asset_path 'ably_ui/core/images/high-performer-2022.png'
       end
 
-      def flexible_companies
-        asset_path 'ably_ui/core/images/flexible-companies.png'
+      def highest_user_adoption
+        asset_path 'ably_ui/core/images/highest-user-adoption-2022.png'
+      end
+
+      def users_love_us
+        asset_path 'ably_ui/core/images/users-love-us-2022.png'
       end
     end