feat: Legg til dokumentasjon med mdx

app/components/ControllerSecretSuccessMessage.tsx

@@ -16,7 +16,7 @@ export const ControllerSecretSuccessMessage = ({ controller }: Props) => {
         Ny kontroller med navn {controller.name} opprettet. Lagre koden under,
         den vises kun en gang.
       </div>
-      <div className="break-all">
+      <div className="flex items-center gap-4 break-all">
         Kode: {controller.secret}
         <Button
           type="button"

app/components/ui/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "~/lib/utils";
 
-const buttonVariants = cva(
+export const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50  shrink-0 [&>svg]:mr-1",
   {
     variants: {

app/root.tsx

@@ -69,12 +69,22 @@ export default function App({ loaderData: { user } }: Route.ComponentProps) {
       <Header>
         <nav className="flex gap-2 p-4">
           <Button asChild variant="secondary">
-            <Link to="/">Brygging</Link>
+            <Link to="/">Hjem</Link>
           </Button>
           <Button asChild variant="secondary">
-            <Link to="/controller">Kontrollere</Link>
+            <Link to="/batches">Brygging</Link>
           </Button>
 
+          <Button asChild variant="secondary">
+            <Link to="/docs">Lær</Link>
+          </Button>
+
+          {user ? (
+            <Button asChild variant="secondary">
+              <Link to="/controller">Kontrollere</Link>
+            </Button>
+          ) : null}
+
           {user ? (
             <Form method="POST" action="/logout">
               <Button variant="secondary" type="submit">

app/routes.ts

@@ -3,14 +3,23 @@ import { index, prefix, route } from "@react-router/dev/routes";
 import type { RouteConfig } from "@react-router/dev/routes";
 
 const routes: RouteConfig = [
-  index("routes/batch/HomePage.tsx"),
+  index("routes/HomePage.tsx"),
+  route("batches", "routes/batch/BatchesPage.tsx"),
   route("batch/:batchId", "routes/batch/BatchDetailsPage.tsx"),
   route("login", "routes/auth/LoginPage.tsx"),
   route("sign-up", "routes/auth/SignUpPage.tsx"),
   route("logout", "routes/auth/LogoutPage.tsx"),
   route("verify", "routes/auth/VerifyPage.tsx"),
   route("on-boarding", "routes/auth/OnBoardingPage.tsx"),
   route("health", "routes/HealthApi.ts"),
+  route("docs", "routes/docs/DocsLayout.tsx", [
+    index("routes/docs/getting-started.mdx"),
+    route("gear", "routes/docs/gear.mdx"),
+    route("feedback", "routes/docs/feedback.mdx"),
+    route("about", "routes/docs/about-us.mdx"),
+    route("architecture", "routes/docs/architecture.mdx"),
+    route("coding", "routes/docs/coding.mdx"),
+  ]),
   ...prefix("controller", [
     index("routes/controller/IndexPage.tsx"),
     route(":controllerId", "routes/controller/ControllerDetailsPage.tsx"),

app/routes/HomePage.tsx

@@ -0,0 +1,54 @@
+import { Link } from "react-router";
+
+import { Main } from "~/components/Main";
+
+export default function HomePage() {
+  return (
+    <Main className="flex justify-center">
+      <div className="prose py-8">
+        <h2 className="mt-0">Velkommen til din digitale bryggjournal! 🍺</h2>
+        <p>
+          Loggfør hver eneste detalj av bryggeeventyret ditt – fra malt og humle
+          til gjær og temperaturer – så du aldri glemmer en oppskrift igjen.
+        </p>
+        <div>
+          <strong>📷 Last opp bilder og videoer </strong>av bryggeprosessen for
+          å forevige de magiske øyeblikkene.
+        </div>
+        <div>
+          <strong>🎉 Del gleden!</strong> Hvert brygg får en unik QR-kode som
+          lar deg enkelt dele oppskriften din med familie og venner – rett fra
+          flasken eller fatet.
+        </div>
+        <p>
+          Gjør bryggingen smartere, mer minneverdig og morsommere. Kom i gang i
+          dag og ta ølbryggingen til neste nivå!
+        </p>
+        <Link to="/sign-up">Opprett bruker for å komme i gang her</Link>
+        <h2>Bygg din egen temperaturkontroller 🌡️</h2>
+        <p>
+          Lag din egen temperatur-kontroller basert på{" "}
+          <a href="https://www.arduino.cc">Arduino</a> rammeverket. Koble
+          kontrolleren opp mot nettsiden.
+        </p>
+        <strong>Hva kan du gjøre?</strong>
+        <ul>
+          <li>
+            🌡️ Automatisk kontroll: Styr temperaturen i kjøleskap eller ovn.
+          </li>
+          <li>
+            📈 Visualisering: Følg temperaturendringene i sanntid med grafer.
+          </li>
+          <li>
+            🍺 Perfekt gjæring: Juster og optimaliser temperaturen for å brygge
+            den beste pilsen.
+          </li>
+        </ul>
+        <p>
+          👉 <Link to="/docs">Kom i gang her</Link> og ta bryggingen din til et
+          nytt nivå!
+        </p>
+      </div>
+    </Main>
+  );
+}

app/routes/batch/HomePage.tsx → app/routes/batch/BatchesPage.tsx

@@ -3,7 +3,7 @@ import { parseWithZod } from "@conform-to/zod";
 import { Loader2, Plus } from "lucide-react";
 import { Form, Link, useActionData } from "react-router";
 
-import type { Route } from "./+types/HomePage";
+import type { Route } from "./+types/BatchesPage";
 
 import { deleteAndInsertBatchTemperatures } from "~/.server/data-layer/batchTemperatures";
 import { getBatches, postBatch } from "~/.server/data-layer/batches";
@@ -39,7 +39,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
   return { status: 200, result: result.reply({ resetForm: true }) };
 };
 
-export default function Home({
+export default function BatchesPage({
   loaderData: { batches, user },
 }: Route.ComponentProps) {
   return (