Add logos & website tweaks (#8060)

website/src/components/customers/customers.tsx

@@ -2,25 +2,26 @@ import React from "react";
 import styles from "./customers.module.css";
 
 function Component() {
-  let color = "";
   return (
     <div className={styles.customerSection}>
-      <div className={styles.header}>TRUSTED BY THE BEST ENGINEERING TEAMS</div>
-      <div className={styles.customers}>
-        <img alt="Spotify Logo" className={styles.logo} width="150px" src={`/img/spotify${color}.svg`} />
-        <img alt="Benchling Logo" className={styles.logo} width="150px" src={`/img/benchling${color}.svg`} />
-        <img alt="Lyft Logo" className={styles.logo} width="70px" src={`/img/lyft${color}.svg`} />
-        <img alt="Asana Logo" className={styles.logo} width="150px" src={`/img/asana${color}.svg`} />
-        <img
-          alt="Mercari Logo"
-          className={styles.logo}
-          style={{ margin: "0 0 6px 0" }}
-          width="150px"
-          src={`/img/mercari${color}.svg`}
-        />
-        <img alt="Squarespace Logo" className={styles.logo} width="210px" src={`/img/squarespace${color}.svg`} />
-        <img alt="Tecton Logo" className={styles.logo} width="120px" src={`/img/tecton${color}.svg`} />
-        <img alt="Verkada Logo" className={styles.logo} width="150px" src={`/img/verkada${color}.svg`} />
+      <div>
+        <div className={styles.header}>TRUSTED BY THE BEST ENGINEERING TEAMS</div>
+        <div className={styles.customers}>
+          <img alt="Spotify Logo" className={styles.logo} width="150px" src={`/img/spotify.svg`} />
+          <img alt="Cisco Logo" className={styles.logo} width="80px" src={`/img/cisco.svg`} />
+          <img alt="Asana Logo" className={styles.logo} width="150px" src={`/img/asana.svg`} />
+          <img alt="Benchling Logo" className={styles.logo} width="160px" src={`/img/benchling.svg`} />
+          <img alt="Retool Logo" className={styles.logo} width="110px" src={`/img/retool.svg`} />
+          <img
+            alt="Mercari Logo"
+            className={styles.logo}
+            style={{ margin: "0 0 2px 0" }}
+            width="110px"
+            src={`/img/mercari.svg`}
+          />
+          <img alt="Verkada Logo" className={styles.logo} width="140px" src={`/img/verkada.svg`} />
+          <img alt="Tecton Logo" className={styles.logo} width="110px" src={`/img/tecton.svg`} />
+        </div>
       </div>
     </div>
   );

website/src/components/quote/quote.tsx

@@ -5,32 +5,30 @@ import styles from "./quote.module.css";
 function Component() {
   return (
     <div className={`${common.section} ${common.sectionDark} ${common.sectionRounded}`}>
-      <div className={`${common.container} ${styles.stats}`}>
-        <div className={styles.stat}>
-          <div className={styles.statNumber}>15.2x</div>
-          <div className={styles.statTitle}>faster builds</div>
-        </div>
-        <div className={styles.stat}>
-          <div className={styles.statNumber}>16.5x</div>
-          <div className={styles.statTitle}>faster tests</div>
+      <div>
+        <div className={`${common.container} ${styles.stats}`}>
+          <div className={styles.stat}>
+            <div className={styles.statNumber}></div>
+            <div className={styles.statTitle}></div>
+          </div>
         </div>
-      </div>
-      <div className={common.container}>
-        <div className={common.centeredText}>
-          <h2 className={styles.quote}>
-            “BuildBuddy delivers the remote cache and remote execution performance we need without the maintenance
-            burden. All while providing best in class visibility into our builds.”
-          </h2>
-          <div className={styles.attribution}>
-            <div className={styles.attributionName}>Keith Smiley</div>
-            <div className={styles.attributionDescription}>
-              Principal Engineer at Lyft & Lead Maintainer of Bazel's Apple rules
+        <div className={common.container}>
+          <div className={common.centeredText}>
+            <h2 className={styles.quote}>
+              “BuildBuddy delivers the remote cache and remote execution performance we need without the maintenance
+              burden. All while providing best in class visibility into our builds.”
+            </h2>
+            <div className={styles.attribution}>
+              <div className={styles.attributionName}>Keith Smiley</div>
+              <div className={styles.attributionDescription}>
+                Senior Staff Engineer at Modular & Lead Maintainer of Bazel's Apple rules
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div className={styles.logos}>
-        <img alt="Lyft Logo" className={styles.logo} width="70px" height="50px" src="/img/lyft-white.svg" />
+        <div className={styles.logos}>
+          <img alt="Modular Logo" className={styles.logo} width="120px" height="50px" src="/img/modular-white.svg" />
+        </div>
       </div>
     </div>
   );

website/src/css/nav.css

@@ -332,3 +332,21 @@ a.menu__link.menu__link--active.menu__link--sublist {
     0px 3px 3px -1.5px rgba(0, 0, 0, 0.06),
     0px 6px 6px -3px rgba(0, 0, 0, 0.06);
 }
+
+.navbar__logo::before {
+  background: #757575;
+  width: 4px;
+  height: 31px;
+  margin-top: 1px;
+  display: block;
+  content: "";
+  position: absolute;
+  opacity: 0;
+  transition: all 0.4s ease-in-out;
+  border-left: 4px solid #c0c0c0;
+  border-right: 4px solid #303030;
+}
+
+.navbar__logo:hover::before {
+  opacity: 1;
+}