From ddb0bd8d090d998966333c29befe1633854639f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 5 Jun 2024 12:12:18 -0500
Subject: [PATCH] feat: start on expansive footer

---
 docs/{guide => about}/credits.md             |  0
 src/app/components/Checks.tsx                | 13 ++--
 src/app/docs/[directory]/[document]/page.tsx | 31 +++++++++
 src/app/legal/[document]/page.tsx            | 17 -----
 src/components/Footer/index.css.ts           |  2 +-
 src/components/Footer/index.tsx              | 70 ++++++++------------
 src/components/Navbar/index.tsx              |  2 +-
 7 files changed, 69 insertions(+), 66 deletions(-)
 rename docs/{guide => about}/credits.md (100%)
 create mode 100644 src/app/docs/[directory]/[document]/page.tsx
 delete mode 100644 src/app/legal/[document]/page.tsx

diff --git a/docs/guide/credits.md b/docs/about/credits.md
similarity index 100%
rename from docs/guide/credits.md
rename to docs/about/credits.md
diff --git a/src/app/components/Checks.tsx b/src/app/components/Checks.tsx
index 7893adef0..a935d348d 100644
--- a/src/app/components/Checks.tsx
+++ b/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>
 
diff --git a/src/app/docs/[directory]/[document]/page.tsx b/src/app/docs/[directory]/[document]/page.tsx
new file mode 100644
index 000000000..122127782
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/legal/[document]/page.tsx b/src/app/legal/[document]/page.tsx
deleted file mode 100644
index ccb0ff327..000000000
--- a/src/app/legal/[document]/page.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/src/components/Footer/index.css.ts b/src/components/Footer/index.css.ts
index d4868545d..eafaf4c11 100644
--- a/src/components/Footer/index.css.ts
+++ b/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': {
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index db496dce4..4b9bba828 100644
--- a/src/components/Footer/index.tsx
+++ b/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>
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 9f5a2bdb1..182fe7f22 100644
--- a/src/components/Navbar/index.tsx
+++ b/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">