Update /showcase

src/app/showcase/page.tsx

@@ -111,6 +111,10 @@ const showcase = [
     thumbnail: require("./img/openai.com.png").default,
     video: "/showcase-videos/openai.com.mp4",
     description: "Marketing website & chat interface",
+    dark: {
+      thumbnail: require("./img/dark-openai.com.png").default,
+      video: "/showcase-videos/dark-openai.com.mp4",
+    },
   },
   {
     name: "Shopify",
@@ -141,10 +145,10 @@ const showcase = [
     description: "News website",
   },
   {
-    name: "Laracon Online",
-    url: "https://laracon.net",
-    thumbnail: require("./img/laracon.net.png").default,
-    video: "/showcase-videos/laracon.net.mp4",
+    name: "Laracon 2025",
+    url: "https://laracon.us",
+    thumbnail: require("./img/laracon.us.png").default,
+    video: "/showcase-videos/laracon.us.mp4",
     description: "Conference website",
   },
   {
@@ -196,20 +200,41 @@ const showcase = [
     video: "/showcase-videos/planetscale.com.mp4",
     description: "SaaS marketing website",
   },
+  {
+    name: "Slate Auto",
+    url: "https://slate.auto",
+    thumbnail: require("./img/slate.auto.png").default,
+    video: "/showcase-videos/slate.auto.mp4",
+    description: "Automotive website",
+  },
   {
     name: "Algolia Docs",
-    url: "https://www.algolia.com/doc",
-    thumbnail: require("./img/algolia.com.png").default,
-    video: "/showcase-videos/algolia.com.mp4",
+    url: "https://www.algolia.com/doc/",
+    thumbnail: require("./img/algolia-docs.com.png").default,
+    video: "/showcase-videos/algolia-docs.com.mp4",
     description: "Documentation website",
   },
+  {
+    name: "React Email",
+    url: "https://www.react.email",
+    thumbnail: require("./img/react.email.png").default,
+    video: "/showcase-videos/react.email.mp4",
+    description: "Developer tool website",
+  },
   {
     name: "MrBeast Feastables",
     url: "https://feastables.com",
     thumbnail: require("./img/feastables.com.png").default,
     video: "/showcase-videos/feastables.com.mp4",
     description: "Direct-to-consumer store",
   },
+  {
+    name: "Algolia",
+    url: "https://www.algolia.com",
+    thumbnail: require("./img/algolia.com.png").default,
+    video: "/showcase-videos/algolia.com.mp4",
+    description: "SaaS marketing website",
+  },
   {
     name: "NASA Jet Propulsion Laboratory",
     url: "https://www.jpl.nasa.gov",
@@ -257,10 +282,6 @@ const showcase = [
     thumbnail: require("./img/io.google.png").default,
     video: "/showcase-videos/io.google.mp4",
     description: "Conference website",
-    dark: {
-      thumbnail: require("./img/io.google-dark.png").default,
-      video: "/showcase-videos/io.google-dark.mp4",
-    },
   },
   {
     name: "Keynote",
@@ -300,13 +321,6 @@ const showcase = [
     description: "Mobile app marketing website",
     isTemplate: true,
   },
-  {
-    name: "Modern Treasury",
-    url: "https://moderntreasury.com",
-    thumbnail: require("./img/moderntreasury.com.png").default,
-    video: "/showcase-videos/moderntreasury.com.mp4",
-    description: "Fintech marketing website",
-  },
   {
     name: "National Park Foundation",
     url: "https://nationalparks.org",

src/components/showcase-thumbnail.tsx

@@ -67,7 +67,7 @@ export default function ShowcaseThumbnail({ showcase, priority = false }: { show
 
   return (
     <div
-      className="group dark:border-bg-white/10 relative isolate border-x border-gray-950/5 transition-colors hover:bg-gray-950/5 max-sm:border-0 sm:max-lg:nth-[2n]:border-r-0 sm:max-lg:nth-[2n+1]:border-l-0 lg:max-xl:nth-[3n]:border-r-0 lg:max-xl:nth-[3n+1]:border-l-0 xl:nth-[4n]:border-r-0 xl:nth-[4n+1]:border-l-0 dark:border-white/10 dark:hover:bg-white/2.5"
+      className="group dark:border-bg-white/10 relative isolate border-x border-gray-950/5 transition-colors hover:bg-gray-950/5 max-sm:border-0 sm:max-lg:nth-[2n]:border-r-transparent sm:max-lg:nth-[2n+1]:border-l-transparent lg:max-xl:nth-[3n]:border-r-transparent lg:max-xl:nth-[3n+1]:border-l-transparent xl:nth-[4n]:border-r-transparent xl:nth-[4n+1]:border-l-transparent dark:border-white/10 dark:hover:bg-white/2.5"
       onMouseEnter={() => {
         if (state.current === "idle") {
           state.current = "playing";