hero1 and hero2 updated

src/components/new_ui/hero1.tsx

@@ -0,0 +1,90 @@
+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;