Add tos

package.json

@@ -27,6 +27,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.60.0",
+    "react-markdown": "^10.1.0",
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "zod": "^3.25.74"
@@ -34,6 +35,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

prisma/schema.prisma

@@ -91,3 +91,12 @@ model CommissionTypeExtra {
 
   @@unique([typeId, extraId])
 }
+
+model TermsOfService {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  version  Int    @default(autoincrement())
+  markdown String
+}

src/app/globals.css

@@ -112,6 +112,55 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
+.markdown {
+  @apply text-base leading-relaxed text-foreground;
+}
+
+.markdown h1 {
+  @apply text-4xl font-bold mt-6 mb-4;
+}
+
+.markdown h2 {
+  @apply text-3xl font-semibold mt-6 mb-3;
+}
+
+.markdown h3 {
+  @apply text-2xl font-medium mt-5 mb-2;
+}
+
+.markdown p {
+  @apply my-4;
+}
+
+.markdown ul {
+  @apply list-disc pl-6 my-4;
+}
+
+.markdown ol {
+  @apply list-decimal pl-6 my-4;
+}
+
+.markdown li {
+  @apply mb-1;
+}
+
+.markdown blockquote {
+  @apply border-l-4 pl-4 italic text-muted-foreground my-4;
+}
+
+.markdown code {
+  @apply bg-muted px-1 py-0.5 rounded font-mono text-sm;
+}
+
+.markdown pre {
+  @apply bg-muted p-4 rounded overflow-x-auto text-sm my-4;
+}
+
+.markdown a {
+  @apply underline text-primary hover:text-primary/80;
+}
+
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

src/app/tos/page.tsx

@@ -0,0 +1,18 @@
+import prisma from "@/lib/prisma";
+import ReactMarkdown from 'react-markdown';
+
+export default async function TosPage() {
+  const tos = await prisma.termsOfService.findFirst({
+    orderBy: [{ version: "desc" }],
+  })
+
+  console.log(tos?.markdown)
+
+  return (
+    <div className="container py-10 space-y-10">
+      <div className="markdown">
+        <ReactMarkdown>{tos?.markdown}</ReactMarkdown>
+      </div>
+    </div>
+  );
+}

src/components/commissions/CommissionOrderForm.tsx

@@ -15,6 +15,7 @@ import { CommissionExtra, CommissionOption, CommissionType, CommissionTypeExtra,
 import { commissionOrderSchema } from "@/schemas/commissionOrder"
 import { calculatePrice } from "@/utils/calculatePrice"
 import { zodResolver } from "@hookform/resolvers/zod"
+import Link from "next/link"
 import { useMemo, useState } from "react"
 import { useForm, useWatch } from "react-hook-form"
 import * as z from "zod/v4"
@@ -239,6 +240,14 @@ export function CommissionOrderForm({ types }: Props) {
           Estimated Price: €{price.toFixed(2)}
         </div>
 
+        <div className="text-muted-foreground">
+          By submitting this form, you agree to our{" "}
+          <Link href="/tos" className="underline">
+            Terms of Service
+          </Link>
+          .
+        </div>
+
         <Button type="submit" disabled={!form.formState.isValid}>
           Submit Request
         </Button>

src/components/global/TopNav.tsx

@@ -17,6 +17,11 @@ export default function TopNav() {
             <Link href="/commissions">Commissions</Link>
           </NavigationMenuLink>
         </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link href="/tos">Terms of Service</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
       </NavigationMenuList>
     </NavigationMenu>
   );