feat: add ad banners

service/frontend/src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import CreateDevenvButton from "@/components/create-devenv-button";
 import CreateReplButton from "@/components/create-repl-button";
+import RandomAdBanner from "@/components/random-ad-banner";
 import { Button } from "@/components/ui/button";
 import { useUserQuery } from "@/hooks/use-user-query";
 import { RocketIcon } from "@radix-ui/react-icons";
@@ -11,24 +12,30 @@ export default function Page() {
   const isAuthenticatedMode = !userQuery.isStale && userQuery.isSuccess;
 
   return (
-    <main className="flex h-screen w-screen flex-col items-center p-24 justify-center space-y-5">
-      <div className="text-2xl italic">Want a clean /home?</div>
-      <div className="text-5xl font-bold">Use replme!</div>
-      <div>
-        Hack together your ideas in development environments, use a throwaway
-        shell - all in one place.
+    <main className="flex h-screen w-screen flex-row p-24">
+      <div className="flex h-full w-full flex-col items-center justify-center space-y-5 grow-0">
+        <div className="text-2xl italic">Want a clean /home?</div>
+        <div className="text-5xl font-bold">Use replme!</div>
+        <div>
+          Hack together your ideas in development environments, use a throwaway
+          shell - all in one place.
+        </div>
+        <div className="flex flex-row space-x-3 items-center">
+          {isAuthenticatedMode ? (
+            <CreateDevenvButton />
+          ) : (
+            <a href="/register">
+              <Button>
+                <RocketIcon className="mr-2 h-4 w-4" /> REGISTER!
+              </Button>
+            </a>
+          )}
+          <CreateReplButton />
+        </div>
       </div>
-      <div className="flex flex-row space-x-3 items-center">
-        {isAuthenticatedMode ? (
-          <CreateDevenvButton />
-        ) : (
-          <a href="/register">
-            <Button>
-              <RocketIcon className="mr-2 h-4 w-4" /> REGISTER!
-            </Button>
-          </a>
-        )}
-        <CreateReplButton />
+
+      <div className="relative w-96 h-full">
+        <RandomAdBanner />
       </div>
     </main>
   );

service/frontend/src/components/random-ad-banner.tsx

@@ -0,0 +1,37 @@
+"use client";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+const IMAGES = [
+  "/assets/imagi-date.png",
+  "/assets/onlyflags.png",
+  "/assets/onlyflags2.png",
+  "/assets/pirate-say.png",
+  "/assets/sceam.png",
+  "/assets/whatsscam.png",
+];
+
+function getRandomArbitrary(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+const RandomAdBanner = () => {
+  const [index, setIndex] = useState<number>();
+
+  useEffect(() => {
+    setIndex(getRandomArbitrary(0, IMAGES.length - 1));
+  }, []);
+
+  if (index === undefined) return <></>;
+
+  return (
+    <Image
+      className="object-contain"
+      src={IMAGES[index]}
+      fill={true}
+      alt="ad"
+    />
+  );
+};
+
+export default RandomAdBanner;