@ably/ui 8.1.1 → 8.2.1-dev.ade9a3d

package/src/core/MeganavContentDevelopers/component.jsx

@@ -1,95 +1,114 @@
 import React from "react";
 import T from "prop-types";
 
-import FeaturedLink from "../FeaturedLink/component.jsx";
 import Icon from "../Icon/component.jsx";
 
 const MeganavContentDevelopers = ({ absUrl }) => (
-  <section className="ui-meganav-content ui-grid-gap md:grid-cols-3">
-    <div>
-      <h3 className="ui-meganav-overline md:mb-8">Documentation</h3>
-      <div className="mb-16">
-        <form className="relative" action={absUrl("/search")} method="get">
-          <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="absolute top-8 left-8 pt-1 mt-1" />
-          <input type="search" name="q" className="ui-input pl-48" placeholder="Search docs" />
-        </form>
+  <div className="flex">
+    <div className="ui-meganav-content-spacer"></div>
+    <section className="grid grid-cols-12 ui-grid-gap-x">
+      <div className="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 className="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
+          Explore
+        </h3>
+        <ul aria-labelledby="meganav-developers-panel-explore">
+          <li>
+            <a href={absUrl("/docs")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-docs-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Documentation</p>
+                <p className="ui-meganav-media-copy">Technical guides to help you build with Ably.</p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/docs/key-concepts")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-lightbulb-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Concepts</p>
+                <p className="ui-meganav-media-copy">Read about core Ably platform concepts.</p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/docs/quick-start-guide")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-quickstart-guides-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Quickstart guides</p>
+                <p className="ui-meganav-media-copy">Documentation to help you get up and running quickly.</p>
+              </div>
+            </a>
+          </li>
+        </ul>
       </div>
-      <p className="text-p1 font-medium text-cool-black mb-20">
-        Docs, quick start guides, tutorials, and API reference to help you start building with Ably’s platform and APIs.
-      </p>
 
-      <FeaturedLink url={absUrl("/docs")}>Visit Documentation</FeaturedLink>
-    </div>
-
-    <div>
-      <h3 className="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
-        EXPLORE
-      </h3>
-      <ul aria-labelledby="meganav-developers-panel-explore">
-        <li>
-          <a href={absUrl("/integrations")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Third-party integrations & plugins</p>
-            <p className="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/protocols")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Multi-protocol messaging</p>
-            <p className="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/hub")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Streaming data sources</p>
-            <p className="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/periodic-table-of-realtime")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">The Periodic Table of Realtime</p>
-            <p className="ui-meganav-media-copy">A compendium for all things realtime and event-driven.</p>
-          </a>
-        </li>
-      </ul>
-    </div>
+      <div className="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+        <ul className="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
+          <li>
+            <a href={absUrl("/download")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-sdks-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">SDKs</p>
+                <p className="ui-meganav-media-copy">Download an SDK to help you build realtime apps faster.</p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/tutorials")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-tutorials-demos-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Tutorials & Demos</p>
+                <p className="ui-meganav-media-copy">Get stuck in with our hands-on resources. </p>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
 
-    <div>
-      <h3 className="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
-        Quick links
-      </h3>
-      <ul aria-labelledby="meganav-developers-panel-quick-links">
-        <li>
-          <a href={absUrl("/download")} className="group ui-meganav-media py-12">
-            <p className="ui-meganav-media-heading">Download an SDK</p>
-          </a>
-        </li>
-        <li>
-          <a href="https://changelog.ably.com/" className="group ui-meganav-media py-12">
-            <p className="ui-meganav-media-heading">Platform changelog</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/support")} className="group ui-meganav-media py-12">
-            <p className="ui-meganav-media-heading">Support & FAQs</p>
-          </a>
-        </li>
-        <li>
-          <a href="https://status.ably.com/" className="group ui-meganav-media py-12">
-            <p className="ui-meganav-media-heading">
-              Status
-              <iframe
-                src="https://status.ably.com/embed/icon"
-                allowtransparency="true"
-                frameBorder="0"
-                scrolling="no"
-                className="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
-              ></iframe>
-            </p>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </section>
+      <div className="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 className="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
+          Quick links
+        </h3>
+        <ul aria-labelledby="meganav-developers-panel-quick-links">
+          <li>
+            <a href="https://discord.gg/jwBPhEZ9g5" className="group ui-meganav-media py-12">
+              <p className="ui-meganav-media-heading">Discord</p>
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/ably" className="group ui-meganav-media py-12">
+              <p className="ui-meganav-media-heading">Github</p>
+            </a>
+          </li>
+          <li>
+            <a href="https://changelog.ably.com/" className="group ui-meganav-media py-12">
+              <p className="ui-meganav-media-heading">Changelog</p>
+            </a>
+          </li>
+          <li>
+            <a href="https://status.ably.com/" className="group ui-meganav-media py-12">
+              <p className="ui-meganav-media-heading">
+                Status
+                <iframe
+                  src="https://status.ably.com/embed/icon"
+                  allowtransparency="true"
+                  frameBorder="0"
+                  scrolling="no"
+                  className="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
+                ></iframe>
+              </p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/support")} className="group ui-meganav-media py-12">
+              <p className="ui-meganav-media-heading">Support & FAQs</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
+    <div className="ui-meganav-content-spacer"></div>
+  </div>
 );
 
 MeganavContentDevelopers.propTypes = {

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

@@ -1,91 +1,101 @@
-<section class="ui-meganav-content ui-grid-gap sm:grid-cols-2 md:grid-cols-3">
-  <div class="sm:col-span-full md:col-span-1">
-    <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>
+<div class="flex">
+  <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
+  <section class="grid grid-cols-12 ui-grid-gap-x">
+    <div class="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+      <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="text-p2 font-medium text-cool-black mb-8">
-      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>
+      <p class="text-p2 font-medium text-cool-black mb-8">
+        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"))) do %>Explore how it works<% end %>
-  </div>
+      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"))) do %>Explore how it works<% end %>
+    </div>
 
-  <div>
-    <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-our-features">Our features</h3>
-    <ul aria-labelledby="meganav-platform-panel-list-our-features">
-      <li>
-        <%= link_to abs_url("/pub-sub-messaging"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Publish/subscribe messaging</p>
-          <p class="ui-meganav-media-copy">Feature-rich pub/sub messaging to power any realtime requirement.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/push-notifications"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Push notifications</p>
-          <p class="ui-meganav-media-copy">Deliver native notifications at scale with our unified API.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/integrations"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Third-party integrations</p>
-          <p class="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/protocols"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Multi-protocol messaging</p>
-          <p class="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/hub"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Streaming data sources</p>
-          <p class="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
-        <% end %>
-      </li>
-    </ul>
+    <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">
+      <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">Our Examples</h3>
+      <ul aria-labelledby="meganav-platform-panel-list-examples">
+        <li>
+          <%= link_to abs_url("/examples/avatar-stack"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Avatar Stack</p>
+            <p class="ui-meganav-media-copy">See who is connected in a digital space.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/examples/emoji-reactions"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Emoji Reactions</p>
+            <p class="ui-meganav-media-copy">React with an emoji to a message.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/examples/activity-feed"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Activity Feed</p>
+            <p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/examples/live-charts"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Live Charts</p>
+            <p class="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Live Cursors</p>
+            <p class="ui-meganav-media-copy">Track all cursors in realtime.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/examples/typing-indicator"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Typing Indicator</p>
+            <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
+          <% end %>
+        </li>
+      </ul>
 
-    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"))) do %>Explore all platform features<% end %>
-  </div>
+      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"))) do %>Explore all live examples<% end %>
+    </div>
 
-  <div>
-    <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-our-technology">Our technology</h3>
-    <ul class="mb-8" aria-labelledby="meganav-platform-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">We provide predictability so you can be confident your realtime application will always perform as expected.</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">We guarantee in-order data delivery, 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">Redundant at regional and global levels with 99.999% uptime SLAs.</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">Elastic, battle-tested global infrastructure for massive scale.</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 200+ PoPs.</p>
-        <% end %>
-      </li>
-    </ul>
+    <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" id="meganav-platform-panel-list-our-technology">Our technology</h3>
+      <ul class="mb-8" aria-labelledby="meganav-platform-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"))) do %>Explore our technology<% end %>
-  </div>
-</section>
+      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"))) do %>Explore Four Pillars of Dependability<% end %>
+    </div>
+  </section>
+  <div class="ui-meganav-content-spacer"></div>
+</div>

package/src/core/MeganavContentPlatform/component.jsx

@@ -4,102 +4,109 @@ import T from "prop-types";
 import FeaturedLink from "../FeaturedLink/component.jsx";
 
 const MeganavContentPlatform = ({ paths, absUrl }) => (
-  <section className="ui-meganav-content ui-grid-gap sm:grid-cols-2 md:grid-cols-3">
-    <div className="sm:col-span-full md:col-span-1">
-      <div className="flex mb-20">
-        <img src={paths.ablyStack} alt="Ably homepage" />
-        <h3 className="ui-meganav-overline ml-24">The Ably Platform</h3>
-      </div>
-      <p className="text-p2 font-medium text-cool-black mb-8">
-        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>
-
-      <FeaturedLink url={absUrl("/platform")}>Explore how it works</FeaturedLink>
-    </div>
+  <div className="flex">
+    <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
+    <section className="grid grid-cols-12 ui-grid-gap-x">
+      <div className="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+        <div className="flex mb-20">
+          <img src={paths.ablyStack} alt="Ably homepage" />
+          <h3 className="ui-meganav-overline ml-24">The Ably Platform</h3>
+        </div>
+        <p className="text-p2 font-medium text-cool-black mb-8">
+          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>
 
-    <div>
-      <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-our-features">
-        Our features
-      </h3>
-      <ul aria-labelledby="meganav-platform-panel-list-our-features">
-        <li>
-          <a href={absUrl("/pub-sub-messaging")} className="group ui-meganav-media">
-            <p className="ui-meganav-media-heading">Publish/subscribe messaging</p>
-            <p className="ui-meganav-media-copy">Feature-rich pub/sub messaging to power any realtime requirement.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/push-notifications")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Push notifications</p>
-            <p className="ui-meganav-media-copy">Deliver native notifications at scale with our unified API.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/integrations")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Third-party integrations</p>
-            <p className="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/protocols")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Multi-protocol messaging</p>
-            <p className="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/hub")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Streaming data sources</p>
-            <p className="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
-          </a>
-        </li>
-      </ul>
+        <FeaturedLink url={absUrl("/platform")}>Explore how it works</FeaturedLink>
+      </div>
 
-      <FeaturedLink url={absUrl("/platform")}>Explore all platform features</FeaturedLink>
-    </div>
+      <div className="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">
+        <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-examples">
+          Our Examples
+        </h3>
+        <ul aria-labelledby="meganav-platform-panel-list-examples">
+          <li>
+            <a href={absUrl("/examples/avatar-stack")} className="group ui-meganav-media">
+              <p className="ui-meganav-media-heading">Avatar Stack</p>
+              <p className="ui-meganav-media-copy">See who is connected in a digital space.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/examples/emoji-reactions")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Emoji Reactions</p>
+              <p className="ui-meganav-media-copy">React with an emoji to a message.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/examples/activity-feed")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Activity Feed</p>
+              <p className="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/examples/live-charts")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Live Charts</p>
+              <p className="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/examples/live-cursors")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Live Cursors</p>
+              <p className="ui-meganav-media-copy">Track all cursors in realtime.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/examples/typing-indicator")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Typing Indicator</p>
+              <p className="ui-meganav-media-copy">See when a user is typing a message.</p>
+            </a>
+          </li>
+        </ul>
+        <FeaturedLink url={absUrl("/examples")}>Explore all live examples</FeaturedLink>
+      </div>
 
-    <div>
-      <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-our-technology">
-        Our technology
-      </h3>
-      <ul className="mb-8" aria-labelledby="meganav-platform-panel-list-our-technology">
-        <li>
-          <a href={absUrl("/four-pillars-of-dependability#performance")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Predictable performance</p>
-            <p className="ui-meganav-media-copy">
-              We provide predictability so you can be confident your realtime application will always perform as expected.
-            </p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/four-pillars-of-dependability#integrity")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Guaranteed ordering & delivery</p>
-            <p className="ui-meganav-media-copy">We guarantee in-order data delivery, even after disconnections.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/four-pillars-of-dependability#reliability")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Fault tolerant infrastructure</p>
-            <p className="ui-meganav-media-copy">Redundant at regional and global levels with 99.999% uptime SLAs.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/four-pillars-of-dependability#availability")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">High scalability & availability</p>
-            <p className="ui-meganav-media-copy">Elastic, battle-tested global infrastructure for massive scale.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/network")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Global edge network</p>
-            <p className="ui-meganav-media-copy">An edge network of 15 core routing datacenters and 200+ PoPs.</p>
-          </a>
-        </li>
-      </ul>
+      <div className="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 className="ui-meganav-overline" id="meganav-platform-panel-list-our-technology">
+          Our technology
+        </h3>
+        <ul className="mb-8" aria-labelledby="meganav-platform-panel-list-our-technology">
+          <li>
+            <a href={absUrl("/four-pillars-of-dependability#performance")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Predictable performance</p>
+              <p className="ui-meganav-media-copy">A low-latency and high-throughput global network.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/four-pillars-of-dependability#integrity")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Guaranteed ordering & delivery</p>
+              <p className="ui-meganav-media-copy">Data is delivered - in order - even after disconnections.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/four-pillars-of-dependability#reliability")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Fault tolerant infrastructure</p>
+              <p className="ui-meganav-media-copy">Redundancy is built in at global and regional levels.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/four-pillars-of-dependability#availability")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">High scalability & availability</p>
+              <p className="ui-meganav-media-copy">Built for scale with legitimate 99.999% uptime SLAs.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/network")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Global edge network</p>
+              <p className="ui-meganav-media-copy">An edge network of 15 core routing datacenters and 205+ PoPs.</p>
+            </a>
+          </li>
+        </ul>
 
-      <FeaturedLink url={absUrl("/four-pillars-of-dependability")}>Explore our technology</FeaturedLink>
-    </div>
-  </section>
+        <FeaturedLink url={absUrl("/four-pillars-of-dependability")}>Explore Four Pillars of Dependability</FeaturedLink>
+      </div>
+    </section>
+    <div className="ui-meganav-content-spacer"></div>
+  </div>
 );
 
 MeganavContentPlatform.propTypes = {