fix: HubHero height

Author: nhsz

src/components/Hero/HubHero/index.tsx

@@ -1,5 +1,11 @@
-import * as React from "react"
-import { Box, Heading, HStack, Stack, Text } from "@chakra-ui/react"
+import {
+  Box,
+  Heading,
+  HStack,
+  Stack,
+  Text,
+  useBreakpointValue,
+} from "@chakra-ui/react"
 
 import type { CommonHeroProps } from "@/lib/types"
 
@@ -15,14 +21,22 @@ const HubHero = (props: CommonHeroProps) => {
     )
   }
 
+  const height = useBreakpointValue({
+    base: "192px",
+    md: "256px",
+    lg: "320px",
+    xl: "576px",
+    "2xl": "672px",
+  })
+
   return (
     <Box position="relative">
       <Image
         src={heroImg}
         alt=""
         priority
         sizes="100vw"
-        style={{ width: "100vw", objectFit: "cover", height: "auto" }}
+        style={{ width: "100vw", objectFit: "cover", height }}
       />
       <Stack
         spacing={{ base: "3", md: "4" }}