new ui hero updated

src/pages/main.tsx

@@ -0,0 +1,54 @@
+import { Box, Image, Stack, } from '@chakra-ui/react'
+import { Link } from '@tanstack/react-router'
+
+function HeroSection() {
+  return (
+    <Box
+      position="relative"
+      w="100%"
+      alignItems={"center"}
+      justifyContent={"center"}
+      overflow="hidden"
+
+    >
+
+      <Stack gap={0} >
+        <Box
+          overflow="hidden"
+          position="relative"
+          w="100%"
+          bgImage={"url('/images/new/confuse.webp')"}
+          bgSize="cover"
+          backgroundPosition="center"
+          justifyItems={'center'}
+          bgRepeat="no-repeat"
+          minH={{ base: "100vh", sm: "100vh", md: "100vh", lg: "100vh", xl: "100vh" }}
+        >
+
+          <Image src="/images/new/hero_text1x.webp"
+            position={'absolute'}
+            bottom={'100px'}
+            w={{ base: "90%", sm: "80%", md: "60%", lg: "50%", xl: "40%" }}
+          />
+          <Image src="/images/new/arrow_pc_1.webp"
+            position={'absolute'}
+            maxW={{ base: "40px", sm: "50px", md: "60px", lg: "70px", xl: "80%" }}
+            bottom={'10px'} />
+        </Box>
+
+      </Stack>
+
+    </Box>
+  )
+}
+
+function MainPage() {
+  return (
+    <>
+      <HeroSection />
+
+    </>
+  )
+}
+
+export default MainPage