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;

src/components/new_ui/hero2.tsx

@@ -0,0 +1,53 @@
+import { Box, Stack, Image } from '@chakra-ui/react'
+function Hero2() {
+    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: "70vw" }}
+                    bgImage={"url('/images/new/hero2bg.webp')"}
+                    bgSize="cover"
+                    backgroundPosition="center"
+                    justifyItems={'center'}
+                    bgRepeat="no-repeat"
+                    zIndex={-1}
+                >
+
+                    <Image src="/images/new/hero2title.webp"
+                        position={'absolute'}
+                        top={"50px"}
+                        w={{ base: "80%", sm: "70%", md: "60%", lg: "50vw", xl: "40vw" }}
+
+                    />
+                    <Image src="/images/new/hero2subtitle.webp"
+                        position={'absolute'}
+                        zIndex={1}
+                        top={"18vw"}
+                        right={{ base: "10px", sm: "10px", md: "10px", lg: "3vw", xl: "27vw" }}
+                        w={{ base: "80%", sm: "70%", md: "60%", lg: "50vw", xl: "20vw" }}
+
+                    />
+
+                    <Image src="/images/new/oil.webp"
+                        zIndex={0}
+                        position={'absolute'}
+                        bottom={-20}
+                        w={{ base: "80%", sm: "70%", md: "60%", lg: "50vw", xl: "44vw" }}
+
+                    />
+
+                </Box>
+
+            </Stack>
+
+        </Box>
+    );
+}
+export default Hero2;

src/pages/main.tsx

@@ -1,52 +1,15 @@
-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"
+import Hero1 from '../components/new_ui/hero1'
+import Hero2 from '../components/new_ui/hero2'
 
-    >
 
-      <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 />
-
+      <Hero1 />
+      <Hero2 />
     </>
   )
 }