@ably/ui 10.8.0 → 10.10.0

package/README.md

@@ -294,10 +294,14 @@ To deploy a review app with your in-progress code, you can use the `pre-release`
 scripts/pre-release.sh
 ```
 
-This will do a couple of things:
+This script is a combination of two scripts:
 
-— update your local dependencies for ably-ui and run a production build
-— release a gem and a NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
+1. Pre-Release:
+
+- update your local dependencies for ably-ui and run a production build
+- release a gem and a NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
+
+2. Update Pre-Release Version:
 
 - update the preview app
 - commit all the above and push to origin

package/core/Footer/component.css

@@ -8,13 +8,23 @@
   }
 
   .ui-footer-link {
-    @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
   }
 
   .ui-footer-compliance-text {
     font-size: 12px;
   }
 
+  .ui-footer-tick-icon {
+    min-width: 1.5rem;
+  }
+
+  @media (max-width: 1040px) {
+    .ui-footer-bottom-links {
+      @apply pb-40;
+    }
+  }
+
   @media screen {
     .ui-footer-glassdoor {
       display: none;

package/core/Footer.jsx

@@ -191,9 +191,9 @@ function Footer(_ref) {
     className: "bg-light-grey font-sans antialiased",
     "data-id": "footer"
   }, /*#__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"
+    className: "max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full lg:col-span-2"
+    className: "col-span-full md: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 lg:col-span-2"
+    className: "md:col-span-4 md:w-3/4 xs:w-3/5 w-full"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "text-p3 py-16 font-medium p-menu-row-snug col-span-3"
+    className: "text-p3 py-16 font-medium p-menu-row-snug"
   }, "Easily power any realtime experience in your application via a simple API that handles everything realtime.")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
-    className: "grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1"
+    className: "grid 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 xs:col-span-3 lg:col-span-1"
+    className: "col-span-full xs:col-span-3 md: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 xs:col-span-3 lg:col-span-1"
+    className: "col-span-full xs:col-span-3 md: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", {
@@ -327,19 +327,19 @@ function Footer(_ref) {
     href: absUrl("/download"),
     className: "ui-footer-menu-row-link"
   }, "SDKs")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
-    className: "p-menu-row-snug flex items-center"
+    className: "p-menu-row-snug flex items-center -mt-4"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "pr-8 ui-footer-menu-row-link",
     href: "https://status.ably.com/"
   }, "System status"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("iframe", {
-    className: "w-24 h-24 mt-4",
+    className: "w-20 h-20 mb-2",
     src: "https://status.ably.com/embed/icon",
     allowtransparency: "true",
     frameBorder: "0",
     scrolling: "no",
     title: "System Status"
   })))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full xs:col-span-3 lg:col-span-1"
+    className: "col-span-full xs:col-span-3 md: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", {
@@ -373,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 xs:col-span-3 lg:col-span-1"
+    className: "col-span-full xs:col-span-3 md: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", {
@@ -414,17 +414,17 @@ function Footer(_ref) {
   }, "Contact us"))))), /*#__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"
+    className: "border-t border-mid-grey my-0"
   })), /*#__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 sm:grid-cols-2"
+    className: "max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: ""
+    className: "md:flex md:items-center"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "flex flex-col lg:flex-row flex-auto ml-8 sm:col-span-1 lg:col-span-2"
+    className: "flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md: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"
+    className: "flex 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",
@@ -456,7 +456,7 @@ function Footer(_ref) {
   })))), /*#__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"
+    className: "flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24"
   }, /*#__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",
@@ -478,7 +478,7 @@ function Footer(_ref) {
   }), /*#__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",
+    className: "h-24 pr-16 text-cool-black hover:text-icon-glassdoor",
     href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
     title: "Ably reviews on glassdoor"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
@@ -492,29 +492,29 @@ function Footer(_ref) {
     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"
+    className: "col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
-    className: "mr-24 w-96 h-96",
+    className: "mr-24 h-80",
     src: paths.highestUserAdoption,
     alt: "Highest User Adoption 2022"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
-    className: "mr-24 w-96 h-96",
+    className: "mr-24 h-80",
     src: paths.usersLoveUs,
     alt: "Users Love Us"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
-    className: "mr-24 w-96 h-96",
+    className: "mr-24 h-80",
     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"
+    className: "border-t border-mid-grey my-0"
   })), /*#__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 "
+    className: "max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px"
   }, /*#__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: "flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "inline-flex"
+    className: "flex"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/privacy"),
     className: "pr-24 ui-footer-link"
@@ -528,49 +528,49 @@ function Footer(_ref) {
     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 "
+    className: "xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end"
   }, /*#__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"
+    additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
   }), /*#__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"
+    className: "ui-footer-compliance-text font-medium whitespace-nowrap"
   }, "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"
+    className: "flex mr-24 md: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"
+    additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
   }), /*#__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"
+    className: "ui-footer-compliance-text font-medium whitespace-nowrap"
   }, "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"
+    className: "flex mr-24 md: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"
+    additionalCSS: "bg-white rounded-full mr-12  ui-footer-tick-icon"
   }), /*#__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"
+    className: "ui-footer-compliance-text font-medium whitespace-nowrap"
   }, "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"
+    className: "flex mr-24 md: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"
+    additionalCSS: "bg-white rounded-full mr-12  ui-footer-tick-icon"
   }), /*#__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"
+    className: "ui-footer-compliance-text font-medium whitespace-nowrap"
   }, "256-bit AES"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-footer-compliance-text font-light mb-24"
   }, "Encryption"))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "10.8.0",
+  "version": "10.10.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

@@ -8,13 +8,23 @@
   }
 
   .ui-footer-link {
-    @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
   }
 
   .ui-footer-compliance-text {
     font-size: 12px;
   }
 
+  .ui-footer-tick-icon {
+    min-width: 1.5rem;
+  }
+
+  @media (max-width: 1040px) {
+    .ui-footer-bottom-links {
+      @apply pb-40;
+    }
+  }
+
   @media screen {
     .ui-footer-glassdoor {
       display: none;

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

@@ -1,16 +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 lg:col-span-2">
+  <div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
+    <div class="col-span-full md: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 lg:col-span-2">
-        <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
+      <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
+        <p class="text-p3 py-16 font-medium p-menu-row-snug">
           Easily power any realtime experience in your application via a simple API that handles everything realtime.
         </p>
       </div>
-      <ul class="grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1">
+      <ul class="grid 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>
@@ -28,7 +28,7 @@
         </li>
       </ul>
     </div>
-    <div class="col-span-full xs:col-span-3 lg:col-span-1">
+    <div class="col-span-full xs:col-span-3 md:col-span-1">
       <h2 class="ui-footer-col-title">Ably is for</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -66,7 +66,7 @@
         </li>
       </ul>
     </div>
-    <div class="col-span-full xs:col-span-3 lg:col-span-1">
+    <div class="col-span-full xs:col-span-3 md:col-span-1">
       <h2 class="ui-footer-col-title">Developers</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -87,13 +87,13 @@
         <li class="p-menu-row-snug">
           <%= link_to 'SDKs', abs_url("/download"), class: "ui-footer-menu-row-link" %>
         </li>
-        <li class="p-menu-row-snug flex items-center">
+        <li class="p-menu-row-snug flex items-center -mt-4">
           <a class="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">System status</a>
-          <iframe class="w-24 h-24 mt-4" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
+          <iframe class="w-20 h-20 mb-2" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
         </li>
       </ul>
     </div>
-    <div class="col-span-full xs:col-span-3 lg:col-span-1">
+    <div class="col-span-full xs:col-span-3 md:col-span-1">
       <h2 class="ui-footer-col-title">WHY ABLY</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -116,7 +116,7 @@
         </li>
       </ul>
     </div>
-    <div class="col-span-full xs:col-span-3 lg:col-span-1">
+    <div class="col-span-full xs:col-span-3 md:col-span-1">
       <h2 class="ui-footer-col-title">ABOUT</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -144,14 +144,14 @@
     </div>
   </div>
   <div class="max-w-screen-xl ui-grid-px mx-auto">
-    <hr class="border-t border-mid-grey" />
+    <hr class="border-t border-mid-grey my-0"/>
   </div>
   <%# 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="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
+    <div class="md:flex md:items-center">
+      <div class="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
         <div class="">
-          <div class="flex items-center pb-24">
+          <div class="flex 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>
@@ -172,7 +172,7 @@
         </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">
+          <div class="flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24">
             <a
                   href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
                   class="h-24 text-cool-black hover:text-icon-glassdoor"
@@ -194,7 +194,7 @@
         <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"
+                class="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
                 href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
                 title="Ably reviews on glassdoor"
               >
@@ -209,50 +209,50 @@
         </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 class="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
+      <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 h-80") %>
+      <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 h-80") %>
+      <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 h-80") %>
     </div>
   </div>
   <div class="max-w-screen-xl ui-grid-px mx-auto">
-    <hr class="border-t border-mid-grey" />
+    <hr class="border-t border-mid-grey my-0"/>
   </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">
+  <div class="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px">
+    <div class="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
+      <div class="flex">
         <%= 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>
-    <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
+    <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
       <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")) %>
+        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium">SOC 2 Type 2</p>
+          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">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 class="flex mr-24 md: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 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium">HIPAA</p>
+          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">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 class="flex mr-24 md: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 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium">EU GDPR</p>
+          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">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 class="flex mr-24 md: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 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium">256-bit AES</p>
+          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
           <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
         </div>
       </div>

package/src/core/Footer/component.jsx

@@ -9,19 +9,19 @@ 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 lg:col-span-2">
+      <div className="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
+        <div className="col-span-full md:col-span-2">
           <div className="flex flex-row p-menu-row-snug">
             <img className="mr-24 -mt-16" src={paths.ablyStack} alt="Ably homepage" />
             <h2 className="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
           </div>
-          <div className="grid grid-cols-4 lg:col-span-2">
-            <p className="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
+          <div className="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
+            <p className="text-p3 py-16 font-medium p-menu-row-snug">
               Easily power any realtime experience in your application via a simple API that handles everything realtime.
             </p>
           </div>
 
-          <ul className="grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1">
+          <ul className="grid grid-cols-1">
             <li className="p-menu-row-snug">
               <a href={absUrl("/pub-sub-messaging")} className="ui-footer-menu-row-link">
                 Pub/sub messaging
@@ -50,7 +50,7 @@ export default function Footer({ paths, urlBase }) {
           </ul>
         </div>
 
-        <div className="col-span-full xs:col-span-3 lg:col-span-1">
+        <div className="col-span-full xs:col-span-3 md:col-span-1">
           <h2 className="ui-footer-col-title">Ably is for</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -111,7 +111,7 @@ export default function Footer({ paths, urlBase }) {
           </ul>
         </div>
 
-        <div className="col-span-full xs:col-span-3 lg:col-span-1">
+        <div className="col-span-full xs:col-span-3 md:col-span-1">
           <h2 className="ui-footer-col-title">Developers</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -144,12 +144,12 @@ export default function Footer({ paths, urlBase }) {
                 SDKs
               </a>
             </li>
-            <li className="p-menu-row-snug flex items-center">
+            <li className="p-menu-row-snug flex items-center -mt-4">
               <a className="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">
                 System status
               </a>
               <iframe
-                className="w-24 h-24 mt-4"
+                className="w-20 h-20 mb-2"
                 src="https://status.ably.com/embed/icon"
                 allowtransparency="true"
                 frameBorder="0"
@@ -160,7 +160,7 @@ export default function Footer({ paths, urlBase }) {
           </ul>
         </div>
 
-        <div className="col-span-full xs:col-span-3 lg:col-span-1">
+        <div className="col-span-full xs:col-span-3 md:col-span-1">
           <h2 className="ui-footer-col-title">WHY ABLY</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -196,7 +196,7 @@ export default function Footer({ paths, urlBase }) {
           </ul>
         </div>
 
-        <div className="col-span-full xs:col-span-3 lg:col-span-1">
+        <div className="col-span-full xs:col-span-3 md:col-span-1">
           <h2 className="ui-footer-col-title">ABOUT</h2>
           <ul>
             <li className="p-menu-row-snug">
@@ -238,14 +238,14 @@ export default function Footer({ paths, urlBase }) {
         </div>
       </div>
       <div className="max-w-screen-xl ui-grid-px mx-auto">
-        <hr className="border-t border-mid-grey" />
+        <hr className="border-t border-mid-grey my-0" />
       </div>
-      {/* Twitter + Glassdoor SM * above + Glassdoor XS  + Badges*/}
-      <div className="max-w-screen-xl mx-auto py-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">
+      {/* Twitter + Glassdoor SM & above + Glassdoor XS  + Badges*/}
+      <div className="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
+        <div className="md:flex md:items-center">
+          <div className="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
             <div className="">
-              <div className="flex items-center pb-24">
+              <div className="flex pb-24">
                 <a className="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
                   <Icon name="twitter" size="1.5rem" />
                 </a>
@@ -266,7 +266,7 @@ export default function Footer({ paths, urlBase }) {
             </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">
+              <div className="flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24">
                 <a
                   href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
                   className="h-24 text-cool-black hover:text-icon-glassdoor"
@@ -288,7 +288,7 @@ export default function Footer({ paths, urlBase }) {
             <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"
+                className="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
                 href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
                 title="Ably reviews on glassdoor"
               >
@@ -304,19 +304,19 @@ export default function Footer({ paths, urlBase }) {
           </div>
         </div>
 
-        <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 className="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
+          <img className="mr-24 h-80" src={paths.highestUserAdoption} alt="Highest User Adoption 2022" />
+          <img className="mr-24 h-80" src={paths.usersLoveUs} alt="Users Love Us" />
+          <img className="mr-24 h-80" 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" />
+        <hr className="border-t border-mid-grey my-0" />
       </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">
+      <div className="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px">
+        <div className="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
+          <div className="flex">
             <a href={absUrl("/privacy")} className="pr-24 ui-footer-link">
               Cookies
             </a>
@@ -331,32 +331,32 @@ export default function Footer({ paths, urlBase }) {
             </a>
           </div>
         </div>
-        <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
+        <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
           <div className="flex mr-24">
-            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
+            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium">SOC 2 Type 2</p>
+              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
               <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
             </div>
           </div>
-          <div className="flex mr-24 sm:col-start-2">
-            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
+          <div className="flex mr-24 md:col-start-2">
+            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium">HIPAA</p>
+              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
               <p className="ui-footer-compliance-text font-light mb-24">Compliant</p>
             </div>
           </div>
-          <div className="flex mr-24 sm:col-start-3">
-            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
+          <div className="flex mr-24 md:col-start-3">
+            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12  ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium">EU GDPR</p>
+              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
               <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
             </div>
           </div>
-          <div className="flex mr-24 sm:col-start-4">
-            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
+          <div className="flex mr-24 md:col-start-4">
+            <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12  ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium">256-bit AES</p>
+              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
               <p className="ui-footer-compliance-text font-light mb-24">Encryption</p>
             </div>
           </div>