feat: start on expansive footer

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">