feat: new home screen

src/app/page.tsx

@@ -1,91 +1,83 @@
 'use client';
 
-import { CaretRightIcon } from '@radix-ui/react-icons';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Link as LinkRadix } from '@radix-ui/themes';
+import { Flex, Heading, Text, TextField } from '@radix-ui/themes';
-import Link from 'next/link';
+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
+        align="center"
+        justify="center"
+        style={{
+          height: `calc(75vh - ${NAVBAR_HEIGHT}px)`,
+          position: 'relative',
+        }}
+        p="4"
+      >
+        <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="5"
+          gap="4"
-        justify="center"
           align="center"
-        style={{ flex: 1 }}
+          justify="center"
+          style={{ position: 'relative', width: '100%' }}
         >
-        <LinkRadix href="https://www.patreon.com/tresabhi" target="_blank">
+          <Flex direction="column" align="center">
-          <Button
+            <Heading size="9" weight="bold" align="center">
-            color="ruby"
+              BlitzKit
-            style={{
+            </Heading>
-              boxShadow: `0 0 8px ${theme.colors.solidBackground_ruby}f0`,
+            <Text color="gray" align="center">
-            }}
+              Everything World of Tanks Blitz
-          >
+            </Text>
-            <PatreonIcon style={{ width: '1em', height: '1em' }} /> Consider
+          </Flex>
-            donating on Patreon
-          </Button>
-        </LinkRadix>
 
-        <Flex gap="3" wrap="wrap" align="center" justify="center">
+          <TextField.Root
-          {TOOLS.map((tool) => (
+            size="3"
-            <Link
+            placeholder="Search players or tanks..."
-              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)`,
+              width: 352,
-                cursor: tool.disabled ? 'default' : 'pointer',
+              maxWidth: '100%',
-                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
+            <TextField.Slot>
-                style={{
+              <MagnifyingGlassIcon />
-                  fontSize: 32,
+            </TextField.Slot>
-                  color: theme.colors.textHighContrast,
+          </TextField.Root>
-                  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>
-          ))}
         </Flex>
       </Flex>
+
+      <PageWrapper noFlex1>
+        hello there! ignore my existence pretty please :&#41;
       </PageWrapper>
+
+      <div style={{ flex: 1 }} />
+    </>
   );
 }

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,8 +9,15 @@ export function Footer() {
 
   return (
     <Theme radius="none">
-      <Card>
+      <Flex
-        <Flex justify="center" align="center" gap="3">
+        justify="center"
+        align="center"
+        gap="3"
+        p="3"
+        style={{
+          backgroundColor: 'var(--color-panel)',
+        }}
+      >
         <Flex
           align="center"
           justify={wideFormat ? 'between' : 'center'}
@@ -64,7 +71,6 @@ export function Footer() {
           </Flex>
         </Flex>
       </Flex>
-      </Card>
     </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"