From 63ba11891f046e0af1e53e4acf06b6b0e669777f Mon Sep 17 00:00:00 2001
From: philipcheung <zerophilip2013hk@gmail.com>
Date: Sun, 2 Nov 2025 15:24:52 +0800
Subject: [PATCH] added oilInfo component

---
 src/components/new_ui/oilInfo.tsx | 53 +++++++++++++++++++++++++++++++
 src/pages/main.tsx                |  2 ++
 2 files changed, 55 insertions(+)
 create mode 100644 src/components/new_ui/oilInfo.tsx

diff --git a/src/components/new_ui/oilInfo.tsx b/src/components/new_ui/oilInfo.tsx
new file mode 100644
index 0000000..ec0ebe3
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/main.tsx b/src/pages/main.tsx
index 1f409f2..cf6dd3e 100644
--- a/src/pages/main.tsx
+++ b/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 />
     </>
   )
 }