From 8deb92c0ffd51ccca7536b7f2e744e0553ecea85 Mon Sep 17 00:00:00 2001
From: philipcheung <zerophilip2013hk@gmail.com>
Date: Sat, 25 Oct 2025 20:19:33 +0800
Subject: [PATCH] hero2 animation updated

---
 src/components/new_ui/hero1.tsx |  4 ++--
 src/components/new_ui/hero2.tsx | 28 ++++++++++++++++++++++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/new_ui/hero1.tsx b/src/components/new_ui/hero1.tsx
index fa7799a..21e406e 100644
--- a/src/components/new_ui/hero1.tsx
+++ b/src/components/new_ui/hero1.tsx
@@ -94,7 +94,7 @@ function Hero1() {
             maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }}
             bottom={'10px'}
             display={{ base: "block", sm: "block", md: "none", lg: "none", xl: "none" }}
-            cycleDuration={0.3}
+            cycleDuration={0.5}
             intensity={0}
           />
           {/* Desktop arrow - shown on md, lg, xl */}
@@ -105,7 +105,7 @@ function Hero1() {
             maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }}
             bottom={'10px'}
             display={{ base: "none", sm: "none", md: "block", lg: "block", xl: "block" }}
-            cycleDuration={0.3}
+            cycleDuration={0.5}
             intensity={0}
           />
           {/* signs */}
diff --git a/src/components/new_ui/hero2.tsx b/src/components/new_ui/hero2.tsx
index 4e36273..eb9b1f9 100644
--- a/src/components/new_ui/hero2.tsx
+++ b/src/components/new_ui/hero2.tsx
@@ -1,4 +1,8 @@
 import { Box, Stack, Image } from '@chakra-ui/react'
+import { motion } from 'framer-motion'
+
+const MotionImage = motion.create(Image)
+
 function Hero2() {
     return (
         <Box
@@ -20,27 +24,39 @@ function Hero2() {
                     zIndex={-1}
                 >
 
-                    <Image src="/images/new/hero2title.webp"
+                    <MotionImage 
+                        src="/images/new/hero2title.webp"
                         position={'absolute'}
                         top={{ base: "10px", sm: "50px", md: "50px", lg: "50px", xl: "50px" }}
                         w={{ base: "70vw", sm: "60vw", md: "50vw", lg: "35vw", xl: "35vw" }}
-
+                        initial={{ opacity: 0, y: -30 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true, amount: 0.3 }}
+                        transition={{ duration: 0.8, delay: 0.2 }}
                     />
-                    <Image src="/images/new/hero2subtitle.webp"
+                    <MotionImage 
+                        src="/images/new/hero2subtitle.webp"
                         position={'absolute'}
                         zIndex={1}
                         top={{ base: "30vw", sm: "35vw", md: "24vw", lg: "20vw", xl: "18vw" }}
                         right={{ base: "15vw", sm: "15vw", md: "20vw", lg: "28vw", xl: "30vw" }}
                         w={{ base: "30vw", sm: "30vw", md: "25vw", lg: "18vw", xl: "18vw" }}
-
+                        initial={{ opacity: 0, x: 30 }}
+                        whileInView={{ opacity: 1, x: 0 }}
+                        viewport={{ once: true, amount: 0.3 }}
+                        transition={{ duration: 0.8, delay: 0.5 }}
                     />
 
-                    <Image src="/images/new/oil.webp"
+                    <MotionImage 
+                        src="/images/new/oil.webp"
                         zIndex={0}
                         position={'absolute'}
                         bottom={{ base: -10, sm: -20, 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 }}
+                        viewport={{ once: true, amount: 0.3 }}
+                        transition={{ duration: 0.8, delay: 0.5 }}
                     />
 
                 </Box>