Add new screenshots to hero (#1026)

* Add new screenshots to hero

* Remove comments

app/new-homepage/HeroScreenshot.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 import Container from "./Container";
 import { Button } from "src/shared/Button";
-import Link from "src/components/Link";
+import ScreenshotTabs from "./ScreenshotTabs";
 
 export default function HeroScreenshot() {
   return (
@@ -133,14 +133,8 @@ export default function HeroScreenshot() {
             ))}
           </div>
         </div>
-        <div className="flex items-center mt-8 mx-4">
-          <Image
-            alt="Screenshot of Inngest's dashboard"
-            className="rounded-t-md"
-            src="/assets/homepage/hero/2024-08-function-dashboard.png"
-            width={3060 * 0.5}
-            height={1680 * 0.5}
-          />
+        <div className="flex flex-col items-center mt-8 mx-4">
+          <ScreenshotTabs />
         </div>
       </Container>
     </div>

app/new-homepage/ScreenshotTabs.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { useState } from "react";
+import Image from "next/image";
+
+export default function ScreenshotTabs() {
+  const [selected, setSelected] = useState(0);
+  const screenshots = [
+    {
+      title: "Tracing",
+      src: "/assets/homepage/hero/2024-12-12-runs.png",
+      alt: "Inngest function runs and traces",
+    },
+    {
+      title: "Observability",
+      src: "/assets/homepage/hero/2024-12-12-metrics.png",
+      alt: "Inngest metrics dashboard",
+    },
+    {
+      title: "Management",
+      src: "/assets/homepage/hero/2024-12-12-function-list.png",
+      alt: "Inngest function dashboard",
+    },
+  ];
+  const screenshot = screenshots[selected];
+
+  return (
+    <div className="flex flex-col gap-2 items-center">
+      <div className="p-1 flex flex-row gap-1 rounded-lg text-sm font-semibold bg-carbon-50/10 backdrop-blur">
+        {screenshots.map((s, idx) => (
+          <button
+            className={
+              "py-1 px-4 rounded-md transition-all hover:bg-carbon-50/10 data-[state=active]:bg-carbon-50 data-[state=active]:text-carbon-800"
+            }
+            data-state={idx === selected ? "active" : "inactive"}
+            aria-selected={idx === selected}
+            onClick={() => setSelected(idx)}
+          >
+            {s.title}
+          </button>
+        ))}
+      </div>
+      <Image
+        alt={`Screenshot of ${screenshot.alt}`}
+        className="rounded-t-md mx-auto"
+        src={screenshot.src}
+        width={3026 * 0.35}
+        height={1850 * 0.35}
+      />
+    </div>
+  );
+}