ably-ui 8.2.1.dev.611f3bd → 8.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/lib/ably_ui/core/core.rb +0 -4
  4. data/lib/ably_ui/core/images/blog-thumb1.jpg +0 -0
  5. data/lib/ably_ui/core/images/blog-thumb2.jpg +0 -0
  6. data/lib/ably_ui/core/images/blog-thumb3.jpg +0 -0
  7. data/lib/ably_ui/core/meganav/component.css +1 -11
  8. data/lib/ably_ui/core/meganav/component.js +1 -1
  9. data/lib/ably_ui/core/meganav/component.json +4 -4
  10. data/lib/ably_ui/core/meganav/meganav.rb +4 -8
  11. data/lib/ably_ui/core/meganav_blog_posts_list/component.js +1 -1
  12. data/lib/ably_ui/core/meganav_blog_posts_list/meganav_blog_posts_list.html.erb +4 -4
  13. data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +80 -101
  14. data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +91 -95
  15. data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +83 -112
  16. data/lib/ably_ui/core/{meganav_content_company → meganav_content_why_ably}/component.js +1 -1
  17. data/lib/ably_ui/core/meganav_content_why_ably/meganav_content_why_ably.html.erb +70 -0
  18. data/lib/ably_ui/core/{meganav_content_company/meganav_content_company.rb → meganav_content_why_ably/meganav_content_why_ably.rb} +1 -2
  19. data/lib/ably_ui/core/meganav_control/component.js +1 -1
  20. data/lib/ably_ui/core/meganav_control/meganav_control.html.erb +1 -1
  21. data/lib/ably_ui/core/meganav_control/meganav_control.rb +2 -8
  22. data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.html.erb +2 -4
  23. data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.rb +1 -4
  24. data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.html.erb +3 -4
  25. data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.rb +0 -8
  26. data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.html.erb +1 -1
  27. data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.rb +0 -4
  28. data/lib/ably_ui/core/meganav_items_signed_in/meganav_items_signed_in.html.erb +1 -1
  29. data/lib/ably_ui/core/sprites.svg +0 -141
  30. data/lib/ably_ui/core/styles.css +0 -4
  31. data/lib/ably_ui/version.rb +1 -1
  32. metadata +15 -15
  33. data/lib/ably_ui/core/images/icon-tech-aws.svg +0 -4
  34. data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +0 -81
  35. data/lib/ably_ui/react/connect_state_wrapper/component.js +0 -1
  36. data/lib/ably_ui/react/scripts.js +0 -1
@@ -1,104 +1,83 @@
1
- <div class="flex max-w-screen-xl mx-auto">
2
- <div class="ui-meganav-content-spacer"></div>
3
- <section class="grid grid-cols-12 ui-grid-gap-x w-full">
4
- <div class="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
5
- <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
6
- Explore
7
- </h3>
8
- <ul aria-labelledby="meganav-developers-panel-explore">
9
- <li>
10
- <%= link_to abs_url("/docs"), class: "ui-meganav-media-with-image group" do %>
11
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-docs-col", size: "2.5rem")) %>
12
- <div class="flex flex-col justify-center">
13
- <p class="ui-meganav-media-heading">Documentation</p>
14
- <p class="ui-meganav-media-copy">Technical guides to help you build with Ably.</p>
15
- </div>
16
- <% end %>
17
- </li>
18
- <li>
19
- <%= link_to abs_url("/docs/key-concepts"), class: "ui-meganav-media-with-image group" do %>
20
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-lightbulb-col", size: "2.5rem")) %>
21
- <div class="flex flex-col justify-center">
22
- <p class="ui-meganav-media-heading">Concepts</p>
23
- <p class="ui-meganav-media-copy">Read about core Ably platform concepts.</p>
24
- </div>
25
- <% end %>
26
- </li>
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")) %>
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 up and running quickly.</p>
33
- </div>
34
- <% end %>
35
- </li>
36
- </ul>
1
+ <section class="ui-meganav-content ui-grid-gap md:grid-cols-3">
2
+ <div>
3
+ <h3 class="ui-meganav-overline md:mb-8">Documentation</h3>
4
+ <div class="relative mb-16">
5
+ <%= tag.form class: "relative", action: abs_url("/search"), method: "get" do %>
6
+ <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css: "absolute top-8 left-8 pt-1 mt-1")) %>
7
+ <input type="search" name="q" class="ui-input pl-48" placeholder="Search docs" />
8
+ <% end %>
37
9
  </div>
10
+ <p class="text-p1 font-medium text-cool-black mb-20">
11
+ Docs, quick start guides, tutorials, and API reference to help you start building with Ably’s platform and APIs.
12
+ </p>
38
13
 
39
- <div class="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
40
- <ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
41
- <li>
42
- <%= link_to abs_url("/download"), class: "ui-meganav-media-with-image group" do %>
43
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-sdks-col", size: "2.5rem")) %>
44
- <div class="flex flex-col justify-center">
45
- <p class="ui-meganav-media-heading">SDKs</p>
46
- <p class="ui-meganav-media-copy">Download an SDK to help you build realtime apps faster.</p>
47
- </div>
48
- <% end %>
49
- </li>
50
- <li>
51
- <%= link_to abs_url("/tutorials"), class: "ui-meganav-media-with-image group" do %>
52
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-tutorials-demos-col", size: "2.5rem")) %>
53
- <div class="flex flex-col justify-center">
54
- <p class="ui-meganav-media-heading">Tutorials & Demos</p>
55
- <p class="ui-meganav-media-copy">Get stuck in with our hands-on resources. </p>
56
- </div>
57
- <% end %>
58
- </li>
59
- </ul>
60
- </div>
14
+ <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/docs"))) do %>Visit Documentation<% end %>
15
+ </div>
61
16
 
62
- <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">
63
- <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
64
- Quick links
65
- </h3>
66
- <ul aria-labelledby="meganav-developers-panel-quick-links">
67
- <li>
68
- <%= link_to "https://discord.gg/jwBPhEZ9g5", class: "group ui-meganav-media py-12" do %>
69
- <p class="ui-meganav-media-heading">Discord</p>
70
- <% end %>
71
- </li>
72
- <li>
73
- <%= link_to "https://github.com/ably", class: "group ui-meganav-media py-12" do %>
74
- <p class="ui-meganav-media-heading">Github</p>
75
- <% end %>
76
- </li>
77
- <li>
78
- <%= link_to "https://changelog.ably.com/", class: "group ui-meganav-media py-12" do %>
79
- <p class="ui-meganav-media-heading">Changelog</p>
80
- <% end %>
81
- </li>
82
- <li>
83
- <a href="https://status.ably.com/" class="group ui-meganav-media py-12">
84
- <p class="ui-meganav-media-heading">
85
- Status<iframe
86
- src="https://status.ably.com/embed/icon"
87
- allowtransparency="true"
88
- frameborder="0"
89
- scrolling="no"
90
- class="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
91
- ></iframe>
92
- </p>
93
- </a>
94
- </li>
95
- <li>
96
- <%= link_to abs_url("/support"), class: "group ui-meganav-media py-12" do %>
97
- <p class="ui-meganav-media-heading">Support & FAQs</p>
98
- <% end %>
99
- </li>
100
- </ul>
101
- </div>
102
- </section>
103
- <div class="ui-meganav-content-spacer"></div>
104
- </div>
17
+ <div>
18
+ <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">Explore</h3>
19
+ <ul aria-labelledby="meganav-developers-panel-explore">
20
+ <li>
21
+ <%= link_to abs_url("/integrations"), class: "ui-meganav-media group" do %>
22
+ <p class="ui-meganav-media-heading">Third-party integrations & plugins</p>
23
+ <p class="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
24
+ <% end %>
25
+ </li>
26
+ <li>
27
+ <%= link_to abs_url("/protocols"), class: "ui-meganav-media group" do %>
28
+ <p class="ui-meganav-media-heading">Multi-protocol messaging</p>
29
+ <p class="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
30
+ <% end %>
31
+ </li>
32
+ <li>
33
+ <%= link_to abs_url("/hub"), class: "ui-meganav-media group" do %>
34
+ <p class="ui-meganav-media-heading">Streaming data sources</p>
35
+ <p class="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
36
+ <% end %>
37
+ </li>
38
+ <li>
39
+ <%= link_to abs_url("/periodic-table-of-realtime"), class: "ui-meganav-media group" do %>
40
+ <p class="ui-meganav-media-heading">The Periodic Table of Realtime</p>
41
+ <p class="ui-meganav-media-copy">A compendium for all things realtime and event-driven.</p>
42
+ <% end %>
43
+ </li>
44
+ </ul>
45
+ </div>
46
+
47
+ <div>
48
+ <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">Quick links</h3>
49
+ <ul aria-labelledby="meganav-developers-panel-quick-links">
50
+ <li>
51
+ <%= link_to abs_url("/download"), class: "group ui-meganav-media py-12" do %>
52
+ <p class="ui-meganav-media-heading">Download an SDK</p>
53
+ <% end %>
54
+ </li>
55
+
56
+ <li>
57
+ <a href="https://changelog.ably.com/" class="group ui-meganav-media py-12">
58
+ <p class="ui-meganav-media-heading">Platform changelog</p>
59
+ </a>
60
+ </li>
61
+
62
+ <li>
63
+ <%= link_to abs_url("/support"), class: "group ui-meganav-media py-12" do %>
64
+ <p class="ui-meganav-media-heading">Support & FAQs</p>
65
+ <% end %>
66
+ </li>
67
+
68
+ <li>
69
+ <a href="https://status.ably.com/" class="group ui-meganav-media py-12">
70
+ <p class="ui-meganav-media-heading">
71
+ Status<iframe
72
+ src="https://status.ably.com/embed/icon"
73
+ allowtransparency="true"
74
+ frameborder="0"
75
+ scrolling="no"
76
+ class="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
77
+ ></iframe>
78
+ </p>
79
+ </a>
80
+ </li>
81
+ </ul>
82
+ </div>
83
+ </section>
@@ -1,101 +1,97 @@
1
- <div class="flex max-w-screen-xl mx-auto">
2
- <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
3
- <section class="grid grid-cols-12 ui-grid-gap-x w-full">
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
- <div class="flex mb-20">
6
- <%= image_tag(ably_stack_path, alt: "Ably homepage") %>
7
- <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
8
- </div>
1
+ <section class="ui-meganav-content ui-grid-gap sm:grid-cols-2 md:grid-cols-3">
2
+ <div class="sm:col-span-full md:col-span-1">
3
+ <div class="flex mb-20">
4
+ <%= image_tag(ably_stack_path, alt: "Ably homepage") %>
5
+ <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
6
+ </div>
9
7
 
10
- <p class="text-p2 font-medium text-cool-black mb-24" style="max-width: 330px">
11
- Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
12
- realtime, and lets you focus on your code.
13
- </p>
8
+ <p class="text-p2 font-medium text-cool-black mb-8">
9
+ Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
10
+ realtime, and lets you focus on your code.
11
+ </p>
14
12
 
15
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"), text_size: 'text-p2')) do %>Explore how it works<% end %>
16
- </div>
13
+ <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"))) do %>Explore how it works<% end %>
14
+ </div>
17
15
 
18
- <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">
19
- <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">Our Examples</h3>
20
- <ul class="mb-16" aria-labelledby="meganav-platform-panel-list-examples">
21
- <li>
22
- <%= link_to abs_url("/examples/avatar-stack"), class: "ui-meganav-media group" do %>
23
- <p class="ui-meganav-media-heading">Avatar Stack</p>
24
- <p class="ui-meganav-media-copy">See who is connected in a digital space.</p>
25
- <% end %>
26
- </li>
27
- <li>
28
- <%= link_to abs_url("/examples/emoji-reactions"), class: "ui-meganav-media group" do %>
29
- <p class="ui-meganav-media-heading">Emoji Reactions</p>
30
- <p class="ui-meganav-media-copy">React with an emoji to a message.</p>
31
- <% end %>
32
- </li>
33
- <li>
34
- <%= link_to abs_url("/examples/activity-feed"), class: "ui-meganav-media group" do %>
35
- <p class="ui-meganav-media-heading">Activity Feed</p>
36
- <p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
37
- <% end %>
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
- <li>
46
- <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %>
47
- <p class="ui-meganav-media-heading">Live Cursors</p>
48
- <p class="ui-meganav-media-copy">Track all cursors in realtime.</p>
49
- <% end %>
50
- </li>
51
- <li>
52
- <%= link_to abs_url("/examples/typing-indicator"), class: "ui-meganav-media group" do %>
53
- <p class="ui-meganav-media-heading">Typing Indicator</p>
54
- <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
55
- <% end %>
56
- </li>
57
- </ul>
16
+ <div>
17
+ <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">Examples</h3>
18
+ <ul aria-labelledby="meganav-platform-panel-list-examples">
19
+ <li>
20
+ <%= link_to abs_url("/examples/avatar-stack"), class: "ui-meganav-media group" do %>
21
+ <p class="ui-meganav-media-heading">Avatar Stack</p>
22
+ <p class="ui-meganav-media-copy">See who is connected in a digital space.</p>
23
+ <% end %>
24
+ </li>
25
+ <li>
26
+ <%= link_to abs_url("/examples/emoji-reactions"), class: "ui-meganav-media group" do %>
27
+ <p class="ui-meganav-media-heading">Emoji Reactions</p>
28
+ <p class="ui-meganav-media-copy">React with an emoji to a message.</p>
29
+ <% end %>
30
+ </li>
31
+ <li>
32
+ <%= link_to abs_url("/examples/activity-feed"), class: "ui-meganav-media group" do %>
33
+ <p class="ui-meganav-media-heading">Activity Feed</p>
34
+ <p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
35
+ <% end %>
36
+ </li>
37
+ <li>
38
+ <%= link_to abs_url("/examples/live-charts"), class: "ui-meganav-media group" do %>
39
+ <p class="ui-meganav-media-heading">Live Charts</p>
40
+ <p class="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
41
+ <% end %>
42
+ </li>
43
+ <li>
44
+ <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %>
45
+ <p class="ui-meganav-media-heading">Live Cursors</p>
46
+ <p class="ui-meganav-media-copy">Track all cursors in realtime.</p>
47
+ <% end %>
48
+ </li>
49
+ <li>
50
+ <%= link_to abs_url("/examples/typing-indicator"), class: "ui-meganav-media group" do %>
51
+ <p class="ui-meganav-media-heading">Typing Indicator</p>
52
+ <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
53
+ <% end %>
54
+ </li>
55
+ </ul>
58
56
 
59
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"), text_size: 'text-p3')) do %>Explore all live examples<% end %>
60
- </div>
57
+ <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"))) do %>Explore all live examples<% end %>
58
+ </div>
61
59
 
62
- <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">
63
- <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-our-technology">Our technology</h3>
64
- <ul class="mb-16" aria-labelledby="meganav-platform-panel-list-our-technology">
65
- <li>
66
- <%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %>
67
- <p class="ui-meganav-media-heading">Predictable performance</p>
68
- <p class="ui-meganav-media-copy">A low-latency and high-throughput global network.</p>
69
- <% end %>
70
- </li>
71
- <li>
72
- <%= link_to abs_url("/four-pillars-of-dependability#integrity"), class: "ui-meganav-media group" do %>
73
- <p class="ui-meganav-media-heading">Guaranteed ordering & delivery</p>
74
- <p class="ui-meganav-media-copy">Data is delivered - in order - even after disconnections.</p>
75
- <% end %>
76
- </li>
77
- <li>
78
- <%= link_to abs_url("/four-pillars-of-dependability#reliability"), class: "ui-meganav-media group" do %>
79
- <p class="ui-meganav-media-heading">Fault tolerant infrastructure</p>
80
- <p class="ui-meganav-media-copy">Redundancy is built in at global and regional levels.</p>
81
- <% end %>
82
- </li>
83
- <li>
84
- <%= link_to abs_url("/four-pillars-of-dependability#availability"), class: "ui-meganav-media group" do %>
85
- <p class="ui-meganav-media-heading">High scalability & availability</p>
86
- <p class="ui-meganav-media-copy">Built for scale with legitimate 99.999% uptime SLAs.</p>
87
- <% end %>
88
- </li>
89
- <li>
90
- <%= link_to abs_url("/network"), class: "ui-meganav-media group" do %>
91
- <p class="ui-meganav-media-heading">Global edge network</p>
92
- <p class="ui-meganav-media-copy">An edge network of 15 core routing datacenters and 205+ PoPs.</p>
93
- <% end %>
94
- </li>
95
- </ul>
60
+ <div>
61
+ <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-our-technology">Our technology</h3>
62
+ <ul class="mb-8" aria-labelledby="meganav-platform-panel-list-our-technology">
63
+ <li>
64
+ <%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %>
65
+ <p class="ui-meganav-media-heading">Predictable performance</p>
66
+ <p class="ui-meganav-media-copy">We provide predictability so you can be confident your realtime application will always perform as expected.</p>
67
+ <% end %>
68
+ </li>
69
+ <li>
70
+ <%= link_to abs_url("/four-pillars-of-dependability#integrity"), class: "ui-meganav-media group" do %>
71
+ <p class="ui-meganav-media-heading">Guaranteed ordering & delivery</p>
72
+ <p class="ui-meganav-media-copy">We guarantee in-order data delivery, even after disconnections.</p>
73
+ <% end %>
74
+ </li>
75
+ <li>
76
+ <%= link_to abs_url("/four-pillars-of-dependability#reliability"), class: "ui-meganav-media group" do %>
77
+ <p class="ui-meganav-media-heading">Fault tolerant infrastructure</p>
78
+ <p class="ui-meganav-media-copy">Redundant at regional and global levels with 99.999% uptime SLAs.</p>
79
+ <% end %>
80
+ </li>
81
+ <li>
82
+ <%= link_to abs_url("/four-pillars-of-dependability#availability"), class: "ui-meganav-media group" do %>
83
+ <p class="ui-meganav-media-heading">High scalability & availability</p>
84
+ <p class="ui-meganav-media-copy">Elastic, battle-tested global infrastructure for massive scale.</p>
85
+ <% end %>
86
+ </li>
87
+ <li>
88
+ <%= link_to abs_url("/network"), class: "ui-meganav-media group" do %>
89
+ <p class="ui-meganav-media-heading">Global edge network</p>
90
+ <p class="ui-meganav-media-copy">An edge network of 15 core routing datacenters and 200+ PoPs.</p>
91
+ <% end %>
92
+ </li>
93
+ </ul>
96
94
 
97
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"), text_size: 'text-p3')) do %>Explore Four Pillars of Dependability<% end %>
98
- </div>
99
- </section>
100
- <div class="ui-meganav-content-spacer"></div>
101
- </div>
95
+ <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"))) do %>Explore our technology<% end %>
96
+ </div>
97
+ </section>
@@ -1,113 +1,84 @@
1
- <div class="flex max-w-screen-xl mx-auto">
2
- <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
3
- <section class="grid grid-cols-12 ui-grid-gap-x w-full">
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
- <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
6
- Use cases
7
- </h3>
8
- <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
9
- <li>
10
- <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
11
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
12
- <div class="flex flex-col justify-center">
13
- <p class="ui-meganav-media-heading">Chat</p>
14
- <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
15
- </div>
16
- <% end %>
17
- </li>
18
- <li>
19
- <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media-with-image group" do %>
20
- <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events-col", size: "2.5rem")) %>
21
- <div class="flex flex-col justify-center">
22
- <p class="ui-meganav-media-heading">Virtual Events</p>
23
- <p class="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
24
- </div>
25
- <% end %>
26
- </li>
27
- </ul>
28
- </div>
1
+ <section class="ui-meganav-content ui-grid-gap md:grid-cols-2 gap-y-0 md:gap-y-32">
2
+ <div>
3
+ <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry-use-cases">By use case</h3>
4
+ <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
5
+ <li>
6
+ <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
7
+ <p class="ui-meganav-media-heading">EdTech</p>
8
+ <p class="ui-meganav-media-copy">Deliver interactive learning experiences like multi-user classrooms with chat.</p>
9
+ <% end %>
10
+ </li>
11
+ <li>
12
+ <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media group" do %>
13
+ <p class="ui-meganav-media-heading">Virtual Events</p>
14
+ <p class="ui-meganav-media-copy">Power engaging virtual events with interactive realtime features.</p>
15
+ <% end %>
16
+ </li>
17
+ <li>
18
+ <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
19
+ <p class="ui-meganav-media-heading">Sports & Media</p>
20
+ <p class="ui-meganav-media-copy">Deliver global realtime experiences to keep fans informed, engaged, entertained.</p>
21
+ <% end %>
22
+ </li>
23
+ <li>
24
+ <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
25
+ <p class="ui-meganav-media-heading">Fintech</p>
26
+ <p class="ui-meganav-media-copy">Deliver fast, personalised fintech data in realtime to mobile & web customers.</p>
27
+ <% end %>
28
+ </li>
29
+ <li>
30
+ <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %>
31
+ <p class="ui-meganav-media-heading">Gaming</p>
32
+ <p class="ui-meganav-media-copy">Power interactive gaming experiences that are wicked fast and utterly reliable.</p>
33
+ <% end %>
34
+ </li>
35
+ <li>
36
+ <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %>
37
+ <p class="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
38
+ <p class="ui-meganav-media-copy">Power asset tracking, live transit updates, race-critical diagnostics, and more.</p>
39
+ <% end %>
40
+ </li>
41
+ </ul>
42
+ </div>
29
43
 
30
- <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">
31
- <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
32
- Industry
33
- </h3>
34
- <ul aria-labelledby="meganav-use-cases-panel-industry">
35
- <li>
36
- <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
37
- <p class="ui-meganav-media-heading">EdTech</p>
38
- <p class="ui-meganav-media-copy">Deliver interactive learning experiences.</p>
39
- <% end %>
40
- </li>
41
- <li>
42
- <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
43
- <p class="ui-meganav-media-heading">Fintech</p>
44
- <p class="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
45
- <% end %>
46
- </li>
47
- <li>
48
- <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %>
49
- <p class="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
50
- <p class="ui-meganav-media-copy">Power diagnostics, order tracking and more.</p>
51
- <% end %>
52
- </li>
53
- <li>
54
- <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %>
55
- <p class="ui-meganav-media-heading">B2B Platforms</p>
56
- <p class="ui-meganav-media-copy">Empower your customers with realtime solutions.</p>
57
- <% end %>
58
- </li>
59
- <li>
60
- <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
61
- <p class="ui-meganav-media-heading">Healthcare (HIPAA)</p>
62
- <p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
63
- <% end %>
64
- </li>
65
- <li>
66
- <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
67
- <p class="ui-meganav-media-heading">eCommerce & Retail</p>
68
- <p class="ui-meganav-media-copy">Enrich customer experiences with realtime updates.</p>
69
- <% end %>
70
- </li>
71
- <li>
72
- <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
73
- <p class="ui-meganav-media-heading">Sports, Media & Audience Engagement</p>
74
- <p class="ui-meganav-media-copy">Deliver engaging global realtime experiences.</p>
75
- <% end %>
76
- </li>
77
- <li>
78
- <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %>
79
- <p class="ui-meganav-media-heading">Gaming</p>
80
- <p class="ui-meganav-media-copy">Power ultra fast and reliable gaming experiences.</p>
81
- <% end %>
82
- </li>
83
- <li>
84
- <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %>
85
- <p class="ui-meganav-media-heading">IoT & Connected Devices</p>
86
- <p class="ui-meganav-media-copy">Monitor and control global IoT deployments in realtime.</p>
87
- <% end %>
88
- </li>
89
- </ul>
90
- </div>
91
-
92
- <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">
93
- <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
94
- Solutions
95
- </h3>
96
- <ul aria-labelledby="meganav-use-cases-panel-solutions">
97
- <li>
98
- <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
99
- <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
100
- <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
101
- <% end %>
102
- </li>
103
- <li>
104
- <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
105
- <p class="ui-meganav-media-heading">Asset Tracking</p>
106
- <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
107
- <% end %>
108
- </li>
109
- </ul>
110
- </div>
111
- </section>
112
- <div class="ui-meganav-content-spacer"></div>
113
- </div>
44
+ <div>
45
+ <ul class="md:mt-40" aria-labelledby="meganav-use-cases-panel-industry-use-cases">
46
+ <li>
47
+ <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %>
48
+ <p class="ui-meganav-media-heading">B2B Platforms</p>
49
+ <p class="ui-meganav-media-copy">Empower customers with realtime technology that gives them a competitive edge.</p>
50
+ <% end %>
51
+ </li>
52
+ <li>
53
+ <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
54
+ <p class="ui-meganav-media-heading">Healthcare</p>
55
+ <p class="ui-meganav-media-copy">Provide HIPAA-compliant realtime apps healthcare professionals can depend on.</p>
56
+ <% end %>
57
+ </li>
58
+ <li>
59
+ <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
60
+ <p class="ui-meganav-media-heading">eCommerce & Retail</p>
61
+ <p class="ui-meganav-media-copy">Enable realtime pricing, inventory, and transactions to enrich user experiences.</p>
62
+ <% end %>
63
+ </li>
64
+ <li>
65
+ <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %>
66
+ <p class="ui-meganav-media-heading">IoT & Connected Devices</p>
67
+ <p class="ui-meganav-media-copy">Monitor and control global IoT deployments of any kind in realtime.</p>
68
+ <% end %>
69
+ </li>
70
+ <li>
71
+ <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
72
+ <p class="ui-meganav-media-heading">Asset Tracking</p>
73
+ <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimized for last mile logistics, food delivery applications, and urban mobility services.</p>
74
+ <% end %>
75
+ </li>
76
+ <li>
77
+ <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
78
+ <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
79
+ <p class="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
80
+ <% end %>
81
+ </li>
82
+ </ul>
83
+ </div>
84
+ </section>
@@ -1 +1 @@
1
- !function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavContentCompany=o())}(this,(function(){return{}.default}));
1
+ !function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavContentWhyAbly=o())}(this,(function(){return{}.default}));