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.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/lib/ably_ui/core/core.rb +4 -0
  4. data/lib/ably_ui/core/images/icon-tech-aws.svg +4 -0
  5. data/lib/ably_ui/core/meganav/component.css +11 -1
  6. data/lib/ably_ui/core/meganav/component.js +1 -1
  7. data/lib/ably_ui/core/meganav/component.json +4 -4
  8. data/lib/ably_ui/core/meganav/meganav.rb +8 -4
  9. data/lib/ably_ui/core/meganav_blog_posts_list/component.js +1 -1
  10. data/lib/ably_ui/core/meganav_blog_posts_list/meganav_blog_posts_list.html.erb +4 -4
  11. data/lib/ably_ui/core/{meganav_content_why_ably → meganav_content_company}/component.js +1 -1
  12. data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +81 -0
  13. data/lib/ably_ui/core/{meganav_content_why_ably/meganav_content_why_ably.rb → meganav_content_company/meganav_content_company.rb} +2 -1
  14. data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +101 -80
  15. data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +95 -91
  16. data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +112 -83
  17. data/lib/ably_ui/core/meganav_control/component.js +1 -1
  18. data/lib/ably_ui/core/meganav_control/meganav_control.html.erb +1 -1
  19. data/lib/ably_ui/core/meganav_control/meganav_control.rb +8 -2
  20. data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.html.erb +4 -2
  21. data/lib/ably_ui/core/meganav_control_mobile_panel_close/meganav_control_mobile_panel_close.rb +4 -1
  22. data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.html.erb +4 -3
  23. data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.rb +8 -0
  24. data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.html.erb +1 -1
  25. data/lib/ably_ui/core/meganav_items_mobile/meganav_items_mobile.rb +4 -0
  26. data/lib/ably_ui/core/meganav_items_signed_in/meganav_items_signed_in.html.erb +1 -1
  27. data/lib/ably_ui/core/meganav_search_suggestions/component.js +1 -1
  28. data/lib/ably_ui/core/notice/component.js +1 -1
  29. data/lib/ably_ui/core/scripts.js +1 -1
  30. data/lib/ably_ui/core/sprites.svg +141 -0
  31. data/lib/ably_ui/core/styles.css +4 -0
  32. data/lib/ably_ui/react/connect_state_wrapper/component.js +1 -0
  33. data/lib/ably_ui/react/scripts.js +1 -0
  34. data/lib/ably_ui/version.rb +1 -1
  35. metadata +15 -15
  36. data/lib/ably_ui/core/images/blog-thumb1.jpg +0 -0
  37. data/lib/ably_ui/core/images/blog-thumb2.jpg +0 -0
  38. data/lib/ably_ui/core/images/blog-thumb3.jpg +0 -0
  39. 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,7 +1,8 @@
1
1
  module AblyUi
2
2
  module Core
3
- class MeganavContentWhyAbly < ViewComponent::Base
3
+ class MeganavContentCompany < ViewComponent::Base
4
4
  include Util
5
+ include SharedAssets
5
6
 
6
7
  attr_reader :url_base
7
8
 
@@ -1,83 +1,104 @@
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 %>
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
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/docs"))) do %>Visit Documentation<% end %>
15
- </div>
16
-
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>
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
- <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>
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
- <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>
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
- <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>
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
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"))) do %>Explore how it works<% end %>
14
- </div>
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
- <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>
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
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"))) do %>Explore all live examples<% end %>
58
- </div>
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
- <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>
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
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"))) do %>Explore our technology<% end %>
96
- </div>
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>