From 6c4955877c4e5e5878cb25a862cd1115493f5f83 Mon Sep 17 00:00:00 2001
From: Dominik Piatek <dominik.piatek@ably.io>
Date: Wed, 4 May 2022 10:27:29 +0100
Subject: [PATCH] Add Fintech to Use Cases panel and reorder items

---
 .../MeganavContentUseCases/component.html.erb | 66 ++++++++++---------
 src/core/MeganavContentUseCases/component.jsx | 66 ++++++++++---------
 2 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/src/core/MeganavContentUseCases/component.html.erb b/src/core/MeganavContentUseCases/component.html.erb
index a09694f76..6aa3b7adf 100644
--- a/src/core/MeganavContentUseCases/component.html.erb
+++ b/src/core/MeganavContentUseCases/component.html.erb
@@ -2,12 +2,6 @@
   <div>
     <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry-use-cases">By use case</h3>
     <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
-      <li>
-        <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
-          <p class="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
-        <% end %>
-      </li>
       <li>
         <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
           <p class="ui-meganav-media-heading">EdTech</p>
@@ -15,27 +9,33 @@
         <% 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 asset tracking, live transit updates, race-critical diagnostics, and more.</p>
+        <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Virtual Events</p>
+          <p class="ui-meganav-media-copy">Power engaging virtual events with interactive realtime features.</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 customers with realtime technology that gives them a competitive edge.</p>
+        <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Sports & Media</p>
+          <p class="ui-meganav-media-copy">Deliver global realtime experiences to keep fans informed, engaged, entertained.</p>
         <% end %>
       </li>
       <li>
-        <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Healthcare</p>
-          <p class="ui-meganav-media-copy">Provide HIPAA-compliant realtime apps healthcare professionals can depend on.</p>
+        <%= 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 fast, personalised fintech data in realtime to mobile & web customers.</p>
         <% end %>
       </li>
       <li>
-        <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Virtual Events</p>
-          <p class="ui-meganav-media-copy">Power engaging virtual events with interactive realtime features.</p>
+        <%= 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 interactive gaming experiences that are wicked fast and utterly reliable.</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 asset tracking, live transit updates, race-critical diagnostics, and more.</p>
         <% end %>
       </li>
     </ul>
@@ -44,21 +44,15 @@
   <div>
     <ul class="md:mt-40" aria-labelledby="meganav-use-cases-panel-industry-use-cases">
       <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 of any kind in realtime.</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</p>
-          <p class="ui-meganav-media-copy">Deliver global realtime experiences to keep fans informed, engaged, entertained.</p>
+        <%= 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 customers with realtime technology that gives them a competitive edge.</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 interactive gaming experiences that are wicked fast and utterly reliable.</p>
+        <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Healthcare</p>
+          <p class="ui-meganav-media-copy">Provide HIPAA-compliant realtime apps healthcare professionals can depend on.</p>
         <% end %>
       </li>
       <li>
@@ -67,12 +61,24 @@
           <p class="ui-meganav-media-copy">Enable realtime pricing, inventory, and transactions to enrich user 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 of any kind in realtime.</p>
+        <% end %>
+      </li>
       <li>
         <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
           <p class="ui-meganav-media-heading">Asset Tracking</p>
           <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimized for last mile logistics, food delivery applications, and urban mobility services.</p>
         <% end %>
       </li>
+      <li>
+        <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
+          <p class="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
+        <% end %>
+      </li>
     </ul>
   </div>
 </section>
diff --git a/src/core/MeganavContentUseCases/component.jsx b/src/core/MeganavContentUseCases/component.jsx
index 754f4825c..dcf8535c9 100644
--- a/src/core/MeganavContentUseCases/component.jsx
+++ b/src/core/MeganavContentUseCases/component.jsx
@@ -8,12 +8,6 @@ const MeganavContentUseCases = ({ absUrl }) => (
         By use case
       </h3>
       <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
-        <li>
-          <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
-            <p className="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
-          </a>
-        </li>
         <li>
           <a href={absUrl("/solutions/edtech")} className="ui-meganav-media group">
             <p className="ui-meganav-media-heading">EdTech</p>
@@ -21,27 +15,33 @@ const MeganavContentUseCases = ({ absUrl }) => (
           </a>
         </li>
         <li>
-          <a href={absUrl("/solutions/automotive-logistics-and-mobility")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
-            <p className="ui-meganav-media-copy">Power asset tracking, live transit updates, race-critical diagnostics, and more.</p>
+          <a href={absUrl("/solutions/virtual-events")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Virtual Events</p>
+            <p className="ui-meganav-media-copy">Power engaging virtual events with interactive realtime features.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/solutions/b2b-platforms")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">B2B Platforms</p>
-            <p className="ui-meganav-media-copy">Empower customers with realtime technology that gives them a competitive edge.</p>
+          <a href={absUrl("/solutions/sports-and-media")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Sports & Media</p>
+            <p className="ui-meganav-media-copy">Deliver global realtime experiences to keep fans informed, engaged, entertained.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/solutions/healthcare")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Healthcare</p>
-            <p className="ui-meganav-media-copy">Provide HIPAA-compliant realtime apps healthcare professionals can depend on.</p>
+          <a href={absUrl("/solutions/fintech")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Fintech</p>
+            <p className="ui-meganav-media-copy">Deliver fast, personalised fintech data in realtime to mobile & web customers.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/solutions/virtual-events")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Virtual Events</p>
-            <p className="ui-meganav-media-copy">Power engaging virtual events with interactive realtime features.</p>
+          <a href={absUrl("/solutions/gaming")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Gaming</p>
+            <p className="ui-meganav-media-copy">Power interactive gaming experiences that are wicked fast and utterly reliable.</p>
+          </a>
+        </li>
+        <li>
+          <a href={absUrl("/solutions/automotive-logistics-and-mobility")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
+            <p className="ui-meganav-media-copy">Power asset tracking, live transit updates, race-critical diagnostics, and more.</p>
           </a>
         </li>
       </ul>
@@ -50,21 +50,15 @@ const MeganavContentUseCases = ({ absUrl }) => (
     <div>
       <ul className="md:mt-40">
         <li>
-          <a href={absUrl("/solutions/iot-and-connected-devices")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">IoT & Connected Devices</p>
-            <p className="ui-meganav-media-copy">Monitor and control global IoT deployments of any kind in realtime.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/sports-and-media")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Sports & Media</p>
-            <p className="ui-meganav-media-copy">Deliver global realtime experiences to keep fans informed, engaged, entertained.</p>
+          <a href={absUrl("/solutions/b2b-platforms")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">B2B Platforms</p>
+            <p className="ui-meganav-media-copy">Empower customers with realtime technology that gives them a competitive edge.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/solutions/gaming")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Gaming</p>
-            <p className="ui-meganav-media-copy">Power interactive gaming experiences that are wicked fast and utterly reliable.</p>
+          <a href={absUrl("/solutions/healthcare")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Healthcare</p>
+            <p className="ui-meganav-media-copy">Provide HIPAA-compliant realtime apps healthcare professionals can depend on.</p>
           </a>
         </li>
         <li>
@@ -73,6 +67,12 @@ const MeganavContentUseCases = ({ absUrl }) => (
             <p className="ui-meganav-media-copy">Enable realtime pricing, inventory, and transactions to enrich user experiences.</p>
           </a>
         </li>
+        <li>
+          <a href={absUrl("/solutions/iot-and-connected-devices")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">IoT & Connected Devices</p>
+            <p className="ui-meganav-media-copy">Monitor and control global IoT deployments of any kind in realtime.</p>
+          </a>
+        </li>
         <li>
           <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media group">
             <p className="ui-meganav-media-heading">Asset Tracking</p>
@@ -81,6 +81,12 @@ const MeganavContentUseCases = ({ absUrl }) => (
             </p>
           </a>
         </li>
+        <li>
+          <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
+            <p className="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
+          </a>
+        </li>
       </ul>
     </div>
   </section>