DOCS-3806: Update front page

Author: npentrel

assets/js/index.js

@@ -83,3 +83,46 @@ if(main && scrollBtn) {
     });
     observer.observe(main);
 }
+
+if (document.querySelector('.three-cards')) {
+    const threeCards = document.querySelector('.three-cards');
+    if (threeCards) {
+        const hoverCards = threeCards.querySelectorAll('.hover-card');
+        hoverCards.forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                let elem = document.getElementById(card.classList[card.classList.length - 1]);
+                elem.style.display = 'inline-block';
+            });
+            card.addEventListener('mouseleave', () => {
+                let elem = document.getElementById(card.classList[card.classList.length - 1]);
+                elem.style.display = 'none';
+            });
+        });
+    }
+}
+
+if (document.querySelector('.hoveraction')) {
+    const threeCards = document.querySelector('.hoveraction');
+    if (threeCards) {
+        const hoverCards = threeCards.querySelectorAll('.howtoexpand');
+        let highlights = [];
+        hoverCards.forEach(c => highlights.push(c.classList[c.classList.length - 1]));
+        hoverCards.forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                let hoverElem = card.classList[card.classList.length - 1];
+                highlights.forEach(h => {
+                    if (h !== hoverElem) {
+                        let elem = document.getElementById(h);
+                        elem.style.display = 'none';
+                    }
+                });
+            });
+            card.addEventListener('mouseleave', () => {
+                highlights.forEach(h => {
+                    let elem = document.getElementById(h);
+                    elem.style.display = 'inline-block';
+                });
+            });
+        });
+    }
+}

assets/scss/_styles_project.scss

@@ -232,7 +232,7 @@ h7, .h7 {
 a, a:hover {
   color: #0000EA;
   h1, h2, h3, h4, h5, h6, h7, p {
-    color: black;
+    color: #4E4F52;
   }
 }
 
@@ -1150,7 +1150,7 @@ td > ul, td > ol {
 
 .horizontalheaders * .nav-tabs .nav-link.active, .horizontalheaders * .nav-tabs .nav-link.active:hover {
   border-top: unset;
-  border-bottom: 1px solid white;
+  border-bottom: 1px solid #f7f7f8;
 }
 
 .nav-tabs .nav-link, .nav-tabs .nav-link:hover {
@@ -1163,7 +1163,7 @@ td > ul, td > ol {
 }
 
 .horizontalheaders .nav-tabs .nav-link, .horizontalheaders .nav-tabs .nav-link:hover {
-  padding: 0.5rem 1.5rem;
+  padding: 0.5rem 1rem;
   margin-right: 0;
 }
 
@@ -1289,11 +1289,6 @@ td > ul, td > ol {
   animation: linear 2s wiggle 2s 2;
 }
 
-@media (min-width: 992px) {
-  #scrollButton {
-    margin-right: 10%;
-  }
-}
 
 #chatButtonContent {
   display: flex;
@@ -2504,6 +2499,13 @@ h3.body-header[style] {
   }
 }
 
+.gray-container {
+  margin-top: 3rem;
+  background-color: #f7f7f8;
+  border-radius: 4px;
+  padding: 2rem;
+}
+
 // CTA buttons START
 
 .front-card-container > .hover-card.primary, .front-card-container > .cta.secondary {
@@ -2627,17 +2629,22 @@ hr {
 .table.horizontalheaders > ul.nav-tabs > li.nav-item > a.nav-link.active {
   background-color: #d7d7d9;
   color: 1px solid #d7d7d9;
-  border-bottom: 1px solid #d7d7d9;
-  border-top: 1px solid #d7d7d9;
+  border-bottom: 1px solid #f7f7f8;
+  border-top: 1px solid #f7f7f8;
+}
+
+.table.horizontalheaders > ul.nav-tabs > li.nav-item > a.nav-link.active:first {
+  border-top: 1px solid #000000;
 }
 
 .table.horizontalheaders > ul.nav-tabs > li.nav-item > a.nav-link:hover {
   border: unset;
   background-color: #d7d7d9;
-  border-top: 1px solid #d7d7d9;
-  border-bottom: 1px solid #d7d7d9;
+  border-top: 1px solid #f7f7f8;
+  border-bottom: 1px solid #f7f7f8;
 }
 
+
 // top-level tabs nav items END
 
 // Tabs inside tabs START
@@ -3152,40 +3159,31 @@ li.active-path.tutorial-heading > a {
 
 // Platform landing pages START
 
-.hoverable-fleet:hover ~ .img-overlay-wrap > #fleet-platform-team,
-.hoverable-fleet:hover ~ .img-overlay-wrap > #fleet-platform-monitor,
-.hoverable-team:hover ~ .img-overlay-wrap > #fleet-platform-management,
-.hoverable-team:hover ~ .img-overlay-wrap > #fleet-platform-monitor,
-.hoverable-monitor:hover ~ .img-overlay-wrap > #fleet-platform-management,
-.hoverable-monitor:hover ~ .img-overlay-wrap > #fleet-platform-team {
-  display: none !important;
+.three-cards {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
 }
 
-.hoverable-connect:hover ~ .img-overlay-wrap > #build-platform-apps,
-.hoverable-connect:hover ~ .img-overlay-wrap > #build-platform-motion,
-.hoverable-apps:hover ~ .img-overlay-wrap > #build-platform-connect,
-.hoverable-apps:hover ~ .img-overlay-wrap > #build-platform-motion,
-.hoverable-motion:hover ~ .img-overlay-wrap > #build-platform-connect,
-.hoverable-motion:hover ~ .img-overlay-wrap > #build-platform-apps {
-  display: none !important;
+.three-cards > .col {
+  flex: 1;
+  max-width: 300px;
+  margin: 0 !important;
 }
 
-.hoverable-ai:hover ~ .img-overlay-wrap > #data-platform-capture,
-.hoverable-ai:hover ~ .img-overlay-wrap > #data-platform-work,
-.hoverable-work:hover ~ .img-overlay-wrap > #data-platform-capture,
-.hoverable-work:hover ~ .img-overlay-wrap > #data-platform-ai,
-.hoverable-capture:hover ~ .img-overlay-wrap > #data-platform-work,
-.hoverable-capture:hover ~ .img-overlay-wrap > #data-platform-ai {
-  display: none !important;
+.three-cards .hover-card a div > div {
+  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-weight: normal;
+  font-size: 1.25rem !important;
 }
 
-.hoverable-build:hover ~ .img-overlay-wrap > #build-platform,
-.hoverable-data:hover ~ .img-overlay-wrap > #data-platform,
-.hoverable-fleet:hover ~ .img-overlay-wrap > #fleet-platform {
-  display: inline-block !important;
+.imgcontcenter {
+  display: flex;
+  justify-content: center;
 }
 
-
 .img-overlay-wrap {
   position: relative;
   display: inline-block;
@@ -3209,20 +3207,6 @@ li.active-path.tutorial-heading > a {
   display: none;
 }
 
-.upside-down {
-  display: flex;
-  flex-direction: column-reverse;
-  align-self: first baseline;
-}
-
-.upside-down.max-page {
-  justify-self: center;
-}
-
-.upside-down > img {
-  margin-bottom: 2.5rem;
-}
-
 .col-12.col-md-12.col-xl-12.pl-md-12 {
   display: flex;
   flex-direction: column;
@@ -3232,13 +3216,6 @@ li.active-path.tutorial-heading > a {
   align-self: flex-end;
 }
 
-.upside-down > .col.hover-card {
-  min-width: unset;
-  max-width: unset;
-  max-height: fit-content;
-  flex-grow: unset !important;
-}
-
 .col-12.col-md-12.col-xl-12.pl-md-12 > .td-content {
   display: flex;
   justify-content: center;

docs/_index.md

@@ -27,32 +27,70 @@ aliases:
   - "/platform/"
 ---
 
+<div class="max-page">
+  <div class="hero-container">
+    <div class="hero-text">
+      <h1>Viam Documentation</h1>
+      <p>
+        Viam integrates with hardware and software on <b>any device</b> in the physical world. Once you <a href="/operate/get-started/setup/">set up your machines</a>, you can use Viam SDKs to program your devices and connected hardware. Everything is managed in the cloud and you can add use machine learning, data management, and much more for your projects.
+      </p>
+      <div class="cards max-page">
+        <div class="front-card-container">
+          <div class="hover-card primary">
+            <a href="tools/tutorials/" class="noanchor">
+            <div>
+              <p>Platform overview</p>
+            </div>
+          </a>
+          </div>
+          <div class="cta secondary">
+            <a href="tools/cli/" class="noanchor"><div>
+            <p>Project Tutorials →</p></div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <img src=../viam.svg alt="Robot illustration" class="hero">
+  </div>
+</div>
+<br>
+
 <!-- Need to use upside down logic because using Subsequent-sibling combinator -->
-<div class="upside-down max-page">
+<div class="max-page gray-container">
+<h2>The Viam platform</h2>
+<p> Viam allows you to control and program any sensor, actuator or other hardware that is connected to a device. The Viam platform offers builtin capabilities to capture data from devices to the cloud, to build and deploy machine learning models, to alert on problems, and much more. With the connection to the cloud, you can configure, control, and manage your devices from anywhere.</p>
+<br>
+<div class="imgcontcenter">
+<div class="img-overlay-wrap aligncenter">
+  <img src="platform/platform-all.svg" alt="Platform diagram" id="fleet-platform-all" class="aligncenter overview" style="width:800px;height:auto" >
+  <img src="platform/platform-build-all.svg" alt="Platform diagram with connect elements highlighted" class="aligncenter overlay-platform" id="build-platform" style="width:800px;height:auto" loading="lazy" >
+  <img src="platform/platform-data-all.svg" alt="Platform diagram with apps element highlighted" class="aligncenter overlay-platform" id="data-platform" style="width:800px;height:auto" loading="lazy" >
+  <img src="platform/platform-fleet-all.svg" alt="Platform diagram with motion elements highlighted" class="aligncenter overlay-platform" id="fleet-platform" style="width:800px;height:auto" loading="lazy" >
+</div>
+</div>
 
-<div class="col hover-card hoverable-fleet">
-<a href="manage/">
-<div><div>Deploy, manage, and troubleshoot</div><p>Viam’s fleet management tooling allows you to remotely deploy and manage software on any fleet of devices. You can monitor all connected devices and troubleshoot any issues - from anywhere.</p></div>
+<br>
+
+<div class="three-cards hoveraction">
+
+<div class="col hover-card build-platform">
+<a href="operate/">
+<div><div>Build & integrate</div><p>To get started, install Viam on any device and integrate your hardware. Then you can control your device and any attached physical hardware securely from anywhere in the world.</p></div>
 </a>
 </div>
 
-<div class="col hover-card hoverable-data">
+<div class="col hover-card data-platform">
 <a href="data-ai/">
 <div><div>Work with Data and AI</div><p>Viam's data and AI capabilities enable you to capture and sync or upload data, build a dataset, train and deploy ML models, and run inference with computer vision. Then, you can act or alert on inferences.</p></div>
 </a>
 </div>
 
-<div class="col hover-card hoverable-build">
-<a href="operate/">
-<div><div>Build & integrate</div><p>To get started, install Viam on any device and integrate your hardware. Then you can control your device and any attached physical hardware securely from anywhere in the world.</p></div>
+<div class="col hover-card fleet-platform">
+<a href="manage/">
+<div><div>Deploy, manage, and troubleshoot</div><p>Viam’s fleet management tooling allows you to remotely deploy and manage software on any fleet of devices. You can monitor all connected devices and troubleshoot any issues - from anywhere.</p></div>
 </a>
 </div>
 
-<div class="img-overlay-wrap aligncenter">
-  <img src="platform/platform-all.svg" alt="Platform diagram" id="fleet-platform-all" class="aligncenter overview" style="width:800px;height:auto" >
-  <img src="platform/platform-build-all.svg" alt="Platform diagram with connect elements highlighted" class="aligncenter overlay-platform" id="build-platform" style="width:800px;height:auto" loading="lazy" >
-  <img src="platform/platform-data-all.svg" alt="Platform diagram with apps element highlighted" class="aligncenter overlay-platform" id="data-platform" style="width:800px;height:auto" loading="lazy" >
-  <img src="platform/platform-fleet-all.svg" alt="Platform diagram with motion elements highlighted" class="aligncenter overlay-platform" id="fleet-platform" style="width:800px;height:auto" loading="lazy" >
 </div>
-
 </div>

docs/data-ai/_index.md

@@ -16,22 +16,24 @@ Viam's data and AI capabilities enable you to capture and sync or upload data, b
 Then, you can act or alert on inferences.
 You can also monitor your machines through teleop, power your application logic, or analyze historical data trends.
 
-<!-- Need to use upside down logic because using Subsequent-sibling combinator -->
-<div class="upside-down">
+<div class="img-overlay-wrap aligncenter">
+  <img src="../platform/platform-all.svg" alt="Platform diagram" id="fleet-platform-all" class="aligncenter overview" style="width:800px;height:auto">
+  <img src="../platform/platform-data-capture.svg" alt="Platform diagram with data capture elements highlighted" class="aligncenter overlay" id="data-platform-capture" style="width:800px;height:auto" loading="lazy" >
+  <img src="../platform/platform-data-work.svg" alt="Platform diagram with data usage elements highlighted" class="aligncenter overlay" id="data-platform-work" style="width:800px;height:auto" loading="lazy" >
+  <img src="../platform/platform-data-ai.svg" alt="Platform diagram with AI elements highlighted" class="aligncenter overlay" id="data-platform-ai" style="width:800px;height:auto" loading="lazy" >
+</div>
+
+<div class="hoveraction">
 
-{{< how-to-expand "Leverage AI" "8" "INTERMEDIATE" "" "hoverable-ai" >}}
+{{< how-to-expand "Capture data" "3" "BEGINNER-FRIENDLY" "" "data-platform-capture" >}}
 {{< cards >}}
-{{% card link="/data-ai/ai/create-dataset/" noimage="true" %}}
-{{% card link="/data-ai/ai/train-tflite/" noimage="true" %}}
-{{% card link="/data-ai/ai/train/" noimage="true" %}}
-{{% card link="/data-ai/ai/deploy/" noimage="true" %}}
-{{% card link="/data-ai/ai/run-inference/" noimage="true" %}}
-{{% card link="/data-ai/ai/alert/" noimage="true" %}}
-{{% card link="/data-ai/ai/act/" noimage="true" %}}
+{{% card link="/data-ai/capture-data/capture-sync/" noimage="true" %}}
+{{% card link="/data-ai/capture-data/filter-before-sync/" noimage="true" %}}
+{{% card link="/data-ai/capture-data/conditional-sync/" noimage="true" %}}
 {{< /cards >}}
 {{< /how-to-expand >}}
 
-{{< how-to-expand "Work with data" "4" "BEGINNER-FRIENDLY" "" "hoverable-work" >}}
+{{< how-to-expand "Work with data" "4" "BEGINNER-FRIENDLY" "" "data-platform-work" >}}
 {{< cards >}}
 {{% card link="/data-ai/data/query/" noimage="true" %}}
 {{% card link="/data-ai/data/visualize/" noimage="true" %}}
@@ -40,19 +42,16 @@ You can also monitor your machines through teleop, power your application logic,
 {{< /cards >}}
 {{< /how-to-expand >}}
 
-{{< how-to-expand "Capture data" "3" "BEGINNER-FRIENDLY" "" "hoverable-capture" >}}
+{{< how-to-expand "Leverage AI" "8" "INTERMEDIATE" "" "data-platform-ai" >}}
 {{< cards >}}
-{{% card link="/data-ai/capture-data/capture-sync/" noimage="true" %}}
-{{% card link="/data-ai/capture-data/filter-before-sync/" noimage="true" %}}
-{{% card link="/data-ai/capture-data/conditional-sync/" noimage="true" %}}
+{{% card link="/data-ai/ai/create-dataset/" noimage="true" %}}
+{{% card link="/data-ai/ai/train-tflite/" noimage="true" %}}
+{{% card link="/data-ai/ai/train/" noimage="true" %}}
+{{% card link="/data-ai/ai/deploy/" noimage="true" %}}
+{{% card link="/data-ai/ai/run-inference/" noimage="true" %}}
+{{% card link="/data-ai/ai/alert/" noimage="true" %}}
+{{% card link="/data-ai/ai/act/" noimage="true" %}}
 {{< /cards >}}
 {{< /how-to-expand >}}
 
-<div class="img-overlay-wrap aligncenter">
-  <img src="../platform/platform-all.svg" alt="Platform diagram" id="fleet-platform-all" class="aligncenter overview" style="width:800px;height:auto">
-  <img src="../platform/platform-data-capture.svg" alt="Platform diagram with data capture elements highlighted" class="aligncenter overlay" id="data-platform-capture" style="width:800px;height:auto" loading="lazy" >
-  <img src="../platform/platform-data-work.svg" alt="Platform diagram with data usage elements highlighted" class="aligncenter overlay" id="data-platform-work" style="width:800px;height:auto" loading="lazy" >
-  <img src="../platform/platform-data-ai.svg" alt="Platform diagram with AI elements highlighted" class="aligncenter overlay" id="data-platform-ai" style="width:800px;height:auto" loading="lazy" >
-</div>
-
 </div>