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

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

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

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

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

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

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

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

@@ -18,7 +18,6 @@ function OilInfo() {
bgColor="#FFFBD3"
zIndex={3}
overflow="hidden"
justifyItems={'center'}
initial={{ opacity: 0 }}
animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
@@ -30,6 +29,7 @@ function OilInfo() {
w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '60%' }}
h={'auto'}
gap={{ base: 10, md: 0 }}
mx="auto"
justifyItems={'center'}
alignItems={'center'}
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' }}
_active={{ outline: 'none', boxShadow: 'none' }}>
<MotionImage
position="relative"
left="50%"
src={'/images/facebook.webp'}
alt="salespoint"
w={"400px"}
loading='lazy'
initial={{ opacity: 0, y: 20 }}
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
initial={{ opacity: 0, y: 20, x: '-50%' }}
animate={isTitleInView ? { opacity: 1, y: 0, x: '-50%' } : { opacity: 0, y: 20, x: '-50%' }}
transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
/>
</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')" }}
bgSize="cover"
backgroundPosition="center"
justifyItems={'center'}
bgRepeat="no-repeat"
zIndex={3}
overflow="hidden"
@@ -146,11 +145,12 @@ function Wraning() {
{/* title */}
<MotionStack
position="absolute"
left="50%"
top={{ base: '55vw', sm: '60vw', md: '35vw', lg: '23vw', xl: '20vw' }}
alignItems={'center'}
gap={'1px'}
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
initial={{ opacity: 0, y: 50, x: '-50%' }}
whileInView={{ opacity: 1, y: 0, x: '-50%' }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, ease: "easeOut" }}
>

3
src/pages/recipe.tsx
View File

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