From ab7c5854cd6967cf0ff058fad3b0cf2f7b3f9e75 Mon Sep 17 00:00:00 2001
From: Arti Mathanda <arti.mathanda@ably.com>
Date: Wed, 17 Aug 2022 15:24:58 +0100
Subject: [PATCH] feat: Updates Meganav links for realtime examples

---
 .../MeganavContentPlatform/component.html.erb | 42 +++++++++--------
 src/core/MeganavContentPlatform/component.jsx | 45 ++++++++++---------
 2 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/core/MeganavContentPlatform/component.html.erb b/src/core/MeganavContentPlatform/component.html.erb
index 6c9599daa..c28206450 100644
--- a/src/core/MeganavContentPlatform/component.html.erb
+++ b/src/core/MeganavContentPlatform/component.html.erb
@@ -14,41 +14,47 @@
   </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">
+    <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">Examples</h3>
+    <ul aria-labelledby="meganav-platform-panel-list-examples">
       <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>
+        <%= 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("/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>
+        <%= 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("/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>
+        <%= 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("/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>
+        <%= 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("/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>
+        <%= 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 %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"))) do %>Explore all live examples<% end %>
   </div>
 
   <div>
diff --git a/src/core/MeganavContentPlatform/component.jsx b/src/core/MeganavContentPlatform/component.jsx
index 2ed29f3ce..ed15e3c94 100644
--- a/src/core/MeganavContentPlatform/component.jsx
+++ b/src/core/MeganavContentPlatform/component.jsx
@@ -19,43 +19,48 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
     </div>
 
     <div>
-      <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-our-features">
-        Our features
+      <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-examples">
+        Examples
       </h3>
-      <ul aria-labelledby="meganav-platform-panel-list-our-features">
+      <ul aria-labelledby="meganav-platform-panel-list-examples">
         <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 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("/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 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("/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 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("/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 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("/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 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("/platform")}>Explore all platform features</FeaturedLink>
+      <FeaturedLink url={absUrl("/examples")}>Explore all live examples</FeaturedLink>
     </div>
 
     <div>