90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
import { Box, Image, Stack, } from '@chakra-ui/react'
|
|
|
|
function Hero1() {
|
|
const bigWarningSize = { base: "80px", sm: "100px", md: "120px", lg: "9vw", xl: "8vw" };
|
|
const smallWarningSize = { base: "40px", sm: "50px", md: "60px", lg: "6vw", xl: "5vw" };
|
|
return (
|
|
<Box
|
|
position="relative"
|
|
w="100%"
|
|
alignItems={"center"}
|
|
justifyContent={"center"}
|
|
|
|
>
|
|
<Stack gap={0}>
|
|
<Box
|
|
position="relative"
|
|
w="100%"
|
|
minH={{ base: "100vh", sm: "100vh", md: "100vh", lg: "70vw", xl: "45vw" }}
|
|
bgImage={"url('/images/new/confuse.webp')"}
|
|
bgSize="cover"
|
|
backgroundPosition="center"
|
|
justifyItems={'center'}
|
|
bgRepeat="no-repeat"
|
|
>
|
|
<Image src="/images/new/hero_text1x.webp"
|
|
position={'absolute'}
|
|
bottom={'100px'}
|
|
maxW={{ base: "90%", sm: "80%", md: "60%", lg: "50vw", xl: "35vw" }}
|
|
/>
|
|
<Image src="/images/new/arrow_pc_1.webp"
|
|
position={'absolute'}
|
|
maxW={{ base: "40px", sm: "50px", md: "60px", lg: "70%", xl: "70%" }}
|
|
bottom={'10px'} />
|
|
{/* signs */}
|
|
<Image src="/images/new/bigwarning.webp"
|
|
position={'absolute'}
|
|
w={bigWarningSize}
|
|
left={'20vw'}
|
|
top={'5vw'}
|
|
/>
|
|
<Image src="/images/new/bigwarning.webp"
|
|
position={'absolute'}
|
|
w={smallWarningSize}
|
|
left={'25vw'}
|
|
bottom={'18vw'}
|
|
/>
|
|
<Image src="/images/new/bigwarning.webp"
|
|
position={'absolute'}
|
|
w={bigWarningSize}
|
|
right={'20vw'}
|
|
top={'25vw'}
|
|
/>
|
|
<Image src="/images/new/bigwarning.webp"
|
|
position={'absolute'}
|
|
w={bigWarningSize}
|
|
right={'18vw'}
|
|
top={'10vw'}
|
|
/>
|
|
{/* Warning Texts */}
|
|
<Image src="/images/new/threehightext.webp"
|
|
position={'absolute'}
|
|
w={{ base: "100px", sm: "120px", md: "150px", lg: "11vw", xl: "10vw" }}
|
|
left={{ base: "20px", sm: "30px", md: "40px", lg: "30vw", xl: "37vw" }}
|
|
top={{ base: "3vw", sm: "3vw", md: "3vw", lg: "7vw", xl: "3vw" }}
|
|
/>
|
|
<Image src="/images/new/fattext.webp"
|
|
position={'absolute'}
|
|
w={{ base: "100px", sm: "120px", md: "150px", lg: "10vw", xl: "9vw" }}
|
|
left={{ base: "25vw", sm: "25vw", md: "25vw", lg: "18vw", xl: "25vw" }}
|
|
top={{ base: "14vw", sm: "14vw", md: "14vw", lg: "20vw", xl: "14vw" }}
|
|
/>
|
|
<Image src="/images/new/centerfattext.webp"
|
|
position={'absolute'}
|
|
w={{ base: "100px", sm: "120px", md: "150px", lg: "14vw", xl: "13vw" }}
|
|
right={{ base: "35vw", sm: "35vw", md: "35vw", lg: "34vw", xl: "35vw" }}
|
|
top={{ base: "5vw", sm: "5vw", md: "5vw", lg: "7vw", xl: "5vw" }}
|
|
/>
|
|
<Image src="/images/new/hairlosstext.webp"
|
|
position={'absolute'}
|
|
w={{ base: "100px", sm: "120px", md: "150px", lg: "8vw", xl: "7vw" }}
|
|
right={{ base: "26vw", sm: "26vw", md: "26vw", lg: "26vw", xl: "26vw" }}
|
|
top={{ base: "12vw", sm: "12vw", md: "12vw", lg: "18vw", xl: "12vw" }}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default Hero1; |