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;