updated ui

src/components/new_ui/oilInfo.tsx

@@ -1,6 +1,7 @@
 import { Box, Image, SimpleGrid } from '@chakra-ui/react'
 import { motion, useInView } from 'framer-motion'
 import { useRef } from 'react'
+import { useRouter, useRouterState } from '@tanstack/react-router'
 
 const MotionImage = motion.create(Image)
 const MotionBox = motion.create(Box)
@@ -9,6 +10,20 @@ const MotionSimpleGrid = motion.create(SimpleGrid)
 function OilInfo() {
     const mainRef = useRef(null);
     const isMainInView = useInView(mainRef, { once: true });
+    const router = useRouter();
+    const { location } = useRouterState();
+
+    const handleRecipeNavigation = () => {
+        const isOnRecipePage = location.pathname === '/recipe';
+        
+        if (isOnRecipePage) {
+            // Already on recipe page
+            return;
+        }
+        
+        // Navigate from main page - force reload to ensure Instagram embeds work
+        window.location.href = '/recipe';
+    };
 
     return (
         <MotionBox
@@ -62,11 +77,13 @@ function OilInfo() {
                     transition={{ duration: 0.6, delay: 0.8, ease: "easeOut" }}
                 >
                     <MotionImage
-                        src='/images/new/recipe_button.webp'
-                        w={{ base: '100%', sm: '90%', md: '85%' }}
+                        src='/images/new/buttons.webp'
+                        w={{ base: '100%', sm: '100%', md: '90%' }}
                         initial={{ opacity: 0, scale: 0.8 }}
                         animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
                         transition={{ duration: 0.5, delay: 1.0, ease: "easeOut" }}
+                        cursor="pointer"
+                        onClick={handleRecipeNavigation}
                     />
                 </MotionBox>