@ably/ui 8.7.0-dev.98edac1 → 8.7.0-dev.a7c6637

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 (6) hide show
  1. package/core/Footer/component.css +10 -0
  2. package/core/Footer.jsx +24 -24
  3. package/package.json +1 -1
  4. package/src/core/Footer/component.css +10 -0
  5. package/src/core/Footer/component.html.erb +32 -32
  6. package/src/core/Footer/component.jsx +24 -24
package/core/Footer/component.css CHANGED
@@ -15,6 +15,16 @@
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/core/Footer.jsx CHANGED
@@ -191,9 +191,9 @@ function Footer(_ref) {
191
191
  className: "bg-light-grey font-sans antialiased",
192
192
  "data-id": "footer"
193
193
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
194
- 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"
194
+ 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"
195
195
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
196
- className: "col-span-full lg:col-span-2"
196
+ className: "col-span-full md:col-span-2"
197
197
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
198
198
  className: "flex flex-row p-menu-row-snug"
199
199
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
@@ -203,11 +203,11 @@ function Footer(_ref) {
203
203
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
204
204
  className: "text-overline2 col-span-full font-medium uppercase tracking-widen-0.1"
205
205
  }, "The Ably Platform")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
206
- className: "grid grid-cols-4 lg:col-span-2"
206
+ className: "md:col-span-4 md:w-3/4 xs:w-3/5 w-full"
207
207
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
208
- className: "text-p3 py-16 font-medium p-menu-row-snug col-span-3"
208
+ className: "text-p3 py-16 font-medium p-menu-row-snug"
209
209
  }, "Easily power any realtime experience in your application via a simple API that handles everything realtime.")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
210
- className: "grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1"
210
+ className: "grid grid-cols-1"
211
211
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
212
212
  className: "p-menu-row-snug"
213
213
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
@@ -234,7 +234,7 @@ function Footer(_ref) {
234
234
  href: absUrl("/hub"),
235
235
  className: "ui-footer-menu-row-link"
236
236
  }, "Streaming data sources")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
237
- className: "col-span-full xs:col-span-3 lg:col-span-1"
237
+ className: "col-span-full xs:col-span-3 md:col-span-1"
238
238
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
239
239
  className: "ui-footer-col-title"
240
240
  }, "Ably is for"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -293,7 +293,7 @@ function Footer(_ref) {
293
293
  href: absUrl("/solutions/iot-and-connected-devices"),
294
294
  className: "ui-footer-menu-row-link"
295
295
  }, "IoT & Connected Devices")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
296
- className: "col-span-full xs:col-span-3 lg:col-span-1"
296
+ className: "col-span-full xs:col-span-3 md:col-span-1"
297
297
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
298
298
  className: "ui-footer-col-title"
299
299
  }, "Developers"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -339,7 +339,7 @@ function Footer(_ref) {
339
339
  scrolling: "no",
340
340
  title: "System Status"
341
341
  })))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
342
- className: "col-span-full xs:col-span-3 lg:col-span-1"
342
+ className: "col-span-full xs:col-span-3 md:col-span-1"
343
343
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
344
344
  className: "ui-footer-col-title"
345
345
  }, "WHY ABLY"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -373,7 +373,7 @@ function Footer(_ref) {
373
373
  href: absUrl("/integrations"),
374
374
  className: "ui-footer-menu-row-link"
375
375
  }, "Third-party integrations")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
376
- className: "col-span-full xs:col-span-3 lg:col-span-1"
376
+ className: "col-span-full xs:col-span-3 md:col-span-1"
377
377
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
378
378
  className: "ui-footer-col-title"
379
379
  }, "ABOUT"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -414,17 +414,17 @@ function Footer(_ref) {
414
414
  }, "Contact us"))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
415
415
  className: "max-w-screen-xl ui-grid-px mx-auto"
416
416
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("hr", {
417
- className: "border-t border-mid-grey"
417
+ className: "border-t border-mid-grey my-0"
418
418
  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
419
- 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"
419
+ className: "max-w-screen-xl mx-auto py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2 "
420
420
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
421
- className: ""
421
+ className: "md:flex md:items-center"
422
422
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
423
- className: "flex flex-col lg:flex-row flex-auto ml-8 sm:col-span-1 lg:col-span-2"
423
+ className: "flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2"
424
424
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
425
425
  className: ""
426
426
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
427
- className: "flex items-center pb-24"
427
+ className: "flex pb-24"
428
428
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
429
429
  className: "h-24 pr-24 text-cool-black hover:text-icon-twitter",
430
430
  href: "https://twitter.com/ablyrealtime",
@@ -456,7 +456,7 @@ function Footer(_ref) {
456
456
  })))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
457
457
  className: "xs:hidden sm:block ui-footer-glassdoor"
458
458
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
459
- 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"
459
+ 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"
460
460
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
461
461
  href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
462
462
  className: "h-24 text-cool-black hover:text-icon-glassdoor",
@@ -508,13 +508,13 @@ function Footer(_ref) {
508
508
  }))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
509
509
  className: "max-w-screen-xl ui-grid-px mx-auto"
510
510
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("hr", {
511
- className: "border-t border-mid-grey"
511
+ className: "border-t border-mid-grey my-0"
512
512
  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
513
- 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 "
513
+ 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"
514
514
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
515
- className: "flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1"
515
+ className: "flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links"
516
516
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
517
- className: "pl-16 "
517
+ className: "flex"
518
518
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
519
519
  href: absUrl("/privacy"),
520
520
  className: "pr-24 ui-footer-link"
@@ -535,13 +535,13 @@ function Footer(_ref) {
535
535
  name: "icon-gui-tick",
536
536
  color: "text-active-orange",
537
537
  size: "1.5rem",
538
- additionalCSS: "bg-white rounded-full mr-12"
538
+ additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
539
539
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
540
- className: "ui-footer-compliance-text font-medium"
540
+ className: "ui-footer-compliance-text font-medium whitespace-nowrap"
541
541
  }, "SOC 2 Type 2"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
542
542
  className: "ui-footer-compliance-text font-light mb-24"
543
543
  }, "Certified"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
544
- className: "flex mr-24 sm:col-start-2"
544
+ className: "flex mr-24 md:col-start-2"
545
545
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
546
546
  name: "icon-gui-tick",
547
547
  color: "text-active-orange",
@@ -552,7 +552,7 @@ function Footer(_ref) {
552
552
  }, "HIPAA"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
553
553
  className: "ui-footer-compliance-text font-light mb-24"
554
554
  }, "Compliant"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
555
- className: "flex mr-24 sm:col-start-3"
555
+ className: "flex mr-24 md:col-start-3"
556
556
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
557
557
  name: "icon-gui-tick",
558
558
  color: "text-active-orange",
@@ -563,7 +563,7 @@ function Footer(_ref) {
563
563
  }, "EU GDPR"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
564
564
  className: "ui-footer-compliance-text font-light mb-24"
565
565
  }, "Certified"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
566
- className: "flex mr-24 sm:col-start-4"
566
+ className: "flex mr-24 md:col-start-4"
567
567
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
568
568
  name: "icon-gui-tick",
569
569
  color: "text-active-orange",
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.a7c6637",
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
@@ -15,6 +15,16 @@
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">
@@ -93,7 +93,7 @@
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-32 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"
@@ -209,47 +209,47 @@
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 w-96 h-96") %>
214
+ <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 w-96 h-96") %>
215
+ <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 w-96 h-96") %>
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-0 ">
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">
238
+ <div class="flex mr-24 md:col-start-2">
239
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")) %>
240
240
  <div>
241
241
  <p class="ui-footer-compliance-text font-medium">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">
245
+ <div class="flex mr-24 md:col-start-3">
246
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")) %>
247
247
  <div>
248
248
  <p class="ui-footer-compliance-text font-medium">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">
252
+ <div class="flex mr-24 md:col-start-4">
253
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")) %>
254
254
  <div>
255
255
  <p class="ui-footer-compliance-text font-medium">256-bit AES</p>
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">
@@ -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
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">
244
+ <div className="max-w-screen-xl mx-auto py-32 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"
@@ -312,11 +312,11 @@ export default function Footer({ paths, urlBase }) {
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>
@@ -333,27 +333,27 @@ export default function Footer({ paths, urlBase }) {
333
333
  </div>
334
334
  <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
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">
342
+ <div className="flex mr-24 md:col-start-2">
343
343
  <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
344
344
  <div>
345
345
  <p className="ui-footer-compliance-text font-medium">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">
349
+ <div className="flex mr-24 md:col-start-3">
350
350
  <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
351
351
  <div>
352
352
  <p className="ui-footer-compliance-text font-medium">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">
356
+ <div className="flex mr-24 md:col-start-4">
357
357
  <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
358
358
  <div>
359
359
  <p className="ui-footer-compliance-text font-medium">256-bit AES</p>