Create legal pages and refactor navigation

New pages for Cookie Policy, Terms of Service, and Privacy Policy were added. The navigation system was restructured using a mapped array of links instead of hard coded components. The 'Not Found' page's metadata handling was improved and its translation was updated. Certain components that aid this refactoring were created and some pre-existing components or functions were moved to more appropriate locations or renamed for clarity. The Site Navigation, Footer, and Page header components were updated in layout and content. Various pages including Blog and Documentation were updated or removed.

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -49,7 +49,11 @@ async function DocumentationPage({ params }: PageParams) {
 
   return (
     <div className={'container mx-auto'}>
-      <div className={'relative flex grow flex-col space-y-4 px-8 py-8'}>
+      <div
+        className={
+          'relative mx-auto flex max-w-4xl grow flex-col space-y-4 px-8 py-8'
+        }
+      >
         <SitePageHeader
           title={page.title}
           subtitle={description}

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -12,7 +12,7 @@ import { isBrowser } from '@kit/shared/utils';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
-import { cn } from '@kit/ui/utils';
+import { cn, isRouteActive } from '@kit/ui/utils';
 
 const DocsNavLink: React.FC<{
   label: string;
@@ -20,7 +20,7 @@ const DocsNavLink: React.FC<{
   level: number;
   activePath: string;
 }> = ({ label, url, level, activePath }) => {
-  const isCurrent = url == activePath;
+  const isCurrent = isRouteActive(url, activePath, 0);
   const isFirstLevel = level === 0;
 
   return (
@@ -70,7 +70,7 @@ function Tree({
   activePath: string;
 }) {
   return (
-    <div className={cn('w-full space-y-2.5 pl-3', level > 0 ? 'border-l' : '')}>
+    <div className={cn('w-full space-y-1 pl-3')}>
       {pages.map((treeNode, index) => (
         <Node
           key={index}
@@ -84,7 +84,7 @@ function Tree({
 }
 
 export function DocsNavigation({ pages }: { pages: Cms.ContentItem[] }) {
-  const activePath = usePathname().replace('/docs/', '');
+  const activePath = usePathname();
 
   return (
     <>
@@ -109,7 +109,7 @@ export function DocsNavigation({ pages }: { pages: Cms.ContentItem[] }) {
 
 function getNavLinkClassName(isCurrent: boolean, isFirstLevel: boolean) {
   return cn(
-    'group flex h-8 items-center justify-between space-x-2 whitespace-nowrap rounded-md px-3 text-sm leading-none transition-colors',
+    'group flex min-h-8 items-center justify-between space-x-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors',
     {
       [`bg-muted`]: isCurrent,
       [`hover:bg-muted`]: !isCurrent,

apps/web/app/(marketing)/docs/_components/docs-page-link.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { If } from '@kit/ui/if';
 import { cn } from '@kit/ui/utils';
 
-export function DocumentationPageLink({
+export function DocsPageLink({
   page,
   before,
   after,

apps/web/app/(marketing)/docs/layout.tsx

@@ -10,12 +10,10 @@ async function DocsLayout({ children }: React.PropsWithChildren) {
   });
 
   return (
-    <div className={'container mx-auto'}>
-      <div className={'flex'}>
-        <DocsNavigation pages={buildDocumentationTree(pages)} />
+    <div className={'flex'}>
+      <DocsNavigation pages={buildDocumentationTree(pages)} />
 
-        <div className={'flex w-full flex-col items-center'}>{children}</div>
-      </div>
+      {children}
     </div>
   );
 }

apps/web/app/(marketing)/docs/page.tsx

@@ -26,14 +26,16 @@ async function DocsPage() {
   const cards = docs.filter((item) => !item.parentId);
 
   return (
-    <div className={'my-8 flex flex-col space-y-16'}>
-      <SitePageHeader
-        title={t('marketing:documentation')}
-        subtitle={t('marketing:documentationSubtitle')}
-      />
+    <div className={'flex flex-1 flex-col'}>
+      <PageBody className={'mt-8'}>
+        <div className={'flex flex-col items-center space-y-16'}>
+          <SitePageHeader
+            title={t('marketing:documentation')}
+            subtitle={t('marketing:documentationSubtitle')}
+          />
 
-      <PageBody>
-        <DocsCards cards={cards} />
+          <DocsCards cards={cards} />
+        </div>
       </PageBody>
     </div>
   );