From 2ce69b085ae67eef9ef58900bc652591a8658620 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 20 May 2024 14:16:13 -0500
Subject: [PATCH] feat: new home screen

---
 src/app/page.tsx                | 140 +++++++++++++++-----------------
 src/components/Footer/index.tsx |  96 ++++++++++++----------
 src/components/PageWrapper.tsx  |   2 +-
 3 files changed, 118 insertions(+), 120 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 980e794ed..27a76797a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,91 +1,83 @@
 'use client';
 
-import { CaretRightIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Link as LinkRadix } from '@radix-ui/themes';
-import Link from 'next/link';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Flex, Heading, Text, TextField } from '@radix-ui/themes';
+import { NAVBAR_HEIGHT } from '../components/Navbar';
 import PageWrapper from '../components/PageWrapper';
-import { TOOLS } from '../constants/tools';
-import { PatreonIcon } from '../icons/Patreon';
 import { theme } from '../stitches.config';
-import * as styles from './page.css';
 
 export default function Page() {
   return (
-    <PageWrapper>
+    <>
       <Flex
-        direction="column"
-        gap="5"
-        justify="center"
         align="center"
-        style={{ flex: 1 }}
+        justify="center"
+        style={{
+          height: `calc(75vh - ${NAVBAR_HEIGHT}px)`,
+          position: 'relative',
+        }}
+        p="4"
       >
-        <LinkRadix href="https://www.patreon.com/tresabhi" target="_blank">
-          <Button
-            color="ruby"
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            background: 'url(https://i.imgur.com/qfFQvyl.png)',
+            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}c0, ${theme.colors.appBackground1}ff)`,
+          }}
+        />
+
+        <Flex
+          direction="column"
+          gap="4"
+          align="center"
+          justify="center"
+          style={{ position: 'relative', width: '100%' }}
+        >
+          <Flex direction="column" align="center">
+            <Heading size="9" weight="bold" align="center">
+              BlitzKit
+            </Heading>
+            <Text color="gray" align="center">
+              Everything World of Tanks Blitz
+            </Text>
+          </Flex>
+
+          <TextField.Root
+            size="3"
+            placeholder="Search players or tanks..."
             style={{
-              boxShadow: `0 0 8px ${theme.colors.solidBackground_ruby}f0`,
+              width: 352,
+              maxWidth: '100%',
             }}
           >
-            <PatreonIcon style={{ width: '1em', height: '1em' }} /> Consider
-            donating on Patreon
-          </Button>
-        </LinkRadix>
-
-        <Flex gap="3" wrap="wrap" align="center" justify="center">
-          {TOOLS.map((tool) => (
-            <Link
-              href={tool.href ?? `/tools/${tool.id}`}
-              target={tool.href ? '_blank' : undefined}
-              className={
-                tool.disabled ? styles.tool.disabled : styles.tool.enabled
-              }
-              style={{
-                backgroundImage: `url(/assets/banners/${tool.id}.webp)`,
-                cursor: tool.disabled ? 'default' : 'pointer',
-                opacity: tool.disabled ? 0.25 : 1,
-                height: 128,
-                minWidth: 256,
-                flex: 1,
-                borderRadius: 8,
-                textDecoration: 'none',
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-                overflow: 'hidden',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-                justifyContent: 'flex-end',
-                padding: 16,
-                transition: `box-shadow ${theme.durations.regular}`,
-              }}
-              onClick={(event) => {
-                if (tool.disabled) event.preventDefault();
-              }}
-            >
-              <span
-                style={{
-                  fontSize: 32,
-                  color: theme.colors.textHighContrast,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                {tool.title}
-                <CaretRightIcon style={{ width: '1em', height: '1em' }} />
-              </span>
-              <span
-                style={{
-                  color: theme.colors.textLowContrast,
-                  fontSize: 16,
-                }}
-              >
-                {tool.disabled ? 'Coming soon!' : tool.description}
-              </span>
-            </Link>
-          ))}
+            <TextField.Slot>
+              <MagnifyingGlassIcon />
+            </TextField.Slot>
+          </TextField.Root>
         </Flex>
       </Flex>
-    </PageWrapper>
+
+      <PageWrapper noFlex1>
+        hello there! ignore my existence pretty please :&#41;
+      </PageWrapper>
+
+      <div style={{ flex: 1 }} />
+    </>
   );
 }
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index fc51ddae6..0851aa1ec 100644
--- a/src/components/Footer/index.tsx
+++ b/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>
   );
 }
diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx
index db3489ed5..9c391cf38 100644
--- a/src/components/PageWrapper.tsx
+++ b/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"