@ably/ui 8.7.0-dev.6ce15a7 → 8.7.0-dev.6dec76a

package/src/core/Meganav/component.json

@@ -30,7 +30,7 @@
   },
   "panels": [
     { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
-    { "label": "Use Cases & Solutions", "shortLabel": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
+    { "label": "Solutions", "shortLabel": "Solutions", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
     { "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
     { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }
   ]

package/src/core/Meganav/component.jsx

@@ -86,7 +86,7 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
       {notice && <Notice {...notice.props} config={notice.config} />}
       <div className="ui-meganav ui-grid-px">
         <div className="mr-24">
-          <Logo dataId="meganav-logo" href={urlBase} />
+          <Logo dataId="meganav-logo" href={urlBase} logoUrl={paths.logo} />
         </div>
 
         <MeganavItemsDesktop panels={panels} paths={paths} theme={theme} absUrl={absUrl} />

package/src/core/Meganav/component.rb

@@ -6,6 +6,7 @@ module AblyUi
     class Meganav < ViewComponent::Base
       include MeganavConfig
       include Util
+      include SharedAssets
       attr_reader :options, :login_link, :logo_link, :url_base
 
       renders_one :notice, AblyUi::Core::Notice
@@ -35,8 +36,8 @@ module AblyUi
             class: 'AblyUi::Core::MeganavContentPlatform'
           },
           {
-            label: 'Use Cases & Solutions',
-            short_label: 'Use Cases',
+            label: 'Solutions',
+            short_label: 'Solutions',
             id: 'use-cases-panel',
             class: 'AblyUi::Core::MeganavContentUseCases'
           },

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

@@ -16,20 +16,20 @@
           <% end %>
         </li>
         <li>
-          <%= link_to abs_url("/docs/key-concepts"), class: "ui-meganav-media-with-image group" do %>
-            <%= render(AblyUi::Core::Icon.new(name: "icon-display-lightbulb-col", size: "2.5rem")) %>
+          <%= 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">Concepts</p>
-              <p class="ui-meganav-media-copy">Read about core Ably platform concepts.</p>
+              <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("/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")) %>
+          <%= 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">Quickstart guides</p>
-              <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
+              <p class="ui-meganav-media-heading">Integrations</p>
+              <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
             </div>
           <% end %>
         </li>
@@ -56,6 +56,15 @@
             </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>
       </ul>
     </div>
 

package/src/core/MeganavContentDevelopers/component.jsx

@@ -22,20 +22,20 @@ const MeganavContentDevelopers = ({ absUrl }) => (
             </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" />
+            <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">Concepts</p>
-                <p className="ui-meganav-media-copy">Read about core Ably platform concepts.</p>
+                <p className="ui-meganav-media-heading">Quickstart guides</p>
+                <p className="ui-meganav-media-copy">Documentation to help you get started quickly.</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" />
+            <a href={absUrl("/integrations")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-integrations-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 started quickly.</p>
+                <p className="ui-meganav-media-heading">Integrations</p>
+                <p className="ui-meganav-media-copy">Find out more about Ably integrations. </p>
               </div>
             </a>
           </li>
@@ -62,6 +62,15 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               </div>
             </a>
           </li>
+          <li>
+            <a href={absUrl("/reference-guide-chat")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-chat-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Chat apps reference guide</p>
+                <p className="ui-meganav-media-copy">Learn how to build chat apps with Ably.</p>
+              </div>
+            </a>
+          </li>
         </ul>
       </div>
 

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

@@ -36,12 +36,6 @@
             <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>
@@ -54,6 +48,12 @@
             <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/examples/chat-admin-privileges"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Chat Admin Privileges</p>
+            <p class="ui-meganav-media-copy">Control who can take admin actions in a digital space.</p>
+          <% end %>
+        </li>
       </ul>
 
       <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"), text_size: 'text-p3')) do %>Explore all live examples<% end %>

package/src/core/MeganavContentPlatform/component.jsx

@@ -45,12 +45,6 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
               <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>
@@ -63,6 +57,12 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
               <p className="ui-meganav-media-copy">See when a user is typing a message.</p>
             </a>
           </li>
+          <li>
+            <a href={absUrl("/examples/chat-admin-privileges")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Chat Admin Privileges</p>
+              <p className="ui-meganav-media-copy">Control who can take admin actions in a digital space.</p>
+            </a>
+          </li>
         </ul>
         <FeaturedLink url={absUrl("/examples")} textSize="text-p3">
           Explore all live examples

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

@@ -3,42 +3,51 @@
   <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">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-live-updates-results-metrics-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-virtual-events", 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("/solutions/extend-kafka-to-the-edge"), 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">Extend Kafka to the edge</p>
+              <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
             </div>
           <% end %>
         </li>
@@ -58,7 +67,7 @@
         </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-heading">FinTech</p>
             <p class="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
           <% end %>
         </li>
@@ -80,6 +89,14 @@
             <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-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">
+        &nbsp;
+      </h3>
+      <ul aria-labelledby="meganav-use-cases-panel-solutions">
         <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 +123,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,42 +9,51 @@ 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">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-live-updates-results-metrics-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-virtual-events" 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("/solutions/extend-kafka-to-the-edge")} 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">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">Extend Kafka to the edge</p>
+                <p className="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
               </div>
             </a>
           </li>
@@ -64,7 +73,7 @@ const MeganavContentUseCases = ({ absUrl }) => (
           </li>
           <li>
             <a href={absUrl("/solutions/fintech")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Fintech</p>
+              <p className="ui-meganav-media-heading">FinTech</p>
               <p className="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
             </a>
           </li>
@@ -86,6 +95,14 @@ 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-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">
+          &nbsp;
+        </h3>
+        <ul aria-labelledby="meganav-use-cases-panel-solutions">
           <li>
             <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-meganav-media group">
               <p className="ui-meganav-media-heading">eCommerce & Retail</p>
@@ -112,26 +129,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/MeganavSearchSuggestions/component.html.erb

@@ -12,7 +12,7 @@
       <%= link_to 'Publish/Subscribe Messaging', abs_url("/docs/core-features/pubsub"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>
     <li class="py-12 pl-8 flex-shrink-0">
-      <%= link_to 'Platform', abs_url("/docs/how-ably-works"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
+      <%= link_to 'Platform', abs_url("/platform"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>
   </ul>
 

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
 

package/src/core/icons/github.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.4 0 0 5.41945 0 12.0432C0 17.3623 3.4 21.8785 8.2 23.4843C8.8 23.5846 9 23.1832 9 22.8821C9 22.581 9 21.8785 9 20.8749C5.7 21.5774 5 19.2692 5 19.2692C4.5 17.8641 3.7 17.4627 3.7 17.4627C2.6 16.7601 3.8 16.7602 3.8 16.7602C5 16.8605 5.6 17.9645 5.6 17.9645C6.7 19.771 8.4 19.2692 9.1 18.9681C9.2 18.1652 9.5 17.6634 9.9 17.3623C7.1 17.0612 4.3 16.0576 4.3 11.4411C4.3 10.1364 4.8 9.03242 5.5 8.22953C5.5 7.82809 5 6.62377 5.7 5.01801C5.7 5.01801 6.7 4.71693 9 6.22233C10 5.92125 11 5.82089 12 5.82089C13 5.82089 14 5.92125 15 6.22233C17.3 4.71693 18.3 5.01801 18.3 5.01801C19 6.72413 18.5 7.92845 18.4 8.22953C19.2 9.03242 19.6 10.1364 19.6 11.4411C19.6 16.0576 16.8 17.0612 14.1 17.3623C14.5 17.7638 14.9 18.4663 14.9 19.5702C14.9 21.176 14.9 22.4807 14.9 22.8821C14.9 23.1832 15.1 23.5846 15.7 23.4843C20.6 21.8785 24 17.3623 24 12.0432C24 5.41945 18.6 0 12 0Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.4 0 0 5.41945 0 12.0432C0 17.3623 3.4 21.8785 8.2 23.4843C8.8 23.5846 9 23.1832 9 22.8821C9 22.581 9 21.8785 9 20.8749C5.7 21.5774 5 19.2692 5 19.2692C4.5 17.8641 3.7 17.4627 3.7 17.4627C2.6 16.7601 3.8 16.7602 3.8 16.7602C5 16.8605 5.6 17.9645 5.6 17.9645C6.7 19.771 8.4 19.2692 9.1 18.9681C9.2 18.1652 9.5 17.6634 9.9 17.3623C7.1 17.0612 4.3 16.0576 4.3 11.4411C4.3 10.1364 4.8 9.03242 5.5 8.22953C5.5 7.82809 5 6.62377 5.7 5.01801C5.7 5.01801 6.7 4.71693 9 6.22233C10 5.92125 11 5.82089 12 5.82089C13 5.82089 14 5.92125 15 6.22233C17.3 4.71693 18.3 5.01801 18.3 5.01801C19 6.72413 18.5 7.92845 18.4 8.22953C19.2 9.03242 19.6 10.1364 19.6 11.4411C19.6 16.0576 16.8 17.0612 14.1 17.3623C14.5 17.7638 14.9 18.4663 14.9 19.5702C14.9 21.176 14.9 22.4807 14.9 22.8821C14.9 23.1832 15.1 23.5846 15.7 23.4843C20.6 21.8785 24 17.3623 24 12.0432C24 5.41945 18.6 0 12 0Z" fill="currentColor" />
 </svg>

package/src/core/icons/google.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.6483 7.36875H9.1803V10.8492H14.0178C13.8092 11.9742 13.1764 12.9258 12.2225 13.5633C11.4162 14.1023 10.3873 14.4211 9.17795 14.4211C6.83655 14.4211 4.85608 12.8391 4.14827 10.7133C3.97014 10.1742 3.86702 9.59766 3.86702 9.00469C3.86702 8.41172 3.97014 7.83516 4.14827 7.29609C4.85842 5.17266 6.83889 3.59063 9.1803 3.59063C10.4998 3.59063 11.6834 4.04531 12.6162 4.93594L15.1944 2.35547C13.6358 0.902344 11.6037 0.0117188 9.1803 0.0117188C5.66702 0.0117188 2.62717 2.02734 1.14827 4.96641C0.538892 6.18047 0.192017 7.55391 0.192017 9.00703C0.192017 10.4602 0.538892 11.8312 1.14827 13.0453C2.62717 15.9844 5.66702 18 9.1803 18C11.6084 18 13.6428 17.1938 15.1287 15.8203C16.828 14.2547 17.81 11.9484 17.81 9.20859C17.81 8.57109 17.7537 7.95937 17.6483 7.36875Z" fill="currentColor" />
+</svg>