Create documentation page for navigation (#26)

* Move docs pages into their own folder

* Create placeholder docs page

* Create route for docs page

* Create nav entry for docs page

* Create content for docs card grid

* Implement card grid

Author: JackTench

src/app/docs.tsx

@@ -0,0 +1,57 @@
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Link } from "react-router";
+
+const docs = [
+  {
+    title: "Auto Splitters",
+    description:
+      "Documentation and tips for creating auto splitters for LibreSplit.",
+    to: "/docs/auto-splitters.md",
+  },
+  {
+    title: "Settings and Keybinds",
+    description: "Customize controls and behavior.",
+    to: "/docs/settings-keybinds.md",
+  },
+  {
+    title: "Split Files",
+    description: "JSON split file documentation.",
+    to: "/docs/split-files.md",
+  },
+  {
+    title: "Themes",
+    description: "Style the app to your liking.",
+    to: "/docs/themes.md",
+  },
+  {
+    title: "Troubleshooting",
+    description: "Fix common issues and edge cases.",
+    to: "/docs/troubleshooting.md",
+  },
+];
+
+export function Docs() {
+  return (
+    <div className="mx-auto max-w-5xl px-6 py-12">
+      <h1 className="mb-8 text-3xl font-bold">Documentation</h1>
+
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {docs.map((doc) => (
+          <Link key={doc.to} to={doc.to}>
+            <Card className="h-full transition hover:border-primary hover:shadow-lg">
+              <CardHeader>
+                <CardTitle>{doc.title}</CardTitle>
+                <CardDescription>{doc.description}</CardDescription>
+              </CardHeader>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/auto-splitters.tsx src/app/docs/auto-splitters.tsxsrc/app/auto-splitters.tsx renamed to src/app/docs/auto-splitters.tsx

@@ -24,6 +24,12 @@ export function AppNav() {
               </NavigationMenuLink>
             </NavigationMenuItem>
 
+            <NavigationMenuItem>
+              <NavigationMenuLink asChild>
+                <Link to="/docs">Docs</Link>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+
             <NavigationMenuItem>
               <NavigationMenuLink asChild>
                 <Link to="/converter">Converter</Link>

src/app/settings-keybinds.tsx src/app/docs/settings-keybinds.tsxsrc/app/settings-keybinds.tsx renamed to src/app/docs/settings-keybinds.tsx

@@ -1,17 +1,19 @@
-import { AutoSplitters } from "./app/auto-splitters";
 import { Converter } from "./app/converter";
+import { Docs } from "./app/docs";
+import { AutoSplitters } from "./app/docs/auto-splitters";
+import { SettingsKeybinds } from "./app/docs/settings-keybinds";
+import { SplitFiles } from "./app/docs/split-files";
+import { Themes } from "./app/docs/themes";
+import { Troubleshooting } from "./app/docs/troubleshooting";
 import { Home } from "./app/home";
 import { NotFound } from "./app/not-found";
-import { SettingsKeybinds } from "./app/settings-keybinds";
-import { SplitFiles } from "./app/split-files";
-import { Themes } from "./app/themes";
-import { Troubleshooting } from "./app/troubleshooting";
 import { Route, Routes } from "react-router";
 
 export default function AppRouter() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
+      <Route path="/docs" element={<Docs />} />
       <Route path="/converter" element={<Converter />} />
 
       {/* Documentation pages pulled from GitHub. */}