Add beta info page

app/components/Layout/index.tsx

@@ -60,6 +60,13 @@ export const Layout = React.memo(function Layout({
           ))}
         </div>
       </nav>
+      <Link className="layout__beta__link" to="/beta">
+        <div className="layout__beta__banner">
+          {new Array(50).fill(null).map((_, i) => (
+            <span key={i}>BETA</span>
+          ))}
+        </div>
+      </Link>
       <main className="layout__main">{children}</main>
     </>
   );

app/routes/beta.tsx

@@ -0,0 +1,38 @@
+import type { LinksFunction } from "remix";
+import { DISCORD_URL } from "~/constants";
+import styles from "~/styles/beta.css";
+
+export const links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: styles }];
+};
+
+export default function BetaPage() {
+  return (
+    <div className="beta__container">
+      <h2>Beta of sendou.ink (Splatoon 3)</h2>
+      <p>
+        Hello there! I appreciate you taking time to visit this beta version of
+        sendou.ink's Splatoon 3 site. This being a beta there is a few things
+        you should consider:
+      </p>
+      <ul className="mt-2">
+        <li>
+          It's likely the database will be cleared (more than once) before beta
+          ends
+        </li>
+        <li>
+          Bugs are expected. Please give feedback on{" "}
+          <a href={DISCORD_URL}>our Discord</a>
+        </li>
+        <li>
+          Follow <a href="https://twitter.com/sendouink">Twitter</a> for
+          announcements about test tournaments and everything else related to
+          sendou.ink
+        </li>
+      </ul>
+      <p className="mt-4">
+        <a href="https://sendou.ink">Return to Splatoon 2 sendou.ink</a>
+      </p>
+    </div>
+  );
+}

app/styles/beta.css

@@ -0,0 +1,5 @@
+.beta__container {
+  max-width: 48rem;
+  margin: 0 auto;
+  padding-inline: var(--s-2);
+}

app/styles/global.css

@@ -5,6 +5,7 @@
   --bg-modal-backdrop: hsla(237deg 98% 1% / 70%);
   --border: hsl(237.3deg 42.3% 45.6%);
   --button-text: rgb(0 0 0 / 85%);
+  --button-text-transparent: rgb(0 0 0 / 65%);
   --text: rgb(255 255 255 / 95%);
   --text-lighter: rgb(255 255 255 / 55%);
   --theme-error: rgb(219 70 65);
@@ -88,6 +89,12 @@ body {
   outline: none !important;
 }
 
+a {
+  color: var(--theme);
+  font-weight: var(--semi-bold);
+  text-decoration: none;
+}
+
 button {
   display: flex;
   width: auto;
@@ -385,6 +392,10 @@ select::selection {
 
 /* Utility classes */
 
+.mt-2 {
+  margin-block-start: var(--s-2);
+}
+
 .mt-3 {
   margin-block-start: var(--s-3);
 }

app/styles/layout.css

@@ -40,6 +40,23 @@
   justify-self: flex-end;
 }
 
+.layout__beta__link {
+  text-decoration: none;
+}
+
+.layout__beta__banner {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  background-color: var(--theme);
+  color: var(--button-text-transparent);
+  font-size: var(--fonts-xs);
+  font-weight: var(--bold);
+  gap: var(--s-8);
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
 .layout__nav {
   display: none;
   justify-content: center;