ably-ui 8.2.0 → 8.2.1.dev.611f3bd
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.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/lib/ably_ui/core/core.rb +4 -0
- data/lib/ably_ui/core/images/icon-tech-aws.svg +4 -0
- data/lib/ably_ui/core/meganav/component.css +11 -1
- data/lib/ably_ui/core/meganav/component.js +1 -1
- data/lib/ably_ui/core/meganav/component.json +4 -4
- data/lib/ably_ui/core/meganav/meganav.rb +8 -4
- data/lib/ably_ui/core/meganav_blog_posts_list/component.js +1 -1
- data/lib/ably_ui/core/meganav_blog_posts_list/meganav_blog_posts_list.html.erb +4 -4
- data/lib/ably_ui/core/{meganav_content_why_ably → meganav_content_company}/component.js +1 -1
- data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +81 -0
- data/lib/ably_ui/core/{meganav_content_why_ably/meganav_content_why_ably.rb → meganav_content_company/meganav_content_company.rb} +2 -1
- data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +101 -80
- data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +95 -91
- data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +112 -83
- data/lib/ably_ui/core/meganav_control/component.js +1 -1
- data/lib/ably_ui/core/meganav_control/meganav_control.html.erb +1 -1
- data/lib/ably_ui/core/meganav_control/meganav_control.rb +8 -2
- data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.html.erb +4 -2
- data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.rb +4 -1
- data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.html.erb +4 -3
- data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.rb +8 -0
- data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.html.erb +1 -1
- data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.rb +4 -0
- data/lib/ably_ui/core/meganav_items_signed_in/meganav_items_signed_in.html.erb +1 -1
- data/lib/ably_ui/core/meganav_search_suggestions/component.js +1 -1
- data/lib/ably_ui/core/notice/component.js +1 -1
- data/lib/ably_ui/core/scripts.js +1 -1
- data/lib/ably_ui/core/sprites.svg +141 -0
- data/lib/ably_ui/core/styles.css +4 -0
- data/lib/ably_ui/react/connect_state_wrapper/component.js +1 -0
- data/lib/ably_ui/react/scripts.js +1 -0
- data/lib/ably_ui/version.rb +1 -1
- metadata +15 -15
- data/lib/ably_ui/core/images/blog-thumb1.jpg +0 -0
- data/lib/ably_ui/core/images/blog-thumb2.jpg +0 -0
- data/lib/ably_ui/core/images/blog-thumb3.jpg +0 -0
- data/lib/ably_ui/core/meganav_content_why_ably/meganav_content_why_ably.html.erb +0 -70
|
@@ -0,0 +1,81 @@
|
|
|
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" id="meganav-company-panel-list-why-companies">Why companies choose Ably</h3>
|
|
6
|
+
<ul aria-labelledby="meganav-company-panel-list-why-companies">
|
|
7
|
+
<li>
|
|
8
|
+
<%= link_to abs_url("/customers"), class: "ui-meganav-media-with-image group" do %>
|
|
9
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-customers-col", size: "2.5rem")) %>
|
|
10
|
+
<div class="flex flex-col justify-center">
|
|
11
|
+
<p class="ui-meganav-media-heading">Customers</p>
|
|
12
|
+
<p class="ui-meganav-media-copy">Ably supports customers across multiple industries.</p>
|
|
13
|
+
</div>
|
|
14
|
+
<% end %>
|
|
15
|
+
</li>
|
|
16
|
+
<li>
|
|
17
|
+
<%= link_to abs_url("/case-studies"), class: "ui-meganav-media-with-image group" do %>
|
|
18
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-case-studies-col", size: "2.5rem")) %>
|
|
19
|
+
<div class="flex flex-col justify-center">
|
|
20
|
+
<p class="ui-meganav-media-heading">Case studies</p>
|
|
21
|
+
<p class="ui-meganav-media-copy">Discover how customers are benefitting from Ably.</p>
|
|
22
|
+
</div>
|
|
23
|
+
<% end %>
|
|
24
|
+
</li>
|
|
25
|
+
<li>
|
|
26
|
+
<%= link_to abs_url("/compare"), class: "ui-meganav-media-with-image group" do %>
|
|
27
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-compare-tech-col", size: "2.5rem")) %>
|
|
28
|
+
<div class="flex flex-col justify-center">
|
|
29
|
+
<p class="ui-meganav-media-heading">Compare our tech</p>
|
|
30
|
+
<p class="ui-meganav-media-copy">Choose the right realtime service.</p>
|
|
31
|
+
</div>
|
|
32
|
+
<% end %>
|
|
33
|
+
</li>
|
|
34
|
+
<li>
|
|
35
|
+
<%= link_to abs_url("/aws"), class: "ui-meganav-media-with-image group" do %>
|
|
36
|
+
<%= image_tag(aws_logo_path, alt: "AWS logo") %>
|
|
37
|
+
<div class="flex flex-col justify-center">
|
|
38
|
+
<p class="ui-meganav-media-heading">Partners</p>
|
|
39
|
+
<p class="ui-meganav-media-copy">Ably collaborates and integrates with AWS.</p>
|
|
40
|
+
</div>
|
|
41
|
+
<% end %>
|
|
42
|
+
</li>
|
|
43
|
+
</ul>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<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">
|
|
47
|
+
<ul class="md:mt-40" aria-labelledby="meganav-company-panel-list-why-companies">
|
|
48
|
+
<li>
|
|
49
|
+
<%= link_to abs_url("/resources"), class: "ui-meganav-media-with-image group" do %>
|
|
50
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-resources-col", size: "2.5rem")) %>
|
|
51
|
+
<div class="flex flex-col justify-center">
|
|
52
|
+
<p class="ui-meganav-media-heading">Resources</p>
|
|
53
|
+
<p class="ui-meganav-media-copy">Learn more about realtime with our handy resources.</p>
|
|
54
|
+
</div>
|
|
55
|
+
<% end %>
|
|
56
|
+
</li>
|
|
57
|
+
<li>
|
|
58
|
+
<%= link_to abs_url("/compare"), class: "ui-meganav-media-with-image group" do %>
|
|
59
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-about-ably-col", size: "2.5rem")) %>
|
|
60
|
+
<div class="flex flex-col justify-center">
|
|
61
|
+
<p class="ui-meganav-media-heading">About Ably</p>
|
|
62
|
+
<p class="ui-meganav-media-copy">Find out more about Ably’s mission.</p>
|
|
63
|
+
</div>
|
|
64
|
+
<% end %>
|
|
65
|
+
</li>
|
|
66
|
+
<li>
|
|
67
|
+
<%= link_to abs_url("/careers"), class: "ui-meganav-media-with-image group" do %>
|
|
68
|
+
<%= render(AblyUi::Core::Icon.new(name: "icon-display-careers-col", size: "2.5rem")) %>
|
|
69
|
+
<div class="flex flex-col justify-center">
|
|
70
|
+
<p class="ui-meganav-media-heading">Careers</p>
|
|
71
|
+
<p class="ui-meganav-media-copy">Discover our open roles and core Ably values.</p>
|
|
72
|
+
</div>
|
|
73
|
+
<% end %>
|
|
74
|
+
</li>
|
|
75
|
+
</ul>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<%= render(AblyUi::Core::MeganavBlogPostsList.new(url_base: url_base)) %>
|
|
79
|
+
</section>
|
|
80
|
+
<div class="ui-meganav-content-spacer"></div>
|
|
81
|
+
</div>
|
|
@@ -1,83 +1,104 @@
|
|
|
1
|
-
<
|
|
2
|
-
<div>
|
|
3
|
-
|
|
4
|
-
<div class="
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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>
|
|
9
37
|
</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>
|
|
13
38
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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>
|
|
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>
|
|
67
61
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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>
|
|
@@ -1,97 +1,101 @@
|
|
|
1
|
-
<
|
|
2
|
-
<div class="
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<
|
|
6
|
-
|
|
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>
|
|
7
9
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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>
|
|
12
14
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
<%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"), text_size: 'text-p2')) do %>Explore how it works<% end %>
|
|
16
|
+
</div>
|
|
15
17
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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>
|
|
56
58
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
<%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"), text_size: 'text-p3')) do %>Explore all live examples<% end %>
|
|
60
|
+
</div>
|
|
59
61
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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>
|
|
94
96
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
</section>
|
|
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>
|