@ably/ui 8.7.0-dev.4de588d → 8.7.0-dev.52da22c

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

@@ -1,18 +1,18 @@
 <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" %>
+          <%= 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,12 +23,9 @@
         <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 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">
@@ -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>
@@ -66,7 +60,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 +81,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 +110,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,16 +138,16 @@
     </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">
-            <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")) %>
+          <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 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"
@@ -172,7 +166,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 +188,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 +203,51 @@
         </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 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">
-    <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,21 +9,21 @@ 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">
+              <a href={absUrl("/solutions/channels")} className="ui-footer-menu-row-link">
                 Pub/sub messaging
               </a>
             </li>
@@ -42,15 +42,10 @@ 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>
 
-        <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">
@@ -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
@@ -111,7 +101,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 +134,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 +150,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 +186,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,16 +228,16 @@ 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">
-                <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" />
+              <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 X">
+                  <Icon name="icon-social-x" size="1.5rem" />
                 </a>
                 <a
                   className="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
@@ -266,7 +256,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 +278,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 +294,20 @@ 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 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>
 
       <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 +322,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>
@@ -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,
 };

package/src/core/HeadwayWidget/HeadwayWidget.jsx

@@ -0,0 +1,229 @@
+import PropTypes from "prop-types";
+import React, { useCallback, useEffect, useRef } from "react";
+
+const HeadwayWidgetClassName = "HW_widget_component";
+const HeadwayWidgetSelector = "." + HeadwayWidgetClassName;
+const HeadwayWidgetTriggerClassName = "HW_trigger";
+const HeadwayWidgetTriggerSelector = "." + HeadwayWidgetTriggerClassName;
+
+const HeadwayWidgetTrigger = ({ widgetId, component, children }) => {
+  const Component = component || "div";
+  const className = HeadwayWidgetTriggerClassName + `_${widgetId}`;
+
+  return <Component className={className}>{children}</Component>;
+};
+
+HeadwayWidgetTrigger.defaultProps = {
+  widgetId: "widget-1",
+};
+
+const HeadwayWidget = ({
+  id,
+  account,
+  children,
+  widgetPosition,
+  badgePosition,
+  component,
+  trigger,
+  onWidgetReady,
+  onShowWidget,
+  onShowDetails,
+  onReadMore,
+  onHideWidget,
+  styles,
+  options,
+  translations,
+  ...rest
+}) => {
+  const onWidgetReadyRef = useRef(onWidgetReady);
+  const onShowWidgetRef = useRef(onShowWidget);
+  const onShowDetailsRef = useRef(onShowDetails);
+  const onReadMoreRef = useRef(onReadMore);
+  const onHideWidgetRef = useRef(onHideWidget);
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    onWidgetReadyRef.current = onWidgetReady || (options.callbacks && options.callbacks.onWidgetReady);
+    onShowWidgetRef.current = onShowWidget || (options.callbacks && options.callbacks.onShowWidget);
+    onShowDetailsRef.current = onShowDetails || (options.callbacks && options.callbacks.onShowDetails);
+    onReadMoreRef.current = onReadMore || (options.callbacks && options.callbacks.onReadMore);
+    onHideWidgetRef.current = onHideWidget || (options.callbacks && options.callbacks.onHideWidget);
+    optionsRef.current = options;
+  });
+
+  const handleWidgetReady = useCallback(() => onWidgetReadyRef.current && onWidgetReadyRef.current(), []);
+  const handleShowWidget = useCallback(() => onShowWidgetRef.current && onShowWidgetRef.current(), []);
+  const handleShowDetails = useCallback(() => onShowDetailsRef.current && onShowDetailsRef.current(), []);
+  const handleReadMore = useCallback(() => onReadMoreRef.current && onReadMoreRef.current(), []);
+  const handleHideWidget = useCallback(() => onHideWidgetRef.current && onHideWidgetRef.current(), []);
+
+  const initHeadway = useCallback(() => {
+    const hwConfig = {
+      selector: HeadwayWidgetSelector + `_${id}`,
+      account: account || options.account,
+      trigger: trigger ? HeadwayWidgetSelector + `_${id}` : options.trigger || HeadwayWidgetTriggerSelector + `_${id}`,
+      callbacks: {
+        onWidgetReady: handleWidgetReady,
+        onShowWidget: handleShowWidget,
+        onShowDetails: handleShowDetails,
+        onReadMore: handleReadMore,
+        onHideWidget: handleHideWidget,
+      },
+      translations,
+      widgetPosition,
+      badgePosition,
+      __component: true,
+      styles,
+      ...options,
+    };
+
+    const widget = window.Headway.getNewWidget();
+    widget.init(hwConfig);
+
+    return () => {
+      widget.destroy();
+    };
+  }, [account, trigger, handleWidgetReady, handleShowWidget, handleShowDetails, handleReadMore, handleHideWidget, badgePosition, widgetPosition, translations]);
+
+  useEffect(() => {
+    let destroy;
+    if (window.Headway) {
+      destroy = initHeadway();
+    } else {
+      const head = document.getElementsByTagName("head")[0];
+      const script = document.createElement("script");
+      script.type = "text/javascript";
+      const p = new Promise((resolve) => {
+        script.onload = () => {
+          const d = initHeadway();
+          resolve(d);
+        };
+      });
+
+      destroy = () => {
+        p.then((d) => d());
+      };
+      script.src = "https://cdn.headwayapp.co/widget.js";
+      head.appendChild(script);
+    }
+    return destroy;
+  }, [initHeadway]);
+
+  const Component = component || "div";
+
+  return (
+    <Component className={HeadwayWidgetClassName + `_${id}`} {...rest} style={{ position: "relative", display: "inline-block" }}>
+      {children}
+    </Component>
+  );
+};
+
+export default HeadwayWidget;
+
+HeadwayWidget.propTypes = {
+  /**
+   * account of your Headway.
+   */
+  account: PropTypes.string.isRequired,
+  /**
+   * id of the Widget. It is required if you have more than one widget instance on the page.
+   */
+  id: PropTypes.string,
+  /**
+   * position of a badge
+   */
+  badgePosition: PropTypes.oneOf([
+    "top-left",
+    "top-center",
+    "top-right",
+    "center-left",
+    "center",
+    "center-right",
+    "bottom-left",
+    "bottom-center",
+    "bottom-right",
+  ]),
+  /**
+   * badge relative widget position
+   */
+  widgetPosition: PropTypes.oneOf(["top-left", "top-right", "center-left", "center-right", "bottom-left", "bottom-right"]),
+  /**
+   * callback fired when widget has loaded
+   */
+  onWidgetReady: PropTypes.func,
+  /**
+   * callback fired when widget is shown
+   */
+  onShowWidget: PropTypes.func,
+  /**
+   * callback fired when an item in the widget is clicked
+   */
+  onShowDetails: PropTypes.func,
+  /**
+   * callback fired when user clicks on readMore link
+   */
+  onReadMore: PropTypes.func,
+  /**
+   * callback fired when user closes the widget
+   */
+  onHideWidget: PropTypes.func,
+  /**
+   * Translating the text inside of the widget
+   * */
+  translations: PropTypes.shape({
+    title: PropTypes.string,
+    labels: PropTypes.shape({
+      new: PropTypes.string,
+      update: PropTypes.string,
+      improvement: PropTypes.string,
+    }),
+    readMore: PropTypes.string,
+    footer: PropTypes.string,
+  }),
+  /**
+   * options defined in classic object format. Read more at https://docs.headwayapp.co/widget
+   */
+  options: PropTypes.shape({
+    account: PropTypes.string,
+    callbacks: PropTypes.shape({
+      onWidgetReady: PropTypes.func,
+      onShowWidget: PropTypes.func,
+      onShowDetails: PropTypes.func,
+      onReadMore: PropTypes.func,
+      onHideWidget: PropTypes.func,
+    }),
+    translations: PropTypes.shape({
+      title: PropTypes.string,
+      labels: PropTypes.shape({
+        new: PropTypes.string,
+        update: PropTypes.string,
+        improvement: PropTypes.string,
+      }),
+      readMore: PropTypes.string,
+      footer: PropTypes.string,
+    }),
+    trigger: PropTypes.string,
+  }),
+
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  children: PropTypes.node,
+  trigger: PropTypes.string,
+  styles: PropTypes.object,
+};
+
+HeadwayWidget.defaultProps = {
+  account: "",
+  id: "widget-1",
+  badgePosition: "bottom-right",
+  widgetPosition: "bottom-right",
+  styles: {},
+  translations: {},
+  options: {},
+};
+
+HeadwayWidgetTrigger.propTypes = {
+  widgetId: PropTypes.string.isRequired,
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  children: PropTypes.node,
+};
+
+export { HeadwayWidgetTrigger };