@ably/ui 13.1.0-dev.49a8f15 → 13.2.2

package/src/core/MeganavContentCompany/component.html.erb

@@ -0,0 +1,90 @@
+<div class="flex max-w-screen-xl mx-auto">
+  <div class="ui-meganav-content-spacer"></div>
+  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
+    <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">
+      <h3 class="ui-meganav-overline" id="meganav-company-panel-list-why-companies">Why companies choose Ably</h3>
+      <ul aria-labelledby="meganav-company-panel-list-why-companies">
+        <li>
+          <%= link_to abs_url("/customers"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-customers-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Customers</p>
+              <p class="ui-meganav-media-copy">Ably supports customers across multiple industries.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/case-studies"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-case-studies-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Case studies</p>
+              <p class="ui-meganav-media-copy">Discover how customers are benefiting from Ably.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/compare"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-compare-tech-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Compare our tech</p>
+              <p class="ui-meganav-media-copy">Choose the right realtime service.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/aws"), class: "ui-meganav-media-with-image group" do %>
+            <%= image_tag(aws_logo_path, alt: "AWS logo") %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Partners</p>
+              <p class="ui-meganav-media-copy">Ably collaborates and integrates with AWS.</p>
+            </div>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+
+    <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">
+      <ul class="md:mt-40" aria-labelledby="meganav-company-panel-list-why-companies">
+        <li>
+          <%= link_to abs_url("/resources"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-resources-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Resources</p>
+              <p class="ui-meganav-media-copy">Learn more about realtime with our handy resources.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/about"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-about-ably-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">About Ably</p>
+              <p class="ui-meganav-media-copy">Find out more about Ably’s mission.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/careers"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-careers-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Careers</p>
+              <p class="ui-meganav-media-copy">Discover our open roles and core Ably values.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/events"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-events-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Events</p>
+              <p class="ui-meganav-media-copy">Join Ably at upcoming events.</p>
+            </div>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+
+    <%= render(AblyUi::Core::MeganavBlogPostsList.new(url_base: url_base)) %>
+  </section>
+  <div class="ui-meganav-content-spacer"></div>
+</div>

package/src/core/MeganavContentCompany/component.rb

@@ -0,0 +1,14 @@
+module AblyUi
+  module Core
+    class MeganavContentCompany < ViewComponent::Base
+      include Util
+      include SharedAssets
+
+      attr_reader :url_base
+
+      def initialize(url_base:)
+        @url_base = url_base
+      end
+    end
+  end
+end

package/src/core/MeganavContentDevelopers/component.html.erb

@@ -0,0 +1,129 @@
+<div class="flex max-w-screen-xl mx-auto">
+  <div class="ui-meganav-content-spacer"></div>
+  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
+    <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">
+      <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
+        Explore
+      </h3>
+      <ul aria-labelledby="meganav-developers-panel-explore">
+        <li>
+          <%= link_to abs_url("/docs"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-docs-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Documentation</p>
+              <p class="ui-meganav-media-copy">Technical guides to help you build with Ably.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/docs/quick-start-guide"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Quickstart guides</p>
+              <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Integrations</p>
+              <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/examples"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-examples-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Live examples</p>
+              <p class="ui-meganav-media-copy">Discover our features and their use cases.</p>
+            </div>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+    <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">
+      <ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
+        <li>
+          <%= link_to abs_url("/docs/sdks"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-sdks-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">SDKs</p>
+              <p class="ui-meganav-media-copy">Download an SDK to help you build realtime apps faster.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/tutorials"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-tutorials-demos-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Tutorials & Demos</p>
+              <p class="ui-meganav-media-copy">Get stuck in with our hands-on resources. </p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/reference-guide-chat"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Chat apps reference guide</p>
+              <p class="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/reference-guide-multiplayer"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Multiplayer reference guide</p>
+              <p class="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
+            </div>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+    <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">
+      <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
+        Quick links
+      </h3>
+      <ul aria-labelledby="meganav-developers-panel-quick-links">
+        <li>
+          <%= link_to "https://discord.gg/jwBPhEZ9g5", class: "group ui-meganav-media py-12" do %>
+            <p class="ui-meganav-media-heading">Discord</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to "https://github.com/ably", class: "group ui-meganav-media py-12" do %>
+            <p class="ui-meganav-media-heading">GitHub</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to "https://changelog.ably.com/", class: "group ui-meganav-media py-12" do %>
+            <p class="ui-meganav-media-heading">Changelog</p>
+          <% end %>
+        </li>
+        <li>
+          <a href="https://status.ably.com/" class="group ui-meganav-media py-12">
+            <p class="ui-meganav-media-heading">
+              Status<iframe
+                src="https://status.ably.com/embed/icon"
+                allowtransparency="true"
+                frameborder="0"
+                scrolling="no"
+                class="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
+              ></iframe>
+            </p>
+          </a>
+        </li>
+        <li>
+          <%= link_to abs_url("/support"), class: "group ui-meganav-media py-12" do %>
+            <p class="ui-meganav-media-heading">Support & FAQs</p>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+  </section>
+  <div class="ui-meganav-content-spacer"></div>
+</div>

package/src/core/MeganavContentDevelopers/component.rb

@@ -0,0 +1,13 @@
+module AblyUi
+  module Core
+    class MeganavContentDevelopers < ViewComponent::Base
+      include AblyUi::Core::Util
+
+      attr_reader :url_base
+
+      def initialize(url_base:)
+        @url_base = url_base
+      end
+    end
+  end
+end

package/src/core/MeganavContentProducts/component.html.erb

@@ -0,0 +1,83 @@
+<div class="flex max-w-screen-xl mx-auto">
+  <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
+  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
+    <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">
+      <div class="flex mb-20">
+        <%= image_tag(ably_stack_path, alt: "Ably homepage") %>
+        <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
+      </div>
+
+      <p class="ui-text-p2 font-bold mb-24" style="max-width: 330px">
+        Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
+        realtime, and lets you focus on your code.
+      </p>
+
+      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"), text_size: 'text-p2')) do %>Explore how it works<% end %>
+    </div>
+
+    <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">
+      <h3 class="ui-meganav-overline" id="meganav-products-panel-list-examples">
+        Products
+      </h3>
+      <ul class="mb-16" aria-labelledby="meganav-products-panel-list-examples">
+        <li>
+          <%= link_to abs_url("/solutions/channels"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Pub/Sub Channels</p>
+            <p class="ui-meganav-media-copy">Build infinitely scalable realtime applications.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/spaces"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Spaces (Beta)</p>
+            <p class="ui-meganav-media-copy">Create multi-user collaborative environments.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/livesync"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">LiveSync (Early access)</p>
+            <p class="ui-meganav-media-copy">Keep clients in sync with any relational database.</p>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+
+    <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">
+      <h3 class="ui-meganav-overline" id="meganav-products-panel-list-our-technology">Technology</h3>
+      <ul class="mb-16" aria-labelledby="meganav-products-panel-list-our-technology">
+        <li>
+          <%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Predictable performance</p>
+            <p class="ui-meganav-media-copy">A low-latency and high-throughput global network.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/four-pillars-of-dependability#integrity"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Guaranteed ordering & delivery</p>
+            <p class="ui-meganav-media-copy">Data is delivered - in order - even after disconnections.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/four-pillars-of-dependability#reliability"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Fault tolerant infrastructure</p>
+            <p class="ui-meganav-media-copy">Redundancy is built in at global and regional levels.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/four-pillars-of-dependability#availability"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">High scalability & availability</p>
+            <p class="ui-meganav-media-copy">Built for scale with legitimate 99.999% uptime SLAs.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/network"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Global edge network</p>
+            <p class="ui-meganav-media-copy">An edge network of 15 core routing datacenters and 205+ PoPs.</p>
+          <% end %>
+        </li>
+      </ul>
+
+      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"), text_size: 'text-p3')) do %>Explore Four Pillars of Dependability<% end %>
+    </div>
+  </section>
+  <div class="ui-meganav-content-spacer"></div>
+</div>

package/src/core/MeganavContentProducts/component.rb

@@ -0,0 +1,14 @@
+module AblyUi
+  module Core
+    class MeganavContentProducts < ViewComponent::Base
+      include SharedAssets
+      include Util
+
+      attr_reader :url_base
+
+      def initialize(url_base:)
+        @url_base = url_base
+      end
+    end
+  end
+end

package/src/core/MeganavContentUseCases/component.html.erb

@@ -0,0 +1,135 @@
+<div class="flex max-w-screen-xl mx-auto">
+  <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
+  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
+    <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">
+      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
+          Solutions
+        </h3>
+      <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
+
+        <li>
+          <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Live Chat</p>
+              <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/multiplayer-collaboration"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Multiplayer Collaboration</p>
+              <p class="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/data-broadcast"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-data-broadcast-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Data Broadcast</p>
+              <p class="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/data-synchronization"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-data-synchronization-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Data Synchronization</p>
+              <p class="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
+            </div>
+          <% end %>
+        </li>
+         <li>
+          <%= link_to abs_url("/push-notifications"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-push-notifications-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Notifications</p>
+              <p class="ui-meganav-media-copy">Deliver cross-platform push notifications with a simple unified API.</p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-asset-tracking-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Asset Tracking (Beta)</p>
+              <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
+            </div>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+
+    <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">
+      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
+        Industry
+      </h3>
+      <ul aria-labelledby="meganav-use-cases-panel-industry">
+        <li>
+          <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">EdTech</p>
+            <p class="ui-meganav-media-copy">Deliver interactive learning experiences.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">FinTech</p>
+            <p class="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
+            <p class="ui-meganav-media-copy">Power diagnostics, order tracking and more.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">B2B Platforms</p>
+            <p class="ui-meganav-media-copy">Empower your customers with realtime solutions.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Healthcare (HIPAA)</p>
+            <p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+
+    <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">
+      <ul aria-labelledby="meganav-use-cases-panel-solutions" class="mt-0 md:mt-40">
+        <li>
+          <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">eCommerce & Retail</p>
+            <p class="ui-meganav-media-copy">Enrich customer experiences with realtime updates.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Sports, Media & Audience Engagement</p>
+            <p class="ui-meganav-media-copy">Deliver engaging global realtime experiences.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Gaming</p>
+            <p class="ui-meganav-media-copy">Power ultra fast and reliable gaming experiences.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">IoT & Connected Devices</p>
+            <p class="ui-meganav-media-copy">Monitor and control global IoT deployments in realtime.</p>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+  </section>
+  <div class="ui-meganav-content-spacer"></div>
+</div>

package/src/core/MeganavContentUseCases/component.rb

@@ -0,0 +1,13 @@
+module AblyUi
+  module Core
+    class MeganavContentUseCases < ViewComponent::Base
+      include Util
+
+      attr_reader :url_base
+
+      def initialize(url_base:)
+        @url_base = url_base
+      end
+    end
+  end
+end

package/src/core/MeganavControl/component.html.erb

@@ -0,0 +1,6 @@
+<%= button_tag(type: "button",
+               class: ["ui-meganav-link", "h-64", "flex", "items-center", "group", theme(:text_color), additional_css],
+               data: { id: "meganav-control" },
+               aria: { expanded: false, controls: aria_controls, label: "Show #{aria_label} panel" }) do -%>
+  <%= 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")) %>
+<% end %>

package/src/core/MeganavControl/component.rb

@@ -0,0 +1,20 @@
+module AblyUi
+  module Core
+    class MeganavControl < ViewComponent::Base
+      include AblyUi::Core::MeganavConfig
+      attr_reader :aria_controls, :aria_label, :additional_css
+
+      def initialize(
+        aria_controls:,
+        aria_label:,
+        theme_name:,
+        additional_css: ''
+      )
+        @aria_controls = aria_controls
+        @aria_label = aria_label
+        @additional_css = additional_css
+        theme_setup(theme_name)
+      end
+    end
+  end
+end

package/src/core/MeganavControlMobileDropdown/component.html.erb

@@ -0,0 +1,7 @@
+<%= button_tag(type: "button",
+               class: "block ml-24 mr-0 px-0 py-16 hover:text-gui-hover focus:text-gui-focus focus:outline-none",
+               data: { id: "meganav-control-mobile-dropdown" },
+               aria: { expanded: false, controls: "meganav-mobile-dropdown" }) do %>
+  <%= 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" })) %>
+  <%= 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" })) %>
+<% end %>

package/src/core/MeganavControlMobileDropdown/component.rb

@@ -0,0 +1,11 @@
+module AblyUi
+  module Core
+    class MeganavControlMobileDropdown < ViewComponent::Base
+      include AblyUi::Core::MeganavConfig
+
+      def initialize(theme_name:)
+        theme_setup(theme_name)
+      end
+    end
+  end
+end

package/src/core/MeganavControlMobilePanelClose/component.html.erb

@@ -0,0 +1,12 @@
+<div class="mx-24 md:mx-32">
+  <%= button_tag(type: "button",
+                 class: "ui-meganav-mobile-link text-gui-default mb-16",
+                 data: { id: "meganav-control-mobile-panel-close" },
+                 aria: { expanded: false, controls: aria_controls, label: "Hide panel" }) do -%>
+    <%= 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")) %>
+    Back
+  <% end %>
+  <% if display_hr %>
+    <hr class="ui-meganav-hr" />
+  <% end %>
+</div>

package/src/core/MeganavControlMobilePanelClose/component.rb

@@ -0,0 +1,12 @@
+module AblyUi
+  module Core
+    class MeganavControlMobilePanelClose < ViewComponent::Base
+      attr_reader :aria_controls, :display_hr
+
+      def initialize(aria_controls:, display_hr: true)
+        @aria_controls = aria_controls
+        @display_hr = display_hr
+      end
+    end
+  end
+end

package/src/core/MeganavControlMobilePanelOpen/component.html.erb

@@ -0,0 +1,7 @@
+<%= button_tag(type: "button",
+               class: "ui-meganav-mobile-link",
+               data: { id: "meganav-control-mobile-panel-open" },
+               aria: { expanded: false, controls: @aria_controls, label: "Show #{content}" }) do %>
+  <%= content %>
+  <%= 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")) %>
+<% end %>

package/src/core/MeganavControlMobilePanelOpen/component.rb

@@ -0,0 +1,9 @@
+module AblyUi
+  module Core
+    class MeganavControlMobilePanelOpen < ViewComponent::Base
+      def initialize(aria_controls:)
+        @aria_controls = aria_controls
+      end
+    end
+  end
+end

package/src/core/MeganavItemsDesktop/component.html.erb

@@ -0,0 +1,17 @@
+<ul class="hidden md:flex" data-id="meganav-items-desktop">
+  <% panels.each do |panel| %>
+    <li class="ui-meganav-item">
+      <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], aria_label: panel[:label], theme_name: @theme_name)) do %>
+        <span class="hidden lg:inline"><%= panel[:label] %></span>
+        <span class="lg:hidden"><%= panel[:short_label] %></span>
+      <% end %>
+
+      <%= content_tag :div, class: "ui-meganav-panel invisible #{bg_css(panel[:id])}", data: { id: "meganav-panel" }, id: panel[:id] do %>
+        <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
+      <% end %>
+    </li>
+  <% end %>
+  <li>
+    <%= link_to "Pricing", abs_url("/pricing"), data: { id: "meganav-link" }, class: ["ui-meganav-link", "h-64", "items-center", "flex", theme(:text_color)] %>
+  </li>
+</ul>

package/src/core/MeganavItemsDesktop/component.rb

@@ -0,0 +1,23 @@
+module AblyUi
+  module Core
+    class MeganavItemsDesktop < ViewComponent::Base
+      include MeganavConfig
+      include Util
+
+      attr_reader :url_base
+
+      def initialize(theme_name:, url_base:)
+        @theme_name = theme_name
+        @url_base = url_base
+      end
+
+      def bg_css(panel_id)
+        if %w[products-panel use-cases-panel].include?(panel_id)
+          'ui-meganav-panel-split-bg'
+        else
+          ''
+        end
+      end
+    end
+  end
+end