diff --git a/public/images/new/recipe_button.webp b/public/images/new/recipe_button.webp
new file mode 100644
index 0000000..434b34c
Binary files /dev/null and b/public/images/new/recipe_button.webp differ
diff --git a/src/components/new_ui/advantages.tsx b/src/components/new_ui/advantages.tsx
index d016d1b..dfea8fd 100644
--- a/src/components/new_ui/advantages.tsx
+++ b/src/components/new_ui/advantages.tsx
@@ -4,16 +4,10 @@ import { useRef } from 'react'
 const MotionImage = motion.create(Image)
 const MotionFlex = motion.create(Flex)
 const MotionBox = motion.create(Box)
-import { colors } from '../../colors';
 const MotionStack = motion(Stack);
-interface InfoData {
-    id: number
-    title: string
-    image: string
-    titleImage: string
-    titleImage2: string
-    description: string
-}
+const MotionSimpleGrid = motion.create(SimpleGrid);
+const MotionText = motion(Text);
+import { colors } from '../../colors';
 
 
 
@@ -124,8 +118,11 @@ function Advantages() {
 
     const oilCubesRef = useRef(null);
     const isOilCubesInView = useInView(oilCubesRef, { once: true });
+    const mainRef = useRef(null);
+    const isMainInView = useInView(mainRef, { once: true });
     return (
-        <Box
+        <MotionBox
+            ref={mainRef}
             position="relative"
             w="100%"
             h="auto"
@@ -133,67 +130,94 @@ function Advantages() {
             zIndex={3}
             overflow="hidden"
             justifyItems={'center'}
+            initial={{ opacity: 0 }}
+            animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
         >
 
-            <SimpleGrid
+            <MotionSimpleGrid
                 columns={{ base: 1, sm: 1, md: 2 }}
                 p={4}
                 w={{ base: '100%', sm: '95vw', md: '90vw', lg: '80vw', xl: '70vw' }}
                 h={'auto'}
-
+                initial={{ opacity: 0, y: 50 }}
+                animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
+                transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
             >
-                {info.map((item) => (
-                    <Stack
+                {info.map((item, index) => (
+                    <MotionStack
                         w={'100%'}
                         alignItems="center"
-                        key={item.id}>
-                        <Image
+                        key={item.id}
+                        initial={{ opacity: 0, y: 30 }}
+                        animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+                        transition={{ duration: 0.6, delay: index * 0.15, ease: "easeOut" }}
+                    >
+                        <MotionImage
                             w={{ base: '45vw', sm: '180px', md: '80px', lg: '110px', xl: '110px' }}
                             src={item.image}
+                            initial={{ opacity: 0, scale: 0.8 }}
+                            animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
+                            transition={{ duration: 0.5, delay: index * 0.15 + 0.1, ease: "easeOut" }}
                         />
 
                         {item.id === 3  ? (
                             <>
-                                <Text
-                                    mt={{ base: '-70px', sm: '-70px', md: '-45px', lg: '-75px', xl: '-75px' }}
+                                <MotionText
+                                    mt={{ base: '-70px', sm: '-70px', md: '-40px', lg: '-55px', xl: '-55px' }}
                                     className='font-melle font-xbold'
                                     fontWeight={400}
                                     color='white'
                                     fontSize={{ base: '9vw', sm: '4xl', md: '3xl', lg: '5xl', xl: '5xl' }}
+                                    initial={{ opacity: 0, x: -20 }}
+                                    animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
+                                    transition={{ duration: 0.5, delay: index * 0.15 + 0.2, ease: "easeOut" }}
                                 >
                                     {item.title}
-                                </Text>
-                                <Image
-                                    mt={{ base: '-15px', sm: '-15px', md: '-15px', lg: '-25px', xl: '-25px' }}
+                                </MotionText>
+                                <MotionImage
+                                    mt={{ base: '-15px', sm: '-15px', md: '-15px', lg: '-20px', xl: '-20px' }}
                                     h={{ base: '18vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }}
                                     src={item.titleImage2}
+                                    initial={{ opacity: 0, scale: 0.9 }}
+                                    animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
+                                    transition={{ duration: 0.5, delay: index * 0.15 + 0.3, ease: "easeOut" }}
                                 />
                             </>
                         ) : (
                             <>
-                                <Image
+                                <MotionImage
                                     mt={{ base: '-70px', sm: '-70px', md: '-30px', lg: '-50px', xl: '-50px' }}
                                     h={{ base: '18vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }}
                                     src={item.titleImage2}
+                                    initial={{ opacity: 0, scale: 0.9 }}
+                                    animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
+                                    transition={{ duration: 0.5, delay: index * 0.15 + 0.2, ease: "easeOut" }}
                                 />
 
-                                <Text
+                                <MotionText
                                     mt={{ base: '-25px', sm: '-25px', md: '-15px', lg: '-25px', xl: '-25px' }}
                                     className='font-melle font-xbold'
                                     fontWeight={400}
                                     color='white'
                                     fontSize={{ base: '9vw', sm: '4xl', md: '3xl', lg: '5xl', xl: '5xl' }}
+                                    initial={{ opacity: 0, x: -20 }}
+                                    animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
+                                    transition={{ duration: 0.5, delay: index * 0.15 + 0.3, ease: "easeOut" }}
                                 >
                                     {item.title}
-                                </Text>
+                                </MotionText>
                             </>
                         )}
-                        <Image
+                        <MotionImage
                             h={{ base: item.id != 4 ? '50vw' : '70vw', sm: item.id != 4 ? '200px' : '300px', md: item.id != 4 ? '180px' : '280px', lg: item.id != 4 ? '200px' : '300px', xl: item.id != 4 ? '200px' : '300px' }}
                             src={item.titleImage}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+                            transition={{ duration: 0.5, delay: index * 0.15 + 0.4, ease: "easeOut" }}
                         />
 
-                        <Text
+                        <MotionText
                             w={{ base: '90%', sm: '80%', md: '80%', lg: '80%', xl: '80%' }}
                             className="font-noto-sans font-demi-light"
                             fontSize={{ base: 'xl', sm: 'xl', md: 'xl', lg: '2xl', xl: '2xl' }}
@@ -201,9 +225,12 @@ function Advantages() {
                             lineHeight="1.8"
                             textAlign="left"
                             whiteSpace="pre-wrap"
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+                            transition={{ duration: 0.5, delay: index * 0.15 + 0.5, ease: "easeOut" }}
                         >
                             {renderDescription(item.description)}
-                        </Text>
+                        </MotionText>
 
                         {item.id === 4 ? (
                             <Box
@@ -215,7 +242,11 @@ function Advantages() {
                                 mt={-4}
                                 ml={3}
                             >
-                                <Flex  flexDirection={'column'} justifyContent="center" gap="10px" maxWidth="945px">
+                                <MotionFlex flexDirection={'column'} justifyContent="center" gap="10px" maxWidth="945px"
+                                    initial={{ opacity: 0, y: 30 }}
+                                    animate={isOilCubesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+                                    transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
+                                >
                                     {oilCube.map((item, index) => (
                                         <MotionStack
                                             key={index}
@@ -247,20 +278,20 @@ function Advantages() {
                                             </Text>
                                         </MotionStack>
                                     ))}
-                                </Flex>
+                                </MotionFlex>
                             </Box>
 
                         ) : (
                             <></>
                         )}
 
-                    </Stack>
+                    </MotionStack>
                 ))}
-            </SimpleGrid>
+            </MotionSimpleGrid>
 
 
 
-        </Box >
+        </MotionBox >
     )
 }
 
diff --git a/src/components/new_ui/hero2.tsx b/src/components/new_ui/hero2.tsx
index a3668b8..0b122a5 100644
--- a/src/components/new_ui/hero2.tsx
+++ b/src/components/new_ui/hero2.tsx
@@ -16,7 +16,7 @@ function Hero2() {
                 <Box
                     position="relative"
                     w="100%"
-                    minH={{ base: "115vw", sm: "105vw", md: "90vw", lg: "73vw", xl: "65vw" }}
+                    minH={{ base: "115vw", sm: "115vw", md: "90vw", lg: "73vw", xl: "65vw" }}
                     bgImage={"url('/images/new/hero2bg.webp')"}
                     bgSize="cover"
                     backgroundPosition="center"
@@ -52,7 +52,7 @@ function Hero2() {
                         src="/images/new/oil.webp"
                         zIndex={0}
                         position={'absolute'}
-                        bottom={{ base: -10, sm: -20, md: -20, lg: -20, xl: -20 }}
+                        bottom={{ base: -10, sm: -10, md: -20, lg: -20, xl: -20 }}
                         w={{ base: "80vw", sm: "70vw", md: "60vw", lg: "50vw", xl: "40vw" }}
                         initial={{ opacity: 0, y: 50 }}
                         whileInView={{ opacity: 1, y: 0 }}