add styles for mobile

closes #48

app/mobile/page.module.css

@@ -0,0 +1,12 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding-inline: 12px;
+}
+
+.message {
+  font-weight: 500;
+}

app/mobile/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import React, { useEffect } from "react";
+import styles from "./page.module.css";
+import classnames from "classnames";
+import { outfitFont } from "../styles/fonts";
+
+export default function Mobile() {
+  useEffect(() => {
+    // if not on mobile, redirect to the main page
+    if (window.innerWidth > 768) {
+      window.location.href = "/";
+    }
+  }, []);
+  return (
+    <div className={styles.main}>
+      <div className={classnames(styles.message, outfitFont.className)}>
+        We are sorry,
+        <br />
+        Tour of JSON Schema is not optimized for mobile devices. Please use a
+        desktop computer for the best experience.
+      </div>
+    </div>
+  );
+}

app/providers.tsx

@@ -1,7 +1,14 @@
 "use client";
-import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
+import { ChakraProvider } from "@chakra-ui/react";
 import { theme } from "./styles/theme";
+import { useEffect } from "react";
 
 export function Providers({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    if (window.innerWidth < 768 && !window.location.href.includes("/mobile")) {
+      window.location.href = "/mobile";
+    }
+  }, []);
+
   return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
 }