ably-ui 8.2.0 → 8.2.1.dev.0f465a1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/lib/ably_ui/core/core.rb +4 -0
- data/lib/ably_ui/core/footer/footer.html.erb +1 -1
- 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 +150 -0
- data/lib/ably_ui/core/styles.css +4 -0
- data/lib/ably_ui/version.rb +1 -1
- metadata +13 -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 benefiting 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("/about"), 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 started 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>
|