feat: redo landing page (#56)

* feat: redo landing page * updates * updates * hide use cases
zeno-ml · Jan 7, 2024 · 622fd3c · 622fd3c
1 parent 010ded8
commit 622fd3c
Show file tree

Hide file tree

Showing 27 changed files with 319 additions and 243 deletions.
diff --git a/docs/intro.mdx b/docs/intro.mdx
@@ -9,6 +9,10 @@ import CodeBlock from "@theme/CodeBlock";
 Zeno is an **interactive AI evaluation platform** for exploring, debugging, and sharing how your AI systems perform.
 Evaluate any task and data type with Zeno's [modular views](/docs/views/) which support everything from chatbot conversations to object detection and audio transcription.
 
+:::tip
+Explore public Zeno reports and projects on [Zeno Hub](https://hub.zenoml.com/) to see what's possible with Zeno!
+:::
+
 ## Creating a Project
 
 The core of Zeno are **projects**, which consist of a base evaluation dataset and any number of AI system outputs.

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -79,13 +79,13 @@ const config = {
           srcDark: "img/zeno_dark.png",
         },
         items: [
-          { to: "/about", label: "About", position: "left" },
           {
             type: "doc",
             docId: "intro",
             position: "left",
             label: "Docs",
           },
+          { to: "/about", label: "About", position: "left" },
           { to: "/faq", label: "FAQ", position: "left" },
           {
             type: "html",
@@ -117,14 +117,14 @@ const config = {
                 label: "Home",
                 to: "/",
               },
-              {
-                label: "About",
-                to: "/about/",
-              },
               {
                 label: "Docs",
                 to: "/docs/intro",
               },
+              {
+                label: "About",
+                to: "/about/",
+              },
               {
                 label: "FAQ",
                 to: "/faq/",

diff --git a/src/components/ChartSelect/index.tsx b/src/components/ChartSelect/index.tsx
@@ -16,6 +16,19 @@ export default function DatatypeSelect() {
   return (
     <div className={styles.reportWrapper}>
       <div className={styles.left}>
+        <Header
+          title="Chart"
+          summary="Chart Building"
+          description="Create beautiful, interactive visualizations to compare model performnce
+          across slices and models"
+        ></Header>
+        <p>
+          Use Zeno's drag-and-drop interface to create interactive charts. Create a radar chart
+          comparing multiple models on different slices of your data, or a beeswarm plot to compare
+          hundreds of models.
+        </p>
+      </div>
+      <div className={styles.right}>
         <img
           style={imageStyle}
           src={require("@site/static/img/radar-chart.png").default}
@@ -34,19 +47,6 @@ export default function DatatypeSelect() {
           />
         </div>
       </div>
-      <div className={styles.right}>
-        <Header
-          title="Chart"
-          summary="Chart Building"
-          description="Create beautiful, interactive visualizations to compare model performnce
-          across slices and models"
-        ></Header>
-        <p>
-          Use Zeno's drag-and-drop interface to create interactive charts. Create a radar chart
-          comparing multiple models on different slices of your data, or a beeswarm plot to compare
-          hundreds of models.
-        </p>
-      </div>
     </div>
   );
 }
diff --git a/src/components/ChartSelect/styles.module.css b/src/components/ChartSelect/styles.module.css
@@ -17,21 +17,28 @@
   flex-wrap: wrap;
   flex-grow: 1;
 }
-.left {
+.right {
   width: 60%;
   height: fit-content;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: middle;
+  justify-content: end;
+}
+/* Add this at the bottom of your CSS file */
+@media (max-width: 768px) {
+  .right {
+    justify-content: start;
+  }
 }
 
 .reportWrapper {
   display: flex;
   align-items: center;
 }
 
-.right {
+.left {
   width: 40%;
   margin-right: 10px;
   margin-left: 10px;
@@ -52,7 +59,6 @@
 }
 
 .featureWrapper {
-  /* background: linear-gradient(rgba(137,133,199,1) 0%, rgba(126,121,196,1) 100%); */
   border-radius: 20px;
   padding: 20px;
   flex: 1;

diff --git a/src/components/Demo/Demo.tsx b/src/components/Demo/Demo.tsx
@@ -3,12 +3,9 @@ import styles from "./index.module.css";
 
 export function Demo() {
   return (
-    <div className={styles.demo}>
-      <video controls width="100%" autoPlay loop>
-        <source
-          src={require("@site/static/img/teaser.m4v").default}
-          type="video/mp4"
-        ></source>
+    <div style={{ paddingBottom: "30px", paddingTop: "20px", textAlign: "center" }}>
+      <video controls autoPlay={true} loop className={styles.demo} muted>
+        <source src={require("@site/static/img/teaser.mp4").default} type="video/mp4"></source>
       </video>
     </div>
   );

diff --git a/src/components/Demo/index.module.css b/src/components/Demo/index.module.css
@@ -1,3 +1,7 @@
 .demo {
-    margin: 30px;
-}
+  width: 100%;
+  padding: 30px;
+  max-width: 800px;
+  text-align: center;
+  border-radius: 40px;
+}
diff --git a/src/components/DiscoverSelect/index.tsx b/src/components/DiscoverSelect/index.tsx
@@ -0,0 +1,36 @@
+import { Header } from "@site/src/pages";
+import React from "react";
+import styles from "./styles.module.css";
+
+let imageStyle = {
+  padding: "50px",
+  width: "500px",
+};
+
+export default function DiscoverSelect() {
+  return (
+    <div className={styles.reportWrapper}>
+      <div className={styles.left}>
+        <img
+          style={imageStyle}
+          src={require("@site/static/img/slice-finder.png").default}
+          alt="Screenshot of radar chart"
+        />
+      </div>
+      <div className={styles.right}>
+        <Header
+          title="Error Discovery"
+          summary="Error Discovery"
+          description="Discover where your models fail with automated error analysis."
+        ></Header>
+        <p>
+          Zeno includes advanced error discovery techniques such as{" "}
+          <a href="https://research.google/pubs/slice-finder-automated-data-slicing-for-model-validation/">
+            slice finder
+          </a>{" "}
+          to automatically surface your models' systematic failures.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/DiscoverSelect/styles.module.css b/src/components/DiscoverSelect/styles.module.css
@@ -0,0 +1,69 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureIcon {
+  max-width: 100px;
+  margin: auto;
+}
+
+.featureContainer {
+  display: flex;
+  flex-basis: 100%;
+  gap: 50px;
+  flex-wrap: wrap;
+  flex-grow: 1;
+}
+.left {
+  width: 60%;
+  height: fit-content;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: middle;
+}
+
+.reportWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.right {
+  width: 40%;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+@media only screen and (max-width: 700px) {
+  .reportWrapper {
+    flex-direction: column;
+  }
+  .left {
+    width: 100%;
+    margin-bottom: 30px;
+    justify-content: center;
+  }
+  .right {
+    width: 100%;
+  }
+}
+
+.featureWrapper {
+  border-radius: 20px;
+  padding: 20px;
+  flex: 1;
+  min-width: 200px;
+  border: var(--gray) solid 1px;
+  box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.25);
+}
+
+.centerText {
+  text-align: center;
+}
+
+.featureArrow {
+  position: absolute;
+}
diff --git a/src/components/HomepageHeader/HomepageHeader.tsx b/src/components/HomepageHeader/HomepageHeader.tsx
@@ -7,43 +7,28 @@ export function HomepageHeader() {
   return (
     <div className={styles.headerContainer}>
       <div className={styles.header}>
-        <div className={styles.headerLeft}>
-          <h1 style={{ fontSize: "45px" }}>AI Evaluation Made Easy</h1>
-          <h4 className={styles.subheader}>
-            Discover how your AI performs with <b>Zeno</b>. Explore your data,
-            uncover failures, and create beautiful, interactive reports.
-          </h4>
-          <div
-            className={styles.buttons}
-            style={{ justifyContent: "space-between", alignItems: "center" }}
-          >
-            <div className={styles.buttons}>
-              <Link
-                className="button button--lg heroButtonSecondary"
-                to="/docs/intro"
-              >
-                Get Started
-              </Link>
-              <Link
-                style={{ color: "#6a1b9a" }}
-                className="button button--lg heroButtonSecondary"
-                to="https://hub.zenoml.com/"
-              >
-                Try Zeno
-              </Link>
-            </div>
-            <iframe
-              src="https://ghbtns.com/github-btn.html?user=zeno-ml&repo=zeno-build&type=star&count=true&size=large"
-              width="140"
-              height="30"
-              title="GitHub"
-            ></iframe>
+        <h1 style={{ fontSize: "72px", textAlign: "center", fontFamily: "'Hammersmith One'" }}>
+          AI Evaluation Made Easy
+        </h1>
+        <h4 className={styles.subheader}>
+          Discover how your AI performs with <b>Zeno</b>.
+          <br /> Explore your data, uncover failures, and create beautiful, interactive charts.
+        </h4>
+        <div
+          className={styles.buttons}
+          style={{ justifyContent: "space-between", alignItems: "center" }}
+        >
+          <div className={styles.buttons}>
+            <Link className="button button--lg heroButtonSecondary" to="/docs/intro">
+              Get Started
+            </Link>
+            <Link className="button button--lg heroButtonSecondary" to="https://hub.zenoml.com/">
+              Explore Projects
+            </Link>
           </div>
         </div>
-        <div className={styles.headerRight}>
-          <Demo />
-        </div>
       </div>
+      <Demo />
     </div>
   );
 }