@ably/ui 8.7.0-dev.2b71529 → 8.7.0-dev.2f1ba81

package/core/styles.css

@@ -1,38 +1,132 @@
 @layer base {
   :root {
-    --color-cool-black: #03020d;
-    --color-active-orange: #ff5416;
-    --color-red-orange: #e40000;
-    --color-white: #ffffff;
-    --color-electric-cyan: #4ad4ff;
-    --color-zingy-green: #08ff13;
-    --color-bright-red: #fe372b;
+    /* Neutral colors */
+    --color-neutral-000: #ffffff;
+    --color-neutral-100: #f8fafc;
+    --color-neutral-200: #f4f8fb;
+    --color-neutral-300: #edf1f7;
+    --color-neutral-400: #e2e7ef;
+    --color-neutral-500: #c6ced9;
+    --color-neutral-600: #adb6c2;
+    --color-neutral-700: #89929f;
+    --color-neutral-800: #667085;
+    --color-neutral-900: #39414e;
+    --color-neutral-1000: #2b303b;
+    --color-neutral-1100: #202531;
+    --color-neutral-1200: #141924;
+    --color-neutral-1300: #03020d;
+
+    /* Ably orange */
+    --color-orange-100: #fff5f1;
+    --color-orange-200: #ffe3d8;
+    --color-orange-300: #ffc4ae;
+    --color-orange-400: #ff9c79;
+    --color-orange-500: #ff723f;
+    --color-orange-600: #ff5416;
     --color-orange-700: #ff2739;
-    --color-jazzy-pink: #ff17d2;
-    --color-extra-light-grey: #f8fafc;
-    --color-light-grey: #f4f8fb;
-    --color-mid-grey: #c6ced9;
-    --color-dark-grey: #667085;
-    --color-charcoal-grey: #2b303b;
-    --color-gui-default: #006edc;
-    --color-gui-hover: #0862b9;
-    --color-gui-active: #074095;
-    --color-gui-default-dark: #4da6ff;
-    --color-gui-hover-dark: #2894ff;
-    --color-gui-active-dark: #0080ff;
+    --color-orange-800: #e40000;
+    --color-orange-900: #b82202;
+    --color-orange-1000: #751500;
+    --color-orange-1100: #2a0b00;
+
+    /* Secondary colours */
+    --color-yellow-100: #fffbef;
+    --color-yellow-200: #fff0ba;
+    --color-yellow-300: #ffe27c;
+    --color-yellow-400: #ffd43d;
+    --color-yellow-500: #f8c100;
+    --color-yellow-600: #e8a700;
+    --color-yellow-700: #ac8600;
+    --color-yellow-800: #654f00;
+    --color-yellow-900: #291c01;
+    --color-green-100: #f1fff1;
+    --color-green-200: #b8ffbb;
+    --color-green-300: #80ff85;
+    --color-green-400: #08ff13;
+    --color-green-500: #00e80b;
+    --color-green-600: #00c008;
+    --color-green-700: #008e06;
+    --color-green-800: #005303;
+    --color-green-900: #002a02;
+    --color-blue-100: #f1fbff;
+    --color-blue-200: #b8eaff;
+    --color-blue-300: #80d9ff;
+    --color-blue-400: #4ad4ff;
+    --color-blue-500: #2cc0ff;
+    --color-blue-600: #00a5ec;
+    --color-blue-700: #0284cd;
+    --color-blue-800: #004b75;
+    --color-blue-900: #001b2a;
+    --color-violet-100: #f7f2fe;
+    --color-violet-200: #d8bcfb;
+    --color-violet-300: #b986f8;
+    --color-violet-400: #9951f5;
+    --color-violet-500: #7a1bf2;
+    --color-violet-600: #5f0bc9;
+    --color-violet-700: #460894;
+    --color-violet-800: #2d055e;
+    --color-violet-900: #130228;
+    --color-pink-100: #fff1fc;
+    --color-pink-200: #ffb8f1;
+    --color-pink-300: #ff80e6;
+    --color-pink-400: #ff47db;
+    --color-pink-500: #ff17d2;
+    --color-pink-600: #d400ab;
+    --color-pink-700: #9c007e;
+    --color-pink-800: #630050;
+    --color-pink-900: #2a0022;
+
+    /* GUI colours */
+    /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
+    --color-gui-blue-default-light: #006edc;
+    --color-gui-blue-hover-light: #0862b9;
+    --color-gui-blue-active-light: #074095;
+    --color-gui-blue-default-dark: #4da6ff;
+    --color-gui-blue-hover-dark: #2894ff;
+    --color-gui-blue-active-dark: #0080ff;
+    --color-gui-blue-focus: #80b9f2;
+    --color-gui-unavailable: #a8a8a8;
+    --color-gui-success-green: #11cb24;
+    --color-gui-error-red: #fb0c0c;
     --color-gui-focus: #80b9f2;
     --color-gui-focus-outline: #80b9f2;
     --color-gui-visited: #4887c2;
-    --color-gui-unavailable: #a8a8a8;
-    --color-gui-error: #fb0c0c;
-    --color-gui-success: #11cb24;
+
+    /* Colours replaced by neutral colours */
+    --color-white: var(--color-neutral-000);
+    --color-extra-light-grey: var(--color-neutral-100);
+    --color-light-grey: var(--color-neutral-200);
+    --color-mid-grey: var(--color-neutral-500);
+    --color-dark-grey: var(--color-neutral-800);
+    --color-charcoal-grey: var(--color-neutral-1000);
+    --color-cool-black: var(--color-neutral-1300);
+
+    /* Colours replaced by orange colours */
+    --color-active-orange: var(--color-orange-600);
+    --color-bright-red: var(--color-orange-700);
+    --color-red-orange: var(--color-orange-800);
+
+    /* Colours replaced by secondary colours */
+    --color-electric-cyan: var(--color-blue-400);
+    --color-zingy-green: var(--color-green-400);
+    --color-jazzy-pink: var(--color-pink-500);
+
+    /* Colours replaced by GUI colours */
+    --color-gui-default: var(--color-gui-blue-default-light);
+    --color-gui-hover: var(--color-gui-blue-hover-light);
+    --color-gui-active: var(--color-gui-blue-active-light);
+    --color-gui-error: var(--color-gui-error-red);
+    --color-gui-success: var(--color-gui-success-green);
+    --color-gui-default-dark: var(--color-gui-blue-default-dark);
+    --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
+    --color-gui-active-dark: var(--color-gui-blue-active-dark);
 
     /* code syntax: theme */
-    --syntax-black: var(--color-cool-black);
-    --syntax-dark-grey: var(--color-dark-grey);
-    --syntax-mid-grey: var(--color-mid-grey);
-    --syntax-light-grey: var(--color-light-grey);
-    --syntax-extra-light-grey: var(--color-extra-light-grey);
+    --syntax-black: var(--color-neutral-1300);
+    --syntax-dark-grey: var(--color-neutral-800);
+    --syntax-mid-grey: var(--color-neutral-500);
+    --syntax-light-grey: var(--color-neutral-200);
+    --syntax-extra-light-grey: var(--color-neutral-100);
     --syntax-orange: #e78c45;
     --syntax-yellow: #e7c547;
     --syntax-blue: #3490ec;
@@ -40,10 +134,6 @@
     --syntax-red: #d54e53;
     --syntax-lilac: #bb87d3;
 
-    /* New Neutral colors */
-    --color-neutral-900: #39414e;
-    --color-neutral-500: #c6ced9;
-
     /* uptime status colors */
     --uptime-color-up: #39b54a;
     --uptime-color-trouble: #e87623;
@@ -195,7 +285,7 @@
 }
 @layer components {
   .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -219,7 +309,7 @@
     background-size: 200% 100%;
     background-position: 0% 0%;
 
-    @apply text-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
+    @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply focus:outline-gui-focus;
     @apply inline-flex items-center justify-center;
   }
@@ -235,7 +325,7 @@
   }
 
   .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -245,7 +335,7 @@
   }
 
   .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block border-btn border-cool-black rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
     @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
@@ -255,7 +345,7 @@
   }
 
   .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block border-btn border-mid-grey rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus:outline-gui-focus;
@@ -340,53 +430,53 @@
 }
 @layer components {
   .ui-text-title {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-title-xs xs:text-title xl:text-title-xl;
     @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
   }
 
   .ui-text-h1 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
     @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
   }
 
   .ui-text-h2 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
     @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
   }
 
   .ui-text-h3 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h3;
     @apply tracking-tighten-0.005;
   }
 
   .ui-text-h4 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h4;
     @apply tracking-tighten-0.0015;
   }
 
   .ui-text-h5 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h5;
     @apply tracking-tighten-0.0025;
   }
 
   .ui-text-p1 {
-    @apply font-manrope font-medium text-charcoal-grey;
+    @apply font-sans font-medium text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-manrope font-medium text-charcoal-grey;
+    @apply font-sans font-medium text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-manrope font-medium text-charcoal-grey;
+    @apply font-sans font-medium text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -397,53 +487,53 @@
   }
 
   .ui-text-quote {
-    @apply font-manrope font-normal text-cool-black;
+    @apply font-sans font-normal text-cool-black;
     @apply text-quote leading-normal;
     @apply tracking-tighten-0.0015;
   }
 
   .ui-text-sub-header {
-    @apply font-manrope font-semibold text-neutral-900;
+    @apply font-sans font-semibold text-neutral-800;
     @apply text-sub-header-xs xs:text-sub-header leading-normal;
   }
 
   .ui-text-overline1 {
-    @apply font-jetbrains_mono font-medium text-active-orange uppercase;
+    @apply font-mono font-medium text-active-orange uppercase;
     @apply text-overline1 leading-normal;
     @apply tracking-widen-0.16;
   }
 
   .ui-text-overline2 {
-    @apply font-jetbrains_mono font-medium text-active-orange uppercase;
+    @apply font-mono font-medium text-active-orange uppercase;
     @apply text-overline2 leading-normal;
     @apply tracking-widen-0.16;
   }
 
   .ui-text-menu1 {
-    @apply font-manrope font-medium text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-menu1 leading-snug;
   }
 
   .ui-text-menu2 {
-    @apply font-manrope font-medium text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-menu2 leading-snug;
   }
 
   .ui-text-menu3 {
-    @apply font-manrope font-medium text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-menu3 leading-snug;
   }
 
   .ui-text-code {
-    @apply font-jetbrains_mono font-medium text-code;
+    @apply font-mono font-medium text-code;
   }
 
   .ui-text-code2 {
-    @apply font-jetbrains_mono font-medium text-code2;
+    @apply font-mono font-medium text-code2;
   }
 
   .ui-text-code-inline {
-    @apply font-jetbrains_mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @apply font-mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
   }
 
   .ui-unordered-list {
@@ -479,7 +569,7 @@
 
   .ui-ordered-list li,
   .ui-unordered-list li {
-    @apply font-medium font-manrope tracking-widen-0;
+    @apply font-medium font-sans tracking-widen-0;
     line-height: var(--lh-extra-relaxed);
   }
 
@@ -520,11 +610,11 @@
 }
 @layer components {
   .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-manrope font-medium;
+    @apply flex items-start mb-16 font-sans font-medium;
   }
 
   .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-manrope font-medium;
+    @apply flex items-start mb-12 font-sans font-medium;
   }
 
   .ui-checkbox-input {
@@ -569,7 +659,7 @@
   }
 
   .ui-textarea {
-    @apply font-manrope font-medium text-cool-black text-p1;
+    @apply font-sans font-medium text-cool-black text-p1;
     @apply p-input mb-16;
     @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
     @apply hover:bg-white hover:shadow-input hover:border-transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.7.0-dev.2b71529",
+  "version": "8.7.0-dev.2f1ba81",
   "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",
@@ -27,8 +27,7 @@
     "change-case": "^4.1.1",
     "commander": "^7.2.0",
     "css-loader": "^5.0.0",
-    "cypress": "^6.4.0",
-    "cypress-plugin-snapshots": "^1.4.4",
+    "cypress": "^13.3.1",
     "eslint": "^7.12.1",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-cypress": "^2.11.2",
@@ -65,6 +64,7 @@
     "release": "./scripts/release.sh"
   },
   "dependencies": {
+    "@mrtkrcm/cypress-plugin-snapshots": "https://github.com/mrtkrcm/cypress-plugin-snapshots#v1.13.0",
     "addsearch-js-client": "^0.7.0",
     "array-flat-polyfill": "^1.0.1",
     "dompurify": "^2.2.9",
@@ -74,8 +74,8 @@
     "lodash.throttle": "^4.1.1",
     "nanoid": "^4.0.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "redux": "^4.0.5",
     "scroll-lock": "^2.1.4"
   },

package/src/core/FeaturedLink/component.css

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

package/src/core/Footer/component.css

@@ -1,14 +1,14 @@
 @layer components {
   .ui-footer-col-title {
-    @apply font-jetbrains_mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
+    @apply font-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-manrope font-medium hover:text-gui-hover block;
+    @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
   }
 
   .ui-footer-link {
-    @apply text-gui-default hover:text-gui-hover text-menu3 font-manrope font-medium;
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
   }
 
   .ui-footer-compliance-text {

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

@@ -1,18 +1,18 @@
-<footer class="bg-light-grey font-manrope antialiased leading-normal" data-id="footer">
+<footer class="bg-light-grey font-sans 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-jetbrains_mono font-bold uppercase tracking-widen-0.16">The Ably Platform</h2>
+        <h2 class="text-overline2 col-span-full font-mono font-bold uppercase tracking-widen-0.16">The Ably Platform</h2>
       </div>
       <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">
+        <p class="font-sans 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 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" %>
+          <%= link_to 'Pub/sub messaging', abs_url("/solutions/channels"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
           <%= link_to 'Push notifications', abs_url("/push-notifications"), class: "ui-footer-menu-row-link" %>
@@ -23,9 +23,6 @@
         <li class="p-menu-row-snug">
           <%= link_to 'Multiple protocol messaging', abs_url("/protocols"), class: "ui-footer-menu-row-link" %>
         </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Streaming data sources', abs_url("/hub"), class: "ui-footer-menu-row-link" %>
-        </li>
       </ul>
     </div>
     <div class="col-span-full xs:col-span-3 md:col-span-1">
@@ -49,9 +46,6 @@
         <li class="p-menu-row-snug">
           <%= link_to 'Healthcare', abs_url("/solutions/healthcare"), class: "ui-footer-menu-row-link" %>
         </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Streaming data sources', abs_url("/hub"), class: "ui-footer-menu-row-link" %>
-        </li>
         <li class="p-menu-row-snug">
           <%= link_to 'eCommerce & Retail', abs_url("/solutions/ecommerce-and-retail"), class: "ui-footer-menu-row-link" %>
         </li>
@@ -152,8 +146,8 @@
       <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 class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on X">
+              <%= render(AblyUi::Core::Icon.new(name: "icon-social-x", size: "1.5rem")) %>
             </a>
             <a
                   class="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
@@ -180,7 +174,7 @@
                 >
               <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
             </a>
-            <div class="pl-16 text-menu3 font-manrope font-medium">
+            <div class="pl-16 text-menu3 font-sans 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
@@ -200,7 +194,7 @@
               >
             <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
           </a>
-          <div class="text-menu3 font-manrope font-medium">
+          <div class="text-menu3 font-sans 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
@@ -210,9 +204,10 @@
       </div>
     </div>
     <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") %>
+      <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2023", class: "mr-24 h-80") %>
+      <%= image_tag(best_support, alt: "Best Support 2023", class: "mr-24 h-80") %>
+      <%= image_tag(fastest_implementation, alt: "Fastest Implementation 2023", class: "mr-24 h-80") %>
+      <%= image_tag(highest_performer, alt: "High Performer 2023", class: "mr-24 h-80") %>
     </div>
   </div>
   <div class="max-w-screen-xl ui-grid-px mx-auto">

package/src/core/Footer/component.jsx

@@ -8,22 +8,22 @@ export default function Footer({ paths, urlBase }) {
   const absUrl = (path) => _absUrl(path, urlBase);
 
   return (
-    <footer className="bg-light-grey font-manrope antialiased leading-normal" data-id="footer">
+    <footer className="bg-light-grey font-sans antialiased leading-normal" data-id="footer">
       <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 font-jetbrains_mono font-bold col-span-full uppercase tracking-widen-0.16">The Ably Platform</h2>
+            <h2 className="text-overline2 font-mono font-bold col-span-full uppercase tracking-widen-0.16">The Ably Platform</h2>
           </div>
           <div className="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
-            <p className="font-manrope text-p3 py-16 font-bold p-menu-row-snug">
+            <p className="font-sans 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 className="grid grid-cols-1">
             <li className="p-menu-row-snug">
-              <a href={absUrl("/pub-sub-messaging")} className="ui-footer-menu-row-link">
+              <a href={absUrl("/solutions/channels")} className="ui-footer-menu-row-link">
                 Pub/sub messaging
               </a>
             </li>
@@ -42,11 +42,6 @@ export default function Footer({ paths, urlBase }) {
                 Multiple protocol messaging
               </a>
             </li>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/hub")} className="ui-footer-menu-row-link">
-                Streaming data sources
-              </a>
-            </li>
           </ul>
         </div>
 
@@ -83,11 +78,6 @@ export default function Footer({ paths, urlBase }) {
                 Healthcare
               </a>
             </li>
-            <li className="p-menu-row-snug">
-              <a href={absUrl("/hub")} className="ui-footer-menu-row-link">
-                Streaming data sources
-              </a>
-            </li>
             <li className="p-menu-row-snug">
               <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-footer-menu-row-link">
                 eCommerce &amp; Retail
@@ -151,7 +141,7 @@ export default function Footer({ paths, urlBase }) {
               <iframe
                 className="w-20 h-20 mb-2"
                 src="https://status.ably.com/embed/icon"
-                allowtransparency="true"
+                allowTransparency={true}
                 frameBorder="0"
                 scrolling="no"
                 title="System Status"
@@ -246,8 +236,8 @@ export default function Footer({ paths, urlBase }) {
           <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 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 className="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on X">
+                  <Icon name="icon-social-x" size="1.5rem" />
                 </a>
                 <a
                   className="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
@@ -274,7 +264,7 @@ export default function Footer({ paths, urlBase }) {
                 >
                   <Icon name="glassdoor" size="1.5rem" />
                 </a>
-                <div className="pl-16 text-menu3 font-manrope font-medium">
+                <div className="pl-16 text-menu3 font-sans font-medium">
                   <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
@@ -294,7 +284,7 @@ export default function Footer({ paths, urlBase }) {
               >
                 <Icon name="glassdoor" size="1.5rem" />
               </a>
-              <div className="text-menu3 font-manrope font-medium">
+              <div className="text-menu3 font-sans font-medium">
                 <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
@@ -305,9 +295,10 @@ export default function Footer({ paths, urlBase }) {
         </div>
 
         <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" />
+          <img className="mr-24 h-80" src={paths.highestUserAdoption} alt="Highest User Adoption 2023" />
+          <img className="mr-24 h-80" src={paths.bestSupport} alt="Best Support 2023" />
+          <img className="mr-24 h-80" src={paths.fastestImplementation} alt="Fastest Implementation 2023" />
+          <img className="mr-24 h-80" src={paths.highestPerformer} alt="High Performer 2023" />
         </div>
       </div>
 
@@ -371,7 +362,8 @@ Footer.propTypes = {
     ablyStack: T.string,
     highestPerformer: T.string,
     highestUserAdoption: T.string,
-    usersLoveUs: T.string,
+    bestSupport: T.string,
+    fastestImplementation: T.string,
   }),
   urlBase: T.string,
 };