feat: better footer

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

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>
                 }
               />
             </>