Improve svg loading on landing pages

docs/_index.md

@@ -49,9 +49,11 @@ aliases:
 </a>
 </div>
 
-<img src="platform/platform-all.svg" alt="Platform diagram with build elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="platform-all" style="width:800px" >
-<img src="platform/platform-build-all.svg" alt="Platform diagram with connect elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="build-platform" style="width:800px" >
-<img src="platform/platform-data-all.svg" alt="Platform diagram with apps element highlighted" class="aligncenter imgzoom medium-zoom-image" id="data-platform" style="width:800px" >
-<img src="platform/platform-fleet-all.svg" alt="Platform diagram with motion elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="fleet-platform" style="width:800px" >
+<div class="img-overlay-wrap">
+  <img src="../platform/platform-all.svg" alt="Platform diagram" id="fleet-platform-all" class="aligncenter overview" >
+  <img src="platform/platform-build-all.svg" alt="Platform diagram with connect elements highlighted" class="aligncenter overlay-platform" id="build-platform" >
+  <img src="platform/platform-data-all.svg" alt="Platform diagram with apps element highlighted" class="aligncenter overlay-platform" id="data-platform" >
+  <img src="platform/platform-fleet-all.svg" alt="Platform diagram with motion elements highlighted" class="aligncenter overlay-platform" id="fleet-platform" >
+</div>
 
 </div>

docs/data-ai/_index.md

@@ -44,9 +44,11 @@ You can also monitor your machines through teleop, power your application logic,
 {{< /cards >}}
 {{< /how-to-expand >}}
 
-<img src="../platform/platform-data-all.svg" alt="Platform diagram with data elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="data-platform-all" style="width:800px" >
-<img src="../platform/platform-data-capture.svg" alt="Platform diagram with data capture elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="data-platform-capture" style="width:800px" >
-<img src="../platform/platform-data-work.svg" alt="Platform diagram with data usage elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="data-platform-work" style="width:800px" >
-<img src="../platform/platform-data-ai.svg" alt="Platform diagram with AI elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="data-platform-ai" style="width:800px" >
+<div class="img-overlay-wrap">
+  <img src="../platform/platform-all.svg" alt="Platform diagram" id="fleet-platform-all" class="aligncenter overview" >
+  <img src="../platform/platform-data-capture.svg" alt="Platform diagram with data capture elements highlighted" class="aligncenter overlay" id="data-platform-capture" >
+  <img src="../platform/platform-data-work.svg" alt="Platform diagram with data usage elements highlighted" class="aligncenter overlay" id="data-platform-work" >
+  <img src="../platform/platform-data-ai.svg" alt="Platform diagram with AI elements highlighted" class="aligncenter overlay" id="data-platform-ai" >
+</div>
 
 </div>

docs/manage/_index.md

@@ -54,9 +54,11 @@ Viam's fleet management tooling allows you to remotely deploy and manage softwar
 {{< /cards >}}
 {{< /how-to-expand >}}
 
-<img src="../platform/platform-fleet-all.svg" alt="Platform diagram with deploy and manage elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="fleet-platform-all" style="width:800px" >
-<img src="../platform/platform-fleet-management.svg" alt="Platform diagram with deploy and manage elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="fleet-platform-management" style="width:800px" >
-<img src="../platform/platform-fleet-team.svg" alt="Platform diagram with team management elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="fleet-platform-team" style="width:800px" >
-<img src="../platform/platform-fleet-monitor.svg" alt="Platform diagram with monitoring elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="fleet-platform-monitor" style="width:800px" >
+<div class="img-overlay-wrap">
+  <img src="../platform/platform-all.svg" alt="Platform diagram" id="fleet-platform-all" class="aligncenter overview" >
+  <img src="../platform/platform-fleet-team.svg" alt="Platform diagram with team management elements highlighted" id="fleet-platform-team" class="aligncenter overlay">
+  <img src="../platform/platform-fleet-management.svg" alt="Platform diagram with deploy and manage elements highlighted" class="aligncenter overlay" id="fleet-platform-management" >
+  <img src="../platform/platform-fleet-monitor.svg" alt="Platform diagram with monitoring elements highlighted" class="aligncenter overlay" id="fleet-platform-monitor" >
+</div>
 
 </div>

docs/operate/_index.md

@@ -45,9 +45,11 @@ To get started, install Viam on any device and integrate your hardware. Then you
 {{< /cards >}}
 {{< /how-to-expand >}}
 
-<img src="../platform/platform-build-all.svg" alt="Platform diagram with build elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="build-platform-all" style="width:800px" >
-<img src="../platform/platform-build-connect.svg" alt="Platform diagram with connect elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="build-platform-connect" style="width:800px" >
-<img src="../platform/platform-build-apps.svg" alt="Platform diagram with apps element highlighted" class="aligncenter imgzoom medium-zoom-image" id="build-platform-apps" style="width:800px" >
-<img src="../platform/platform-build-motion.svg" alt="Platform diagram with motion elements highlighted" class="aligncenter imgzoom medium-zoom-image" id="build-platform-motion" style="width:800px" >
+<div class="img-overlay-wrap">
+  <img src="../platform/platform-all.svg" alt="Platform diagram" id="fleet-platform-all" class="aligncenter overview" >
+  <img src="../platform/platform-build-connect.svg" alt="Platform diagram with connect elements highlighted" class="aligncenter overlay" id="build-platform-connect" >
+  <img src="../platform/platform-build-apps.svg" alt="Platform diagram with apps element highlighted" class="aligncenter overlay" id="build-platform-apps" >
+  <img src="../platform/platform-build-motion.svg" alt="Platform diagram with motion elements highlighted" class="aligncenter overlay" id="build-platform-motion" >
+</div>
 
 </div>

static/js/embed.js

@@ -61919,33 +61919,6 @@ const inkeepWidgetSearch = window.Inkeep().embed({
           // ...optional settings
           },
       },
-      aiChatSettings: {
-        chatSubjectName: "Viam",
-        botAvatarSrcUrl: "https://cdn.prod.website-files.com/62fba5686b6d47fe2a1ed2a6/62fba8f4a8ca05f38a2b497f_viam-logo-webclip.png",
-        botAvatarDarkSrcUrl: "https://storage.googleapis.com/organization-image-assets/viam-botAvatarDarkSrcUrl-1721328398594.svg",
-        getHelpCallToActions: [
-            {
-                name: "Email",
-                url: "mailto:[email protected]",
-                icon: {
-                    builtIn: "IoMail"
-                }
-            },
-            {
-                name: "Discord",
-                url: "https://discord.gg/viam",
-                icon: {
-                    builtIn: "FaDiscord"
-                }
-            }
-        ],
-        quickQuestions: [
-            "How to install Viam on microcontrollers?",
-            "How to deploy a person detection model?",
-            "How can I ingest data from machines?",
-            "How to query sensor data with third-party tools?",
-        ],
-      },
       modalSettings: {
           // optional settings
           isShortcutKeyEnabled,