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

other bowrser center problem fixed

Browse Source
This commit is contained in:
philipcheung
2025-11-02 21:47:32 +08:00
parent 144a362a16
commit c9931d670e
8 changed files with 53 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/new_ui/CyclingImage.tsx
View File

@@ -12,6 +12,7 @@ interface CyclingImageProps {
right?: any right?: any
bottom?: any bottom?: any
display?: any display?: any
transform?: any
cycleDuration?: number // Duration of one complete cycle in seconds cycleDuration?: number // Duration of one complete cycle in seconds
intensity?: number // How dark/light it gets (0-1, where 1 is maximum) intensity?: number // How dark/light it gets (0-1, where 1 is maximum)
timingFunction?: string // CSS timing function timingFunction?: string // CSS timing function
@@ -31,6 +32,7 @@ const CyclingImage = ({
right, right,
bottom, bottom,
display, display,
transform,
cycleDuration = 3, cycleDuration = 3,
intensity = 0.5, intensity = 0.5,
timingFunction = 'ease-in-out', timingFunction = 'ease-in-out',
@@ -95,6 +97,7 @@ const CyclingImage = ({
w={w} w={w}
maxW={maxW} maxW={maxW}
left={left} left={left}
transform={transform}
top={top} top={top}
right={right} right={right}
bottom={bottom} bottom={bottom}

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

@@ -130,7 +130,6 @@ function Advantages() {
bgColor="#9AC035" bgColor="#9AC035"
zIndex={3} zIndex={3}
overflow="hidden" overflow="hidden"
justifyItems={'center'}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={isMainInView ? { opacity: 1 } : { opacity: 0 }} animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }} transition={{ duration: 0.8, ease: "easeOut" }}
@@ -142,6 +141,7 @@ function Advantages() {
pb ={10} pb ={10}
w={{ base: '100%', sm: '95vw', md: '90vw', lg: '80vw', xl: '70vw' }} w={{ base: '100%', sm: '95vw', md: '90vw', lg: '80vw', xl: '70vw' }}
h={'auto'} h={'auto'}
mx="auto"
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }} animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }} transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}

60
src/components/new_ui/hero1.tsx
View File

@@ -1,6 +1,9 @@
import { Box, Image, Stack } from '@chakra-ui/react' import { Box, Image, Stack } from '@chakra-ui/react'
import CyclingImage from './CyclingImage' import CyclingImage from './CyclingImage'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { motion } from 'framer-motion'
const MotionImage = motion.create(Image)
function Hero1() { function Hero1() {
const [headerHeight, setHeaderHeight] = useState(80); const [headerHeight, setHeaderHeight] = useState(80);
@@ -20,18 +23,18 @@ function Hero1() {
}; };
delayedUpdate(); delayedUpdate();
const resizeObserver = new ResizeObserver(() => { const resizeObserver = new ResizeObserver(() => {
setTimeout(updateHeaderHeight, 50); setTimeout(updateHeaderHeight, 50);
}); });
const header = document.querySelector('[data-header="true"]'); const header = document.querySelector('[data-header="true"]');
if (header) { if (header) {
resizeObserver.observe(header); resizeObserver.observe(header);
} }
window.addEventListener('resize', delayedUpdate); window.addEventListener('resize', delayedUpdate);
return () => { return () => {
window.removeEventListener('resize', delayedUpdate); window.removeEventListener('resize', delayedUpdate);
resizeObserver.disconnect(); resizeObserver.disconnect();
@@ -88,43 +91,38 @@ function Hero1() {
} }
`} `}
</style> </style>
<Stack gap={0}> <Stack gap={0}>
<Box <Box
position="relative" position="relative"
w="100%" w="100%"
minH={{ base: "110vw", sm: "110vw", md: "70vw", lg: "70vw", xl: "45vw" }} minH={{ base: "110vw", sm: "110vw", md: "70vw", lg: "70vw", xl: "45vw" }}
bgImage={{base:"url('/images/new/confuse_mobile.webp')",sm:"url('/images/new/confuse_mobile.webp')",md:"url('/images/new/confuse.webp')",lg:"url('/images/new/confuse.webp')",xl:"url('/images/new/confuse.webp')"}} bgImage={{ base: "url('/images/new/confuse_mobile.webp')", sm: "url('/images/new/confuse_mobile.webp')", md: "url('/images/new/confuse.webp')", lg: "url('/images/new/confuse.webp')", xl: "url('/images/new/confuse.webp')" }}
bgSize="cover" bgSize="cover"
backgroundPosition="center" backgroundPosition="center"
justifyItems={'center'} justifyItems={'center'}
bgRepeat="no-repeat" bgRepeat="no-repeat"
> >
{/* Hero 1 title */} {/* Hero 1 title */}
<Image src="/images/new/hero_text1x.webp" <MotionImage
src="/images/new/hero_text1x.webp"
position={'absolute'} position={'absolute'}
left="50%"
bottom={{ base: '70px', sm: '100px', md: '100px', lg: '100px', xl: '100px' }} bottom={{ base: '70px', sm: '100px', md: '100px', lg: '100px', xl: '100px' }}
maxW={{ base: "70vw", sm: "70vw", md: "50vw", lg: "50vw", xl: "35vw" }} maxW={{ base: "70vw", sm: "70vw", md: "50vw", lg: "50vw", xl: "35vw" }}
alt='hero title' alt='hero title'
css={{ initial={{ opacity: 0, y: 30, x: '-50%' }}
animation: 'fadeInUp 1s ease-out', whileInView={{ opacity: 1, y: 0, x: '-50%' }}
'@keyframes fadeInUp': { viewport={{ once: true, amount: 0.3 }}
from: { transition={{ duration: 0.8, ease: "easeOut" }}
opacity: 0,
transform: 'translateY(30px)'
},
to: {
opacity: 1,
transform: 'translateY(0)'
}
}
}}
/> />
{/* Mobile arrow - shown on base and sm */} {/* Mobile arrow - shown on base and sm */}
<CyclingImage <CyclingImage
src="/images/new/arrow_mobile_1.webp" src="/images/new/arrow_mobile_1.webp"
src2="/images/new/arrow_mobile_2.webp" src2="/images/new/arrow_mobile_2.webp"
position={'absolute'} position={'absolute'}
left="50%"
transform="translateX(-50%)"
maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }} maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }}
bottom={'10px'} bottom={'10px'}
display={{ base: "block", sm: "block", md: "none", lg: "none", xl: "none" }} display={{ base: "block", sm: "block", md: "none", lg: "none", xl: "none" }}
@@ -132,10 +130,12 @@ function Hero1() {
intensity={0} intensity={0}
/> />
{/* Desktop arrow - shown on md, lg, xl */} {/* Desktop arrow - shown on md, lg, xl */}
<CyclingImage <CyclingImage
src="/images/new/arrow_pc_1.webp" src="/images/new/arrow_pc_1.webp"
src2="/images/new/arrow_pc_2.webp" src2="/images/new/arrow_pc_2.webp"
position={'absolute'} position={'absolute'}
left="50%"
transform="translateX(-50%)"
maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }} maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }}
bottom={'10px'} bottom={'10px'}
display={{ base: "none", sm: "none", md: "block", lg: "block", xl: "block" }} display={{ base: "none", sm: "none", md: "block", lg: "block", xl: "block" }}
@@ -153,7 +153,7 @@ function Hero1() {
animationDelay: '0s' animationDelay: '0s'
}} }}
> >
<CyclingImage <CyclingImage
src="/images/new/bigwarning.webp" src="/images/new/bigwarning.webp"
position={'relative'} position={'relative'}
w="100%" w="100%"
@@ -171,7 +171,7 @@ function Hero1() {
animationDelay: '0.5s' animationDelay: '0.5s'
}} }}
> >
<CyclingImage <CyclingImage
src="/images/new/bigwarning.webp" src="/images/new/bigwarning.webp"
position={'relative'} position={'relative'}
w="100%" w="100%"
@@ -189,7 +189,7 @@ function Hero1() {
animationDelay: '1s' animationDelay: '1s'
}} }}
> >
<CyclingImage <CyclingImage
src="/images/new/bigwarning.webp" src="/images/new/bigwarning.webp"
position={'relative'} position={'relative'}
w="100%" w="100%"
@@ -207,7 +207,7 @@ function Hero1() {
animationDelay: '1.5s' animationDelay: '1.5s'
}} }}
> >
<CyclingImage <CyclingImage
src="/images/new/bigwarning.webp" src="/images/new/bigwarning.webp"
position={'relative'} position={'relative'}
w="100%" w="100%"
@@ -226,7 +226,7 @@ function Hero1() {
animationDelay: '0.2s' animationDelay: '0.2s'
}} }}
> >
<CyclingImage <CyclingImage
src="/images/new/threehightext.webp" src="/images/new/threehightext.webp"
position={'relative'} position={'relative'}
w="100%" w="100%"
@@ -244,7 +244,7 @@ function Hero1() {
animationDelay: '0.7s' animationDelay: '0.7s'
}} }}
> >
<CyclingImage <CyclingImage
src="/images/new/fattext.webp" src="/images/new/fattext.webp"
position={'relative'} position={'relative'}
w="100%" w="100%"
@@ -262,7 +262,7 @@ function Hero1() {
animationDelay: '0.4s' animationDelay: '0.4s'
}} }}
> >
<CyclingImage <CyclingImage
src="/images/new/centerfattext.webp" src="/images/new/centerfattext.webp"
position={'relative'} position={'relative'}
w="100%" w="100%"
@@ -280,7 +280,7 @@ function Hero1() {
animationDelay: '0.9s' animationDelay: '0.9s'
}} }}
> >
<CyclingImage <CyclingImage
src="/images/new/hairlosstext.webp" src="/images/new/hairlosstext.webp"
position={'relative'} position={'relative'}
w="100%" w="100%"

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

@@ -13,7 +13,7 @@ function Hero2() {
> >
<Stack gap={0}> <Stack gap={0}>
<Box <Stack
position="relative" position="relative"
w="100%" w="100%"
minH={{ base: "115vw", sm: "115vw", md: "90vw", lg: "73vw", xl: "65vw" }} minH={{ base: "115vw", sm: "115vw", md: "90vw", lg: "73vw", xl: "65vw" }}
@@ -28,10 +28,11 @@ function Hero2() {
<MotionImage <MotionImage
src="/images/new/hero2title.webp" src="/images/new/hero2title.webp"
position={'absolute'} position={'absolute'}
left="50%"
top={{ base: "10px", sm: "50px", md: "50px", lg: "50px", xl: "50px" }} top={{ base: "10px", sm: "50px", md: "50px", lg: "50px", xl: "50px" }}
w={{ base: "70vw", sm: "60vw", md: "50vw", lg: "35vw", xl: "35vw" }} w={{ base: "70vw", sm: "60vw", md: "50vw", lg: "35vw", xl: "35vw" }}
initial={{ opacity: 0, y: -30 }} initial={{ opacity: 0, y: -30, x: '-50%' }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0, x: '-50%' }}
viewport={{ once: true, amount: 0.3 }} viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, delay: 0.2 }} transition={{ duration: 0.8, delay: 0.2 }}
/> />
@@ -52,19 +53,20 @@ function Hero2() {
src="/images/new/oil.webp" src="/images/new/oil.webp"
zIndex={0} zIndex={0}
position={'absolute'} position={'absolute'}
left="50%"
bottom={{ base: -10, sm: -10, 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" }} w={{ base: "80vw", sm: "70vw", md: "60vw", lg: "50vw", xl: "40vw" }}
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50, x: '-50%' }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0, x: '-50%' }}
viewport={{ once: true, amount: 0.3 }} viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, delay: 0.5 }} transition={{ duration: 0.8, delay: 0.5 }}
/> />
</Box> </Stack>
</Stack> </Stack>
</Box> </Box >
); );
} }
export default Hero2; export default Hero2;

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

@@ -18,7 +18,6 @@ function OilInfo() {
bgColor="#FFFBD3" bgColor="#FFFBD3"
zIndex={3} zIndex={3}
overflow="hidden" overflow="hidden"
justifyItems={'center'}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={isMainInView ? { opacity: 1 } : { opacity: 0 }} animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }} transition={{ duration: 0.8, ease: "easeOut" }}
@@ -30,6 +29,7 @@ function OilInfo() {
w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '60%' }} w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '60%' }}
h={'auto'} h={'auto'}
gap={{ base: 10, md: 0 }} gap={{ base: 10, md: 0 }}
mx="auto"
justifyItems={'center'} justifyItems={'center'}
alignItems={'center'} alignItems={'center'}
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}

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

@@ -257,12 +257,14 @@ function Truth() {
_focus={{ outline: 'none', boxShadow: 'none' }} _focus={{ outline: 'none', boxShadow: 'none' }}
_active={{ outline: 'none', boxShadow: 'none' }}> _active={{ outline: 'none', boxShadow: 'none' }}>
<MotionImage <MotionImage
position="relative"
left="50%"
src={'/images/facebook.webp'} src={'/images/facebook.webp'}
alt="salespoint" alt="salespoint"
w={"400px"} w={"400px"}
loading='lazy' loading='lazy'
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20, x: '-50%' }}
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} animate={isTitleInView ? { opacity: 1, y: 0, x: '-50%' } : { opacity: 0, y: 20, x: '-50%' }}
transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }} transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
/> />
</Link> </Link>

6
src/components/new_ui/wraning.tsx
View File

@@ -28,7 +28,6 @@ function Wraning() {
bgImage={{ base: "url('/images/new/wraning_bg_mobile.webp')", sm: "url('/images/new/wraning_bg_mobile.webp')", md: "url('/images/new/wraning_bg.webp')", lg: "url('/images/new/wraning_bg.webp')", xl: "url('/images/new/wraning_bg.webp')" }} bgImage={{ base: "url('/images/new/wraning_bg_mobile.webp')", sm: "url('/images/new/wraning_bg_mobile.webp')", md: "url('/images/new/wraning_bg.webp')", lg: "url('/images/new/wraning_bg.webp')", xl: "url('/images/new/wraning_bg.webp')" }}
bgSize="cover" bgSize="cover"
backgroundPosition="center" backgroundPosition="center"
justifyItems={'center'}
bgRepeat="no-repeat" bgRepeat="no-repeat"
zIndex={3} zIndex={3}
overflow="hidden" overflow="hidden"
@@ -146,11 +145,12 @@ function Wraning() {
{/* title */} {/* title */}
<MotionStack <MotionStack
position="absolute" position="absolute"
left="50%"
top={{ base: '55vw', sm: '60vw', md: '35vw', lg: '23vw', xl: '20vw' }} top={{ base: '55vw', sm: '60vw', md: '35vw', lg: '23vw', xl: '20vw' }}
alignItems={'center'} alignItems={'center'}
gap={'1px'} gap={'1px'}
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50, x: '-50%' }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0, x: '-50%' }}
viewport={{ once: true, amount: 0.3 }} viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, ease: "easeOut" }} transition={{ duration: 0.8, ease: "easeOut" }}
> >

3
src/pages/recipe.tsx
View File

@@ -147,7 +147,6 @@ function Recipe() {
bgColor="#FFFBD3" bgColor="#FFFBD3"
zIndex={3} zIndex={3}
overflow="hidden" overflow="hidden"
justifyItems={'center'}
pt={`${headerHeight}px`} pt={`${headerHeight}px`}
> >
@@ -157,6 +156,7 @@ function Recipe() {
src="/images/new/recipe_title.webp" src="/images/new/recipe_title.webp"
w={{ base: '70vw', md: '50vw', lg: '30vw' }} w={{ base: '70vw', md: '50vw', lg: '30vw' }}
mt = {20} mt = {20}
mx="auto"
/> />
<SimpleGrid <SimpleGrid
@@ -165,6 +165,7 @@ function Recipe() {
w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '70%' }} w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '70%' }}
h={'auto'} h={'auto'}
gap={{ base: 10, md: 5 }} gap={{ base: 10, md: 5 }}
mx="auto"
justifyItems={'center'} justifyItems={'center'}
alignItems={'center'} alignItems={'center'}
> >