ably-ui 10.7.0 → 10.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8beffa58daf6bcdefab05580acd8aacc411a0e30bcc02b23fe233c318822881b
-  data.tar.gz: d37f4e15c667c9aca8c63146d6b0db3fbc312b7e1904f6f014d4cf3b14709a97
+  metadata.gz: 80e33696c07a16696e6489184428ab894ddcd4cc74f009c283f04f7dd912b242
+  data.tar.gz: 3993216c2e78c7456198587a0ba67f5d1c567535a3e438703fbd6ea50277c32f
 SHA512:
-  metadata.gz: a1119ed99d1c73b7a19d960fa1fb697790a39efa4b7d7d8e61c126929b8385acbfa2ca47a90a4aadeef520417fb0c612b8eae4796df842b955094b73ec690924
-  data.tar.gz: b0b927ab39410ec2361bf2ec74828dff15236c10cd9ac861c8014e25647304309414e678aed727f4a02f870328a90bbac821a6a1dc06b511bbfeed7d07a3198c
+  metadata.gz: 14139afd61a7fd9b7b749cc6ef43644ac49b66ac24e6f406a76ec8a025ea6dff0f4b261547574ace1b5dea460e475f4c6d540d35f440a7ba5c94b74300613754
+  data.tar.gz: aac1f9d5900acfb32048821f4c69e16cc22a7cbd9af61d2b4b4fed77a8b47207a5927da1c3937434827ae8d9f4a162bf8334de01cc90fe5fa7d5699c5b1b7244

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (8.7.0.dev.6c8bb4b)
+    ably-ui (8.7.0.dev.4de588d)
       view_component (>= 2.33, < 2.50)
 
 GEM

data/lib/ably_ui/core/core.rb

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

data/lib/ably_ui/core/footer/component.css

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

data/lib/ably_ui/core/footer/footer.html.erb

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

data/lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '10.7.0'
+  VERSION = '10.9.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ably-ui
 version: !ruby/object:Gem::Version
-  version: 10.7.0
+  version: 10.9.0
 platform: ruby
 authors:
 - Dominik Piatek
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-12-02 00:00:00.000000000 Z
+date: 2022-12-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component
@@ -129,10 +129,13 @@ files:
 - lib/ably_ui/core/images/cust-photo-split-pato-echague.jpg
 - lib/ably_ui/core/images/cust-photo-vitac-joe-antonio.jpg
 - lib/ably_ui/core/images/flexible-companies.png
+- lib/ably_ui/core/images/high-performer-2022.png
+- lib/ably_ui/core/images/highest-user-adoption-2022.png
 - lib/ably_ui/core/images/icon-tech-aws.svg
 - lib/ably_ui/core/images/rocket-list-2021.png
 - lib/ably_ui/core/images/scale-motif-open-empathetic.svg
 - lib/ably_ui/core/images/technical-support-01-800x533.jpg
+- lib/ably_ui/core/images/users-love-us-2022.png
 - lib/ably_ui/core/loader/component.js
 - lib/ably_ui/core/loader/loader.html.erb
 - lib/ably_ui/core/loader/loader.rb