@ably/ui 8.7.0-dev.98edac1 → 8.7.0-dev.994f756

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 (32) hide show
  1. package/README.md +7 -3
  2. package/core/Code/component.js +1 -1
  3. package/core/Code.jsx +24 -4
  4. package/core/Footer/component.css +11 -1
  5. package/core/Footer.jsx +38 -38
  6. package/core/Meganav/component.css +1 -1
  7. package/core/Meganav.jsx +70 -50
  8. package/core/MeganavContentCompany.jsx +13 -1
  9. package/core/MeganavContentPlatform.jsx +8 -8
  10. package/core/MeganavContentUseCases.jsx +49 -41
  11. package/core/sprites.svg +64 -0
  12. package/core/styles.css +1 -1
  13. package/package.json +1 -1
  14. package/src/core/Footer/component.css +11 -1
  15. package/src/core/Footer/component.html.erb +41 -41
  16. package/src/core/Footer/component.jsx +39 -39
  17. package/src/core/Meganav/component.css +1 -1
  18. package/src/core/MeganavContentCompany/component.html.erb +9 -0
  19. package/src/core/MeganavContentCompany/component.jsx +9 -0
  20. package/src/core/MeganavContentPlatform/component.html.erb +6 -6
  21. package/src/core/MeganavContentPlatform/component.jsx +6 -6
  22. package/src/core/MeganavContentUseCases/component.html.erb +42 -38
  23. package/src/core/MeganavContentUseCases/component.jsx +41 -38
  24. package/src/core/icons/icon-display-data-broadcast-col.svg +26 -0
  25. package/src/core/icons/icon-display-data-synchronization-col.svg +14 -0
  26. package/src/core/icons/icon-display-events-col.svg +13 -0
  27. package/src/core/icons/icon-display-kafka-at-the-edge-col.svg +8 -0
  28. package/src/core/icons/icon-display-push-notifications-col.svg +6 -0
  29. package/src/core/icons/icon-tech-apachekafka.svg +3 -0
  30. package/src/core/styles/forms.css +1 -1
  31. package/src/core/utils/syntax-highlighter-registry.js +2 -0
  32. package/src/core/utils/syntax-highlighter.js +5 -0
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/Meganav/component.css CHANGED
@@ -93,7 +93,7 @@
93
93
  grid-template-rows: min-content 1fr;
94
94
 
95
95
  @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
96
- @apply grid gap-x-8;
96
+ @apply grid gap-x-16;
97
97
  }
98
98
 
99
99
  .ui-meganav-media-heading {
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
@@ -3,49 +3,68 @@
3
3
  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
4
4
  <div class="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
5
5
  <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
6
- Use cases
6
+ Solutions
7
7
  </h3>
8
8
  <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
9
+
9
10
  <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")) %>
11
+ <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
12
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
12
13
  <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>
14
+ <p class="ui-meganav-media-heading">Live Chat</p>
15
+ <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale.</p>
15
16
  </div>
16
17
  <% end %>
17
18
  </li>
18
19
  <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")) %>
20
+ <%= link_to abs_url("/solutions/multiplayer-collaboration"), class: "ui-meganav-media-with-image group" do %>
21
+ <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
21
22
  <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>
23
+ <p class="ui-meganav-media-heading">Multiplayer Collaboration</p>
24
+ <p class="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
24
25
  </div>
25
26
  <% end %>
26
27
  </li>
27
28
  <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")) %>
29
+ <%= link_to abs_url("/solutions/data-broadcast"), class: "ui-meganav-media-with-image group" do %>
30
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-data-broadcast-col", size: "2.5rem")) %>
30
31
  <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>
32
+ <p class="ui-meganav-media-heading">Data Broadcast</p>
33
+ <p class="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
33
34
  </div>
34
35
  <% end %>
35
36
  </li>
36
37
  <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")) %>
38
+ <%= link_to abs_url("/solutions/data-synchronization"), class: "ui-meganav-media-with-image group" do %>
39
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-data-synchronization-col", size: "2.5rem")) %>
39
40
  <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>
41
+ <p class="ui-meganav-media-heading">Data Synchronization</p>
42
+ <p class="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
43
+ </div>
44
+ <% end %>
45
+ </li>
46
+ <li>
47
+ <%= link_to abs_url("/push-notifications"), class: "ui-meganav-media-with-image group" do %>
48
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-push-notifications-col", size: "2.5rem")) %>
49
+ <div class="flex flex-col justify-center">
50
+ <p class="ui-meganav-media-heading">Notifications</p>
51
+ <p class="ui-meganav-media-copy">Deliver cross-platform push notifications with a simple unified API.</p>
52
+ </div>
53
+ <% end %>
54
+ </li>
55
+ <li>
56
+ <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media-with-image group" do %>
57
+ <%= render(AblyUi::Core::Icon.new(name: "icon-display-kafka-at-the-edge-col", size: "2.5rem")) %>
58
+ <div class="flex flex-col justify-center">
59
+ <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
60
+ <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
42
61
  </div>
43
62
  <% end %>
44
63
  </li>
45
64
  </ul>
46
65
  </div>
47
66
 
48
- <div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
67
+ <div class="col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
49
68
  <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
50
69
  Industry
51
70
  </h3>
@@ -80,6 +99,11 @@
80
99
  <p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
81
100
  <% end %>
82
101
  </li>
102
+ </ul>
103
+ </div>
104
+
105
+ <div class="col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
106
+ <ul aria-labelledby="meganav-use-cases-panel-solutions" class="mt-0 md:mt-40">
83
107
  <li>
84
108
  <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
85
109
  <p class="ui-meganav-media-heading">eCommerce & Retail</p>
@@ -106,26 +130,6 @@
106
130
  </li>
107
131
  </ul>
108
132
  </div>
109
-
110
- <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
111
- <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
112
- Solutions
113
- </h3>
114
- <ul aria-labelledby="meganav-use-cases-panel-solutions">
115
- <li>
116
- <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
117
- <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
118
- <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
119
- <% end %>
120
- </li>
121
- <li>
122
- <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
123
- <p class="ui-meganav-media-heading">Asset Tracking</p>
124
- <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
125
- <% end %>
126
- </li>
127
- </ul>
128
- </div>
129
133
  </section>
130
134
  <div class="ui-meganav-content-spacer"></div>
131
135
  </div>
package/src/core/MeganavContentUseCases/component.jsx CHANGED
@@ -9,49 +9,67 @@ const MeganavContentUseCases = ({ absUrl }) => (
9
9
  <section className="grid grid-cols-12 ui-grid-gap-x w-full">
10
10
  <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
11
11
  <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
12
- Use cases
12
+ Solutions
13
13
  </h3>
14
14
  <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
15
15
  <li>
16
- <a href={absUrl("/solutions/live-updates-results-metrics")} className="ui-meganav-media-with-image group">
17
- <Icon name="icon-live-updates-results-metrics-col" size="2.5rem" />
16
+ <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
17
+ <Icon name="icon-display-chat-stack-col" size="2.5rem" />
18
18
  <div className="flex flex-col justify-center">
19
- <p className="ui-meganav-media-heading">Live updates, results & metrics</p>
20
- <p className="ui-meganav-media-copy">Deliver live updates to keep users informed.</p>
19
+ <p className="ui-meganav-media-heading">Live Chat</p>
20
+ <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale.</p>
21
21
  </div>
22
22
  </a>
23
23
  </li>
24
24
  <li>
25
- <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
26
- <Icon name="icon-display-chat-stack-col" size="2.5rem" />
25
+ <a href={absUrl("/solutions/multiplayer-collaboration")} className="ui-meganav-media-with-image group">
26
+ <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
27
27
  <div className="flex flex-col justify-center">
28
- <p className="ui-meganav-media-heading">Chat</p>
29
- <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
28
+ <p className="ui-meganav-media-heading">Multiplayer Collaboration</p>
29
+ <p className="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
30
30
  </div>
31
31
  </a>
32
32
  </li>
33
33
  <li>
34
- <a href={absUrl("/solutions/virtual-events")} className="ui-meganav-media-with-image group">
35
- <Icon name="icon-display-virtual-events-col" size="2.5rem" />
34
+ <a href={absUrl("/solutions/data-broadcast")} className="ui-meganav-media-with-image group">
35
+ <Icon name="icon-display-data-broadcast-col" size="2.5rem" />
36
36
  <div className="flex flex-col justify-center">
37
- <p className="ui-meganav-media-heading">Virtual Events</p>
38
- <p className="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
37
+ <p className="ui-meganav-media-heading">Data Broadcast</p>
38
+ <p className="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
39
39
  </div>
40
40
  </a>
41
41
  </li>
42
42
  <li>
43
- <a href={absUrl("/solutions/multi-user-virtual-spaces")} className="ui-meganav-media-with-image group">
44
- <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
43
+ <a href={absUrl("/solutions/data-synchronization")} className="ui-meganav-media-with-image group">
44
+ <Icon name="icon-display-data-synchronization-col" size="2.5rem" />
45
+ <div className="flex flex-col justify-center">
46
+ <p className="ui-meganav-media-heading">Data Synchronization</p>
47
+ <p className="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
48
+ </div>
49
+ </a>
50
+ </li>
51
+ <li>
52
+ <a href={absUrl("/push-notifications")} className="ui-meganav-media-with-image group">
53
+ <Icon name="icon-display-push-notifications-col" size="2.5rem" />
45
54
  <div className="flex flex-col justify-center">
46
- <p className="ui-meganav-media-heading">Multi-user virtual spaces</p>
47
- <p className="ui-meganav-media-copy">Build live and interactive multi-user applications.</p>
55
+ <p className="ui-meganav-media-heading">Notifications</p>
56
+ <p className="ui-meganav-media-copy">Deliver cross-platform push notifications with a simple unified API.</p>
57
+ </div>
58
+ </a>
59
+ </li>
60
+ <li>
61
+ <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media-with-image group">
62
+ <Icon name="icon-display-kafka-at-the-edge-col" size="2.5rem" />
63
+ <div className="flex flex-col justify-center">
64
+ <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
65
+ <p className="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
48
66
  </div>
49
67
  </a>
50
68
  </li>
51
69
  </ul>
52
70
  </div>
53
71
 
54
- <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
72
+ <div className="col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
55
73
  <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-industry">
56
74
  Industry
57
75
  </h3>
@@ -86,6 +104,11 @@ const MeganavContentUseCases = ({ absUrl }) => (
86
104
  <p className="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
87
105
  </a>
88
106
  </li>
107
+ </ul>
108
+ </div>
109
+
110
+ <div className="col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
111
+ <ul aria-labelledby="meganav-use-cases-panel-solutions" className="mt-0 md:mt-40">
89
112
  <li>
90
113
  <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-meganav-media group">
91
114
  <p className="ui-meganav-media-heading">eCommerce & Retail</p>
@@ -112,26 +135,6 @@ const MeganavContentUseCases = ({ absUrl }) => (
112
135
  </li>
113
136
  </ul>
114
137
  </div>
115
-
116
- <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
117
- <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
118
- Solutions
119
- </h3>
120
- <ul aria-labelledby="meganav-use-cases-panel-solutions">
121
- <li>
122
- <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media group">
123
- <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
124
- <p className="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
125
- </a>
126
- </li>
127
- <li>
128
- <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media group">
129
- <p className="ui-meganav-media-heading">Asset Tracking</p>
130
- <p className="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
131
- </a>
132
- </li>
133
- </ul>
134
- </div>
135
138
  </section>
136
139
  <div className="ui-meganav-content-spacer"></div>
137
140
  </div>
package/src/core/icons/icon-display-data-broadcast-col.svg ADDED
@@ -0,0 +1,26 @@
1
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M36.5 9.5H33C30.3766 9.5 28.5 11.3766 28.5 14V23C28.5 24.5188 29.4812 25.75 31 25.75H39.75C41.2688 25.75 42.5 24.5188 42.5 23V15.5" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
3
+ <path d="M31.4286 17.5H34.75V12.5H31.4286C31.4286 12.5 30.5 12.5 30.5 13.5V16.5C30.5 17.5 31.4286 17.5 31.4286 17.5Z" stroke="#03020D" stroke-linejoin="round"/>
4
+ <path d="M40.5 15V16.5C40.5 17.5 39.5714 17.5 39.5714 17.5C38.6429 17.5 36.25 17.5 36.25 17.5V12.5H37" stroke="#03020D" stroke-linecap="round" stroke-linejoin="round"/>
5
+ <path d="M29.5 31L31.5 28" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
6
+ <path d="M42 31L40 28" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
7
+ <path d="M30.5 29.5H41" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
8
+ <circle cx="31.5" cy="21.5" r="1.5" fill="#03020D"/>
9
+ <circle cx="39.5" cy="21.5" r="1.5" fill="#03020D"/>
10
+ <path d="M14.5 4.12444C14.0122 4.0426 13.5111 4 13 4C8.02947 4 4.00003 8.02944 4.00003 13C4.00003 17.9706 8.02947 22 13 22C17.9706 22 22 17.9706 22 13C22 12.047 21.8519 11.1286 21.5774 10.2666" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
11
+ <path d="M10.3121 12.0403L12.3515 10.3026C12.7252 9.98417 13.2749 9.98417 13.6486 10.3026L15.6879 12.0403C16.0221 12.325 16.1315 12.7943 15.9577 13.1974L15.1176 15.1459C14.9596 15.5125 14.5986 15.75 14.1993 15.75H11.8007C11.4015 15.75 11.0405 15.5125 10.8824 15.1459L10.0424 13.1974C9.86861 12.7943 9.978 12.325 10.3121 12.0403Z" fill="#03020D" stroke="#03020D" stroke-width="1.5"/>
12
+ <path d="M10.1954 4.61029L12.3515 6.44738C12.7252 6.76583 13.2749 6.76583 13.6486 6.44738L14.2736 5.91483C14.4966 5.72484 14.625 5.44662 14.625 5.15367L14.625 4.21875" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
13
+ <path d="M21.775 13.5001L19.0118 11.5963C18.8872 11.5104 18.8433 11.3467 18.9083 11.21V11.21C19.0391 10.9352 19.9843 10.2787 20.2844 10.2279C20.5919 10.1758 20.9897 10.1021 21.5 10" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
14
+ <path d="M5.37081 7.59113L6.83859 10.6776C7.04946 11.1211 6.9072 11.652 6.50287 11.9306L3.68849 13.8696" stroke="#03020D" stroke-width="1.5"/>
15
+ <path d="M16 18.5L17 18L20 18.5L18 20.5L15.5 21.5L16 18.5Z" fill="#03020D"/>
16
+ <path d="M5.31416 18.3281L8.71616 18.0006C9.20491 17.9535 9.65552 18.2683 9.77955 18.7434L10.6429 22.0503" stroke="#03020D" stroke-width="1.5"/>
17
+ <path d="M15.3563 22.0504L16.22 18.7436C16.3441 18.2686 16.7947 17.9539 17.2835 18.001L20.6854 18.3288" stroke="#03020D" stroke-width="1.5"/>
18
+ <path d="M18.1185 27.5C17.2809 27.1759 16.3772 27 15.448 27C7.936 27.0233 8.2 33.6262 8.104 34.3261C5.8 34.5594 4 36.4726 4 38.7825C4 41.2556 6.064 43 8.608 43H22.288C25.456 42.93 28 40.6723 28 37.5692C28 36.2139 27.514 34.9733 26.7009 34" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
19
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M19 30C19 27.7909 20.7909 26 23 26C25.2091 26 27 27.7909 27 30C27 32.2091 25.2091 34 23 34C20.7909 34 19 32.2091 19 30Z" fill="#FF5416"/>
20
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M16 5C16 2.79086 17.7909 1 20 1C22.2091 1 24 2.79086 24 5C24 7.20914 22.2091 9 20 9C17.7909 9 16 7.20914 16 5Z" fill="#FF5416"/>
21
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M38 10C38 7.79086 39.7909 6 42 6C44.2091 6 46 7.79086 46 10C46 12.2091 44.2091 14 42 14C39.7909 14 38 12.2091 38 10Z" fill="#FF5416"/>
22
+ <path d="M7 11.5V10.5L5.5 8.5L4 11V13.5L7 11.5Z" fill="#03020D"/>
23
+ <path d="M10 19L9 18L6 18.5L8 20.5L10 21.5V19Z" fill="#03020D"/>
24
+ <path d="M19 11L21 10L22 12L21.5 13L19.5 12L19 11Z" fill="#03020D"/>
25
+ <path d="M14.5 5.5L13 6.5L11 5V4H14.5V5.5Z" fill="#03020D"/>
26
+ </svg>
package/src/core/icons/icon-display-data-synchronization-col.svg ADDED
@@ -0,0 +1,14 @@
1
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M39 10C39 6.13401 31.3888 3 22 3C12.6112 3 5 6.13401 5 10" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10"/>
3
+ <path d="M39 18C39 21.866 31.3888 25 22 25C12.6112 25 5 21.866 5 18" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10"/>
4
+ <path d="M5 26C5 29.6251 11.6922 32.6066 20.2671 32.9641" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
5
+ <path d="M39 10C39 13.866 31.3888 17 22 17C12.6112 17 5 13.866 5 10" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10"/>
6
+ <path d="M5 34C5 37.6953 11.9538 40.7218 20.7671 40.9819" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
7
+ <path d="M5 10V34" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10"/>
8
+ <path d="M39 10V25" stroke="#03020D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
9
+ <circle cx="33.5" cy="37" r="10.5" fill="#FF5416"/>
10
+ <path d="M36.6529 39.0294L38.7706 38.5L39.3 40.6176" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
11
+ <path d="M38.7706 38.5C38.3787 39.6105 37.6668 40.5802 36.7247 41.2868C35.7825 41.9934 34.6523 42.4053 33.4765 42.4706C32.3895 42.4708 31.3288 42.1364 30.4385 41.5129C29.5482 40.8893 28.8714 40.0068 28.5 38.9853" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
12
+ <path d="M30.1471 35.7938L28.0294 36.3232L27.5 34.2056" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
13
+ <path d="M28.3824 35.9706C29.1235 33.9412 31.4 32 33.6765 32C34.7687 32.0031 35.8333 32.3439 36.7242 32.9758C37.6152 33.6076 38.2889 34.4996 38.6529 35.5294" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
14
+ </svg>
package/src/core/icons/icon-display-events-col.svg ADDED
@@ -0,0 +1,13 @@
1
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M42 16.75H6V15.25H42V16.75Z" fill="#03020D"/>
3
+ <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"/>
4
+ <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"/>
5
+ <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"/>
6
+ <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"/>
7
+ <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"/>
8
+ <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"/>
9
+ <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"/>
10
+ <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"/>
11
+ <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"/>
12
+ <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"/>
13
+ </svg>