feat: stuff

src/app/components/Hero.tsx

@@ -36,6 +36,8 @@ import { theme } from '../../stitches.config';
 
 const DISCRIMINATOR_WIDTH = 32;
 
+// https://i.imgur.com/rUPie9G.jpeg
+
 export function Hero() {
   const wideFormat = useWideFormat(512);
   const [showSearch, setShowSearch] = useState(false);

src/app/page.tsx

@@ -1,14 +1,24 @@
-import { times } from 'lodash';
-import { Hero } from './components/Hero';
+import { Heading } from '@radix-ui/themes';
+import { TOOLS } from '../constants/tools';
+import { imgur } from '../core/blitzkit/imgur';
 
 export default function Page() {
+  const tool = TOOLS[0];
+
   return (
     <>
-      <Hero />
+      {/* <Hero /> */}
 
-      {times(64, () => (
-        <p>test {Math.random()}</p>
-      ))}
+      <div
+        style={{
+          background: `url(${imgur(tool.image)})`,
+          height: '50vh',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }}
+      >
+        <Heading>Tankopedia</Heading>
+      </div>
 
       <div style={{ flex: 1 }} />
     </>

src/constants/tools.ts

@@ -1,5 +1,6 @@
 interface Tool {
   id: string;
+  image: string;
   title: string;
   description: string;
   disabled?: boolean;
@@ -15,6 +16,7 @@ export const TOOLS: Tool[] = [
   //   pageDescription:
   //     'Periodical player statistics and tanks played in World of Tanks Blitz',
   //   disabled: true,
+  //   image: '8gJGkKP'
   // },
   {
     id: 'tankopedia',
@@ -22,6 +24,7 @@ export const TOOLS: Tool[] = [
     description: 'Blitz tank encyclopedia',
     pageDescription:
       'Statistics, armor, and more for all tanks in World of Tanks Blitz',
+    image: 'D8j6GZx',
   },
   {
     id: 'rating',
@@ -29,6 +32,7 @@ export const TOOLS: Tool[] = [
     description: 'Full rating gamemode leaderboard',
     pageDescription:
       'Live and archived full rating leaderboard for World of Tanks Blitz',
+    image: 'WEyMZH3',
   },
   {
     id: 'compare',
@@ -36,6 +40,7 @@ export const TOOLS: Tool[] = [
     description: 'Compare tank statistics and loadouts',
     pageDescription:
       'Compare tanks statistics and loadouts in World of Tanks Blitz',
+    image: 'O6VNl6e',
   },
   {
     // TODO: rename to tracker
@@ -44,17 +49,20 @@ export const TOOLS: Tool[] = [
     description: 'Live session performance tracker',
     pageDescription:
       'Track your stats in real time as you play World of Tanks Blitz',
+    image: 'HdG9sTf',
   },
   {
     id: 'discord',
     title: 'Discord bot',
     description: 'Stats and tools right in Discord',
     href: 'https://discord.com/application-directory/1097673957865443370',
+    image: '0bWE5hC',
   },
   {
     id: 'more',
     title: 'More coming soon',
     description: 'This site is being actively developed',
     href: 'https://discord.gg/nDt7AjGJQH',
+    image: '1nPm6VI',
   },
 ];

src/core/blitzkit/imgur.ts

@@ -0,0 +1,13 @@
+interface ImgurOptions {
+  format: 'jpeg' | 'png';
+}
+
+const defaultImgurOptions: ImgurOptions = {
+  format: 'png',
+};
+
+export function imgur(id: string, imgurOptions?: Partial<ImgurOptions>) {
+  const options = { ...defaultImgurOptions, ...imgurOptions };
+
+  return `https://i.imgur.com/${id}.${options.format}`;
+}