Add header to logos section; link each logo to website (#917)

* Add header to logos section; link each logo to website * Implement feedback * Fix prettier issues
foxglove · Jun 29, 2023 · db7675f · db7675f
1 parent dc0384d
commit db7675f
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 26 deletions.
diff --git a/website/src/icons/index.ts b/website/src/icons/index.ts
@@ -18,16 +18,34 @@ import Turntable from "./turntable.svg";
 import YogaLegGrabStretch from "./yoga-leg-grab-stretch.svg";
 import ZipFile from "./zip-file.svg";
 
-const LightModeLogos = [
-  AndurilLight,
-  CocoLight,
-  NorLabLight,
-  ROSLight,
-  TangramLight,
+const Logos = [
+  {
+    href: "https://www.anduril.com/",
+    LightModeLogo: AndurilLight,
+    DarkModeLogo: AndurilDark,
+  },
+  {
+    href: "https://cocodelivery.com/",
+    LightModeLogo: CocoLight,
+    DarkModeLogo: CocoDark,
+  },
+  {
+    href: "https://norlab.ulaval.ca/",
+    LightModeLogo: NorLabLight,
+    DarkModeLogo: NorlabDark,
+  },
+  {
+    href: "https://ros.org/",
+    LightModeLogo: ROSLight,
+    DarkModeLogo: ROSDark,
+  },
+  {
+    href: "https://www.tangramvision.com/",
+    LightModeLogo: TangramLight,
+    DarkModeLogo: TangramDark,
+  },
 ];
 
-const DarkModeLogos = [AndurilDark, CocoDark, NorlabDark, ROSDark, TangramDark];
-
 export {
   ArmyWoman1,
   ChatTranslate,
@@ -38,6 +56,5 @@ export {
   Turntable,
   YogaLegGrabStretch,
   ZipFile,
-  LightModeLogos,
-  DarkModeLogos,
+  Logos,
 };
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
@@ -122,10 +122,23 @@
   height: auto;
 }
 
+.logosHeader {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
 .logosSection {
   padding: 4rem 2rem;
 }
 
+.logosSection a {
+  display: flex;
+}
+
+.logosSection a svg {
+  align-self: center;
+}
+
 [data-theme="light"] .logosSection {
   background-color: rgba(148, 101, 222, 0.06);
 }

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -78,9 +78,6 @@ const FeatureList: FeatureItem[] = [
   },
 ];
 
-const LightModeLogos = icons.LightModeLogos;
-const DarkModeLogos = icons.DarkModeLogos;
-
 function Feature({ title, Icon, description }: FeatureItem) {
   return (
     <div>
@@ -135,20 +132,25 @@ export default function Home(): JSX.Element {
 
       <div className={`${styles.section ?? ""} ${styles.logosSection ?? ""}`}>
         <div className="container">
+          <h2 className={styles.logosHeader}>
+            Trusted by leading robotics teams
+          </h2>
           <div className={styles.logoGrid}>
-            {LightModeLogos.map((Logo, idx) => (
-              <Logo
-                key={idx}
-                role="img"
-                className={`${styles.lightMode ?? ""} ${styles.logoIcon ?? ""}`}
-              />
-            ))}
-            {DarkModeLogos.map((Logo, idx) => (
-              <Logo
-                key={idx}
-                role="img"
-                className={`${styles.darkMode ?? ""} ${styles.logoIcon ?? ""}`}
-              />
+            {icons.Logos.map(({ href, LightModeLogo, DarkModeLogo }, idx) => (
+              <a key={idx} href={href}>
+                <LightModeLogo
+                  role="img"
+                  className={`${styles.logoIcon ?? ""} ${
+                    styles.lightMode ?? ""
+                  }`}
+                />
+                <DarkModeLogo
+                  role="img"
+                  className={`${styles.logoIcon ?? ""} ${
+                    styles.darkMode ?? ""
+                  }`}
+                />
+              </a>
             ))}
           </div>
         </div>