From fcacafa23712a87c067205b65d0ddb66c9fd3e2b Mon Sep 17 00:00:00 2001
From: philipcheung <zerophilip2013hk@gmail.com>
Date: Tue, 4 Nov 2025 13:02:45 +0800
Subject: [PATCH] updated supermaket images not center problem

---
 public/images/new/{oil.webp => oil_new.webp} | Bin
 src/components/new_ui/hero2.tsx              |   2 +-
 src/components/new_ui/truth.tsx              |  12 +++++++-----
 src/pages/recipe.tsx                         |   2 +-
 4 files changed, 9 insertions(+), 7 deletions(-)
 rename public/images/new/{oil.webp => oil_new.webp} (100%)

diff --git a/public/images/new/oil.webp b/public/images/new/oil_new.webp
similarity index 100%
rename from public/images/new/oil.webp
rename to public/images/new/oil_new.webp
diff --git a/src/components/new_ui/hero2.tsx b/src/components/new_ui/hero2.tsx
index 0c1919b..ba1182d 100644
--- a/src/components/new_ui/hero2.tsx
+++ b/src/components/new_ui/hero2.tsx
@@ -50,7 +50,7 @@ function Hero2() {
                     />
 
                     <MotionImage
-                        src="/images/new/oil.webp"
+                        src="/images/new/oil_new.webp"
                         zIndex={0}
                         position={'absolute'}
                         left="50%"
diff --git a/src/components/new_ui/truth.tsx b/src/components/new_ui/truth.tsx
index 27cf105..cb95a8c 100644
--- a/src/components/new_ui/truth.tsx
+++ b/src/components/new_ui/truth.tsx
@@ -212,9 +212,10 @@ function Truth() {
             <MotionFlex
                 gap={12}
                 direction={{ base: 'column', sm: 'column', md: 'row' }}
-                justifyItems="center"
                 mt={5}
-                align={{ base: 'center', sm: 'center', md: 'flex-end', lg: 'flex-end', xl: 'flex-end' }}
+                w="100%"
+                justify={{ base: 'center', sm: 'center', md: 'center' }}
+                align={{ base: 'center', sm: 'center', md: 'center' }}
                 initial={{ opacity: 0, y: 30 }}
                 animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                 transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
@@ -225,16 +226,17 @@ function Truth() {
                         initial={{ opacity: 0, scale: 0.8 }}
                         animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
                         transition={{ duration: 0.5, delay: 0.5 + index * 0.2, ease: "easeOut" }}
+                        style={{ display: 'flex', justifyContent: 'center' }}
                     >
                         <MotionStack
                             w={{ base: '250px', sm: '250px', md: '220px', lg: '250px', xl: '250px' }}
-                            mx="auto"
-                            justify={'flex-end'}
+                            justify={'center'}
+                            align={'center'}
                             initial={{ opacity: 0, y: 20 }}
                             animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
                             transition={{ duration: 0.4, delay: 0.6 + index * 0.2, ease: "easeOut" }}
                         >
-                            <Link href={image.link}>
+                            <Link href={image.link} style={{ display: 'flex', justifyContent: 'center' }}>
                                 <MotionImage src={image.image} cursor="pointer" fit={'contain'}
                                     loading="lazy"
                                     initial={{ opacity: 0, scale: 0.9 }}
diff --git a/src/pages/recipe.tsx b/src/pages/recipe.tsx
index d42d118..b6e00fe 100644
--- a/src/pages/recipe.tsx
+++ b/src/pages/recipe.tsx
@@ -157,7 +157,7 @@ function Recipe() {
             <SimpleGrid
                 columns={{ base: 1, sm: 1, md: 2, lg: 2, xl: 3 }}
                 p={{ base: 10, sm: 20, md: 20 }}
-                w={{ base: '100%', sm: '100%', md: '100%', lg: '80%', xl: '85%' }}
+                w={{ base: '100%', sm: '100%', md: '100%', lg: '90%', xl: '90%' }}
                 h={'auto'}
                 gap={{ base: 10, md: 5 }}
                 mx="auto"