From c9931d670eee19eaef0320210e9927714f243e8e Mon Sep 17 00:00:00 2001 From: philipcheung Date: Sun, 2 Nov 2025 21:47:32 +0800 Subject: [PATCH] other bowrser center problem fixed --- src/components/new_ui/CyclingImage.tsx | 3 ++ src/components/new_ui/advantages.tsx | 2 +- src/components/new_ui/hero1.tsx | 60 +++++++++++++------------- src/components/new_ui/hero2.tsx | 16 ++++--- src/components/new_ui/oilInfo.tsx | 2 +- src/components/new_ui/truth.tsx | 6 ++- src/components/new_ui/wraning.tsx | 6 +-- src/pages/recipe.tsx | 3 +- 8 files changed, 53 insertions(+), 45 deletions(-) diff --git a/src/components/new_ui/CyclingImage.tsx b/src/components/new_ui/CyclingImage.tsx index 7bf7367..25b02ae 100644 --- a/src/components/new_ui/CyclingImage.tsx +++ b/src/components/new_ui/CyclingImage.tsx @@ -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} diff --git a/src/components/new_ui/advantages.tsx b/src/components/new_ui/advantages.tsx index 108df76..3946a31 100644 --- a/src/components/new_ui/advantages.tsx +++ b/src/components/new_ui/advantages.tsx @@ -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" }} diff --git a/src/components/new_ui/hero1.tsx b/src/components/new_ui/hero1.tsx index 0327d2f..f9d4ce4 100644 --- a/src/components/new_ui/hero1.tsx +++ b/src/components/new_ui/hero1.tsx @@ -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() { } `} - + {/* Hero 1 title */} - hero title {/* Mobile arrow - shown on base and sm */} - {/* Desktop arrow - shown on md, lg, xl */} - - - - - - - - - - @@ -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 }} /> - + - + ); } export default Hero2; \ No newline at end of file diff --git a/src/components/new_ui/oilInfo.tsx b/src/components/new_ui/oilInfo.tsx index f393c4a..c37cc71 100644 --- a/src/components/new_ui/oilInfo.tsx +++ b/src/components/new_ui/oilInfo.tsx @@ -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 }} diff --git a/src/components/new_ui/truth.tsx b/src/components/new_ui/truth.tsx index ab465f4..d0f0940 100644 --- a/src/components/new_ui/truth.tsx +++ b/src/components/new_ui/truth.tsx @@ -257,12 +257,14 @@ function Truth() { _focus={{ outline: 'none', boxShadow: 'none' }} _active={{ outline: 'none', boxShadow: 'none' }}> diff --git a/src/components/new_ui/wraning.tsx b/src/components/new_ui/wraning.tsx index 0940e0d..5ae7a4f 100644 --- a/src/components/new_ui/wraning.tsx +++ b/src/components/new_ui/wraning.tsx @@ -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 */} diff --git a/src/pages/recipe.tsx b/src/pages/recipe.tsx index 91d4115..8fbf6e7 100644 --- a/src/pages/recipe.tsx +++ b/src/pages/recipe.tsx @@ -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" />