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