From 3d2b443dc73eeedecaba06d51ec57a2e4eb2873c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 3 Jun 2024 17:45:50 -0500
Subject: [PATCH] feat: new homepage

---
 src/app/page.tsx                      | 126 +++++++++++++++++++++++---
 src/app/tools/session/page.tsx        |  10 +-
 src/components/Link.tsx               |  35 +++----
 src/constants/{tools.ts => tools.tsx} |  33 +++++++
 4 files changed, 164 insertions(+), 40 deletions(-)
 rename src/constants/{tools.ts => tools.tsx} (72%)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 78cfa8c97..fc10c280f 100644
--- a/src/app/page.tsx
+++ b/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 /> */}
-
-      <div
-        style={{
-          background: `url(${imgur(tool.image)})`,
-          height: '50vh',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
+      <Grid
+        p="4"
+        gap="4"
+        columns={{
+          initial: undefined,
+          sm: '2',
         }}
+        flow="row-dense"
       >
-        <Heading>Tankopedia</Heading>
-      </div>
+        {TOOLS.map((tool) => {
+          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 }} />
     </>
diff --git a/src/app/tools/session/page.tsx b/src/app/tools/session/page.tsx
index 7f6436461..d5f05aee1 100644
--- a/src/app/tools/session/page.tsx
+++ b/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}
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 148f1c5fc..5b86781e6 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -1,29 +1,20 @@
-import {
-  Link as RadixLink,
-  LinkProps as RadixLinkProps,
-} from '@radix-ui/themes';
-import NextLink from 'next/link';
+'use client';
 
-interface LinkProps extends RadixLinkProps {
-  href: string;
-}
+import { LinkProps } from '@radix-ui/themes';
+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>
+    />
   );
 }
diff --git a/src/constants/tools.ts b/src/constants/tools.tsx
similarity index 72%
rename from src/constants/tools.ts
rename to src/constants/tools.tsx
index 6c6044e7a..2b02450e9 100644
--- a/src/constants/tools.ts
+++ b/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',
+    },
   },
 ];