feat: redo landing page

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",

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>
   );
 }

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;

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}>
+        <source src={require("@site/static/img/teaser.mp4").default} type="video/mp4"></source>
       </video>
     </div>
   );

src/components/Demo/index.module.css

@@ -1,3 +1,6 @@
 .demo {
-    margin: 30px;
-}
+  width: 100%;
+  padding: 30px;
+  max-width: 800px;
+  text-align: center;
+}

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="Use advanced methods for automatically discovering model errors and differences."
+        ></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>
+  );
+}

src/components/DiscoverSelect/styles.module.css

@@ -0,0 +1,70 @@
+.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 {
+  /* background: linear-gradient(rgba(137,133,199,1) 0%, rgba(126,121,196,1) 100%); */
+  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;
+}

src/components/HomepageHeader/HomepageHeader.tsx

@@ -1,49 +1,63 @@
 import Link from "@docusaurus/Link";
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { Demo } from "../Demo/Demo";
 import styles from "./index.module.css";
 
 export function HomepageHeader() {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  let frameId = null;
+
+  const updatePosition = (newPosition) => {
+    setPosition(newPosition);
+    frameId = null;
+  };
+
+  const handleMouseMove = useCallback((e) => {
+    if (frameId) {
+      cancelAnimationFrame(frameId);
+    }
+
+    const boundingRect = e.target.getBoundingClientRect();
+
+    frameId = requestAnimationFrame(() =>
+      updatePosition({
+        x: e.clientX - boundingRect.left,
+        y: e.clientY - boundingRect.top,
+      })
+    );
+  }, []);
+
+  const gradientStyle = {
+    width: "100%",
+    height: "100%",
+    background: `radial-gradient(circle at ${position.x}px ${position.y}px, #6A1B9A, rgba(106, 27, 154, 0.80))`,
+  };
+
   return (
-    <div className={styles.headerContainer}>
+    <div className={styles.headerContainer} style={gradientStyle} onMouseMove={handleMouseMove}>
       <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/">
+              Try Zeno
+            </Link>
           </div>
         </div>
-        <div className={styles.headerRight}>
-          <Demo />
-        </div>
       </div>
+      <Demo />
     </div>
   );
 }