@ably/ui 11.7.1 → 12.0.0-dev.31bc8d9
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.
- package/README.md +6 -9
- package/core/.DS_Store +0 -0
- package/core/Code/component.css +2 -0
- package/core/ContactFooter.jsx +8 -8
- package/core/DropdownMenu.jsx +1 -1
- package/core/FeaturedLink/component.css +0 -15
- package/core/FeaturedLink/component.js +1 -1
- package/core/FeaturedLink.jsx +17 -6
- package/core/Flash/component.css +0 -4
- package/core/Flash.jsx +1 -1
- package/core/Footer/component.css +3 -3
- package/core/Footer.jsx +14 -14
- package/core/Meganav/component.css +6 -6
- package/core/Meganav.jsx +23 -12
- package/core/MeganavBlogPostsList.jsx +17 -6
- package/core/MeganavContentCompany.jsx +17 -6
- package/core/MeganavContentProducts.jsx +19 -8
- package/core/MeganavItemsMobile.jsx +17 -6
- package/core/MeganavItemsSignedIn.jsx +17 -6
- package/core/MeganavSearch.jsx +17 -6
- package/core/MeganavSearchPanel.jsx +17 -6
- package/core/MeganavSearchSuggestions.jsx +17 -6
- package/core/Notice/component.js +1 -1
- package/core/Notice.jsx +4 -4
- package/core/Showcase/component.css +2 -0
- package/core/Showcase/component.js +6 -1
- package/core/Showcase.jsx +3 -0
- package/core/Uptime/component.css +4 -3
- package/core/Uptime/component.js +6 -1
- package/core/Uptime.jsx +65 -28
- package/core/fonts/jetBrains-mono.css +3 -0
- package/core/fonts/manrope.css +3 -0
- package/core/scripts.js +1 -1
- package/core/styles.css +232 -124
- package/package.json +2 -5
- package/src/core/.DS_Store +0 -0
- package/src/core/ContactFooter/component.jsx +8 -8
- package/src/core/DropdownMenu/component.jsx +1 -1
- package/src/core/FeaturedLink/component.js +0 -1
- package/src/core/FeaturedLink/component.jsx +27 -4
- package/src/core/Flash/component.css +0 -4
- package/src/core/Flash/component.jsx +1 -1
- package/src/core/Footer/component.css +3 -3
- package/src/core/Footer/component.jsx +14 -14
- package/src/core/Meganav/component.css +6 -6
- package/src/core/MeganavContentProducts/component.jsx +2 -2
- package/src/core/Notice/component.jsx +3 -3
- package/src/core/fonts/jetBrains-mono.css +3 -0
- package/src/core/fonts/manrope.css +3 -0
- package/src/core/react-renderer.js +7 -4
- package/src/core/styles/buttons.css +5 -5
- package/src/core/styles/forms.css +5 -5
- package/src/core/styles/properties.css +153 -52
- package/src/core/styles/text.css +68 -61
- package/src/core/styles.components.css +1 -1
- package/src/core/utils/syntax-highlighter.css +2 -0
- package/tailwind.config.js +194 -69
- package/tailwind.extend.js +1 -4
- package/src/core/Code/component.html.erb +0 -3
- package/src/core/Code/component.rb +0 -12
- package/src/core/ContactFooter/component.html.erb +0 -32
- package/src/core/ContactFooter/component.rb +0 -13
- package/src/core/CustomerLogos/component.html.erb +0 -9
- package/src/core/CustomerLogos/component.rb +0 -14
- package/src/core/FeatureFooter/component.html.erb +0 -54
- package/src/core/FeatureFooter/component.rb +0 -30
- package/src/core/FeaturedLink/component.css +0 -15
- package/src/core/FeaturedLink/component.html.erb +0 -6
- package/src/core/FeaturedLink/component.rb +0 -19
- package/src/core/Footer/component.html.erb +0 -256
- package/src/core/Footer/component.rb +0 -14
- package/src/core/Icon/component.html.erb +0 -3
- package/src/core/Icon/component.rb +0 -25
- package/src/core/Loader/component.html.erb +0 -18
- package/src/core/Loader/component.rb +0 -19
- package/src/core/Logo/component.html.erb +0 -3
- package/src/core/Logo/component.rb +0 -31
- package/src/core/Meganav/component.html.erb +0 -31
- package/src/core/Meganav/component.rb +0 -60
- package/src/core/MeganavBlogPostsList/component.html.erb +0 -5
- package/src/core/MeganavBlogPostsList/component.rb +0 -13
- package/src/core/MeganavContentCompany/component.html.erb +0 -90
- package/src/core/MeganavContentCompany/component.rb +0 -14
- package/src/core/MeganavContentDevelopers/component.html.erb +0 -129
- package/src/core/MeganavContentDevelopers/component.rb +0 -13
- package/src/core/MeganavContentProducts/component.html.erb +0 -83
- package/src/core/MeganavContentProducts/component.rb +0 -14
- package/src/core/MeganavContentUseCases/component.html.erb +0 -135
- package/src/core/MeganavContentUseCases/component.rb +0 -13
- package/src/core/MeganavControl/component.html.erb +0 -6
- package/src/core/MeganavControl/component.rb +0 -20
- package/src/core/MeganavControlMobileDropdown/component.html.erb +0 -7
- package/src/core/MeganavControlMobileDropdown/component.rb +0 -11
- package/src/core/MeganavControlMobilePanelClose/component.html.erb +0 -12
- package/src/core/MeganavControlMobilePanelClose/component.rb +0 -12
- package/src/core/MeganavControlMobilePanelOpen/component.html.erb +0 -7
- package/src/core/MeganavControlMobilePanelOpen/component.rb +0 -9
- package/src/core/MeganavItemsDesktop/component.html.erb +0 -17
- package/src/core/MeganavItemsDesktop/component.rb +0 -23
- package/src/core/MeganavItemsMobile/component.html.erb +0 -75
- package/src/core/MeganavItemsMobile/component.rb +0 -21
- package/src/core/MeganavItemsSignedIn/component.html.erb +0 -53
- package/src/core/MeganavItemsSignedIn/component.rb +0 -33
- package/src/core/MeganavSearch/component.html.erb +0 -15
- package/src/core/MeganavSearch/component.rb +0 -13
- package/src/core/MeganavSearchAutocomplete/component.html.erb +0 -6
- package/src/core/MeganavSearchAutocomplete/component.rb +0 -6
- package/src/core/MeganavSearchPanel/component.html.erb +0 -22
- package/src/core/MeganavSearchPanel/component.rb +0 -13
- package/src/core/MeganavSearchSuggestions/component.html.erb +0 -22
- package/src/core/MeganavSearchSuggestions/component.rb +0 -18
- package/src/core/Notice/component.html.erb +0 -16
- package/src/core/Notice/component.rb +0 -29
- package/src/core/Showcase/component.css +0 -30
- package/src/core/Showcase/component.html.erb +0 -76
- package/src/core/Showcase/component.js +0 -180
- package/src/core/Showcase/component.jsx +0 -0
- package/src/core/Showcase/component.rb +0 -190
- package/src/core/SignOutLink/component.html.erb +0 -1
- package/src/core/SignOutLink/component.rb +0 -17
- package/src/core/Slider/component.html.erb +0 -28
- package/src/core/Slider/component.rb +0 -38
- package/src/core/Uptime/component.css +0 -128
- package/src/core/Uptime/component.html.erb +0 -0
- package/src/core/Uptime/component.js +0 -1
- package/src/core/Uptime/component.jsx +0 -186
- package/src/core/Uptime/component.rb +0 -7
- package/src/core/core.rb +0 -81
|
@@ -1,90 +0,0 @@
|
|
|
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
|
-
<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>
|
|
84
|
-
</ul>
|
|
85
|
-
</div>
|
|
86
|
-
|
|
87
|
-
<%= render(AblyUi::Core::MeganavBlogPostsList.new(url_base: url_base)) %>
|
|
88
|
-
</section>
|
|
89
|
-
<div class="ui-meganav-content-spacer"></div>
|
|
90
|
-
</div>
|
|
@@ -1,129 +0,0 @@
|
|
|
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/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
|
|
20
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
|
|
21
|
-
<div class="flex flex-col justify-center">
|
|
22
|
-
<p class="ui-meganav-media-heading">Quickstart guides</p>
|
|
23
|
-
<p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
|
|
24
|
-
</div>
|
|
25
|
-
<% end %>
|
|
26
|
-
</li>
|
|
27
|
-
<li>
|
|
28
|
-
<%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
|
|
29
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
|
|
30
|
-
<div class="flex flex-col justify-center">
|
|
31
|
-
<p class="ui-meganav-media-heading">Integrations</p>
|
|
32
|
-
<p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
|
|
33
|
-
</div>
|
|
34
|
-
<% end %>
|
|
35
|
-
</li>
|
|
36
|
-
<li>
|
|
37
|
-
<%= link_to abs_url("/examples"), class: "ui-meganav-media-with-image group" do %>
|
|
38
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-examples-col", size: "2.5rem")) %>
|
|
39
|
-
<div class="flex flex-col justify-center">
|
|
40
|
-
<p class="ui-meganav-media-heading">Live examples</p>
|
|
41
|
-
<p class="ui-meganav-media-copy">Discover our features and their use cases.</p>
|
|
42
|
-
</div>
|
|
43
|
-
<% end %>
|
|
44
|
-
</li>
|
|
45
|
-
</ul>
|
|
46
|
-
</div>
|
|
47
|
-
<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">
|
|
48
|
-
<ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
|
|
49
|
-
<li>
|
|
50
|
-
<%= link_to abs_url("/docs/sdks"), class: "ui-meganav-media-with-image group" do %>
|
|
51
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-sdks-col", size: "2.5rem")) %>
|
|
52
|
-
<div class="flex flex-col justify-center">
|
|
53
|
-
<p class="ui-meganav-media-heading">SDKs</p>
|
|
54
|
-
<p class="ui-meganav-media-copy">Download an SDK to help you build realtime apps faster.</p>
|
|
55
|
-
</div>
|
|
56
|
-
<% end %>
|
|
57
|
-
</li>
|
|
58
|
-
<li>
|
|
59
|
-
<%= link_to abs_url("/tutorials"), class: "ui-meganav-media-with-image group" do %>
|
|
60
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-tutorials-demos-col", size: "2.5rem")) %>
|
|
61
|
-
<div class="flex flex-col justify-center">
|
|
62
|
-
<p class="ui-meganav-media-heading">Tutorials & Demos</p>
|
|
63
|
-
<p class="ui-meganav-media-copy">Get stuck in with our hands-on resources. </p>
|
|
64
|
-
</div>
|
|
65
|
-
<% end %>
|
|
66
|
-
</li>
|
|
67
|
-
<li>
|
|
68
|
-
<%= link_to abs_url("/reference-guide-chat"), class: "ui-meganav-media-with-image group" do %>
|
|
69
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-col", size: "2.5rem")) %>
|
|
70
|
-
<div class="flex flex-col justify-center">
|
|
71
|
-
<p class="ui-meganav-media-heading">Chat apps reference guide</p>
|
|
72
|
-
<p class="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
|
|
73
|
-
</div>
|
|
74
|
-
<% end %>
|
|
75
|
-
</li>
|
|
76
|
-
<li>
|
|
77
|
-
<%= link_to abs_url("/reference-guide-multiplayer"), class: "ui-meganav-media-with-image group" do %>
|
|
78
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
|
|
79
|
-
<div class="flex flex-col justify-center">
|
|
80
|
-
<p class="ui-meganav-media-heading">Multiplayer reference guide</p>
|
|
81
|
-
<p class="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
|
|
82
|
-
</div>
|
|
83
|
-
<% end %>
|
|
84
|
-
</li>
|
|
85
|
-
</ul>
|
|
86
|
-
</div>
|
|
87
|
-
<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">
|
|
88
|
-
<h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
|
|
89
|
-
Quick links
|
|
90
|
-
</h3>
|
|
91
|
-
<ul aria-labelledby="meganav-developers-panel-quick-links">
|
|
92
|
-
<li>
|
|
93
|
-
<%= link_to "https://discord.gg/jwBPhEZ9g5", class: "group ui-meganav-media py-12" do %>
|
|
94
|
-
<p class="ui-meganav-media-heading">Discord</p>
|
|
95
|
-
<% end %>
|
|
96
|
-
</li>
|
|
97
|
-
<li>
|
|
98
|
-
<%= link_to "https://github.com/ably", class: "group ui-meganav-media py-12" do %>
|
|
99
|
-
<p class="ui-meganav-media-heading">GitHub</p>
|
|
100
|
-
<% end %>
|
|
101
|
-
</li>
|
|
102
|
-
<li>
|
|
103
|
-
<%= link_to "https://changelog.ably.com/", class: "group ui-meganav-media py-12" do %>
|
|
104
|
-
<p class="ui-meganav-media-heading">Changelog</p>
|
|
105
|
-
<% end %>
|
|
106
|
-
</li>
|
|
107
|
-
<li>
|
|
108
|
-
<a href="https://status.ably.com/" class="group ui-meganav-media py-12">
|
|
109
|
-
<p class="ui-meganav-media-heading">
|
|
110
|
-
Status<iframe
|
|
111
|
-
src="https://status.ably.com/embed/icon"
|
|
112
|
-
allowtransparency="true"
|
|
113
|
-
frameborder="0"
|
|
114
|
-
scrolling="no"
|
|
115
|
-
class="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
|
|
116
|
-
></iframe>
|
|
117
|
-
</p>
|
|
118
|
-
</a>
|
|
119
|
-
</li>
|
|
120
|
-
<li>
|
|
121
|
-
<%= link_to abs_url("/support"), class: "group ui-meganav-media py-12" do %>
|
|
122
|
-
<p class="ui-meganav-media-heading">Support & FAQs</p>
|
|
123
|
-
<% end %>
|
|
124
|
-
</li>
|
|
125
|
-
</ul>
|
|
126
|
-
</div>
|
|
127
|
-
</section>
|
|
128
|
-
<div class="ui-meganav-content-spacer"></div>
|
|
129
|
-
</div>
|
|
@@ -1,83 +0,0 @@
|
|
|
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>
|
|
9
|
-
|
|
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>
|
|
14
|
-
|
|
15
|
-
<%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"), text_size: 'text-p2')) do %>Explore how it works<% end %>
|
|
16
|
-
</div>
|
|
17
|
-
|
|
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-products-panel-list-examples">
|
|
20
|
-
Products
|
|
21
|
-
</h3>
|
|
22
|
-
<ul class="mb-16" aria-labelledby="meganav-products-panel-list-examples">
|
|
23
|
-
<li>
|
|
24
|
-
<%= link_to abs_url("/solutions/channels"), class: "ui-meganav-media group" do %>
|
|
25
|
-
<p class="ui-meganav-media-heading">Pub/Sub Channels</p>
|
|
26
|
-
<p class="ui-meganav-media-copy">Build infinitely scalable realtime applications.</p>
|
|
27
|
-
<% end %>
|
|
28
|
-
</li>
|
|
29
|
-
<li>
|
|
30
|
-
<%= link_to abs_url("/spaces"), class: "ui-meganav-media group" do %>
|
|
31
|
-
<p class="ui-meganav-media-heading">Spaces (Beta)</p>
|
|
32
|
-
<p class="ui-meganav-media-copy">Create multi-user collaborative environments.</p>
|
|
33
|
-
<% end %>
|
|
34
|
-
</li>
|
|
35
|
-
<li>
|
|
36
|
-
<%= link_to abs_url("/livesync"), class: "ui-meganav-media group" do %>
|
|
37
|
-
<p class="ui-meganav-media-heading">LiveSync (Pre release)</p>
|
|
38
|
-
<p class="ui-meganav-media-copy">Keep clients in sync with any relational database.</p>
|
|
39
|
-
<% end %>
|
|
40
|
-
</li>
|
|
41
|
-
</ul>
|
|
42
|
-
</div>
|
|
43
|
-
|
|
44
|
-
<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">
|
|
45
|
-
<h3 class="ui-meganav-overline" id="meganav-products-panel-list-our-technology">Technology</h3>
|
|
46
|
-
<ul class="mb-16" aria-labelledby="meganav-products-panel-list-our-technology">
|
|
47
|
-
<li>
|
|
48
|
-
<%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %>
|
|
49
|
-
<p class="ui-meganav-media-heading">Predictable performance</p>
|
|
50
|
-
<p class="ui-meganav-media-copy">A low-latency and high-throughput global network.</p>
|
|
51
|
-
<% end %>
|
|
52
|
-
</li>
|
|
53
|
-
<li>
|
|
54
|
-
<%= link_to abs_url("/four-pillars-of-dependability#integrity"), class: "ui-meganav-media group" do %>
|
|
55
|
-
<p class="ui-meganav-media-heading">Guaranteed ordering & delivery</p>
|
|
56
|
-
<p class="ui-meganav-media-copy">Data is delivered - in order - even after disconnections.</p>
|
|
57
|
-
<% end %>
|
|
58
|
-
</li>
|
|
59
|
-
<li>
|
|
60
|
-
<%= link_to abs_url("/four-pillars-of-dependability#reliability"), class: "ui-meganav-media group" do %>
|
|
61
|
-
<p class="ui-meganav-media-heading">Fault tolerant infrastructure</p>
|
|
62
|
-
<p class="ui-meganav-media-copy">Redundancy is built in at global and regional levels.</p>
|
|
63
|
-
<% end %>
|
|
64
|
-
</li>
|
|
65
|
-
<li>
|
|
66
|
-
<%= link_to abs_url("/four-pillars-of-dependability#availability"), class: "ui-meganav-media group" do %>
|
|
67
|
-
<p class="ui-meganav-media-heading">High scalability & availability</p>
|
|
68
|
-
<p class="ui-meganav-media-copy">Built for scale with legitimate 99.999% uptime SLAs.</p>
|
|
69
|
-
<% end %>
|
|
70
|
-
</li>
|
|
71
|
-
<li>
|
|
72
|
-
<%= link_to abs_url("/network"), class: "ui-meganav-media group" do %>
|
|
73
|
-
<p class="ui-meganav-media-heading">Global edge network</p>
|
|
74
|
-
<p class="ui-meganav-media-copy">An edge network of 15 core routing datacenters and 205+ PoPs.</p>
|
|
75
|
-
<% end %>
|
|
76
|
-
</li>
|
|
77
|
-
</ul>
|
|
78
|
-
|
|
79
|
-
<%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"), text_size: 'text-p3')) do %>Explore Four Pillars of Dependability<% end %>
|
|
80
|
-
</div>
|
|
81
|
-
</section>
|
|
82
|
-
<div class="ui-meganav-content-spacer"></div>
|
|
83
|
-
</div>
|
|
@@ -1,135 +0,0 @@
|
|
|
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
|
-
Solutions
|
|
7
|
-
</h3>
|
|
8
|
-
<ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
|
|
9
|
-
|
|
10
|
-
<li>
|
|
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")) %>
|
|
13
|
-
<div class="flex flex-col justify-center">
|
|
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>
|
|
16
|
-
</div>
|
|
17
|
-
<% end %>
|
|
18
|
-
</li>
|
|
19
|
-
<li>
|
|
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")) %>
|
|
22
|
-
<div class="flex flex-col justify-center">
|
|
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>
|
|
25
|
-
</div>
|
|
26
|
-
<% end %>
|
|
27
|
-
</li>
|
|
28
|
-
<li>
|
|
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")) %>
|
|
31
|
-
<div class="flex flex-col justify-center">
|
|
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>
|
|
34
|
-
</div>
|
|
35
|
-
<% end %>
|
|
36
|
-
</li>
|
|
37
|
-
<li>
|
|
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")) %>
|
|
40
|
-
<div class="flex flex-col justify-center">
|
|
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/asset-tracking"), class: "ui-meganav-media-with-image group" do %>
|
|
57
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-display-asset-tracking-col", size: "2.5rem")) %>
|
|
58
|
-
<div class="flex flex-col justify-center">
|
|
59
|
-
<p class="ui-meganav-media-heading">Asset Tracking (Beta)</p>
|
|
60
|
-
<p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
|
|
61
|
-
</div>
|
|
62
|
-
<% end %>
|
|
63
|
-
</li>
|
|
64
|
-
</ul>
|
|
65
|
-
</div>
|
|
66
|
-
|
|
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">
|
|
68
|
-
<h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
|
|
69
|
-
Industry
|
|
70
|
-
</h3>
|
|
71
|
-
<ul aria-labelledby="meganav-use-cases-panel-industry">
|
|
72
|
-
<li>
|
|
73
|
-
<%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
|
|
74
|
-
<p class="ui-meganav-media-heading">EdTech</p>
|
|
75
|
-
<p class="ui-meganav-media-copy">Deliver interactive learning experiences.</p>
|
|
76
|
-
<% end %>
|
|
77
|
-
</li>
|
|
78
|
-
<li>
|
|
79
|
-
<%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
|
|
80
|
-
<p class="ui-meganav-media-heading">FinTech</p>
|
|
81
|
-
<p class="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
|
|
82
|
-
<% end %>
|
|
83
|
-
</li>
|
|
84
|
-
<li>
|
|
85
|
-
<%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %>
|
|
86
|
-
<p class="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
|
|
87
|
-
<p class="ui-meganav-media-copy">Power diagnostics, order tracking and more.</p>
|
|
88
|
-
<% end %>
|
|
89
|
-
</li>
|
|
90
|
-
<li>
|
|
91
|
-
<%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %>
|
|
92
|
-
<p class="ui-meganav-media-heading">B2B Platforms</p>
|
|
93
|
-
<p class="ui-meganav-media-copy">Empower your customers with realtime solutions.</p>
|
|
94
|
-
<% end %>
|
|
95
|
-
</li>
|
|
96
|
-
<li>
|
|
97
|
-
<%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
|
|
98
|
-
<p class="ui-meganav-media-heading">Healthcare (HIPAA)</p>
|
|
99
|
-
<p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
|
|
100
|
-
<% end %>
|
|
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">
|
|
107
|
-
<li>
|
|
108
|
-
<%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
|
|
109
|
-
<p class="ui-meganav-media-heading">eCommerce & Retail</p>
|
|
110
|
-
<p class="ui-meganav-media-copy">Enrich customer experiences with realtime updates.</p>
|
|
111
|
-
<% end %>
|
|
112
|
-
</li>
|
|
113
|
-
<li>
|
|
114
|
-
<%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
|
|
115
|
-
<p class="ui-meganav-media-heading">Sports, Media & Audience Engagement</p>
|
|
116
|
-
<p class="ui-meganav-media-copy">Deliver engaging global realtime experiences.</p>
|
|
117
|
-
<% end %>
|
|
118
|
-
</li>
|
|
119
|
-
<li>
|
|
120
|
-
<%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %>
|
|
121
|
-
<p class="ui-meganav-media-heading">Gaming</p>
|
|
122
|
-
<p class="ui-meganav-media-copy">Power ultra fast and reliable gaming experiences.</p>
|
|
123
|
-
<% end %>
|
|
124
|
-
</li>
|
|
125
|
-
<li>
|
|
126
|
-
<%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %>
|
|
127
|
-
<p class="ui-meganav-media-heading">IoT & Connected Devices</p>
|
|
128
|
-
<p class="ui-meganav-media-copy">Monitor and control global IoT deployments in realtime.</p>
|
|
129
|
-
<% end %>
|
|
130
|
-
</li>
|
|
131
|
-
</ul>
|
|
132
|
-
</div>
|
|
133
|
-
</section>
|
|
134
|
-
<div class="ui-meganav-content-spacer"></div>
|
|
135
|
-
</div>
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
<%= button_tag(type: "button",
|
|
2
|
-
class: ["ui-meganav-link", "h-64", "flex", "items-center", "group", theme(:text_color), additional_css],
|
|
3
|
-
data: { id: "meganav-control" },
|
|
4
|
-
aria: { expanded: false, controls: aria_controls, label: "Show #{aria_label} panel" }) do -%>
|
|
5
|
-
<%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "transform rotate-90 group-hover:text-gui-hover group-focus:text-gui-focus")) %>
|
|
6
|
-
<% end %>
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
module AblyUi
|
|
2
|
-
module Core
|
|
3
|
-
class MeganavControl < ViewComponent::Base
|
|
4
|
-
include AblyUi::Core::MeganavConfig
|
|
5
|
-
attr_reader :aria_controls, :aria_label, :additional_css
|
|
6
|
-
|
|
7
|
-
def initialize(
|
|
8
|
-
aria_controls:,
|
|
9
|
-
aria_label:,
|
|
10
|
-
theme_name:,
|
|
11
|
-
additional_css: ''
|
|
12
|
-
)
|
|
13
|
-
@aria_controls = aria_controls
|
|
14
|
-
@aria_label = aria_label
|
|
15
|
-
@additional_css = additional_css
|
|
16
|
-
theme_setup(theme_name)
|
|
17
|
-
end
|
|
18
|
-
end
|
|
19
|
-
end
|
|
20
|
-
end
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
<%= button_tag(type: "button",
|
|
2
|
-
class: "block ml-24 mr-0 px-0 py-16 hover:text-gui-hover focus:text-gui-focus focus:outline-none",
|
|
3
|
-
data: { id: "meganav-control-mobile-dropdown" },
|
|
4
|
-
aria: { expanded: false, controls: "meganav-mobile-dropdown" }) do %>
|
|
5
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-burger-menu", size: "1.5rem", color: theme(:mobile_menu_color), additional_css: "transition-colors", data: { id: "meganav-control-mobile-dropdown-menu" })) %>
|
|
6
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.5rem", color: theme(:mobile_menu_color), additional_css: "transition-colors hidden", data: { id: "meganav-control-mobile-dropdown-close" })) %>
|
|
7
|
-
<% end %>
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
<div class="mx-24 md:mx-32">
|
|
2
|
-
<%= button_tag(type: "button",
|
|
3
|
-
class: "ui-meganav-mobile-link text-gui-default mb-16",
|
|
4
|
-
data: { id: "meganav-control-mobile-panel-close" },
|
|
5
|
-
aria: { expanded: false, controls: aria_controls, label: "Hide panel" }) do -%>
|
|
6
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "relative -top-1 transform rotate-180")) %>
|
|
7
|
-
Back
|
|
8
|
-
<% end %>
|
|
9
|
-
<% if display_hr %>
|
|
10
|
-
<hr class="ui-meganav-hr" />
|
|
11
|
-
<% end %>
|
|
12
|
-
</div>
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
module AblyUi
|
|
2
|
-
module Core
|
|
3
|
-
class MeganavControlMobilePanelClose < ViewComponent::Base
|
|
4
|
-
attr_reader :aria_controls, :display_hr
|
|
5
|
-
|
|
6
|
-
def initialize(aria_controls:, display_hr: true)
|
|
7
|
-
@aria_controls = aria_controls
|
|
8
|
-
@display_hr = display_hr
|
|
9
|
-
end
|
|
10
|
-
end
|
|
11
|
-
end
|
|
12
|
-
end
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
<%= button_tag(type: "button",
|
|
2
|
-
class: "ui-meganav-mobile-link",
|
|
3
|
-
data: { id: "meganav-control-mobile-panel-open" },
|
|
4
|
-
aria: { expanded: false, controls: @aria_controls, label: "Show #{content}" }) do %>
|
|
5
|
-
<%= content %>
|
|
6
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "relative -top-1 ml-auto float-right")) %>
|
|
7
|
-
<% end %>
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
<ul class="hidden md:flex" data-id="meganav-items-desktop">
|
|
2
|
-
<% panels.each do |panel| %>
|
|
3
|
-
<li class="ui-meganav-item">
|
|
4
|
-
<%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], aria_label: panel[:label], theme_name: @theme_name)) do %>
|
|
5
|
-
<span class="hidden lg:inline"><%= panel[:label] %></span>
|
|
6
|
-
<span class="lg:hidden"><%= panel[:short_label] %></span>
|
|
7
|
-
<% end %>
|
|
8
|
-
|
|
9
|
-
<%= content_tag :div, class: "ui-meganav-panel invisible #{bg_css(panel[:id])}", data: { id: "meganav-panel" }, id: panel[:id] do %>
|
|
10
|
-
<%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
|
|
11
|
-
<% end %>
|
|
12
|
-
</li>
|
|
13
|
-
<% end %>
|
|
14
|
-
<li>
|
|
15
|
-
<%= link_to "Pricing", abs_url("/pricing"), data: { id: "meganav-link" }, class: ["ui-meganav-link", "h-64", "items-center", "flex", theme(:text_color)] %>
|
|
16
|
-
</li>
|
|
17
|
-
</ul>
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
module AblyUi
|
|
2
|
-
module Core
|
|
3
|
-
class MeganavItemsDesktop < ViewComponent::Base
|
|
4
|
-
include MeganavConfig
|
|
5
|
-
include Util
|
|
6
|
-
|
|
7
|
-
attr_reader :url_base
|
|
8
|
-
|
|
9
|
-
def initialize(theme_name:, url_base:)
|
|
10
|
-
@theme_name = theme_name
|
|
11
|
-
@url_base = url_base
|
|
12
|
-
end
|
|
13
|
-
|
|
14
|
-
def bg_css(panel_id)
|
|
15
|
-
if %w[products-panel use-cases-panel].include?(panel_id)
|
|
16
|
-
'ui-meganav-panel-split-bg'
|
|
17
|
-
else
|
|
18
|
-
''
|
|
19
|
-
end
|
|
20
|
-
end
|
|
21
|
-
end
|
|
22
|
-
end
|
|
23
|
-
end
|