feat: new home screen

src/components/Footer/index.tsx

@@ -1,4 +1,4 @@
-import { Card, Code, Flex, Link, Spinner, Text, Theme } from '@radix-ui/themes';
+import { Code, Flex, Link, Spinner, Text, Theme } from '@radix-ui/themes';
 import { Suspense } from 'react';
 import packageJSON from '../../../package.json';
 import { useWideFormat } from '../../hooks/useWideFormat';
@@ -9,62 +9,68 @@ export function Footer() {
 
   return (
     <Theme radius="none">
-      <Card>
-        <Flex justify="center" align="center" gap="3">
+      <Flex
+        justify="center"
+        align="center"
+        gap="3"
+        p="3"
+        style={{
+          backgroundColor: 'var(--color-panel)',
+        }}
+      >
+        <Flex
+          align="center"
+          justify={wideFormat ? 'between' : 'center'}
+          wrap="wrap"
+          style={{
+            width: '100%',
+            maxWidth: 800,
+            padding: '0 16px',
+          }}
+        >
+          <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>
+
           <Flex
+            justify="center"
             align="center"
-            justify={wideFormat ? 'between' : 'center'}
-            wrap="wrap"
+            gap="2"
             style={{
-              width: '100%',
               maxWidth: 800,
               padding: '0 16px',
             }}
           >
-            <Flex gap="1" justify="center" align="center">
-              <Text color="gray" size="2">
-                BlitzKit
-              </Text>
+            <Link size="2" href="https://tresabhi.github.io/" target="_blank">
+              Made by TrèsAbhi
+            </Link>
 
-              <Code color="gray" size="2">
-                {packageJSON.version}
-              </Code>
+            <Text color="gray">•</Text>
 
-              <Text color="gray" size="2">
-                for WoTB
-              </Text>
-
-              <Suspense fallback={<Spinner />}>
-                <WoTBVersion />
-              </Suspense>
-            </Flex>
-
-            <Flex
-              justify="center"
-              align="center"
-              gap="2"
-              style={{
-                maxWidth: 800,
-                padding: '0 16px',
-              }}
+            <Link
+              size="2"
+              href="https://tresabhi.github.io/blitzkit/guide/credits.html"
+              target="_blank"
             >
-              <Link size="2" href="https://tresabhi.github.io/" target="_blank">
-                Made by TrèsAbhi
-              </Link>
-
-              <Text color="gray">•</Text>
-
-              <Link
-                size="2"
-                href="https://tresabhi.github.io/blitzkit/guide/credits.html"
-                target="_blank"
-              >
-                Full credits
-              </Link>
-            </Flex>
+              Full credits
+            </Link>
           </Flex>
         </Flex>
-      </Card>
+      </Flex>
     </Theme>
   );
 }

src/components/PageWrapper.tsx

@@ -26,7 +26,6 @@ export default function PageWrapper({
 }: PageWrapperProps) {
   return (
     <Theme
-      {...containerProps}
       accentColor={color}
       style={{
         flex: noFlex1 ? undefined : 1,
@@ -37,6 +36,7 @@ export default function PageWrapper({
           : undefined,
         ...containerProps?.style,
       }}
+      {...containerProps}
     >
       <Flex
         direction="column"