feat: better text in header

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -84,7 +84,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
         height={
           isFullScreen ? '100vh' : `calc(100vh - ${NAVBAR_HEIGHT}px - 8rem)`
         }
-        maxHeight={isFullScreen ? undefined : '40rem'}
+        maxHeight={isFullScreen ? undefined : '60rem'}
         maxWidth={isFullScreen ? undefined : '120rem'}
         flexGrow="1"
         width={isFullScreen ? '100vw' : undefined}
@@ -92,47 +92,44 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
         top={isFullScreen ? '0' : undefined}
         left={isFullScreen ? '0' : undefined}
       >
-        <Flex justify="center">
+        <Flex
-          <Flex
+          justify="center"
-            display={isFullScreen ? 'none' : 'flex'}
+          position={{ initial: 'relative', md: 'absolute' }}
-            style={{ userSelect: 'none' }}
+          left={{ initial: '0', md: '5', lg: '9' }}
-            direction="column"
+          py="4"
-            align={{ initial: 'center', md: 'start' }}
+          top={{ initial: '8', md: '50%' }}
-            justify="center"
+          style={{ transform: 'translateY(-50%)' }}
-            pl={{ initial: '0', md: '9' }}
+          direction="column"
-            pt={{ initial: '5', md: '0' }}
+          gap={{ initial: '0', lg: '2' }}
-            overflow="hidden"
+          align={{ initial: 'center', md: 'start' }}
-            flexGrow="1"
+        >
-            maxWidth="40rem"
+          <Flex align="center" gap="3">
-          >
+            <Heading
-            <Flex align="center" gap="2">
+              color={treeColor}
-              <Heading
+              trim="end"
-                color={treeColor}
+              size={{ initial: '7', lg: '8' }}
-                trim="end"
-                size={{ initial: '7', lg: '8' }}
-              >
-                <Icon width="1em" height="1em" />
-              </Heading>
-
-              <Heading
-                weight="bold"
-                size={{ initial: '8', lg: '9' }}
-                wrap="nowrap"
-                color={treeColor}
-              >
-                {protagonist.name}
-              </Heading>
-            </Flex>
-
-            <Text
-              color="gray"
-              size="3"
-              weight="light"
-              ml={{ initial: '0', md: '7', lg: '8' }}
             >
-              BlitzKit Tankopedia
+              <Icon width="1em" height="1em" />
-            </Text>
+            </Heading>
+
+            <Heading
+              weight="bold"
+              size={{ initial: '7', lg: '9' }}
+              wrap="nowrap"
+              color={treeColor}
+            >
+              {protagonist.name}
+            </Heading>
           </Flex>
+
+          <Text
+            color="gray"
+            size={{ initial: '3', lg: '4' }}
+            weight="light"
+            ml={{ initial: '0', md: '7', lg: '8' }}
+          >
+            BlitzKit Tankopedia
+          </Text>
         </Flex>
 
         <Box