updates

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.

src/components/DiscoverSelect/index.tsx

@@ -21,7 +21,7 @@ export default function DiscoverSelect() {
         <Header
           title="Error Discovery"
           summary="Error Discovery"
-          description="Use advanced methods for automatically discovering model errors and differences."
+          description="Discover where your models fail with automated error analysis."
         ></Header>
         <p>
           Zeno includes advanced error discovery techniques such as{" "}

src/components/HomepageHeader/HomepageHeader.tsx

@@ -1,40 +1,11 @@
 import Link from "@docusaurus/Link";
-import React, { useCallback, useState } from "react";
+import React 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} style={gradientStyle} onMouseMove={handleMouseMove}>
+    <div className={styles.headerContainer}>
       <div className={styles.header}>
         <h1 style={{ fontSize: "72px", textAlign: "center", fontFamily: "'Hammersmith One'" }}>
           AI Evaluation Made Easy

src/components/HomepageHeader/index.module.css

@@ -6,16 +6,28 @@
 }
 
 .headerContainer {
-  background: linear-gradient(
-    180deg,
-    rgba(106, 27, 154, 0.8) 2.15%,
-    rgba(178, 138, 202, 0.8) 54.61%,
-    rgba(245, 245, 245, 0.8) 77.98%
-  );
-  backdrop-filter: blur(2px);
+  background: radial-gradient(
+    circle,
+    hsl(277deg 70% 35%) 0%,
+    hsl(277deg 43% 55%)
+  ); /* Replace with your colors */
+  background-size: 200% 200%; /* This helps in creating the effect */
+  animation: gradientAnimation 10s linear infinite; /* Adjust timing as needed */
   margin: auto;
 }
 
+@keyframes gradientAnimation {
+  0% {
+    background-position: left center;
+  }
+  50% {
+    background-position: right center;
+  }
+  100% {
+    background-position: left center;
+  }
+}
+
 .header {
   max-width: 1300px;
   margin: auto;

src/components/MediaSelect/index.tsx

@@ -33,7 +33,7 @@ export default function Select(props) {
         <Header
           title="Explore"
           summary="Data Exploration"
-          description="Zeno can visualize any type of data, from images to text, audio, sensor data, and more."
+          description="Visualize any type of data with Zeno, from images to text, audio, sensor data, and more."
         ></Header>
         {menu}
       </div>

src/components/Testimonials/Testimonial.tsx

@@ -4,16 +4,30 @@ interface TestimonialProps {
   name: string;
   message: string;
   project: string;
+  link: string;
+  image: string;
 }
 
-export function Testimonial({ name, message, project }: TestimonialProps) {
+export function Testimonial({ name, message, project, link, image }: TestimonialProps) {
   return (
-    <div className="testimonial">
+    <div>
       <p style={{ fontStyle: "italic" }}>{message}</p>
-      <h3>{name}</h3>
-      <a style={{ color: "white", fontVariant: "small-caps" }} href={project}>
-        explore project →
-      </a>
+      <div style={{ display: "flex", gap: "10px" }}>
+        <h3>{name}</h3>
+        <img src={image} style={{ height: "24px" }} />
+      </div>
+      <div style={{ display: "flex", gap: "30px", marginTop: "20px" }}>
+        {link ? (
+          <a style={{ color: "white", fontVariant: "small-caps" }} href={link}>
+            read more →
+          </a>
+        ) : (
+          <></>
+        )}
+        <a style={{ color: "white", fontVariant: "small-caps" }} href={project}>
+          explore with zeno →
+        </a>
+      </div>
     </div>
   );
 }

src/components/Testimonials/Testimonials.tsx

@@ -6,16 +6,20 @@ import { Testimonial } from "./Testimonial";
 export function Testimonials(props) {
   let testimonials = [
     {
-      name: "Clementine, Hugging Face",
+      name: "Clémentine, Research Scientist",
       message:
-        "Using Zeno we were able to systematically debug the Open LLM Leaderboard and improve the benchmarks we use.",
+        "Thanks to the help of the Zeno team, our investigations of Open LLM Leaderboard evaluations were much faster.",
       project: "https://hub.zenoml.com/report/1255/DROP%20Benchmark%20Exploration",
+      link: "https://huggingface.co/blog/leaderboard-drop-dive",
+      image: require("@site/static/img/hf.png").default,
     },
     {
-      name: "Hailey, Eleuther AI",
+      name: "Hailey, Research Scientist",
       message:
         "Visualizing benchmarking results with Zeno makes it much easier to find systematic failures and differences between models.",
       project: "https://hub.zenoml.com/project/c72065fa-9fea-4904-82f8-5e1fe4b5a685/MMLU/",
+      link: "https://github.com/EleutherAI/lm-evaluation-harness?tab=readme-ov-file#visualizing-results",
+      image: require("@site/static/img/eleuther.png").default,
     },
   ];
 
@@ -24,6 +28,8 @@ export function Testimonials(props) {
       name={testimonial.name}
       message={testimonial.message}
       project={testimonial.project}
+      link={testimonial.link}
+      image={testimonial.image}
     />
   ));
 

src/components/Testimonials/styles.module.css

@@ -1,33 +1,17 @@
 .container {
-  background-image: linear-gradient(
-    140deg,
-    hsl(277deg 70% 35%) 0%,
-    hsl(277deg 62% 38%) 8%,
-    hsl(276deg 57% 40%) 17%,
-    hsl(276deg 53% 42%) 26%,
-    hsl(276deg 50% 43%) 35%,
-    hsl(276deg 47% 45%) 44%,
-    hsl(276deg 45% 46%) 52%,
-    hsl(276deg 43% 48%) 60%,
-    hsl(277deg 41% 49%) 67%,
-    hsl(277deg 40% 51%) 74%,
-    hsl(277deg 41% 52%) 81%,
-    hsl(277deg 42% 53%) 88%,
-    hsl(277deg 42% 54%) 94%,
-    hsl(277deg 43% 55%) 100%
-  );
+  background-image: linear-gradient(140deg, hsl(277deg 70% 35%) 0%, hsl(277deg 43% 55%) 100%);
   color: white;
   display: flex;
   flex-direction: column;
-  margin-top: 25px;
-  margin-bottom: 25px;
+  padding-top: 25px;
+  padding-bottom: 25px;
 }
 
 .testimonials {
   display: flex;
   width: 100%;
   justify-content: space-between;
-  gap: 30px;
+  gap: 50px;
 }
 
 @media (max-width: 768px) {

src/pages/index.tsx

@@ -25,9 +25,13 @@ export default function Home(): JSX.Element {
       <div id="homepage">
         <HomepageHeader />
         <div id="pageWrapper">
+          <br />
           <Trending />
+          <br />
         </div>
         <Testimonials />
+        <br />
+        <br />
         <div id="pageWrapper">
           <DatatypeSelect />
           <hr />