feat(web): add Privacy and Terms pages with markdown content and update routing

Author: leonardcser

apps/web/package.json

@@ -74,6 +74,7 @@
     "globals": "^15.15.0",
     "postcss": "8.5.3",
     "prettier": "^3.5.3",
+    "react-markdown": "^10.1.0",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "^1.0.7",

apps/web/src/components/layouts/content-layout.tsx

@@ -0,0 +1,46 @@
+import { ChevronLeft } from "lucide-react";
+import { ReactNode } from "react";
+import { useNavigate } from "react-router";
+
+import { cn } from "@/utils/utils";
+
+import { Logo } from "../logo";
+
+interface ContentLayoutProps {
+  title: string;
+  children: ReactNode;
+}
+
+export function ContentLayout({ title, children }: ContentLayoutProps) {
+  const navigate = useNavigate();
+
+  const handleBack = () => {
+    if (window.history.length > 1) {
+      navigate(-1);
+    } else {
+      navigate("/", { replace: true });
+    }
+  };
+
+  return (
+    <div className="mx-auto flex h-full max-w-screen-md flex-col p-8 lg:px-12 lg:py-16">
+      <button
+        type="button"
+        className={cn(
+          "mb-10 flex items-center gap-0.5 font-bold text-muted-foreground transition-colors hover:text-foreground"
+        )}
+        onClick={handleBack}
+      >
+        <ChevronLeft className="inline h-5 w-5 *:!stroke-inherit" />
+        Back
+      </button>
+      <h1 className="mb-4 text-3xl font-bold">{title}</h1>
+      <section className="md mb-12 text-justify">{children}</section>
+      <div className="flex w-full justify-center">
+        <a href="/" aria-label="Dafthunk Homepage">
+          <Logo />
+        </a>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/login-form.tsx

@@ -68,10 +68,22 @@ export function LoginForm({
           </div>
         </CardContent>
       </Card>
-      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary">
+      <div className="text-balance text-center text-xs text-muted-foreground">
         By signing in, you agree to our{" "}
-        <Link to="/terms-of-service">Terms of Service</Link> and{" "}
-        <Link to="/privacy-policy">Privacy Policy</Link>.
+        <Link
+          to="/terms"
+          className="underline underline-offset-4 hover:text-primary"
+        >
+          Terms of Service
+        </Link>{" "}
+        and{" "}
+        <Link
+          to="/privacy"
+          className="underline underline-offset-4 hover:text-primary"
+        >
+          Privacy Policy
+        </Link>
+        .
       </div>
     </div>
   );

apps/web/src/index.css

@@ -194,3 +194,41 @@
 .docs-content em:not([class]) {
   @apply italic;
 }
+
+/* Markdown */
+.md h2 {
+  @apply text-xl font-semibold;
+  @apply mb-2 mt-5;
+}
+
+.md h3 {
+  @apply text-lg font-semibold;
+  @apply mb-1 mt-5;
+}
+
+.md p {
+  @apply mb-2;
+}
+
+.md a {
+  @apply underline;
+}
+
+.md ul {
+  @apply mb-3 list-disc pl-10;
+}
+
+.md ol {
+  @apply mb-3 list-decimal pl-6;
+  counter-reset: item;
+}
+
+.md ol li {
+  display: block;
+}
+
+.md ol li:before {
+  @apply me-2 text-muted-foreground;
+  content: counter(item) ". ";
+  counter-increment: item;
+}

apps/web/src/pages/privacy-page.tsx

@@ -0,0 +1,13 @@
+import Markdown from "react-markdown";
+
+const privacyPolicy = `
+This Privacy Policy explains how we collect, use, and share your personal information when you use our website and services.
+
+## Information We Collect
+
+We collect information from you when you register on our site, place an order, subscribe to our newsletter, respond to a survey or fill out a form.
+`;
+
+export function PrivacyPage() {
+  return <Markdown>{privacyPolicy}</Markdown>;
+}

apps/web/src/pages/terms-page.tsx

@@ -0,0 +1,17 @@
+import Markdown from "react-markdown";
+
+const termsOfService = `
+This Terms of Service (“Terms”) governs your use of the Dafthunk platform and services (“Services”). By accessing or using our Services, you agree to be bound by these Terms. If you do not agree with these Terms, please do not use our Services.
+
+## 1. Acceptance of Terms
+
+By accessing or using our Services, you agree to be bound by these Terms. If you do not agree with these Terms, please do not use our Services.
+
+## 2. Changes to Terms
+
+We may update these Terms from time to time. We will notify you of any changes by posting the new Terms on this page.
+`;
+
+export function TermsPage() {
+  return <Markdown>{termsOfService}</Markdown>;
+}

apps/web/src/routes.tsx

@@ -5,6 +5,7 @@ import { Navigate } from "react-router";
 
 import { HeadSeo } from "./components/head-seo";
 import { AppLayout } from "./components/layouts/app-layout";
+import { ContentLayout } from "./components/layouts/content-layout";
 import { DocsLayout } from "./components/layouts/docs-layout";
 import { ProtectedRoute } from "./components/protected-route";
 import { getApiBaseUrl } from "./config/api";
@@ -25,8 +26,10 @@ import { HomePage } from "./pages/home-page";
 import { LoginPage } from "./pages/login-page";
 import { NotFoundPage } from "./pages/not-found-page";
 import { PlaygroundPage } from "./pages/playground-page";
+import { PrivacyPage } from "./pages/privacy-page";
 import { ProfilePage } from "./pages/profile-page";
 import { PublicExecutionPage } from "./pages/public-execution-page";
+import { TermsPage } from "./pages/terms-page";
 
 export interface RouteHandle {
   head?:
@@ -437,6 +440,24 @@ export const routes: AppRouteObject[] = [
       },
     },
   },
+  {
+    path: "/privacy",
+    element: (
+      <ContentLayout title="Privacy Policy">
+        <PrivacyPage />
+      </ContentLayout>
+    ),
+    handle: { head: <HeadSeo title="Privacy Policy - Dafthunk" /> },
+  },
+  {
+    path: "/terms",
+    element: (
+      <ContentLayout title="Terms of Service">
+        <TermsPage />
+      </ContentLayout>
+    ),
+    handle: { head: <HeadSeo title="Terms of Service - Dafthunk" /> },
+  },
   {
     path: "*",
     element: (