54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
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 |