@ably/ui 8.7.0-dev.68ea318 → 8.7.0-dev.69d187a

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

@@ -16,47 +16,29 @@
     </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-platform-panel-list-examples">Our Examples</h3>
+      <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">
+        Products
+      </h3>
       <ul class="mb-16" 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>
+          <%= 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("/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>
+          <%= 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("/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>
+          <%= link_to abs_url("/livesync"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">LiveSync (Beta)</p>
+            <p class="ui-meganav-media-copy">Build stateful interactive applications.</p>
           <% end %>
         </li>
       </ul>
-
-      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"), text_size: 'text-p3')) do %>Explore all live examples<% end %>
     </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">

package/src/core/MeganavContentPlatform/component.jsx

@@ -24,49 +24,28 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
 
       <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 bg-white">
         <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-examples">
-          Our Examples
+          Products
         </h3>
         <ul className="mb-16" 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 href={absUrl("/solutions/channels")} className="group ui-meganav-media">
+              <p className="ui-meganav-media-heading">Pub/Sub Channels</p>
+              <p className="ui-meganav-media-copy">Build infinitely scalable realtime applications.</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 href={absUrl("/spaces")} className="group ui-meganav-media">
+              <p className="ui-meganav-media-heading">Spaces (Beta)</p>
+              <p className="ui-meganav-media-copy">Create multi-user collaborative environments.</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 href={absUrl("/livesync")} className="group ui-meganav-media">
+              <p className="ui-meganav-media-heading">LiveSync (Beta)</p>
+              <p className="ui-meganav-media-copy">Build stateful interactive applications.</p>
             </a>
           </li>
         </ul>
-        <FeaturedLink url={absUrl("/examples")} textSize="text-p3">
-          Explore all live examples
-        </FeaturedLink>
       </div>
 
       <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 bg-white">

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

@@ -3,49 +3,68 @@
   <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">
-          Use cases
+          Solutions
         </h3>
       <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
+
         <li>
-          <%= link_to abs_url("/solutions/live-updates-results-metrics"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-live-updates-results-metrics-col", size: "2.5rem")) %>
+          <%= 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 updates, results & metrics</p>
-              <p class="ui-meganav-media-copy">Deliver live updates to keep users informed.</p>
+              <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/chat"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
+          <%= 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">Chat</p>
-              <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
+              <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/virtual-events"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events-col", size: "2.5rem")) %>
+          <%= 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">Virtual Events</p>
-              <p class="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
+              <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/multi-user-virtual-spaces"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
+          <%= 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">Multi-user virtual spaces</p>
-              <p class="ui-meganav-media-copy">Build live and interactive multi-user applications.</p>
+              <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-kafka-at-the-edge-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-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
+    <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>
@@ -80,6 +99,11 @@
             <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>
@@ -106,26 +130,6 @@
         </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-use-cases-panel-solutions">
-        Solutions
-      </h3>
-      <ul aria-labelledby="meganav-use-cases-panel-solutions">
-        <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">Reliably expand Kafka’s event streaming beyond your private network.</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 optimised for last mile logistics.</p>
-          <% end %>
-        </li>
-      </ul>
-    </div>
   </section>
   <div class="ui-meganav-content-spacer"></div>
 </div>

package/src/core/MeganavContentUseCases/component.jsx

@@ -9,49 +9,67 @@ const MeganavContentUseCases = ({ absUrl }) => (
     <section className="grid grid-cols-12 ui-grid-gap-x w-full">
       <div className="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 className="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
-          Use cases
+          Solutions
         </h3>
         <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
           <li>
-            <a href={absUrl("/solutions/live-updates-results-metrics")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-live-updates-results-metrics-col" size="2.5rem" />
+            <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-chat-stack-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Live updates, results & metrics</p>
-                <p className="ui-meganav-media-copy">Deliver live updates to keep users informed.</p>
+                <p className="ui-meganav-media-heading">Live Chat</p>
+                <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale.</p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-chat-stack-col" size="2.5rem" />
+            <a href={absUrl("/solutions/multiplayer-collaboration")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Chat</p>
-                <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
+                <p className="ui-meganav-media-heading">Multiplayer Collaboration</p>
+                <p className="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/solutions/virtual-events")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-virtual-events-col" size="2.5rem" />
+            <a href={absUrl("/solutions/data-broadcast")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-data-broadcast-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Virtual Events</p>
-                <p className="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
+                <p className="ui-meganav-media-heading">Data Broadcast</p>
+                <p className="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
               </div>
             </a>
           </li>
           <li>
-            <a href={absUrl("/solutions/multi-user-virtual-spaces")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
+            <a href={absUrl("/solutions/data-synchronization")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-data-synchronization-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Data Synchronization</p>
+                <p className="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/push-notifications")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-push-notifications-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Multi-user virtual spaces</p>
-                <p className="ui-meganav-media-copy">Build live and interactive multi-user applications.</p>
+                <p className="ui-meganav-media-heading">Notifications</p>
+                <p className="ui-meganav-media-copy">Deliver cross-platform push notifications with a simple unified API.</p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-kafka-at-the-edge-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Asset Tracking (Beta)</p>
+                <p className="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
               </div>
             </a>
           </li>
         </ul>
       </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 bg-white">
+      <div className="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 className="ui-meganav-overline" id="meganav-use-cases-panel-industry">
           Industry
         </h3>
@@ -86,6 +104,11 @@ const MeganavContentUseCases = ({ absUrl }) => (
               <p className="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
             </a>
           </li>
+        </ul>
+      </div>
+
+      <div className="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" className="mt-0 md:mt-40">
           <li>
             <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-meganav-media group">
               <p className="ui-meganav-media-heading">eCommerce & Retail</p>
@@ -112,26 +135,6 @@ const MeganavContentUseCases = ({ absUrl }) => (
           </li>
         </ul>
       </div>
-
-      <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 bg-white">
-        <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
-          Solutions
-        </h3>
-        <ul aria-labelledby="meganav-use-cases-panel-solutions">
-          <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">Reliably expand Kafka’s event streaming beyond your private network.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Asset Tracking</p>
-              <p className="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
-            </a>
-          </li>
-        </ul>
-      </div>
     </section>
     <div className="ui-meganav-content-spacer"></div>
   </div>

package/src/core/core.rb

@@ -30,6 +30,10 @@ module AblyUi
     end
 
     module SharedAssets
+      def ably_logo
+        asset_path 'ably_ui/core/images/ably-logo.png'
+      end
+
       def ably_stack_path
         asset_path 'ably_ui/core/images/ably-stack.svg'
       end
@@ -38,12 +42,16 @@ module AblyUi
         asset_path 'ably_ui/core/images/icon-tech-aws.svg'
       end
 
-      def rocket_list
-        asset_path 'ably_ui/core/images/rocket-list-2021.png'
+      def highest_performer
+        asset_path 'ably_ui/core/images/high-performer-2022.png'
+      end
+
+      def highest_user_adoption
+        asset_path 'ably_ui/core/images/highest-user-adoption-2022.png'
       end
 
-      def flexible_companies
-        asset_path 'ably_ui/core/images/flexible-companies.png'
+      def users_love_us
+        asset_path 'ably_ui/core/images/users-love-us-2022.png'
       end
     end