philip-cat/healthy_oil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated supermaket images not center problem

Browse Source
This commit is contained in:
philipcheung
2025-11-04 13:02:45 +08:00
parent 96066a64d5
commit fcacafa237
4 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
public/images/new/oil.webp → public/images/new/oil_new.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 265 KiB

After

Width:  |  Height:  |  Size: 265 KiB

2
src/components/new_ui/hero2.tsx
View File

@@ -50,7 +50,7 @@ function Hero2() {
/> />
<MotionImage <MotionImage
src="/images/new/oil.webp" src="/images/new/oil_new.webp"
zIndex={0} zIndex={0}
position={'absolute'} position={'absolute'}
left="50%" left="50%"

12
src/components/new_ui/truth.tsx
View File

@@ -212,9 +212,10 @@ function Truth() {
<MotionFlex <MotionFlex
gap={12} gap={12}
direction={{ base: 'column', sm: 'column', md: 'row' }} direction={{ base: 'column', sm: 'column', md: 'row' }}
justifyItems="center"
mt={5} 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 }} initial={{ opacity: 0, y: 30 }}
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }} animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }} transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
@@ -225,16 +226,17 @@ function Truth() {
initial={{ opacity: 0, scale: 0.8 }} initial={{ opacity: 0, scale: 0.8 }}
animate={isTitleInView ? { opacity: 1, scale: 1 } : { 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" }} transition={{ duration: 0.5, delay: 0.5 + index * 0.2, ease: "easeOut" }}
style={{ display: 'flex', justifyContent: 'center' }}
> >
<MotionStack <MotionStack
w={{ base: '250px', sm: '250px', md: '220px', lg: '250px', xl: '250px' }} w={{ base: '250px', sm: '250px', md: '220px', lg: '250px', xl: '250px' }}
mx="auto" justify={'center'}
justify={'flex-end'} align={'center'}
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={isTitleInView ? { opacity: 1, y: 0 } : { 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" }} 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'} <MotionImage src={image.image} cursor="pointer" fit={'contain'}
loading="lazy" loading="lazy"
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}

2
src/pages/recipe.tsx
View File

@@ -157,7 +157,7 @@ function Recipe() {
<SimpleGrid <SimpleGrid
columns={{ base: 1, sm: 1, md: 2, lg: 2, xl: 3 }} columns={{ base: 1, sm: 1, md: 2, lg: 2, xl: 3 }}
p={{ base: 10, sm: 20, md: 20 }} 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'} h={'auto'}
gap={{ base: 10, md: 5 }} gap={{ base: 10, md: 5 }}
mx="auto" mx="auto"