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,20 +92,18 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
         top={isFullScreen ? '0' : undefined}
         left={isFullScreen ? '0' : undefined}
       >
-        <Flex justify="center">
         <Flex
-            display={isFullScreen ? 'none' : 'flex'}
-            style={{ userSelect: 'none' }}
-            direction="column"
-            align={{ initial: 'center', md: 'start' }}
           justify="center"
-            pl={{ initial: '0', md: '9' }}
+          position={{ initial: 'relative', md: 'absolute' }}
-            pt={{ initial: '5', md: '0' }}
+          left={{ initial: '0', md: '5', lg: '9' }}
-            overflow="hidden"
+          py="4"
-            flexGrow="1"
+          top={{ initial: '8', md: '50%' }}
-            maxWidth="40rem"
+          style={{ transform: 'translateY(-50%)' }}
+          direction="column"
+          gap={{ initial: '0', lg: '2' }}
+          align={{ initial: 'center', md: 'start' }}
         >
-            <Flex align="center" gap="2">
+          <Flex align="center" gap="3">
             <Heading
               color={treeColor}
               trim="end"
@@ -116,7 +114,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
 
             <Heading
               weight="bold"
-                size={{ initial: '8', lg: '9' }}
+              size={{ initial: '7', lg: '9' }}
               wrap="nowrap"
               color={treeColor}
             >
@@ -126,14 +124,13 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
 
           <Text
             color="gray"
-              size="3"
+            size={{ initial: '3', lg: '4' }}
             weight="light"
             ml={{ initial: '0', md: '7', lg: '8' }}
           >
             BlitzKit Tankopedia
           </Text>
         </Flex>
-        </Flex>
 
         <Box
           className="tank-sandbox-container"