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

ui udated

Browse Source
This commit is contained in:
philipcheung
2025-11-09 13:19:59 +08:00
parent a247df6d11
commit d8448f70d4
5 changed files with 215 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/new/new_hero_mobile_bg.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 630 KiB

BIN
public/images/new/new_hero_pc_bg.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 853 KiB

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

@@ -1,10 +1,11 @@
import { Box, Image, Stack } from '@chakra-ui/react'
import { Box, Image, Stack, Text } from '@chakra-ui/react'
import CyclingImage from './CyclingImage'
import { useEffect, useState } from 'react'
import { motion } from 'framer-motion'
const MotionImage = motion.create(Image)
const MotionStack = motion.create(Stack)
const MotionText = motion.create(Text)
function Hero1() {
const [headerHeight, setHeaderHeight] = useState(80);
const bigWarningSize = { base: "17vw", sm: "15vw", md: "9vw", lg: "9vw", xl: "8vw" };
@@ -96,20 +97,20 @@ function Hero1() {
<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')" }}
minH={{ base: "220vw", sm: "220vw", md: "93vw", lg: "95vw", xl: "93vw" }}
bgImage={{ base: "url('/images/new/new_hero_mobile_bg.webp')", sm: "url('/images/new/new_hero_mobile_bg.webp')", md: "url('/images/new/new_hero_pc_bg.webp')", lg: "url('/images/new/new_hero_pc_bg.webp')", xl: "url('/images/new/new_hero_pc_bg.webp')" }}
bgSize="cover"
backgroundPosition="center"
justifyItems={'center'}
bgRepeat="no-repeat"
>
{/* Hero 1 title */}
<MotionImage
<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" }}
top={{ base: '80vw', sm: '80vw', md: '26vw', lg: '26vw', xl: '28vw' }}
maxW={{ base: "70vw", sm: "70vw", md: "40vw", lg: "50vw", xl: "35vw" }}
alt='hero title'
initial={{ opacity: 0, y: 30, x: '-50%' }}
whileInView={{ opacity: 1, y: 0, x: '-50%' }}
@@ -123,7 +124,7 @@ function Hero1() {
position={'absolute'}
left="50%"
transform="translateX(-50%)"
maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }}
maxW={{ base: "90%", sm: "90%", md: "70%", lg: "70%", xl: "70%" }}
bottom={'10px'}
display={{ base: "block", sm: "block", md: "none", lg: "none", xl: "none" }}
cycleDuration={0.5}
@@ -142,6 +143,137 @@ function Hero1() {
cycleDuration={0.5}
intensity={0}
/>
{/* title */}
<MotionStack
position="absolute"
left="50%"
w={'100%'}
top={{ base: '140vw', sm: '140vw', md: '60vw', lg: '60vw', xl: '58vw' }}
alignItems={'center'}
gap={'1px'}
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" }}
>
{/* <MotionText
className="font-melle font-xbold"
fontSize={{ base: '15vw', sm: '13vw', md: '6vw', lg: '5vw', xl: '3.5vw' }}
color={"#FED407"}
initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
>
{'你要注意！'}
</MotionText> */}
<MotionText
className="font-melle font-xbold"
fontSize={{ base: '7vw', sm: '7vw', md: '3vw', lg: '3vw', xl: '3vw' }}
color={"#FED407"}
mt={{ base: -5, sm: -7, md: -5, lg: -5, xl: -5 }}
mr={{ base: 3, sm: 3, md: 0, lg: 0, xl: 0 }}
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
>
{'身體健康響起警號！'}
</MotionText>
<MotionText
className="font-melle font-medium"
fontSize={{ base: '7vw', sm: '7vw', md: '2.5vw', lg: '3vw', xl: '3vw' }}
color={"white"}
mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }}
mr={4}
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.4, ease: "easeOut" }}
>
{'好多時係同'}
</MotionText>
<Box display="inline" mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }} mr={4}>
<MotionText
className="font-melle font-xbold"
fontSize={{ base: '7vw', sm: '7vw', md: '2.5vw', lg: '3vw', xl: '3vw' }}
color={"white"}
display="inline"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.5 }}
>
{'日常飲食習慣'}
</MotionText>
<MotionText
className="font-melle font-medium"
fontSize={{ base: '7vw', sm: '7vw', md: '2.5vw', lg: '3vw', xl: '3vw' }}
color={"white"}
display="inline"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.6 }}
>
{'有關！'}
</MotionText>
</Box>
<MotionText
className="font-melle font-medium"
fontSize={{ base: '7vw', sm: '7vw', md: '2.5vw', lg: '3vw', xl: '3vw' }}
color={"white"}
mt={-2}
// mt={{ base: 8, sm: 7, md: 5, lg: 5, xl: 5 }}
mr={4}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.7, ease: "easeOut" }}
>
{'簡單到喺你屋企'}
</MotionText>
<MotionImage
src="/images/new/wraning_subtitle.webp"
w={{ base: '70vw', sm: '70vw', md: '30vw', lg: '30vw', xl: '30vw' }}
mt={-1}
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.8, ease: "easeOut" }}
/>
<MotionText
className="font-melle font-medium"
fontSize={{ base: '7vw', sm: '7vw', md: '3vw', lg: '3vw', xl: '3vw' }}
color={"white"}
mt={-3}
mr={4}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.9, ease: "easeOut" }}
>
{'其實已經日積月累'}
</MotionText>
<MotionText
className="font-melle font-medium"
fontSize={{ base: '7vw', sm: '7vw', md: '2.3vw', lg: '3vw', xl: '3vw' }}
color={"white"}
mt={-3}
mr={4}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 1.0, ease: "easeOut" }}
>
{'咁影響緊你！'}
</MotionText>
</MotionStack>
{/* signs */}
<Box
position={'absolute'}
@@ -164,8 +296,8 @@ function Hero1() {
<Box
position={'absolute'}
w={{ base: "13vw", sm: "13vw", md: "6vw", lg: "6vw", xl: "5vw" }}
left={{ base: '6vw', sm: '6vw', md: '13vw', lg: '13vw', xl: '25vw' }}
bottom={{ base: '50vw', sm: '50vw', md: '27vw', lg: '27vw', xl: '18vw' }}
left={{ base: '10vw', sm: '10vw', md: '23vw', lg: '23vw', xl: '25vw' }}
top={{ base: '50vw', sm: '50vw', md: '27vw', lg: '27vw', xl: '22vw' }}
css={{
animation: 'floatMedium 3.5s ease-in-out infinite',
animationDelay: '0.5s'
@@ -181,9 +313,9 @@ function Hero1() {
</Box>
<Box
position={'absolute'}
w={{ base: "13vw", sm: "13vw", md: "6vw", lg: "6vw", xl: "5vw" }}
right={{ base: '7vw', sm: '7vw', md: '14vw', lg: '14vw', xl: '20vw' }}
top={{ base: '60vw', sm: '60vw', md: '40vw', lg: '40vw', xl: '25vw' }}
w={bigWarningSize}
right={{ base: '7vw', sm: '7vw', md: '17vw', lg: '17vw', xl: '20vw' }}
top={{ base: '60vw', sm: '60vw', md: '30vw', lg: '30vw', xl: '30vw' }}
css={{
animation: 'floatFast 3.2s ease-in-out infinite',
animationDelay: '1s'
@@ -201,7 +333,7 @@ function Hero1() {
position={'absolute'}
w={bigWarningSize}
right={{ base: '5vw', sm: '5vw', md: '18vw', lg: '18vw', xl: '18vw' }}
top={{ base: '12vw', sm: '12vw', md: '20vw', lg: '20vw', xl: '10vw' }}
top={{ base: '12vw', sm: '12vw', md: '15vw', lg: '15vw', xl: '10vw' }}
css={{
animation: 'floatSlow 3.3s ease-in-out infinite',
animationDelay: '1.5s'
@@ -219,8 +351,8 @@ function Hero1() {
<Box
position={'absolute'}
w={{ base: "25vw", sm: "25vw", md: "11vw", lg: "11vw", xl: "10vw" }}
left={{ base: "23vw", sm: "23vw", md: "30vw", lg: "30vw", xl: "37vw" }}
top={{ base: "9vw", sm: "9vw", md: "7vw", lg: "7vw", xl: "3vw" }}
left={{ base: "23vw", sm: "23vw", md: "37vw", lg: "37vw", xl: "37vw" }}
top={{ base: "9vw", sm: "9vw", md: "4vw", lg: "4vw", xl: "3vw" }}
css={{
animation: 'floatMedium 3.2s ease-in-out infinite',
animationDelay: '0.2s'
@@ -237,8 +369,8 @@ function Hero1() {
<Box
position={'absolute'}
w={{ base: "27vw", sm: "27vw", md: "10vw", lg: "10vw", xl: "9vw" }}
left={{ base: "35vw", sm: "35vw", md: "18vw", lg: "18vw", xl: "25vw" }}
top={{ base: "25vw", sm: "25vw", md: "20vw", lg: "20vw", xl: "14vw" }}
left={{ base: "35vw", sm: "35vw", md: "23vw", lg: "23vw", xl: "25vw" }}
top={{ base: "25vw", sm: "25vw", md: "14vw", lg: "14vw", xl: "14vw" }}
css={{
animation: 'floatFast 3.5s ease-in-out infinite',
animationDelay: '0.7s'
@@ -273,8 +405,8 @@ function Hero1() {
<Box
position={'absolute'}
w={{ base: "19vw", sm: "19vw", md: "8vw", lg: "8vw", xl: "7vw" }}
right={{ base: "10vw", sm: "10vw", md: "26vw", lg: "26vw", xl: "26vw" }}
top={{ base: "35vw", sm: "35vw", md: "18vw", lg: "18vw", xl: "12vw" }}
right={{ base: "10vw", sm: "10vw", md: "28vw", lg: "28vw", xl: "26vw" }}
top={{ base: "35vw", sm: "35vw", md: "14vw", lg: "14vw", xl: "12vw" }}
css={{
animation: 'floatFast 3.3s ease-in-out infinite',
animationDelay: '0.9s'
@@ -288,6 +420,61 @@ function Hero1() {
intensity={0.1}
/>
</Box>
<Box
position={'absolute'}
w={bigWarningSize}
left={{ base: '40vw', sm: '40vw', md: '45vw', lg: '45vw', xl: '45vw' }}
top={{ base: '120vw', sm: '120vw', md: '51vw', lg: '51vw', xl: '50vw' }}
css={{
animation: 'floatSlow 3s ease-in-out infinite',
animationDelay: '0s'
}}
>
<CyclingImage
src="/images/new/bigwarning.webp"
position={'relative'}
w="100%"
cycleDuration={3}
intensity={0.1}
/>
</Box>
<Box
position={'absolute'}
w={{ base: "8vw", sm: "8vw", md: "6vw", lg: "6vw", xl: "5vw" }}
right={{ base: '6vw', sm: '6vw', md: '25vw', lg: '25vw', xl: '25vw' }}
bottom={{ base: '55vw', sm: '55vw', md: '18vw', lg: '18vw', xl: '18vw' }}
css={{
animation: 'floatMedium 3.5s ease-in-out infinite',
animationDelay: '0.5s'
}}
>
<CyclingImage
src="/images/new/bigwarning.webp"
position={'relative'}
w="100%"
cycleDuration={3}
intensity={0.1}
/>
</Box>
<Box
position={'absolute'}
w={{ base: "8vw", sm: "8vw", md: "6vw", lg: "6vw", xl: "5vw" }}
left={{ base: '6vw', sm: '6vw', md: '25vw', lg: '25vw', xl: '25vw' }}
bottom={{ base: '70vw', sm: '70vw', md: '24vw', lg: '24vw', xl: '24vw' }}
css={{
animation: 'floatMedium 3.5s ease-in-out infinite',
animationDelay: '0.5s'
}}
>
<CyclingImage
src="/images/new/bigwarning.webp"
position={'relative'}
w="100%"
cycleDuration={3}
intensity={0.1}
/>
</Box>
</Box>
</Stack>
</Box>

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

@@ -16,7 +16,7 @@ function Hero2() {
<Stack
position="relative"
w="100%"
minH={{ base: "105vw", sm: "103vw", md: "82vw", lg: "66vw", xl: "57vw" }}
minH={{ base: "110vw", sm: "110vw", md: "72vw", lg: "66vw", xl: "50vw" }}
bgImage={"url('/images/new/hero2bg.webp')"}
bgSize="cover"
backgroundPosition="center"
@@ -29,8 +29,8 @@ function Hero2() {
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" }}
top={{ base: "10px", sm: "20px", md: "30px", lg: "30px", xl: "40px" }}
w={{ base: "70vw", sm: "70vw", md: "35vw", lg: "35vw", xl: "28vw" }}
initial={{ opacity: 0, y: -30, x: '-50%' }}
whileInView={{ opacity: 1, y: 0, x: '-50%' }}
viewport={{ once: true, amount: 0.3 }}
@@ -40,9 +40,9 @@ function Hero2() {
src="/images/new/hero2subtitle.webp"
position={'absolute'}
zIndex={1}
top={{ base: "30vw", sm: "35vw", md: "24vw", lg: "20vw", xl: "18vw" }}
right={{ base: "15vw", sm: "15vw", md: "20vw", lg: "28vw", xl: "30vw" }}
w={{ base: "30vw", sm: "30vw", md: "25vw", lg: "18vw", xl: "18vw" }}
top={{ base: "30vw", sm: "30vw", md: "17vw", lg: "15vw", xl: "12vw" }}
right={{ base: "55vw", sm: "55vw", md: "24vw", lg: "25vw", xl: "30vw" }}
w={{ base: "30vw", sm: "30vw", md: "22vw", lg: "22vw", xl: "18vw" }}
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
@@ -55,7 +55,7 @@ function Hero2() {
position={'absolute'}
left="50%"
bottom={0}
w={{ base: "80vw", sm: "70vw", md: "60vw", lg: "50vw", xl: "40vw" }}
w={{ base: "85vw", sm: "85vw", md: "58vw", lg: "53vw", xl: "40vw" }}
initial={{ opacity: 0, y: 50, x: '-50%' }}
whileInView={{ opacity: 1, y: 0, x: '-50%' }}
viewport={{ once: true, amount: 0.3 }}

2
src/pages/main.tsx
View File

@@ -87,7 +87,7 @@ function MainPage() {
<Header showMenu={true} />
<Hero1 />
<Hero2 />
<Wraning />
{/* <Wraning /> */}
<Info />
<Advantages />
<OilInfo />