feat: homepage

packages/website/src/components/HomePageHotTanks.tsx

@@ -3,7 +3,8 @@ import { EyeOpenIcon } from '@radix-ui/react-icons';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { google } from 'googleapis';
 import { awaitableTankDefinitions } from '../core/awaitables/tankDefinitions';
-import { LocaleProvider } from '../hooks/useLocale';
+import { literals } from '../core/i18n/literals';
+import { LocaleProvider, useLocale } from '../hooks/useLocale';
 import { TankopediaPersistent } from '../stores/tankopediaPersistent';
 import { TankCard } from './TankCard';
 
@@ -79,13 +80,15 @@ export function HomePageHotTanks({ locale }: HomePageHotTanksProps) {
 }
 
 function Content() {
+  const { locale, strings } = useLocale();
+
   return (
     <Flex direction="column" pt="4" pb="8">
       <Heading align="center" size="5">
-        Popular tanks
+        {strings.website.home.hot_tanks.title}
       </Heading>
       <Text color="gray" align="center" mb="5" size="2">
-        Last 7 days
+        {literals(strings.website.home.hot_tanks.subtitle, ['7'])}
       </Text>
 
       <Flex justify="center" gap="4" wrap="wrap">
@@ -96,7 +99,7 @@ function Content() {
               discriminator={
                 <Flex align="center" gap="1" justify="center">
                   <EyeOpenIcon />
-                  {Math.round(row.views * (30 / 7)).toLocaleString('en-US')}
+                  {Math.round(row.views * (30 / 7)).toLocaleString(locale)}
                 </Flex>
               }
             />