@ably/ui 8.7.0-dev.98edac1 → 8.7.0-dev.9af734b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +7 -3
  2. package/core/Footer/component.css +11 -1
  3. package/core/Footer.jsx +38 -38
  4. package/core/Meganav.jsx +37 -25
  5. package/core/MeganavContentCompany.jsx +13 -1
  6. package/core/MeganavContentPlatform.jsx +8 -8
  7. package/core/MeganavContentUseCases.jsx +16 -16
  8. package/core/MeganavContentWhyAbly/component.js +22 -0
  9. package/core/MeganavContentWhyAbly.jsx +3279 -0
  10. package/core/sprites.svg +12 -0
  11. package/package.json +1 -1
  12. package/src/core/Footer/component.css +11 -1
  13. package/src/core/Footer/component.html.erb +41 -41
  14. package/src/core/Footer/component.jsx +39 -39
  15. package/src/core/MeganavContentCompany/component.html.erb +9 -0
  16. package/src/core/MeganavContentCompany/component.jsx +9 -0
  17. package/src/core/MeganavContentPlatform/component.html.erb +6 -6
  18. package/src/core/MeganavContentPlatform/component.jsx +6 -6
  19. package/src/core/MeganavContentUseCases/component.html.erb +16 -16
  20. package/src/core/MeganavContentUseCases/component.jsx +16 -16
  21. package/src/core/icons/icon-display-events-col.svg +13 -0
  22. package/core/.DS_Store +0 -0
  23. package/core/DropdownMenuPreview/component.js +0 -6
  24. package/core/DropdownMenuPreview.jsx +0 -6
  25. package/src/.DS_Store +0 -0
  26. package/src/core/.DS_Store +0 -0
package/core/sprites.svg CHANGED
@@ -91,6 +91,18 @@
91
91
  <path fill-rule="evenodd" clip-rule="evenodd" d="M33.5321 10.5289C34.444 11.4408 33.7982 13 32.5085 13L27.8881 13C25.7181 13 23.959 11.2409 23.959 9.0709L23.959 4.45046C23.959 3.16082 25.5182 2.51497 26.4301 3.42688L33.5321 10.5289Z" fill="#FF5416"/>
92
92
  </symbol><symbol fill="none" id="sprite-icon-display-documentation" viewBox="0 0 48 48"><title>sprite-icon-display-documentation</title>
93
93
  <path fill-rule="evenodd" clip-rule="evenodd" d="M38 42.5H10C9.72386 42.5 9.5 42.2761 9.5 42V6C9.5 5.72386 9.72386 5.5 10 5.5H30.3431C31.0062 5.5 31.6421 5.76339 32.1109 6.23223L37.7678 11.8891C38.2366 12.3579 38.5 12.9938 38.5 13.6569V42C38.5 42.2761 38.2761 42.5 38 42.5ZM10 44H38C39.1046 44 40 43.1046 40 42V13.6569C40 12.596 39.5786 11.5786 38.8284 10.8284L33.1716 5.17157C32.4214 4.42143 31.404 4 30.3431 4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44ZM20.1167 17.6L14.25 22L20.1167 26.4L19.2167 27.6L12.55 22.6C12.3611 22.4584 12.25 22.2361 12.25 22C12.25 21.764 12.3611 21.5417 12.55 21.4L19.2167 16.4L20.1167 17.6ZM27.7212 14.206L21.7212 35.206L20.2789 34.7939L26.2789 13.7939L27.7212 14.206ZM27.4834 23.6L33.3501 28L27.4834 32.4L28.3834 33.6L35.0501 28.6C35.239 28.4584 35.3501 28.2361 35.3501 28C35.3501 27.764 35.239 27.5417 35.0501 27.4L28.3834 22.4L27.4834 23.6Z" fill="currentColor"/>
94
+ </symbol><symbol fill="none" id="sprite-icon-display-events-col" viewBox="0 0 48 48"><title>sprite-icon-display-events-col</title>
95
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M42 16.75H6V15.25H42V16.75Z" fill="#03020D"/>
96
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 14C5.25 11.3766 7.37665 9.25 10 9.25H38C40.6234 9.25 42.75 11.3766 42.75 14V38C42.75 40.6234 40.6234 42.75 38 42.75H10C7.37665 42.75 5.25 40.6234 5.25 38V14ZM10 10.75C8.20507 10.75 6.75 12.2051 6.75 14V38C6.75 39.7949 8.20507 41.25 10 41.25H38C39.7949 41.25 41.25 39.7949 41.25 38V14C41.25 12.2051 39.7949 10.75 38 10.75H10Z" fill="#03020D"/>
97
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M16.75 7C17.1642 7 17.5 7.33579 17.5 7.75L17.5 12.25C17.5 12.6642 17.1642 13 16.75 13C16.3358 13 16 12.6642 16 12.25L16 7.75C16 7.33579 16.3358 7 16.75 7Z" fill="#03020D"/>
98
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M31.75 7C32.1642 7 32.5 7.33579 32.5 7.75L32.5 12.25C32.5 12.6642 32.1642 13 31.75 13C31.3358 13 31 12.6642 31 12.25L31 7.75C31 7.33579 31.3358 7 31.75 7Z" fill="#03020D"/>
99
+ <path d="M10 21C10 20.4477 10.4477 20 11 20H17C17.5523 20 18 20.4477 18 21V27C18 27.5523 17.5523 28 17 28H11C10.4477 28 10 27.5523 10 27V21Z" fill="#FF5416"/>
100
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 21.5V26.5H16.5V21.5H11.5ZM11 20C10.4477 20 10 20.4477 10 21V27C10 27.5523 10.4477 28 11 28H17C17.5523 28 18 27.5523 18 27V21C18 20.4477 17.5523 20 17 20H11Z" fill="#FF5416"/>
101
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 31.5V36.5H16.5V31.5H11.5ZM11 30C10.4477 30 10 30.4477 10 31V37C10 37.5523 10.4477 38 11 38H17C17.5523 38 18 37.5523 18 37V31C18 30.4477 17.5523 30 17 30H11Z" fill="#03020D"/>
102
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M21.5 21.5V26.5H26.5V21.5H21.5ZM21 20C20.4477 20 20 20.4477 20 21V27C20 27.5523 20.4477 28 21 28H27C27.5523 28 28 27.5523 28 27V21C28 20.4477 27.5523 20 27 20H21Z" fill="#03020D"/>
103
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M21.5 31.5V36.5H26.5V31.5H21.5ZM21 30C20.4477 30 20 30.4477 20 31V37C20 37.5523 20.4477 38 21 38H27C27.5523 38 28 37.5523 28 37V31C28 30.4477 27.5523 30 27 30H21Z" fill="#03020D"/>
104
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M31.5 21.5V26.5H36.5V21.5H31.5ZM31 20C30.4477 20 30 20.4477 30 21V27C30 27.5523 30.4477 28 31 28H37C37.5523 28 38 27.5523 38 27V21C38 20.4477 37.5523 20 37 20H31Z" fill="#03020D"/>
105
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M31.5 31.5V36.5H36.5V31.5H31.5ZM31 30C30.4477 30 30 30.4477 30 31V37C30 37.5523 30.4477 38 31 38H37C37.5523 38 38 37.5523 38 37V31C38 30.4477 37.5523 30 37 30H31Z" fill="#03020D"/>
94
106
  </symbol><symbol fill="none" id="sprite-icon-display-gdpr" viewBox="0 0 48 48"><title>sprite-icon-display-gdpr</title>
95
107
  <path fill-rule="evenodd" clip-rule="evenodd" d="M24.0001 0L24.7753 2.37883H27.2814L25.2539 3.849L26.0277 6.2252L24.0001 4.75635L21.9726 6.2252L22.7477 3.849L20.7202 2.37883H23.225L24.0001 0ZM35.1333 5.14656L34.3582 2.76904L33.583 5.14656H31.0782L33.1058 6.61541L32.3306 8.99556L34.3582 7.52539L36.3857 8.99556L35.6132 6.61541L37.6408 5.14656H35.1333ZM41.9423 10.3337L42.7175 12.7126H45.2223L43.1947 14.1814L43.9699 16.5603L41.9423 15.0901L39.9148 16.5603L40.6873 14.1814L38.6597 12.7126H41.1672L41.9423 10.3337ZM44.7174 20.6672L45.4912 23.0448H48L45.9724 24.5149L46.7449 26.8924L44.7174 25.4236L42.6898 26.8924L43.465 24.5149L41.4374 23.0448H43.9422L44.7174 20.6672ZM14.416 5.14656L13.6408 2.76904L12.8656 5.14656H10.3608L12.3884 6.61541L11.6132 8.99425L13.6408 7.52539L15.6697 8.99425L14.8959 6.61541L16.9234 5.14656H14.416ZM6.05769 10.3318L6.83286 12.7119H9.34031L7.31273 14.1808L8.08527 16.5583L6.05769 15.0881L4.03011 16.5583L4.80397 14.1808L2.77771 12.7119H5.28252L6.05769 10.3318ZM42.7175 33.3769L41.9423 30.998L41.1672 33.3769H38.6597L40.6873 34.8457L39.9148 37.2245L41.9423 35.7544L43.9699 37.2245L43.1947 34.8457L45.2223 33.3769H42.7175ZM3.28262 20.6653L4.05779 23.0441H6.5626L4.53502 24.5143L5.31019 26.8905L3.28262 25.4216L1.25504 26.8905L2.02758 24.5143L0 23.0441H2.50744L3.28262 20.6653ZM6.83418 33.3772L6.05901 30.9971L5.28384 33.3772H2.77771L4.80397 34.8461L4.03143 37.2236L6.05901 35.7534L8.08659 37.2236L7.31273 34.8461L9.34031 33.3772H6.83418ZM13.6406 38.5618L14.4157 40.9406H16.9205L14.893 42.4108L15.6694 44.787L13.6406 43.3181L11.613 44.787L12.3855 42.4108L10.3593 40.9406H12.8654L13.6406 38.5618ZM24.7766 43.7096L24.0015 41.3308L23.2276 43.7096H20.7202L22.7477 45.1798L21.9739 47.556L24.0015 46.0872L26.029 47.556L25.2539 45.1798L27.2814 43.7096H24.7766ZM34.358 38.5618L35.1332 40.9406H37.638L35.6104 42.4108L36.3856 44.787L34.358 43.3181L32.3304 44.787L33.103 42.4108L31.0754 40.9406H33.5828L34.358 38.5618ZM22.983 29.3052L29.5891 19.8088L28.215 18.9309L22.2352 27.5268L19.6376 24.4151L18.348 25.4038L21.6511 29.3606L22.983 29.3052Z" fill="currentColor"/>
96
108
  </symbol><symbol fill="none" id="sprite-icon-display-general-comms" viewBox="0 0 48 48"><title>sprite-icon-display-general-comms</title>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "8.7.0-dev.98edac1",
3
+ "version": "8.7.0-dev.9af734b",
4
4
  "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.",
5
5
  "repository": {
6
6
  "type": "git",
package/src/core/Footer/component.css CHANGED
@@ -8,13 +8,23 @@
8
8
  }
9
9
 
10
10
  .ui-footer-link {
11
- @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
11
+ @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
12
12
  }
13
13
 
14
14
  .ui-footer-compliance-text {
15
15
  font-size: 12px;
16
16
  }
17
17
 
18
+ .ui-footer-tick-icon {
19
+ min-width: 1.5rem;
20
+ }
21
+
22
+ @media (max-width: 1040px) {
23
+ .ui-footer-bottom-links {
24
+ @apply pb-40;
25
+ }
26
+ }
27
+
18
28
  @media screen {
19
29
  .ui-footer-glassdoor {
20
30
  display: none;
package/src/core/Footer/component.html.erb CHANGED
@@ -1,16 +1,16 @@
1
1
  <footer class="bg-light-grey font-sans antialiased" data-id="footer">
2
- <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">
3
- <div class="col-span-full lg:col-span-2">
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">
3
+ <div class="col-span-full md:col-span-2">
4
4
  <div class="flex flex-row p-menu-row-snug">
5
5
  <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
6
6
  <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
7
7
  </div>
8
- <div class="grid grid-cols-4 lg:col-span-2">
9
- <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
8
+ <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
9
+ <p class="text-p3 py-16 font-medium p-menu-row-snug">
10
10
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
11
11
  </p>
12
12
  </div>
13
- <ul class="grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1">
13
+ <ul class="grid grid-cols-1">
14
14
  <li class="p-menu-row-snug">
15
15
  <%= link_to 'Pub/sub messaging', abs_url("/pub-sub-messaging"), class: "ui-footer-menu-row-link" %>
16
16
  </li>
@@ -28,7 +28,7 @@
28
28
  </li>
29
29
  </ul>
30
30
  </div>
31
- <div class="col-span-full xs:col-span-3 lg:col-span-1">
31
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
32
32
  <h2 class="ui-footer-col-title">Ably is for</h2>
33
33
  <ul>
34
34
  <li class="p-menu-row-snug">
@@ -66,7 +66,7 @@
66
66
  </li>
67
67
  </ul>
68
68
  </div>
69
- <div class="col-span-full xs:col-span-3 lg:col-span-1">
69
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
70
70
  <h2 class="ui-footer-col-title">Developers</h2>
71
71
  <ul>
72
72
  <li class="p-menu-row-snug">
@@ -87,13 +87,13 @@
87
87
  <li class="p-menu-row-snug">
88
88
  <%= link_to 'SDKs', abs_url("/download"), class: "ui-footer-menu-row-link" %>
89
89
  </li>
90
- <li class="p-menu-row-snug flex items-center">
90
+ <li class="p-menu-row-snug flex items-center -mt-4">
91
91
  <a class="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">System status</a>
92
- <iframe class="w-24 h-24 mt-4" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
92
+ <iframe class="w-20 h-20 mb-2" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
93
93
  </li>
94
94
  </ul>
95
95
  </div>
96
- <div class="col-span-full xs:col-span-3 lg:col-span-1">
96
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
97
97
  <h2 class="ui-footer-col-title">WHY ABLY</h2>
98
98
  <ul>
99
99
  <li class="p-menu-row-snug">
@@ -116,7 +116,7 @@
116
116
  </li>
117
117
  </ul>
118
118
  </div>
119
- <div class="col-span-full xs:col-span-3 lg:col-span-1">
119
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
120
120
  <h2 class="ui-footer-col-title">ABOUT</h2>
121
121
  <ul>
122
122
  <li class="p-menu-row-snug">
@@ -144,14 +144,14 @@
144
144
  </div>
145
145
  </div>
146
146
  <div class="max-w-screen-xl ui-grid-px mx-auto">
147
- <hr class="border-t border-mid-grey" />
147
+ <hr class="border-t border-mid-grey my-0"/>
148
148
  </div>
149
149
  <%# Twitter + Glassdoor SM * above + Glassdoor XS + Badges %>
150
- <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">
151
- <div class="">
152
- <div class="flex flex-col lg:flex-row flex-auto ml-8 sm:col-span-1 lg:col-span-2">
150
+ <div class="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
151
+ <div class="md:flex md:items-center">
152
+ <div class="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
153
153
  <div class="">
154
- <div class="flex items-center pb-24">
154
+ <div class="flex pb-24">
155
155
  <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
156
156
  <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
157
157
  </a>
@@ -172,7 +172,7 @@
172
172
  </div>
173
173
  <%# GLASSDOOR on SM and Above %>
174
174
  <div class="xs:hidden sm:block ui-footer-glassdoor">
175
- <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">
175
+ <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">
176
176
  <a
177
177
  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
178
178
  class="h-24 text-cool-black hover:text-icon-glassdoor"
@@ -194,7 +194,7 @@
194
194
  <div class="border-t border-mid-grey w-full"></div>
195
195
  <div class="flex py-24">
196
196
  <a
197
- class="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
197
+ class="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
198
198
  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
199
199
  title="Ably reviews on glassdoor"
200
200
  >
@@ -209,50 +209,50 @@
209
209
  </div>
210
210
  </div>
211
211
  </div>
212
- <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto">
213
- <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "w-96 h-96") %>
214
- <%= image_tag(users_love_us, alt: "Users Love Us", class: "w-96 h-96") %>
215
- <%= image_tag(highest_performer, alt: "High Performer 2022", class: "w-96 h-96") %>
212
+ <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
213
+ <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 h-80") %>
214
+ <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 h-80") %>
215
+ <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 h-80") %>
216
216
  </div>
217
217
  </div>
218
218
  <div class="max-w-screen-xl ui-grid-px mx-auto">
219
- <hr class="border-t border-mid-grey" />
219
+ <hr class="border-t border-mid-grey my-0"/>
220
220
  </div>
221
- <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 ">
222
- <div class="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
223
- <div class="pl-16 ">
224
- <%= link_to 'Cookies', abs_url("/privacy"), class: "ui-footer-link pr-24" %>
225
- <%= link_to 'Legals', abs_url("/legals"), class: "ui-footer-link pr-24" %>
226
- <%= link_to 'Data Protection', abs_url("/data-protection"), class: "ui-footer-link pr-24" %>
221
+ <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">
222
+ <div class="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
223
+ <div class="flex">
224
+ <%= link_to 'Cookies', abs_url("/privacy"), class: "pr-24 ui-footer-link" %>
225
+ <%= link_to 'Legals', abs_url("/legals"), class: "pr-24 ui-footer-link" %>
226
+ <%= link_to 'Data Protection', abs_url("/data-protection"), class: "pr-24 ui-footer-link" %>
227
227
  <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
228
228
  </div>
229
229
  </div>
230
- <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
230
+ <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
231
231
  <div class="flex mr-24">
232
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
232
+ <%= 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")) %>
233
233
  <div>
234
- <p class="ui-footer-compliance-text font-medium">SOC 2 Type 2</p>
234
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
235
235
  <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
236
236
  </div>
237
237
  </div>
238
- <div class="flex mr-24 sm:col-start-2">
239
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
238
+ <div class="flex mr-24 md:col-start-2">
239
+ <%= 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")) %>
240
240
  <div>
241
- <p class="ui-footer-compliance-text font-medium">HIPAA</p>
241
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
242
242
  <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
243
243
  </div>
244
244
  </div>
245
- <div class="flex mr-24 sm:col-start-3">
246
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
245
+ <div class="flex mr-24 md:col-start-3">
246
+ <%= 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")) %>
247
247
  <div>
248
- <p class="ui-footer-compliance-text font-medium">EU GDPR</p>
248
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
249
249
  <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
250
250
  </div>
251
251
  </div>
252
- <div class="flex mr-24 sm:col-start-4">
253
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
252
+ <div class="flex mr-24 md:col-start-4">
253
+ <%= 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")) %>
254
254
  <div>
255
- <p class="ui-footer-compliance-text font-medium">256-bit AES</p>
255
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
256
256
  <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
257
257
  </div>
258
258
  </div>
package/src/core/Footer/component.jsx CHANGED
@@ -9,19 +9,19 @@ export default function Footer({ paths, urlBase }) {
9
9
 
10
10
  return (
11
11
  <footer className="bg-light-grey font-sans antialiased" data-id="footer">
12
- <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">
13
- <div className="col-span-full lg:col-span-2">
12
+ <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">
13
+ <div className="col-span-full md:col-span-2">
14
14
  <div className="flex flex-row p-menu-row-snug">
15
15
  <img className="mr-24 -mt-16" src={paths.ablyStack} alt="Ably homepage" />
16
16
  <h2 className="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
17
17
  </div>
18
- <div className="grid grid-cols-4 lg:col-span-2">
19
- <p className="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
18
+ <div className="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
19
+ <p className="text-p3 py-16 font-medium p-menu-row-snug">
20
20
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
21
21
  </p>
22
22
  </div>
23
23
 
24
- <ul className="grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1">
24
+ <ul className="grid grid-cols-1">
25
25
  <li className="p-menu-row-snug">
26
26
  <a href={absUrl("/pub-sub-messaging")} className="ui-footer-menu-row-link">
27
27
  Pub/sub messaging
@@ -50,7 +50,7 @@ export default function Footer({ paths, urlBase }) {
50
50
  </ul>
51
51
  </div>
52
52
 
53
- <div className="col-span-full xs:col-span-3 lg:col-span-1">
53
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
54
54
  <h2 className="ui-footer-col-title">Ably is for</h2>
55
55
  <ul>
56
56
  <li className="p-menu-row-snug">
@@ -111,7 +111,7 @@ export default function Footer({ paths, urlBase }) {
111
111
  </ul>
112
112
  </div>
113
113
 
114
- <div className="col-span-full xs:col-span-3 lg:col-span-1">
114
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
115
115
  <h2 className="ui-footer-col-title">Developers</h2>
116
116
  <ul>
117
117
  <li className="p-menu-row-snug">
@@ -144,12 +144,12 @@ export default function Footer({ paths, urlBase }) {
144
144
  SDKs
145
145
  </a>
146
146
  </li>
147
- <li className="p-menu-row-snug flex items-center">
147
+ <li className="p-menu-row-snug flex items-center -mt-4">
148
148
  <a className="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">
149
149
  System status
150
150
  </a>
151
151
  <iframe
152
- className="w-24 h-24 mt-4"
152
+ className="w-20 h-20 mb-2"
153
153
  src="https://status.ably.com/embed/icon"
154
154
  allowtransparency="true"
155
155
  frameBorder="0"
@@ -160,7 +160,7 @@ export default function Footer({ paths, urlBase }) {
160
160
  </ul>
161
161
  </div>
162
162
 
163
- <div className="col-span-full xs:col-span-3 lg:col-span-1">
163
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
164
164
  <h2 className="ui-footer-col-title">WHY ABLY</h2>
165
165
  <ul>
166
166
  <li className="p-menu-row-snug">
@@ -196,7 +196,7 @@ export default function Footer({ paths, urlBase }) {
196
196
  </ul>
197
197
  </div>
198
198
 
199
- <div className="col-span-full xs:col-span-3 lg:col-span-1">
199
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
200
200
  <h2 className="ui-footer-col-title">ABOUT</h2>
201
201
  <ul>
202
202
  <li className="p-menu-row-snug">
@@ -238,14 +238,14 @@ export default function Footer({ paths, urlBase }) {
238
238
  </div>
239
239
  </div>
240
240
  <div className="max-w-screen-xl ui-grid-px mx-auto">
241
- <hr className="border-t border-mid-grey" />
241
+ <hr className="border-t border-mid-grey my-0" />
242
242
  </div>
243
- {/* Twitter + Glassdoor SM * above + Glassdoor XS + Badges*/}
244
- <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">
245
- <div className="">
246
- <div className="flex flex-col lg:flex-row flex-auto ml-8 sm:col-span-1 lg:col-span-2">
243
+ {/* Twitter + Glassdoor SM & above + Glassdoor XS + Badges*/}
244
+ <div className="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
245
+ <div className="md:flex md:items-center">
246
+ <div className="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
247
247
  <div className="">
248
- <div className="flex items-center pb-24">
248
+ <div className="flex pb-24">
249
249
  <a className="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
250
250
  <Icon name="twitter" size="1.5rem" />
251
251
  </a>
@@ -266,7 +266,7 @@ export default function Footer({ paths, urlBase }) {
266
266
  </div>
267
267
  {/* GLASSDOOR on SM and Above */}
268
268
  <div className="xs:hidden sm:block ui-footer-glassdoor">
269
- <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">
269
+ <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">
270
270
  <a
271
271
  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
272
272
  className="h-24 text-cool-black hover:text-icon-glassdoor"
@@ -288,7 +288,7 @@ export default function Footer({ paths, urlBase }) {
288
288
  <div className="border-t border-mid-grey w-full"></div>
289
289
  <div className="flex py-24">
290
290
  <a
291
- className="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
291
+ className="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
292
292
  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
293
293
  title="Ably reviews on glassdoor"
294
294
  >
@@ -304,19 +304,19 @@ export default function Footer({ paths, urlBase }) {
304
304
  </div>
305
305
  </div>
306
306
 
307
- <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto">
308
- <img className="mr-24 w-96 h-96" src={paths.highestUserAdoption} alt="Highest User Adoption 2022" />
309
- <img className="mr-24 w-96 h-96" src={paths.usersLoveUs} alt="Users Love Us" />
310
- <img className="mr-24 w-96 h-96" src={paths.highestPerformer} alt="High Performer 2022" />
307
+ <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
308
+ <img className="mr-24 h-80" src={paths.highestUserAdoption} alt="Highest User Adoption 2022" />
309
+ <img className="mr-24 h-80" src={paths.usersLoveUs} alt="Users Love Us" />
310
+ <img className="mr-24 h-80" src={paths.highestPerformer} alt="High Performer 2022" />
311
311
  </div>
312
312
  </div>
313
313
 
314
314
  <div className="max-w-screen-xl ui-grid-px mx-auto">
315
- <hr className="border-t border-mid-grey" />
315
+ <hr className="border-t border-mid-grey my-0" />
316
316
  </div>
317
- <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 ">
318
- <div className="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
319
- <div className="pl-16 ">
317
+ <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">
318
+ <div className="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
319
+ <div className="flex">
320
320
  <a href={absUrl("/privacy")} className="pr-24 ui-footer-link">
321
321
  Cookies
322
322
  </a>
@@ -331,32 +331,32 @@ export default function Footer({ paths, urlBase }) {
331
331
  </a>
332
332
  </div>
333
333
  </div>
334
- <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
334
+ <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
335
335
  <div className="flex mr-24">
336
- <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
336
+ <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
337
337
  <div>
338
- <p className="ui-footer-compliance-text font-medium">SOC 2 Type 2</p>
338
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
339
339
  <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
340
340
  </div>
341
341
  </div>
342
- <div className="flex mr-24 sm:col-start-2">
343
- <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
342
+ <div className="flex mr-24 md:col-start-2">
343
+ <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
344
344
  <div>
345
- <p className="ui-footer-compliance-text font-medium">HIPAA</p>
345
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
346
346
  <p className="ui-footer-compliance-text font-light mb-24">Compliant</p>
347
347
  </div>
348
348
  </div>
349
- <div className="flex mr-24 sm:col-start-3">
350
- <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
349
+ <div className="flex mr-24 md:col-start-3">
350
+ <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
351
351
  <div>
352
- <p className="ui-footer-compliance-text font-medium">EU GDPR</p>
352
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
353
353
  <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
354
354
  </div>
355
355
  </div>
356
- <div className="flex mr-24 sm:col-start-4">
357
- <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
356
+ <div className="flex mr-24 md:col-start-4">
357
+ <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
358
358
  <div>
359
- <p className="ui-footer-compliance-text font-medium">256-bit AES</p>
359
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
360
360
  <p className="ui-footer-compliance-text font-light mb-24">Encryption</p>
361
361
  </div>
362
362
  </div>
package/src/core/MeganavContentCompany/component.html.erb CHANGED
@@ -72,6 +72,15 @@
72
72
  </div>
73
73
  <% end %>
74
74
  </li>
75
+ <li>
76
+ <%= link_to abs_url("/events"), class: "ui-meganav-media-with-image group" do %>
77
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-events-col", size: "2.5rem")) %>
78
+ <div class="flex flex-col justify-center">
79
+ <p class="ui-meganav-media-heading">Events</p>
80
+ <p class="ui-meganav-media-copy">Join Ably at upcoming events.</p>
81
+ </div>
82
+ <% end %>
83
+ </li>
75
84
  </ul>
76
85
  </div>
77
86
 
package/src/core/MeganavContentCompany/component.jsx CHANGED
@@ -88,6 +88,15 @@ const MeganavContentCompany = ({ paths, absUrl }) => {
88
88
  </div>
89
89
  </a>
90
90
  </li>
91
+ <li>
92
+ <a href={absUrl("/events")} className="ui-meganav-media-with-image group">
93
+ <Icon name="icon-display-events-col" size="2.5rem" />
94
+ <div className="flex flex-col justify-center">
95
+ <p className="ui-meganav-media-heading">Events</p>
96
+ <p className="ui-meganav-media-copy">Join Ably at upcoming events.</p>
97
+ </div>
98
+ </a>
99
+ </li>
91
100
  </ul>
92
101
  </div>
93
102
 
package/src/core/MeganavContentPlatform/component.html.erb CHANGED
@@ -36,12 +36,6 @@
36
36
  <p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
37
37
  <% end %>
38
38
  </li>
39
- <li>
40
- <%= link_to abs_url("/examples/live-charts"), class: "ui-meganav-media group" do %>
41
- <p class="ui-meganav-media-heading">Live Charts</p>
42
- <p class="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
43
- <% end %>
44
- </li>
45
39
  <li>
46
40
  <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %>
47
41
  <p class="ui-meganav-media-heading">Live Cursors</p>
@@ -54,6 +48,12 @@
54
48
  <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
55
49
  <% end %>
56
50
  </li>
51
+ <li>
52
+ <%= link_to abs_url("/examples/chat-admin-privileges"), class: "ui-meganav-media group" do %>
53
+ <p class="ui-meganav-media-heading">Chat Admin Privileges</p>
54
+ <p class="ui-meganav-media-copy">Control who can take admin actions in a digital space.</p>
55
+ <% end %>
56
+ </li>
57
57
  </ul>
58
58
 
59
59
  <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"), text_size: 'text-p3')) do %>Explore all live examples<% end %>
package/src/core/MeganavContentPlatform/component.jsx CHANGED
@@ -45,12 +45,6 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
45
45
  <p className="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
46
46
  </a>
47
47
  </li>
48
- <li>
49
- <a href={absUrl("/examples/live-charts")} className="ui-meganav-media group">
50
- <p className="ui-meganav-media-heading">Live Charts</p>
51
- <p className="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
52
- </a>
53
- </li>
54
48
  <li>
55
49
  <a href={absUrl("/examples/live-cursors")} className="ui-meganav-media group">
56
50
  <p className="ui-meganav-media-heading">Live Cursors</p>
@@ -63,6 +57,12 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
63
57
  <p className="ui-meganav-media-copy">See when a user is typing a message.</p>
64
58
  </a>
65
59
  </li>
60
+ <li>
61
+ <a href={absUrl("/examples/chat-admin-privileges")} className="ui-meganav-media group">
62
+ <p className="ui-meganav-media-heading">Chat Admin Privileges</p>
63
+ <p className="ui-meganav-media-copy">Control who can take admin actions in a digital space.</p>
64
+ </a>
65
+ </li>
66
66
  </ul>
67
67
  <FeaturedLink url={absUrl("/examples")} textSize="text-p3">
68
68
  Explore all live examples
package/src/core/MeganavContentUseCases/component.html.erb CHANGED
@@ -7,38 +7,38 @@
7
7
  </h3>
8
8
  <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
9
9
  <li>
10
- <%= link_to abs_url("/solutions/live-updates-results-metrics"), class: "ui-meganav-media-with-image group" do %>
11
- <%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
10
+ <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
11
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
12
12
  <div class="flex flex-col justify-center">
13
- <p class="ui-meganav-media-heading">Live updates, results & metrics</p>
14
- <p class="ui-meganav-media-copy">Deliver live updates to keep users informed.</p>
13
+ <p class="ui-meganav-media-heading">Chat</p>
14
+ <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
15
15
  </div>
16
16
  <% end %>
17
17
  </li>
18
18
  <li>
19
- <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
20
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
19
+ <%= link_to abs_url("/solutions/multiplayer-collaboration"), class: "ui-meganav-media-with-image group" do %>
20
+ <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
21
21
  <div class="flex flex-col justify-center">
22
- <p class="ui-meganav-media-heading">Chat</p>
23
- <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
22
+ <p class="ui-meganav-media-heading">Multiplayer Collaboration</p>
23
+ <p class="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
24
24
  </div>
25
25
  <% end %>
26
26
  </li>
27
27
  <li>
28
- <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media-with-image group" do %>
29
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events-col", size: "2.5rem")) %>
28
+ <%= link_to abs_url("/solutions/data-broadcast"), class: "ui-meganav-media-with-image group" do %>
29
+ <%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
30
30
  <div class="flex flex-col justify-center">
31
- <p class="ui-meganav-media-heading">Virtual Events</p>
32
- <p class="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
31
+ <p class="ui-meganav-media-heading">Data Broadcast</p>
32
+ <p class="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
33
33
  </div>
34
34
  <% end %>
35
35
  </li>
36
36
  <li>
37
- <%= link_to abs_url("/solutions/multi-user-virtual-spaces"), class: "ui-meganav-media-with-image group" do %>
38
- <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
37
+ <%= link_to abs_url("/solutions/data-synchronization"), class: "ui-meganav-media-with-image group" do %>
38
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events", size: "2.5rem")) %>
39
39
  <div class="flex flex-col justify-center">
40
- <p class="ui-meganav-media-heading">Multi-user virtual spaces</p>
41
- <p class="ui-meganav-media-copy">Build live and interactive multi-user applications.</p>
40
+ <p class="ui-meganav-media-heading">Data Synchronization</p>
41
+ <p class="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
42
42
  </div>
43
43
  <% end %>
44
44
  </li>