@ably/ui 8.7.0-dev.d70b391 → 8.7.0-dev.dff3090

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 (33) hide show
  1. package/README.md +8 -1
  2. package/core/.DS_Store +0 -0
  3. package/core/DropdownMenuPreview/component.js +6 -0
  4. package/core/DropdownMenuPreview.jsx +6 -0
  5. package/core/Flash.jsx +0 -3
  6. package/core/Footer/component.css +20 -0
  7. package/core/Footer.jsx +136 -45
  8. package/core/Meganav/component.json +1 -1
  9. package/core/Meganav.jsx +1 -4
  10. package/core/MeganavItemsDesktop.jsx +1 -1
  11. package/core/MeganavItemsMobile.jsx +1 -1
  12. package/core/Notice/component.js +1 -1
  13. package/core/Notice.jsx +0 -3
  14. package/core/images/high-performer-2022.png +0 -0
  15. package/core/images/highest-user-adoption-2022.png +0 -0
  16. package/core/images/users-love-us-2022.png +0 -0
  17. package/package.json +1 -1
  18. package/src/.DS_Store +0 -0
  19. package/src/core/.DS_Store +0 -0
  20. package/src/core/Flash/component.jsx +0 -2
  21. package/src/core/Footer/component.css +20 -0
  22. package/src/core/Footer/component.html.erb +115 -53
  23. package/src/core/Footer/component.jsx +123 -48
  24. package/src/core/Meganav/component.json +1 -1
  25. package/src/core/Meganav/component.rb +2 -2
  26. package/src/core/MeganavContentDevelopers/component.html.erb +8 -8
  27. package/src/core/core.rb +8 -4
  28. package/src/core/images/high-performer-2022.png +0 -0
  29. package/src/core/images/highest-user-adoption-2022.png +0 -0
  30. package/src/core/images/users-love-us-2022.png +0 -0
  31. package/tailwind.config.js +1 -0
  32. package/core/MeganavContentWhyAbly/component.js +0 -22
  33. package/core/MeganavContentWhyAbly.jsx +0 -3279
package/src/core/Footer/component.html.erb CHANGED
@@ -1,18 +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">
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
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
-
9
- <div class="grid grid-cols-4">
8
+ <div class="grid grid-cols-4 md:col-span-2">
10
9
  <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
11
10
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
12
11
  </p>
13
12
  </div>
14
-
15
- <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">
13
+ <ul class="grid xs:grid-cols-2 gap-x-8 sm:gap-x-24 xl:gap-x-32 sm:grid-cols-1">
16
14
  <li class="p-menu-row-snug">
17
15
  <%= link_to 'Pub/sub messaging', abs_url("/pub-sub-messaging"), class: "ui-footer-menu-row-link" %>
18
16
  </li>
@@ -30,8 +28,7 @@
30
28
  </li>
31
29
  </ul>
32
30
  </div>
33
-
34
- <div class="col-span-full sm:col-span-3 md:col-span-1">
31
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
35
32
  <h2 class="ui-footer-col-title">Ably is for</h2>
36
33
  <ul>
37
34
  <li class="p-menu-row-snug">
@@ -69,8 +66,7 @@
69
66
  </li>
70
67
  </ul>
71
68
  </div>
72
-
73
- <div class="col-span-full sm:col-span-3 md:col-span-1">
69
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
74
70
  <h2 class="ui-footer-col-title">Developers</h2>
75
71
  <ul>
76
72
  <li class="p-menu-row-snug">
@@ -97,8 +93,7 @@
97
93
  </li>
98
94
  </ul>
99
95
  </div>
100
-
101
- <div class="col-span-full sm:col-span-3 md:col-span-1">
96
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
102
97
  <h2 class="ui-footer-col-title">WHY ABLY</h2>
103
98
  <ul>
104
99
  <li class="p-menu-row-snug">
@@ -121,8 +116,7 @@
121
116
  </li>
122
117
  </ul>
123
118
  </div>
124
-
125
- <div class="col-span-full sm:col-span-3 md:col-span-1">
119
+ <div class="col-span-full xs:col-span-3 md:col-span-1">
126
120
  <h2 class="ui-footer-col-title">ABOUT</h2>
127
121
  <ul>
128
122
  <li class="p-menu-row-snug">
@@ -141,7 +135,7 @@
141
135
  <%= link_to 'Open protocol policy', abs_url("/open-policy"), class: "ui-footer-menu-row-link" %>
142
136
  </li>
143
137
  <li class="p-menu-row-snug">
144
- <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
138
+ <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
145
139
  </li>
146
140
  <li class="p-menu-row-snug">
147
141
  <%= link_to 'Contact us', abs_url("/contact"), class: "ui-footer-menu-row-link" %>
@@ -149,51 +143,119 @@
149
143
  </ul>
150
144
  </div>
151
145
  </div>
152
-
153
146
  <div class="max-w-screen-xl ui-grid-px mx-auto">
154
- <hr class="border-t border-mid-grey" />
147
+ <hr class="border-t border-mid-grey my-0"/>
155
148
  </div>
156
-
157
- <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">
158
- <div class="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
159
- <div class="inline-flex">
160
- <%= link_to 'Cookies', abs_url("/privacy"), class: "ui-footer-link pr-24" %>
161
- <%= link_to 'Legals', abs_url("/legals"), class: "ui-footer-link pr-24" %>
162
- <%= link_to 'Data Protection', abs_url("/data-protection"), class: "ui-footer-link pr-24" %>
163
- <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
149
+ <%# Twitter + Glassdoor SM * above + Glassdoor XS + Badges %>
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
+ <div class="">
154
+ <div class="flex pb-24">
155
+ <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
156
+ <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
157
+ </a>
158
+ <a
159
+ class="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
160
+ href="https://www.linkedin.com/company/ably-realtime"
161
+ title="Ably on LinkedIn"
162
+ >
163
+ <%= render(AblyUi::Core::Icon.new(name: "linkedin", size: "1.5rem")) %>
164
+ </a>
165
+ <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/" title="Ably on Github">
166
+ <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
167
+ </a>
168
+ <a class="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5" title="Ably on Discord">
169
+ <%= render(AblyUi::Core::Icon.new(name: "discord", size: "1.5rem")) %>
170
+ </a>
171
+ </div>
172
+ </div>
173
+ <%# GLASSDOOR on SM and Above %>
174
+ <div class="xs:hidden sm:block ui-footer-glassdoor">
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
+ <a
177
+ href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
178
+ class="h-24 text-cool-black hover:text-icon-glassdoor"
179
+ title="Ably reviews on glassdoor"
180
+ >
181
+ <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
182
+ </a>
183
+ <div class="pl-16 text-menu3 font-light">
184
+ <strong class="block font-medium">We&apos;re hiring!</strong>
185
+ <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
186
+ Learn more at Glassdoor
187
+ </a>
188
+ </div>
189
+ </div>
190
+ </div>
164
191
  </div>
165
-
166
- <div class="pt-32 flex items-center">
167
- <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime">
168
- <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
169
- </a>
170
- <a class="h-24 pr-24 text-cool-black hover:text-icon-linkedin" href="https://www.linkedin.com/company/ably-realtime">
171
- <%= render(AblyUi::Core::Icon.new(name: "linkedin", size: "1.5rem")) %>
172
- </a>
173
- <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/">
174
- <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
175
- </a>
176
- <a class="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5">
177
- <%= render(AblyUi::Core::Icon.new(name: "discord", size: "1.5rem")) %>
178
- </a>
179
- <div class="border-l border-mid-grey h-40"></div>
180
- <a
181
- class="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"
182
- href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
183
- >
184
- <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
185
- </a>
186
- <div class="pl-16 text-menu3 font-light">
187
- <strong class="block font-medium">We&apos;re hiring!</strong>
188
- <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">Learn more</a>
189
- at Glassdoor
192
+ <%# GlassDoor on XS ONLY %>
193
+ <div class="xs:block sm:hidden">
194
+ <div class="border-t border-mid-grey w-full"></div>
195
+ <div class="flex py-24">
196
+ <a
197
+ class="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
198
+ href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
199
+ title="Ably reviews on glassdoor"
200
+ >
201
+ <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
202
+ </a>
203
+ <div class="text-menu3 font-light">
204
+ <strong class="block font-medium">We&apos;re hiring!</strong>
205
+ <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
206
+ Learn more at Glassdoor
207
+ </a>
208
+ </div>
190
209
  </div>
191
210
  </div>
192
211
  </div>
193
-
194
- <div class="md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto">
195
- <%= image_tag(rocket_list, alt: "Rocket List 2021", class: "mr-24 w-96 h-96") %>
196
- <%= image_tag(flexible_companies, alt: "Flexible Companies 2021", 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
+ </div>
217
+ </div>
218
+ <div class="max-w-screen-xl ui-grid-px mx-auto">
219
+ <hr class="border-t border-mid-grey my-0"/>
220
+ </div>
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
+ <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
228
+ </div>
229
+ </div>
230
+ <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-0 ">
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 ui-footer-tick-icon")) %>
233
+ <div>
234
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
235
+ <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
236
+ </div>
237
+ </div>
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")) %>
240
+ <div>
241
+ <p class="ui-footer-compliance-text font-medium">HIPAA</p>
242
+ <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
243
+ </div>
244
+ </div>
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")) %>
247
+ <div>
248
+ <p class="ui-footer-compliance-text font-medium">EU GDPR</p>
249
+ <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
250
+ </div>
251
+ </div>
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")) %>
254
+ <div>
255
+ <p class="ui-footer-compliance-text font-medium">256-bit AES</p>
256
+ <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
257
+ </div>
258
+ </div>
197
259
  </div>
198
260
  </div>
199
261
  </footer>
package/src/core/Footer/component.jsx CHANGED
@@ -9,20 +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">
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
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
-
19
- <div className="grid grid-cols-4">
18
+ <div className="grid grid-cols-4 md:col-span-2">
20
19
  <p className="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
21
20
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
22
21
  </p>
23
22
  </div>
24
23
 
25
- <ul className="grid gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32 sm:grid-cols-2 md:grid-cols-1">
24
+ <ul className="grid xs:grid-cols-2 gap-x-8 sm:gap-x-24 xl:gap-x-32 sm:grid-cols-1">
26
25
  <li className="p-menu-row-snug">
27
26
  <a href={absUrl("/pub-sub-messaging")} className="ui-footer-menu-row-link">
28
27
  Pub/sub messaging
@@ -51,7 +50,7 @@ export default function Footer({ paths, urlBase }) {
51
50
  </ul>
52
51
  </div>
53
52
 
54
- <div className="col-span-full sm:col-span-3 md:col-span-1">
53
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
55
54
  <h2 className="ui-footer-col-title">Ably is for</h2>
56
55
  <ul>
57
56
  <li className="p-menu-row-snug">
@@ -112,7 +111,7 @@ export default function Footer({ paths, urlBase }) {
112
111
  </ul>
113
112
  </div>
114
113
 
115
- <div className="col-span-full sm:col-span-3 md:col-span-1">
114
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
116
115
  <h2 className="ui-footer-col-title">Developers</h2>
117
116
  <ul>
118
117
  <li className="p-menu-row-snug">
@@ -149,12 +148,19 @@ export default function Footer({ paths, urlBase }) {
149
148
  <a className="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">
150
149
  System status
151
150
  </a>
152
- <iframe className="w-24 h-24 mt-4" src="https://status.ably.com/embed/icon" allowtransparency="true" frameBorder="0" scrolling="no"></iframe>
151
+ <iframe
152
+ className="w-24 h-24 mt-4"
153
+ src="https://status.ably.com/embed/icon"
154
+ allowtransparency="true"
155
+ frameBorder="0"
156
+ scrolling="no"
157
+ title="System Status"
158
+ ></iframe>
153
159
  </li>
154
160
  </ul>
155
161
  </div>
156
162
 
157
- <div className="col-span-full sm:col-span-3 md:col-span-1">
163
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
158
164
  <h2 className="ui-footer-col-title">WHY ABLY</h2>
159
165
  <ul>
160
166
  <li className="p-menu-row-snug">
@@ -190,7 +196,7 @@ export default function Footer({ paths, urlBase }) {
190
196
  </ul>
191
197
  </div>
192
198
 
193
- <div className="col-span-full sm:col-span-3 md:col-span-1">
199
+ <div className="col-span-full xs:col-span-3 md:col-span-1">
194
200
  <h2 className="ui-footer-col-title">ABOUT</h2>
195
201
  <ul>
196
202
  <li className="p-menu-row-snug">
@@ -231,14 +237,86 @@ export default function Footer({ paths, urlBase }) {
231
237
  </ul>
232
238
  </div>
233
239
  </div>
234
-
235
240
  <div className="max-w-screen-xl ui-grid-px mx-auto">
236
- <hr className="border-t border-mid-grey" />
241
+ <hr className="border-t border-mid-grey my-0" />
237
242
  </div>
243
+ {/* Twitter + Glassdoor SM * above + Glassdoor XS + Badges*/}
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
+ <div className="">
248
+ <div className="flex pb-24">
249
+ <a className="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
250
+ <Icon name="twitter" size="1.5rem" />
251
+ </a>
252
+ <a
253
+ className="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
254
+ href="https://www.linkedin.com/company/ably-realtime"
255
+ title="Ably on LinkedIn"
256
+ >
257
+ <Icon name="linkedin" size="1.5rem" />
258
+ </a>
259
+ <a className="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/" title="Ably on Github">
260
+ <Icon name="github" size="1.5rem" />
261
+ </a>
262
+ <a className="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5" title="Ably on Discord">
263
+ <Icon name="discord" size="1.5rem" />
264
+ </a>
265
+ </div>
266
+ </div>
267
+ {/* GLASSDOOR on SM and Above */}
268
+ <div className="xs:hidden sm:block ui-footer-glassdoor">
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
+ <a
271
+ href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
272
+ className="h-24 text-cool-black hover:text-icon-glassdoor"
273
+ title="Ably reviews on glassdoor"
274
+ >
275
+ <Icon name="glassdoor" size="1.5rem" />
276
+ </a>
277
+ <div className="pl-16 text-menu3 font-light">
278
+ <strong className="block font-medium">We&apos;re hiring!</strong>
279
+ <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
280
+ Learn more at Glassdoor
281
+ </a>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ {/* GlassDoor on XS ONLY */}
287
+ <div className="xs:block sm:hidden">
288
+ <div className="border-t border-mid-grey w-full"></div>
289
+ <div className="flex py-24">
290
+ <a
291
+ className="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
292
+ href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
293
+ title="Ably reviews on glassdoor"
294
+ >
295
+ <Icon name="glassdoor" size="1.5rem" />
296
+ </a>
297
+ <div className="text-menu3 font-light">
298
+ <strong className="block font-medium">We&apos;re hiring!</strong>
299
+ <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
300
+ Learn more at Glassdoor
301
+ </a>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
238
306
 
239
- <div className="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px grid-cols-2">
240
- <div className="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
241
- <div className="inline-flex">
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" />
311
+ </div>
312
+ </div>
313
+
314
+ <div className="max-w-screen-xl ui-grid-px mx-auto">
315
+ <hr className="border-t border-mid-grey my-0" />
316
+ </div>
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">
242
320
  <a href={absUrl("/privacy")} className="pr-24 ui-footer-link">
243
321
  Cookies
244
322
  </a>
@@ -252,40 +330,36 @@ export default function Footer({ paths, urlBase }) {
252
330
  Privacy
253
331
  </a>
254
332
  </div>
255
-
256
- <div className="pt-32 flex items-center">
257
- <a className="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime">
258
- <Icon name="twitter" size="1.5rem" />
259
- </a>
260
- <a className="h-24 pr-24 text-cool-black hover:text-icon-linkedin" href="https://www.linkedin.com/company/ably-realtime">
261
- <Icon name="linkedin" size="1.5rem" />
262
- </a>
263
- <a className="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/">
264
- <Icon name="github" size="1.5rem" />
265
- </a>
266
- <a className="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5">
267
- <Icon name="discord" size="1.5rem" />
268
- </a>
269
- <div className="border-l border-mid-grey h-40"></div>
270
- <a
271
- className="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"
272
- href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
273
- >
274
- <Icon name="glassdoor" size="1.5rem" />
275
- </a>
276
- <div className="pl-16 text-menu3 font-light">
277
- <strong className="block font-medium">We&apos;re hiring!</strong>
278
- <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
279
- Learn more
280
- </a>
281
- &nbsp;at Glassdoor
333
+ </div>
334
+ <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
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 ui-footer-tick-icon" />
337
+ <div>
338
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
339
+ <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
340
+ </div>
341
+ </div>
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" />
344
+ <div>
345
+ <p className="ui-footer-compliance-text font-medium">HIPAA</p>
346
+ <p className="ui-footer-compliance-text font-light mb-24">Compliant</p>
347
+ </div>
348
+ </div>
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" />
351
+ <div>
352
+ <p className="ui-footer-compliance-text font-medium">EU GDPR</p>
353
+ <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
354
+ </div>
355
+ </div>
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" />
358
+ <div>
359
+ <p className="ui-footer-compliance-text font-medium">256-bit AES</p>
360
+ <p className="ui-footer-compliance-text font-light mb-24">Encryption</p>
282
361
  </div>
283
362
  </div>
284
- </div>
285
-
286
- <div className="md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto">
287
- <img className="mr-24 w-96 h-96" src={paths.rocketList} alt="Rocket List 2021" />
288
- <img className="w-96 h-96" src={paths.flexibleCompanies} alt="Flexible Companies 2021" />
289
363
  </div>
290
364
  </div>
291
365
  </footer>
@@ -295,8 +369,9 @@ export default function Footer({ paths, urlBase }) {
295
369
  Footer.propTypes = {
296
370
  paths: T.shape({
297
371
  ablyStack: T.string,
298
- rocketList: T.string,
299
- flexibleCompanies: T.string,
372
+ highestPerformer: T.string,
373
+ highestUserAdoption: T.string,
374
+ usersLoveUs: T.string,
300
375
  }),
301
376
  urlBase: T.string,
302
377
  };
package/src/core/Meganav/component.json CHANGED
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "panels": [
32
32
  { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
33
- { "label": "Use Cases & Solutions", "shortLabel": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
33
+ { "label": "Solutions", "shortLabel": "Solutions", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
34
34
  { "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
35
35
  { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }
36
36
  ]
package/src/core/Meganav/component.rb CHANGED
@@ -36,8 +36,8 @@ module AblyUi
36
36
  class: 'AblyUi::Core::MeganavContentPlatform'
37
37
  },
38
38
  {
39
- label: 'Use Cases & Solutions',
40
- short_label: 'Use Cases',
39
+ label: 'Solutions',
40
+ short_label: 'Solutions',
41
41
  id: 'use-cases-panel',
42
42
  class: 'AblyUi::Core::MeganavContentUseCases'
43
43
  },
package/src/core/MeganavContentDevelopers/component.html.erb CHANGED
@@ -16,20 +16,20 @@
16
16
  <% end %>
17
17
  </li>
18
18
  <li>
19
- <%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
20
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
19
+ <%= link_to abs_url("/docs/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
20
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
21
21
  <div class="flex flex-col justify-center">
22
- <p class="ui-meganav-media-heading">Integrations</p>
23
- <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
22
+ <p class="ui-meganav-media-heading">Quickstart guides</p>
23
+ <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
24
24
  </div>
25
25
  <% end %>
26
26
  </li>
27
27
  <li>
28
- <%= link_to abs_url("/docs/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
29
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
28
+ <%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
29
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
30
30
  <div class="flex flex-col justify-center">
31
- <p class="ui-meganav-media-heading">Quickstart guides</p>
32
- <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
31
+ <p class="ui-meganav-media-heading">Integrations</p>
32
+ <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
33
33
  </div>
34
34
  <% end %>
35
35
  </li>
package/src/core/core.rb CHANGED
@@ -42,12 +42,16 @@ module AblyUi
42
42
  asset_path 'ably_ui/core/images/icon-tech-aws.svg'
43
43
  end
44
44
 
45
- def rocket_list
46
- asset_path 'ably_ui/core/images/rocket-list-2021.png'
45
+ def highest_performer
46
+ asset_path 'ably_ui/core/images/high-performer-2022.png'
47
47
  end
48
48
 
49
- def flexible_companies
50
- asset_path 'ably_ui/core/images/flexible-companies.png'
49
+ def highest_user_adoption
50
+ asset_path 'ably_ui/core/images/highest-user-adoption-2022.png'
51
+ end
52
+
53
+ def users_love_us
54
+ asset_path 'ably_ui/core/images/users-love-us-2022.png'
51
55
  end
52
56
  end
53
57
 
package/tailwind.config.js CHANGED
@@ -131,6 +131,7 @@ module.exports = {
131
131
  80: "var(--spacing-80)",
132
132
  88: "var(--spacing-88)",
133
133
  96: "var(--spacing-96)",
134
+ 128: "var(--spacing-128)",
134
135
  160: "var(--spacing-160)",
135
136
  256: "var(--spacing-256)",
136
137
  },
package/core/MeganavContentWhyAbly/component.js DELETED
@@ -1,22 +0,0 @@
1
- (function webpackUniversalModuleDefinition(root, factory) {
2
- if(typeof exports === 'object' && typeof module === 'object')
3
- module.exports = factory();
4
- else if(typeof define === 'function' && define.amd)
5
- define([], factory);
6
- else if(typeof exports === 'object')
7
- exports["AblyUi"] = factory();
8
- else
9
- root["AblyUi"] = root["AblyUi"] || {}, root["AblyUi"]["Core"] = root["AblyUi"]["Core"] || {}, root["AblyUi"]["Core"]["MeganavContentWhyAbly"] = factory();
10
- })(this, function() {
11
- return /******/ (() => { // webpackBootstrap
12
- var __webpack_exports__ = {};
13
- /*!*****************************************************!*\
14
- !*** ./src/core/MeganavContentWhyAbly/component.js ***!
15
- \*****************************************************/
16
-
17
- __webpack_exports__ = __webpack_exports__.default;
18
- /******/ return __webpack_exports__;
19
- /******/ })()
20
- ;
21
- });
22
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9BYmx5VWkuQ29yZS5bbmFtZV0vd2VicGFjay91bml2ZXJzYWxNb2R1bGVEZWZpbml0aW9uIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSx1Q0FBdUMsdURBQXVEO0FBQzlGLENBQUM7QUFDRCxPIiwiZmlsZSI6ImNvcmUvTWVnYW5hdkNvbnRlbnRXaHlBYmx5L2NvbXBvbmVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiB3ZWJwYWNrVW5pdmVyc2FsTW9kdWxlRGVmaW5pdGlvbihyb290LCBmYWN0b3J5KSB7XG5cdGlmKHR5cGVvZiBleHBvcnRzID09PSAnb2JqZWN0JyAmJiB0eXBlb2YgbW9kdWxlID09PSAnb2JqZWN0Jylcblx0XHRtb2R1bGUuZXhwb3J0cyA9IGZhY3RvcnkoKTtcblx0ZWxzZSBpZih0eXBlb2YgZGVmaW5lID09PSAnZnVuY3Rpb24nICYmIGRlZmluZS5hbWQpXG5cdFx0ZGVmaW5lKFtdLCBmYWN0b3J5KTtcblx0ZWxzZSBpZih0eXBlb2YgZXhwb3J0cyA9PT0gJ29iamVjdCcpXG5cdFx0ZXhwb3J0c1tcIkFibHlVaVwiXSA9IGZhY3RvcnkoKTtcblx0ZWxzZVxuXHRcdHJvb3RbXCJBYmx5VWlcIl0gPSByb290W1wiQWJseVVpXCJdIHx8IHt9LCByb290W1wiQWJseVVpXCJdW1wiQ29yZVwiXSA9IHJvb3RbXCJBYmx5VWlcIl1bXCJDb3JlXCJdIHx8IHt9LCByb290W1wiQWJseVVpXCJdW1wiQ29yZVwiXVtcIk1lZ2FuYXZDb250ZW50V2h5QWJseVwiXSA9IGZhY3RvcnkoKTtcbn0pKHRoaXMsIGZ1bmN0aW9uKCkge1xucmV0dXJuICJdLCJzb3VyY2VSb290IjoiIn0=