feat: start on expansive footer

src/app/components/Checks.tsx

@@ -116,20 +116,25 @@ export function Checks() {
               <Flex direction="column" gap="2">
                 <Heading>
                   {policiesAgreementIndex === -1
-                    ? "BlitzKit's cookies"
+                    ? "BlitzKit's policies"
                     : "BlitzKit's policies have changed"}
                 </Heading>
 
                 <Text>
                   This website utilizes cookies to perform analytics and
                   personalize your experience. You can learn more through{' '}
-                  <Link href="/legal/privacy-policy">our privacy policy</Link>.
-                  You may opt out of personalized advertizement by visiting{' '}
+                  <Link href="/docs/legal/privacy-policy">
+                    our privacy policy
+                  </Link>
+                  . You may opt out of personalized advertizement by visiting{' '}
                   <Link href="https://www.google.com/settings/ads">
                     Google Ad Settings
                   </Link>
                   . By using BlitzKit, you also agree to our{' '}
-                  <Link href="/legal/terms-of-service">terms of service</Link>.
+                  <Link href="/docs/legal/terms-of-service">
+                    terms of service
+                  </Link>
+                  .
                 </Text>
               </Flex>
 

src/app/docs/[directory]/[document]/page.tsx

@@ -0,0 +1,31 @@
+import Markdown from 'markdown-to-jsx';
+import { use } from 'react';
+import { Link } from '../../../../components/Link';
+import PageWrapper from '../../../../components/PageWrapper';
+import isDev from '../../../../core/blitzkit/isDev';
+
+export default function Page({
+  params,
+}: {
+  params: { document: string; directory: string };
+}) {
+  const markdown = use(
+    fetch(
+      `https://raw.githubusercontent.com/tresabhi/blitzkit/${isDev() ? 'dev' : 'main'}/docs/${params.directory}/${params.document}.md`,
+    ).then((response) => response.text()),
+  );
+
+  return (
+    <PageWrapper>
+      <Markdown
+        options={{
+          overrides: {
+            a: { component: Link },
+          },
+        }}
+      >
+        {markdown}
+      </Markdown>
+    </PageWrapper>
+  );
+}

src/app/legal/[document]/page.tsx

@@ -1,17 +0,0 @@
-import Markdown from 'markdown-to-jsx';
-import { use } from 'react';
-import PageWrapper from '../../../components/PageWrapper';
-
-export default function Page({ params }: { params: { document: string } }) {
-  const markdown = use(
-    fetch(
-      `https://raw.githubusercontent.com/tresabhi/blitzkit/main/docs/legal/${params.document}.md`,
-    ).then((response) => response.text()),
-  );
-
-  return (
-    <PageWrapper>
-      <Markdown>{markdown}</Markdown>
-    </PageWrapper>
-  );
-}

src/components/Footer/index.css.ts

@@ -3,7 +3,7 @@ import { style } from '@vanilla-extract/css';
 export const containerInner = style({
   justifyContent: 'space-between',
   width: '100%',
-  maxWidth: 800,
+  maxWidth: 1024,
   padding: '0 16px',
 
   '@media': {

src/components/Footer/index.tsx

@@ -1,9 +1,7 @@
 'use client';
 
-import { Code, Flex, Link, Spinner, Text, Theme } from '@radix-ui/themes';
-import { Suspense } from 'react';
-import packageJSON from '../../../package.json';
-import { WoTBVersion } from './components/WoTBVersion';
+import { Flex, Heading, Text, Theme } from '@radix-ui/themes';
+import { Link } from '../Link';
 import * as styles from './index.css';
 
 export function Footer() {
@@ -11,54 +9,40 @@ export function Footer() {
     <Theme radius="none">
       <Flex
         justify="center"
-        align="center"
         gap="3"
-        p="3"
+        px="3"
+        py="6"
         style={{
           backgroundColor: 'var(--color-panel)',
         }}
       >
         <Flex align="center" wrap="wrap" className={styles.containerInner}>
-          <Flex gap="1" justify="center" align="center">
-            <Text color="gray" size="2">
-              BlitzKit
-            </Text>
-
-            <Code color="gray" size="2">
-              {packageJSON.version}
-            </Code>
-
-            <Text color="gray" size="2">
-              for WoTB
-            </Text>
-
-            <Suspense fallback={<Spinner />}>
-              <WoTBVersion />
-            </Suspense>
+          <Flex direction="column">
+            <Heading>BlitzKit</Heading>
+            <Text color="gray">Everything World of Tanks Blitz</Text>
           </Flex>
 
-          <Flex
-            justify="center"
-            align="center"
-            gap="2"
-            style={{
-              maxWidth: 800,
-              padding: '0 16px',
-            }}
-          >
-            <Link size="2" href="https://tresabhi.github.io/" target="_blank">
-              Made by TrèsAbhi
-            </Link>
+          <Flex gap="6">
+            <Flex direction="column" gap="1">
+              <Heading size="3">Legal</Heading>
+              <Flex direction="column">
+                <Link href="/docs/legal/privacy-policy" color="gray">
+                  Privacy policy
+                </Link>
+                <Link href="/docs/legal/terms-of-service" color="gray">
+                  Terms of service
+                </Link>
+              </Flex>
+            </Flex>
 
-            <Text color="gray">•</Text>
-
-            <Link
-              size="2"
-              href="https://tresabhi.github.io/blitzkit/guide/credits.html"
-              target="_blank"
-            >
-              Full credits
-            </Link>
+            <Flex direction="column" gap="1">
+              <Heading size="3">About</Heading>
+              <Flex direction="column">
+                <Link href="/docs/about/credits" color="gray">
+                  Credits
+                </Link>
+              </Flex>
+            </Flex>
           </Flex>
         </Flex>
       </Flex>

src/components/Navbar/index.tsx

@@ -46,7 +46,7 @@ export default function Navbar() {
         <Flex
           justify="between"
           align="center"
-          style={{ maxWidth: 800, width: '100%', padding: '0 16px' }}
+          style={{ maxWidth: 1024, width: '100%', padding: '0 16px' }}
           gap="8"
         >
           <Flex align="center" gap="4">