From 2a730bed917c5e92b68e0a4592409378e32de88f 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:53:16 -0500
Subject: [PATCH] feat: better footer

---
 src/app/components/Hero.tsx                   | 24 ++----
 .../[id]/components/Characteristics/index.tsx |  8 +-
 src/components/Footer/index.tsx               | 78 +++++++++++++++----
 3 files changed, 76 insertions(+), 34 deletions(-)

diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx
index b9cd45d11..d287102b9 100644
--- a/src/app/components/Hero.tsx
+++ b/src/app/components/Hero.tsx
@@ -1,6 +1,5 @@
 import { Flex, Heading, Text } from '@radix-ui/themes';
 import { imgur } from '../../core/blitzkit/imgur';
-import { theme } from '../../stitches.config';
 
 export function Hero() {
   return (
@@ -9,6 +8,10 @@ export function Hero() {
       justify="center"
       style={{
         position: 'relative',
+        background: `url(${imgur('rUPie9G', { format: 'jpeg' })})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
       }}
       px="4"
       py="9"
@@ -20,20 +23,8 @@ export function Hero() {
           left: 0,
           width: '100%',
           height: '100%',
-          background: `url(${imgur('rUPie9G', { format: 'jpeg' })})`,
-          backgroundSize: 'cover',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'center',
-        }}
-      />
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          background: `linear-gradient(${theme.colors.appBackground1}80, ${theme.colors.appBackground1}ff)`,
+          background:
+            'linear-gradient(var(--color-panel-translucent), var(--color-background))',
         }}
       />
 
@@ -42,7 +33,8 @@ export function Hero() {
         gap="4"
         align="center"
         justify="center"
-        style={{ position: 'relative', width: '100%' }}
+        position="relative"
+        width="100%"
       >
         <Flex direction="column" align="center">
           <Heading size="9" weight="bold" align="center">
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
index 23ee719bf..e47201692 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
@@ -11,6 +11,7 @@ import {
 import { debounce } from 'lodash';
 import { Fragment, use, useEffect, useRef, useState } from 'react';
 import { lerp } from 'three/src/math/MathUtils';
+import { Link } from '../../../../../../components/Link';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { isExplosive } from '../../../../../../core/blitz/isExplosive';
 import { resolvePenetrationCoefficient } from '../../../../../../core/blitz/resolvePenetrationCoefficient';
@@ -184,12 +185,9 @@ export function Characteristics() {
               <Info
                 indent
                 name={
-                  <a
-                    target="_blank"
-                    href="https://tresabhi.github.io/blitzkit/guide/dpm.html"
-                  >
+                  <Link target="_blank" href="/docs/guide/dpm">
                     What's the difference?
-                  </a>
+                  </Link>
                 }
               />
             </>
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 4b9bba828..c89f812a8 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { Flex, Heading, Text, Theme } from '@radix-ui/themes';
+import packageJson from '../../../package.json';
 import { Link } from '../Link';
-import * as styles from './index.css';
 
 export function Footer() {
   return (
@@ -10,19 +10,73 @@ export function Footer() {
       <Flex
         justify="center"
         gap="3"
-        px="3"
-        py="6"
+        p="6"
         style={{
           backgroundColor: 'var(--color-panel)',
         }}
       >
-        <Flex align="center" wrap="wrap" className={styles.containerInner}>
+        <Flex
+          align="center"
+          justify="between"
+          maxWidth="640px"
+          flexGrow="1"
+          gap="6"
+          position="relative"
+          direction={{
+            initial: 'column',
+            sm: 'row',
+          }}
+        >
           <Flex direction="column">
-            <Heading>BlitzKit</Heading>
+            <Heading>
+              BlitzKit{' '}
+              <Text color="gray" size="1" weight="regular">
+                {packageJson.version}
+              </Text>
+            </Heading>
+
             <Text color="gray">Everything World of Tanks Blitz</Text>
           </Flex>
 
           <Flex gap="6">
+            <Flex
+              direction="column"
+              gap="1"
+              align={{
+                initial: 'end',
+                sm: 'start',
+              }}
+            >
+              <Heading size="3">About</Heading>
+              <Flex
+                direction="column"
+                align={{
+                  initial: 'end',
+                  sm: 'start',
+                }}
+              >
+                <Link href="/docs/about/credits" color="gray">
+                  Credits
+                </Link>
+                <Link
+                  href="https://discord.gg/nDt7AjGJQH"
+                  target="_blank"
+                  color="gray"
+                >
+                  Discord
+                </Link>
+                <Link
+                  href="https://github.com/tresabhi/blitzkit"
+                  target="_blank"
+                  color="gray"
+                >
+                  GitHub
+                </Link>
+
+                {/* patreon supporters? */}
+              </Flex>
+            </Flex>
+
             <Flex direction="column" gap="1">
               <Heading size="3">Legal</Heading>
               <Flex direction="column">
@@ -32,14 +86,12 @@ export function Footer() {
                 <Link href="/docs/legal/terms-of-service" color="gray">
                   Terms of service
                 </Link>
-              </Flex>
-            </Flex>
-
-            <Flex direction="column" gap="1">
-              <Heading size="3">About</Heading>
-              <Flex direction="column">
-                <Link href="/docs/about/credits" color="gray">
-                  Credits
+                <Link
+                  href="https://www.google.com/settings/ads"
+                  target="_blank"
+                  color="gray"
+                >
+                  Ad settings
                 </Link>
               </Flex>
             </Flex>