hero1 and hero2 updated

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;