feat: new homepage

src/app/page.tsx

@@ -1,24 +1,124 @@
-import { Heading } from '@radix-ui/themes';
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import { Button, Flex, Grid, Heading, Text } from '@radix-ui/themes';
+import Link from 'next/link';
 import { TOOLS } from '../constants/tools';
 import { imgur } from '../core/blitzkit/imgur';
 
 export default function Page() {
-  const tool = TOOLS[0];
-
   return (
     <>
-      {/* <Hero /> */}
+      <Grid
-
+        p="4"
-      <div
+        gap="4"
-        style={{
+        columns={{
-          background: `url(${imgur(tool.image)})`,
+          initial: undefined,
-          height: '50vh',
+          sm: '2',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
         }}
+        flow="row-dense"
       >
-        <Heading>Tankopedia</Heading>
+        {TOOLS.map((tool) => {
-      </div>
+          return (
+            <Flex
+              key={tool.id}
+              style={{
+                position: 'relative',
+                borderRadius: 'var(--radius-2)',
+                overflow: 'hidden',
+                backgroundImage: `url(${imgur(tool.image)})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                height: tool.significant ? 'min(320px, 50vh)' : '256px',
+              }}
+              gridColumn={{
+                initial: undefined,
+                sm: tool.significant ? '1 / 3' : undefined,
+              }}
+            >
+              <Link
+                href={tool.href ?? `/tools/${tool.id}`}
+                style={{
+                  display: 'flex',
+                  width: '100%',
+                  height: '100%',
+                  alignItems: 'end',
+                  textDecoration: 'none',
+                  color: 'inherit',
+                }}
+              >
+                <Flex
+                  px={{
+                    initial: '6',
+                    md: '8',
+                  }}
+                  py="6"
+                  gap="4"
+                  align="center"
+                  justify="between"
+                  width="100%"
+                  direction={{
+                    initial: 'column',
+                    sm: 'row',
+                  }}
+                  style={{
+                    backgroundColor: 'var(--color-panel-translucent)',
+                    backdropFilter: 'blur(16px)',
+                  }}
+                >
+                  <Flex
+                    direction="column"
+                    justify="center"
+                    align={{
+                      initial: 'center',
+                      sm: 'start',
+                    }}
+                  >
+                    <Heading
+                      align={{
+                        initial: 'center',
+                        sm: 'left',
+                      }}
+                      size={{
+                        initial: '7',
+                        sm: tool.significant ? '7' : '5',
+                      }}
+                      weight="medium"
+                    >
+                      {tool.title}
+                    </Heading>
+                    <Text
+                      align={{
+                        initial: 'center',
+                        sm: 'left',
+                      }}
+                      size={{
+                        initial: '4',
+                        sm: tool.significant ? '4' : '3',
+                      }}
+                      color="gray"
+                    >
+                      {tool.description}
+                    </Text>
+                  </Flex>
+
+                  <Button
+                    size={{
+                      initial: undefined,
+                      sm: tool.significant ? '3' : undefined,
+                    }}
+                    color={tool.button.color}
+                    style={{
+                      cursor: 'inherit',
+                    }}
+                  >
+                    {tool.button.text}
+                    <CaretRightIcon />
+                  </Button>
+                </Flex>
+              </Link>
+            </Flex>
+          );
+        })}
+      </Grid>
 
       <div style={{ flex: 1 }} />
     </>

src/app/tools/session/page.tsx

@@ -25,16 +25,16 @@ import { use, useEffect, useMemo, useRef, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
 import { UNLOCALIZED_REGION_NAMES_SHORT } from '../../../constants/regions';
 import {
-  generateStats,
-  prettifyStats,
-  Stat,
   STAT_KEYS,
   STAT_NAMES,
+  Stat,
+  generateStats,
+  prettifyStats,
   sumStats,
 } from '../../../core/blitz/generateStats';
 import {
-  getAccountInfo,
   IndividualAccountInfo,
+  getAccountInfo,
 } from '../../../core/blitz/getAccountInfo';
 import getTankStats from '../../../core/blitz/getTankStats';
 import { idToRegion } from '../../../core/blitz/idToRegion';
@@ -180,7 +180,7 @@ export default function Page({
   }
 
   return (
-    <PageWrapper>
+    <PageWrapper color="blue">
       <AlertDialog.Root
         open={showCCInaccessibilityPrompt}
         onOpenChange={setShowCCInaccessibilityPrompt}

src/components/Link.tsx

@@ -1,29 +1,20 @@
-import {
+'use client';
-  Link as RadixLink,
-  LinkProps as RadixLinkProps,
-} from '@radix-ui/themes';
-import NextLink from 'next/link';
 
-interface LinkProps extends RadixLinkProps {
+import { LinkProps } from '@radix-ui/themes';
-  href: string;
+import { useRouter } from 'next/navigation';
-}
+
+export function Link({ href, onClick, ...props }: LinkProps) {
+  const router = useRouter();
 
-export function Link({ href, children, target, onClick, ...props }: LinkProps) {
   return (
-    <RadixLink
+    <Link
       href={href}
-      onClick={(event) => event.preventDefault()}
+      onClick={(event) => {
+        event.preventDefault();
+        if (href) router.push(href);
+        onClick?.(event);
+      }}
       {...props}
-    >
+    />
-      <NextLink
-        tabIndex={-1}
-        href={href}
-        target={target}
-        onClick={onClick}
-        style={{ all: 'inherit' }}
-      >
-        {children}
-      </NextLink>
-    </RadixLink>
   );
 }

src/constants/tools.tsx

@@ -1,3 +1,6 @@
+import { Button } from '@radix-ui/themes';
+import { ComponentProps } from 'react';
+
 interface Tool {
   id: string;
   image: string;
@@ -6,6 +9,11 @@ interface Tool {
   disabled?: boolean;
   href?: string;
   pageDescription?: string;
+  button: {
+    text: string;
+    color: ComponentProps<typeof Button>['color'];
+  };
+  significant?: boolean;
 }
 
 export const TOOLS: Tool[] = [
@@ -25,6 +33,11 @@ export const TOOLS: Tool[] = [
     pageDescription:
       'Statistics, armor, and more for all tanks in World of Tanks Blitz',
     image: 'D8j6GZx',
+    button: {
+      text: 'Find your tank',
+      color: 'purple',
+    },
+    significant: true,
   },
   {
     id: 'rating',
@@ -33,6 +46,10 @@ export const TOOLS: Tool[] = [
     pageDescription:
       'Live and archived full rating leaderboard for World of Tanks Blitz',
     image: 'WEyMZH3',
+    button: {
+      text: 'View leaderboard',
+      color: 'orange',
+    },
   },
   {
     id: 'compare',
@@ -41,6 +58,10 @@ export const TOOLS: Tool[] = [
     pageDescription:
       'Compare tanks statistics and loadouts in World of Tanks Blitz',
     image: 'O6VNl6e',
+    button: {
+      text: 'Compare tanks',
+      color: 'crimson',
+    },
   },
   {
     // TODO: rename to tracker
@@ -50,6 +71,10 @@ export const TOOLS: Tool[] = [
     pageDescription:
       'Track your stats in real time as you play World of Tanks Blitz',
     image: 'HdG9sTf',
+    button: {
+      text: 'Start tracking',
+      color: 'blue',
+    },
   },
   {
     id: 'discord',
@@ -57,6 +82,10 @@ export const TOOLS: Tool[] = [
     description: 'Stats and tools right in Discord',
     href: 'https://discord.com/application-directory/1097673957865443370',
     image: '0bWE5hC',
+    button: {
+      text: 'Install now',
+      color: 'indigo',
+    },
   },
   {
     id: 'more',
@@ -64,5 +93,9 @@ export const TOOLS: Tool[] = [
     description: 'This site is being actively developed',
     href: 'https://discord.gg/nDt7AjGJQH',
     image: '1nPm6VI',
+    button: {
+      text: 'Join Discord',
+      color: 'indigo',
+    },
   },
 ];