Legal Pages

Create essential legal pages including terms of service and privacy policy.

Every SaaS application needs:

Terms of Service - User agreement at apps/web/src/routes/_public/terms-of-service.tsx
Privacy Policy - Data handling practices at apps/web/src/routes/_public/privacy-policy.tsx
Cookie Policy - Cookie usage disclosure at apps/web/src/routes/_public/cookie-policy.tsx

Each is a flat file route under the _public group, so it inherits the shared site header and footer. The page sets its document title in the route's head() and renders placeholder content you should replace:

import { createFileRoute } from '@tanstack/react-router';
import { useTranslations } from 'use-intl';
import { SitePageHeader } from '#/components/site/site-page-header.tsx';
import { getTranslator } from '#/lib/i18n/translator.ts';
export const Route = createFileRoute('/_public/terms-of-service')({
  head: () => {
    const t = getTranslator();
    return { meta: [{ title: t('marketing.termsOfService') }] };
  },
  component: TermsOfServicePage,
});
function TermsOfServicePage() {
  const t = useTranslations('marketing');
  return (
    <div>
      <SitePageHeader
        title={t('termsOfService')}
        subtitle={t('termsOfServiceDescription')}
      />
      <div className={'container mx-auto py-8'}>
        <div>Your terms of service content here</div>
      </div>
    </div>
  );
}

We highly recommend filling in the content of these pages with your own content once you start having users.

Next: Development Guide →