added oilInfo component

src/components/new_ui/oilInfo.tsx

@@ -0,0 +1,53 @@
+import { Box, Stack, Image, Flex, Text, SimpleGrid } from '@chakra-ui/react'
+
+function OilInfo() {
+
+    return (
+        <Box
+            position="relative"
+            w="100%"
+            bgColor="#FFFBD3"
+            zIndex={3}
+            overflow="hidden"
+            justifyItems={'center'}
+        >
+
+            <SimpleGrid
+                columns={{ base: 1, sm: 1, md: 2 }}
+                p={{ base: 10, sm: 20, md: 20 }}
+                w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '60%' }}
+                h={'auto'}
+                gap={{ base: 10, md: 0 }}
+                justifyItems={'center'}
+                    alignItems={'center'}
+            >
+
+                <Box
+                    justifyItems={'center'}
+                    alignItems={'center'}
+                >
+                    <Image
+                        src='/images/cookmethods.webp'
+                        alt='cooking methods'
+                        w={{ base: '100%', sm: '90%', md: '85%' }}
+                    />
+                </Box>
+
+                <Box
+                    justifyItems={'center'}
+                    alignItems={'center'}
+                >
+                    <Image
+                        src='/images/new/recipe_button.webp'
+                        w={{ base: '100%', sm: '90%', md: '85%' }}
+                    />
+                </Box>
+
+
+            </SimpleGrid >
+
+        </Box >
+    )
+}
+
+export default OilInfo;

src/pages/main.tsx

@@ -4,6 +4,7 @@ import Hero2 from '../components/new_ui/hero2'
 import Wraning from '@/components/new_ui/wraning'
 import Info from '@/components/new_ui/info'
 import Advantages from '@/components/new_ui/advantages'
+import OilInfo from '@/components/new_ui/oilInfo'
 
 
 
@@ -16,6 +17,7 @@ function MainPage() {
       <Wraning />
       <Info />
       <Advantages />
+      <OilInfo />
     </>
   )
 }