@ably/ui 8.7.0-dev.73348b7 → 8.7.0-dev.734c219

package/src/core/Code/component.js

@@ -1,47 +1,17 @@
 import "./component.css";
-import hljs from "highlight.js/lib/core";
 
-import bash from "highlight.js/lib/languages/bash";
-import cpp from "highlight.js/lib/languages/cpp";
-import csharp from "highlight.js/lib/languages/csharp";
-import dart from "highlight.js/lib/languages/dart";
-import plaintext from "highlight.js/lib/languages/plaintext";
-import go from "highlight.js/lib/languages/go";
-import java from "highlight.js/lib/languages/java";
-import javascript from "highlight.js/lib/languages/javascript";
-import json from "highlight.js/lib/languages/json";
-import objectivec from "highlight.js/lib/languages/objectivec";
-import php from "highlight.js/lib/languages/php";
-import python from "highlight.js/lib/languages/python";
-import ruby from "highlight.js/lib/languages/ruby";
-import swift from "highlight.js/lib/languages/swift";
-import xml from "highlight.js/lib/languages/xml";
+// Note: importing syntax-highlighter here means the component.js file will include
+// all the language dependecies, creating a large a bundle. Prefer using the highlighter serverside.
+import {
+  highlightSnippet,
+  registerDefaultLanguages,
+} from "../utils/syntax-highlighter";
 
-// Supported languages need to be imported here
-// https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md
-const register = [
-  { label: "", key: "plaintext", module: plaintext },
-  { label: "JS", key: "javascript", module: javascript },
-  { label: "Java", key: "java", module: java },
-  { label: "Ruby", key: "ruby", module: ruby },
-  { label: "Python", key: "python", module: python },
-  { label: "PHP", key: "php", module: php },
-  { label: "Shell", key: "bash", module: bash },
-  { label: "C#", key: "cs", module: csharp },
-  { label: "Go", key: "go", module: go },
-  { label: "HTML", key: "xml", module: xml },
-  { label: "C++", key: "cpp", module: cpp },
-  { label: "Dart", key: "dart", module: dart },
-  { label: "Swift", key: "swift", module: swift },
-  { label: "Objective C", key: "objectivec", module: objectivec },
-  { label: "Node.js", key: "javascript", module: javascript },
-  { label: "JSON", key: "json", module: json },
-];
+import languagesRegistry from "../utils/syntax-highlighter-registry";
 
-// Initialize a sub-set of languages as used
-register.forEach(({ key, module }) => hljs.registerLanguage(key, module));
+registerDefaultLanguages(languagesRegistry);
 
-function convertCodeToHTML(el) {
+function highlightEl(el) {
   if (!el) throw "Missing code element";
 
   const pre = el.querySelector("pre");
@@ -51,14 +21,9 @@ function convertCodeToHTML(el) {
   if (!code || !pre || !language) throw "Malformed code element";
 
   const { innerHTML } = code;
-  const html = hljs.highlight(innerHTML, { language }).value;
+  const html = highlightSnippet(language, innerHTML);
 
   code.innerHTML = html;
 }
 
-function highlight(language, snippet) {
-  return hljs.highlight(snippet, { language }).value;
-}
-
-export { highlight };
-export default convertCodeToHTML;
+export default highlightEl;

package/src/core/Code/component.jsx

@@ -1,12 +1,16 @@
 import React from "react";
 import T from "prop-types";
 
-import "./component.css";
-import { highlight } from "./component.js";
+import "../utils/syntax-highlighter.css";
+import { highlightSnippet, registerDefaultLanguages } from "../utils/syntax-highlighter";
+import languagesRegistry from "../utils/syntax-highlighter-registry";
+
+registerDefaultLanguages(languagesRegistry);
 
 const Code = ({ language, snippet, textSize = "ui-text-code", padding = "p-32", additionalCSS = "" }) => {
-  const HTMLraw = highlight(language, `${snippet}`.trim());
+  const HTMLraw = highlightSnippet(language, `${snippet}`.trim());
   const className = `language-${language} ${textSize}`;
+
   return (
     <div className={`hljs overflow-auto ${padding} ${additionalCSS}`} data-id="code">
       <pre lang={language}>

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

@@ -1,9 +1,9 @@
 <section class="w-full bg-white">
-  <ul class="py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center">
+  <%= tag.ul class: "py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center #{@additional_css}" do %>
     <% companies.each do |company| %>
 	    <li class="flex-auto text-center sm:w-1/3 w-1/2">
 	      <%= image_tag company[:logo], alt: "#{company[:label]} logo", class: 'mx-auto' %>
 	    </li>
     <% end %>
-  </ul>
+  <% end %>
 </section>

package/src/core/CustomerLogos/component.jsx

@@ -1,10 +1,10 @@
 import React from "react";
 import T from "prop-types";
 
-const CustomerLogos = ({ companies }) => {
+const CustomerLogos = ({ companies, additionalCss = "" }) => {
   return (
     <section className="w-full bg-white">
-      <ul className="py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center">
+      <ul className={`py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center ${additionalCss}`}>
         {companies.map((company) => (
           <li key={company.label} className="flex-auto text-center sm:w-1/3 w-1/2">
             <img alt={company.label} src={company.logo} className="mx-auto" />
@@ -22,6 +22,7 @@ CustomerLogos.propTypes = {
       logo: T.string,
     })
   ),
+  additionalCss: T.string,
 };
 
 export default CustomerLogos;

package/src/core/CustomerLogos/component.rb

@@ -5,8 +5,9 @@ module AblyUi
     class CustomerLogos < ViewComponent::Base
       attr_reader :companies
 
-      def initialize(companies:)
+      def initialize(companies:, additional_css: '')
         @companies = companies
+        @additional_css = additional_css
       end
     end
   end

package/src/core/DropdownMenu/component.jsx

@@ -0,0 +1,112 @@
+import React, { createContext, useContext, useState, useEffect, useRef } from "react";
+import T from "prop-types";
+import Icon from "../Icon/component.jsx";
+
+const DropdownMenuContext = createContext();
+
+const DropdownMenu = ({ children }) => {
+  const [isOpen, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const clickHandler = (e) => {
+      if (ref?.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+
+    document.addEventListener("click", clickHandler);
+
+    return () => {
+      document.removeEventListener("click", clickHandler);
+    };
+  }, []);
+
+  return (
+    <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>
+      <div id="dropdown-menu" className="relative" ref={ref}>
+        {children}
+      </div>
+    </DropdownMenuContext.Provider>
+  );
+};
+
+DropdownMenu.propTypes = {
+  children: T.node,
+};
+
+const Trigger = ({ children, additionalTriggerCSS = "" }) => {
+  const { isOpen, setOpen } = useContext(DropdownMenuContext);
+
+  return (
+    <button
+      id="menu-trigger"
+      onClick={() => setOpen(!isOpen)}
+      className={`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`}
+    >
+      <span className="leading-normal">{children}</span>
+      <Icon
+        name="icon-gui-disclosure-arrow"
+        color="text-cool-black"
+        size="1.25rem"
+        additionalCSS="transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"
+      />
+    </button>
+  );
+};
+
+Trigger.propTypes = {
+  children: T.node,
+  additionalTriggerCSS: T.string,
+};
+
+const Content = ({ children, anchorPosition = "right", additionalContentCSS }) => {
+  const { isOpen } = useContext(DropdownMenuContext);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const anchorPositionClasses = anchorPosition === "right" ? "right-0" : "left-0";
+
+  return (
+    <div
+      id="menu-content"
+      className={`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`}
+      style={{ minWidth: 275, top: 44 }}
+    >
+      {children}
+    </div>
+  );
+};
+
+Content.propTypes = {
+  children: T.node,
+  anchorPosition: T.string,
+  additionalContentCSS: T.string,
+};
+
+const Link = ({ url, title, subtitle, iconName, children }) => {
+  return (
+    <a href={url} className="menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded">
+      <p className="mb-4">
+        {title}
+        {iconName ? <Icon name={iconName} size="1rem" color="text-cool-black" additionalCSS="align-middle ml-8 relative -top-1 -left-4" /> : null}
+      </p>
+      {subtitle ? <p className="text-p3 mb-16 text-dark-grey">{subtitle}</p> : null}
+      {children}
+    </a>
+  );
+};
+
+Link.propTypes = {
+  url: T.string,
+  title: T.string,
+  subtitle: T.string,
+  iconName: T.string,
+  children: T.node,
+};
+
+DropdownMenu.Trigger = Trigger;
+DropdownMenu.Content = Content;
+DropdownMenu.Link = Link;
+export default DropdownMenu;

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

@@ -46,7 +46,7 @@
           </ul>
         </span>
         <span class="flex-0">
-          <%= link_to 'Start with a free account', abs_url("/sign-up"), class: "ui-btn-secondary self-start mt-24" %>
+          <%= link_to 'Start building', abs_url("/sign-up"), class: "ui-btn-secondary self-start mt-24" %>
         </span>
       </div>
     </div>

package/src/core/FeaturedLink/component.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-featured-link {
-    @apply font-sans font-medium block;
+    @apply font-manrope font-bold block;
     @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
   }
 

package/src/core/Flash/component.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import DOMPurify from "dompurify";
 import T from "prop-types";
+import { nanoid } from "nanoid/non-secure";
 
 import { getRemoteDataStore } from "../remote-data-store";
 import ConnectStateWrapper from "../ConnectStateWrapper/component.jsx";
@@ -50,30 +51,45 @@ const FLASH_TEXT_COLOR = {
 const AUTO_HIDE = ["success", "info", "notice"];
 const AUTO_HIDE_TIME = 8000;
 
-const Flash = ({ type, content }) => {
-  const ref = useRef(null);
-  const [closed, setClosed] = useState(false);
-  const [flashHeight, setFlashHeight] = useState(0);
-  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);
+const useAutoHide = (type, closeFlash) => {
+  const timeoutId = useRef(null);
 
-  useEffect(() => setTriggerEntryAnimation(true), []);
   useEffect(() => {
     if (AUTO_HIDE.includes(type)) {
-      setTimeout(() => {
-        // closeFlash is idempotent, we can call it even if the flash has been already closed
+      timeoutId.current = setTimeout(() => {
         closeFlash();
       }, AUTO_HIDE_TIME);
     }
-  }, [closed]);
+
+    return () => {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+};
+
+const Flash = ({ id, type, content, removeFlash }) => {
+  const ref = useRef(null);
+  const [closed, setClosed] = useState(false);
+  const [flashHeight, setFlashHeight] = useState(0);
+  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);
 
   const closeFlash = () => {
     if (ref.current) {
       setFlashHeight(ref.current.getBoundingClientRect().height);
     }
 
-    setTimeout(() => setClosed(true), 0);
+    setClosed(true);
+
+    setTimeout(() => {
+      removeFlash(id);
+    }, 100);
   };
 
+  useEffect(() => setTriggerEntryAnimation(true), []);
+  useAutoHide(type, closeFlash);
+
   const animateEntry = triggerEntryAnimation && !closed;
 
   let style;
@@ -123,13 +139,23 @@ Flash.propTypes = {
 };
 
 const Flashes = ({ flashes }) => {
-  const items = flashes?.items || [];
+  const [flashesWithIds, setFlashesWithIds] = useState([]);
+
+  const removeFlash = (flashId) => setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));
+
+  useEffect(() => {
+    setFlashesWithIds((state) => {
+      return [...state, ...(flashes?.items || []).map((flash) => ({ ...flash, id: nanoid(), removed: false }))];
+    });
+  }, [flashes]);
 
   return (
     <div className="ui-flash" data-id={FLASH_DATA_ID}>
-      {items.map((flash) => (
-        <Flash key={flash.type} {...flash} />
-      ))}
+      {flashesWithIds
+        .filter((item) => !item.removed)
+        .map((flash) => (
+          <Flash removeFlash={removeFlash} key={flash.id} {...flash} />
+        ))}
     </div>
   );
 };

package/src/core/Footer/component.css

@@ -1,13 +1,33 @@
 @layer components {
   .ui-footer-col-title {
-    @apply text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
+    @apply font-jetbrains_mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
   }
 
   .ui-footer-menu-row-link {
-    @apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
+    @apply text-menu3 text-cool-black font-manrope font-medium hover:text-gui-hover block;
   }
 
   .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-manrope font-medium;
+  }
+
+  .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,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">
+<footer class="bg-light-grey font-manrope antialiased leading-normal" data-id="footer">
+  <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>
+        <h2 class="text-overline2 col-span-full font-jetbrains_mono font-bold uppercase tracking-widen-0.16">The Ably Platform</h2>
       </div>
-
-      <div class="grid grid-cols-4">
-        <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="font-manrope text-p3 py-16 font-bold 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 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 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 md: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 md:col-span-1">
       <h2 class="ui-footer-col-title">Developers</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -91,14 +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 sm:col-span-3 md: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">
@@ -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 md: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" />
+    <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 grid ui-grid-gap ui-grid-px grid-cols-2">
-    <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 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
+  <%# Twitter + Glassdoor SM * above + Glassdoor XS  + Badges %>
+  <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 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 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"
+                  title="Ably reviews on glassdoor"
+                >
+              <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
+            </a>
+            <div class="pl-16 text-menu3 font-manrope font-medium">
+              <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="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
+      <%# 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-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"
+              >
+            <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
+          </a>
+          <div class="text-menu3 font-manrope font-medium">
+            <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="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 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 my-0"/>
+  </div>
+  <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 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 ui-footer-tick-icon")) %>
+        <div>
+          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
+        </div>
+      </div>
+      <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-bold whitespace-nowrap">HIPAA</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
+        </div>
+      </div>
+      <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-bold whitespace-nowrap">EU GDPR</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
+        </div>
+      </div>
+      <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-bold whitespace-nowrap">256-bit AES</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
+        </div>
+      </div>
     </div>
   </div>
 </footer>