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

updated

Browse Source
This commit is contained in:
philipcheung
2025-11-09 21:37:08 +08:00
parent e7eccb30e0
commit 7534df0f83
2 changed files with 24 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,13 +46,13 @@ function contextTitleImageSize(index: number) {
switch (index) { switch (index) {
case 0: case 0:
return { md: '17vw', lg: '17vw', xl: '12vw' }; return { md: '20vw', lg: '20vw', xl: '12vw' };
case 1: case 1:
return { md: '17vw', lg: '20vw', xl: '13vw' }; return { md: '20vw', lg: '20vw', xl: '13vw' };
case 2: case 2:
return { md: '17vw', lg: '25vw', xl: '16vw' }; return { md: '20vw', lg: '25vw', xl: '16vw' };
case 3: case 3:
return { md: '17vw', lg: '25vw', xl: '16vw' }; return { md: '20vw', lg: '25vw', xl: '16vw' };
} }
} }
@@ -198,7 +198,7 @@ function Advantages() {
<Text <Text
className='font-melle font-xbold' className='font-melle font-xbold'
fontSize={{ base: '2xl', sm: '3xl', md: '3vw', lg: '3vw', xl: '3vw' }} fontSize={{ base: '7vw', sm: '7vw', md: '4vw', lg: '4vw', xl: '3.5vw' }}
color={'white'} color={'white'}
mt={-2} mt={-2}
> >
@@ -213,7 +213,8 @@ function Advantages() {
columns={{ base: 1, sm: 1, md: 1 }} columns={{ base: 1, sm: 1, md: 1 }}
p={4} p={4}
pb={10} pb={10}
w={{ base: '100%', sm: '95vw', md: '90vw', lg: '85vw', xl: '55vw' }} mt = {20}
w={{ base: '100%', sm: '95vw', md: '90vw', lg: '85vw', xl: '65vw' }}
h={'auto'} h={'auto'}
mx="auto" mx="auto"
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
@@ -233,7 +234,7 @@ function Advantages() {
transition={{ duration: 0.6, delay: index * 0.15, ease: "easeOut" }} transition={{ duration: 0.6, delay: index * 0.15, ease: "easeOut" }}
> >
<MotionStack <MotionStack
flex={0.4} flex={{ md: 0.5, lg: 0.4, xl: 0.4 }}
alignItems={'center'}> alignItems={'center'}>
<MotionHStack <MotionHStack
alignItems={'flex-start'} alignItems={'flex-start'}
@@ -272,7 +273,7 @@ function Advantages() {
whiteSpace="pre-wrap" whiteSpace="pre-wrap"
color='white' color='white'
lineHeight="1" lineHeight="1"
fontSize={{ md: '1.5vw', lg: '2.5vw', xl: '1.5vw' }} fontSize={{ md: '2.5vw', lg: '2.5vw', xl: '1.5vw' }}
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }} animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
transition={{ duration: 0.5, delay: index * 0.15 + 0.3, ease: "easeOut" }} transition={{ duration: 0.5, delay: index * 0.15 + 0.3, ease: "easeOut" }}
@@ -299,21 +300,19 @@ function Advantages() {
<Box <Box
flex={0.6} flex={0.6}
ml={14} ml={14}
w='100%'
display="flex" display="flex"
flexDirection={{ base: "row", sm: "row", md: "column" }} flexDirection={{ base: "row", sm: "row", md: "column" }}
alignItems="flex-start" alignItems="flex-start"
mt={5} mt={5}
ref={oilCubesRef} ref={oilCubesRef}
> >
<Flex flexWrap="wrap" justifyContent="flex-start" gap="15px" maxW="680px"> <Flex flexWrap="wrap" justifyContent="flex-start" gap="15px" >
{oilCube.map((item, index) => ( {oilCube.map((item, index) => (
<MotionStack <Stack
key={index} key={index}
initial={{ opacity: 0, scale: 0.8 }} w={{ md: '22vw', lg: '22vw', xl: '16vw' }}
animate={isOilCubesInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }} h={{ md: '8vw', lg: '8vw', xl: '5vw' }}
transition={{ duration: 0.5, delay: index * 0.15 }}
w={{ md: '13vw',lg: '20vw', xl: '13vw' }}
h={{ md: '5vw',lg: '8vw', xl: '5vw' }}
bgImage={item.bgColor} bgImage={item.bgColor}
roundedTopLeft={'30px'} roundedTopLeft={'30px'}
roundedBottomRight={'30px'} roundedBottomRight={'30px'}
@@ -323,7 +322,7 @@ function Advantages() {
<Text <Text
color="white" color="white"
className='font-melle font-black' className='font-melle font-black'
fontSize={{ md: "1.3vw", lg: "2.3vw", xl: "1.3vw" }} fontSize={{ md: "1.5vw", lg: "1.5vw", xl: "1.2vw" }}
mb={-1} mb={-1}
> >
{item.title} {item.title}
@@ -331,22 +330,22 @@ function Advantages() {
<Text <Text
color={colors.backgroundColor} color={colors.backgroundColor}
className='font-melle font-medium' className='font-melle font-medium'
fontSize={{ md: "0.8vw", lg: "1.2vw", xl: "0.8vw" }} fontSize={{ md: "1vw", lg: "1.0vw", xl: "0.8vw" }}
mt={-1} mt={-1}
> >
{item.text} {item.text}
</Text> </Text>
</MotionStack> </Stack>
))} ))}
</Flex> </Flex>
</Box> </Box>
) : ( ) : (
<MotionText <MotionText
w={{ base: '90%', sm: '80%', md: '80%', lg: '80%', xl: '80%' }} w={{ base: '90%', sm: '80%', md: '90%', lg: '80%', xl: '80%' }}
className="font-noto-sans font-demi-light" className="font-noto-sans font-demi-light"
fontSize={{ base: 'xl', sm: 'xl', md: 'lg', lg: 'lg', xl: 'lg' }} fontSize={{ base: 'xl', sm: 'xl', md: 'lg', lg: 'lg', xl: 'lg' }}
color="white" color="white"
flex={0.6} flex={{ md: 0.5, lg: 0.6, xl: 0.6 }}
ml={14} ml={14}
alignSelf="flex-start" alignSelf="flex-start"
lineHeight="1.8" lineHeight="1.8"
@@ -478,7 +477,7 @@ function Advantages() {
mt={-4} mt={-4}
ml={3} ml={3}
> >
<MotionFlex flexDirection={'row'} flexWrap="wrap" justifyContent="flex-start" gap="10px" maxWidth="680px" <MotionFlex flexDirection={'row'} flexWrap="wrap" justifyContent="center" gap="10px" maxWidth="680px"
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
animate={isOilCubesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }} animate={isOilCubesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }} transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}

2
src/pages/main.tsx
View File

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
import { useRouterState } from '@tanstack/react-router' import { useRouterState } from '@tanstack/react-router'
import Hero1 from '../components/new_ui/hero1' import Hero1 from '../components/new_ui/hero1'
import Hero2 from '../components/new_ui/hero2' import Hero2 from '../components/new_ui/hero2'
import Wraning from '@/components/new_ui/wraning' // import Wraning from '@/components/new_ui/wraning'
import Info from '@/components/new_ui/info' import Info from '@/components/new_ui/info'
import Advantages from '@/components/new_ui/advantages' import Advantages from '@/components/new_ui/advantages'
import OilInfo from '@/components/new_ui/oilInfo' import OilInfo from '@/components/new_ui/oilInfo'