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

Compare commits

base: philip-cat:98730da5f5429ec9aca23ed00d59b30d71a2f868
Branches Tags
philip-cat:main
..
compare: philip-cat:3cdcb28829349a344639f1d8f0c414d7d3c5d9e8
Branches Tags
philip-cat:main

2 Commits
98730da5f5 ... 3cdcb28829

Author SHA1 Message Date
philipcheung
3cdcb28829 ui updated 2025-11-02 14:24:59 +08:00
philipcheung
9d7a9b8d94 ui updated 2025-11-02 14:18:01 +08:00
1 changed files with 41 additions and 20 deletions
Expand all files Collapse all files

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

@@ -138,7 +138,7 @@ function Advantages() {
<SimpleGrid <SimpleGrid
columns={{ base: 1, sm: 1, md: 2 }} columns={{ base: 1, sm: 1, md: 2 }}
p={4} p={4}
w={{ base: '50vw', sm: '90vw', md: '90vw', lg: '80vw', xl: '70vw' }} w={{ base: '100%', sm: '95vw', md: '90vw', lg: '80vw', xl: '70vw' }}
h={'auto'} h={'auto'}
> >
@@ -148,34 +148,55 @@ function Advantages() {
alignItems="center" alignItems="center"
key={item.id}> key={item.id}>
<Image <Image
w={{ base: '40vw', sm: '180px', md: '80px', lg: '110px', xl: '110px' }} w={{ base: '45vw', sm: '180px', md: '80px', lg: '110px', xl: '110px' }}
src={item.image} src={item.image}
/> />
<Image {item.id === 3 ? (
mt={{ base: '-30px', sm: '-70px', md: '-30px', lg: '-50px', xl: '-50px' }} <>
h={{ base: '40vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }} <Text
src={item.titleImage2} mt={{ base: '-70px', sm: '-70px', md: '-45px', lg: '-75px', xl: '-75px' }}
/> className='font-melle font-xbold'
fontWeight={400}
color='white'
fontSize={{ base: '9vw', sm: '4xl', md: '3xl', lg: '5xl', xl: '5xl' }}
>
{item.title}
</Text>
<Image
mt={{ base: '-15px', sm: '-15px', md: '-15px', lg: '-25px', xl: '-25px' }}
h={{ base: '18vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }}
src={item.titleImage2}
/>
</>
) : (
<>
<Image
mt={{ base: '-70px', sm: '-70px', md: '-30px', lg: '-50px', xl: '-50px' }}
h={{ base: '18vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }}
src={item.titleImage2}
/>
<Text <Text
mt={{ base: '-25px', sm: '-25px', md: '-15px', lg: '-25px', xl: '-25px' }} mt={{ base: '-25px', sm: '-25px', md: '-15px', lg: '-25px', xl: '-25px' }}
className='font-melle font-xbold' className='font-melle font-xbold'
fontWeight={400} fontWeight={400}
color='white' color='white'
fontSize={{ base: '6vw', sm: '6vw', md: '3xl', lg: '5xl', xl: '5xl' }} fontSize={{ base: '9vw', sm: '4xl', md: '3xl', lg: '5xl', xl: '5xl' }}
> >
{item.title} {item.title}
</Text> </Text>
</>
)}
<Image <Image
h={{ base: '40vw', sm: item.id != 4 ? '200px' : '300px', md: item.id != 4 ? '180px' : '280px', lg: item.id != 4 ? '200px' : '300px', xl: item.id != 4 ? '200px' : '300px' }} h={{ base: item.id != 4 ? '50vw' : '70vw', sm: item.id != 4 ? '200px' : '300px', md: item.id != 4 ? '180px' : '280px', lg: item.id != 4 ? '200px' : '300px', xl: item.id != 4 ? '200px' : '300px' }}
src={item.titleImage} src={item.titleImage}
/> />
<Text <Text
w={{ base: '90%', sm: '70%', md: '80%', lg: '80%', xl: '80%' }} w={{ base: '90%', sm: '80%', md: '80%', lg: '80%', xl: '80%' }}
className="font-noto-sans font-demi-light" className="font-noto-sans font-demi-light"
fontSize={{ base: 'md', sm: 'xl', md: 'xl', lg: '2xl', xl: '2xl' }} fontSize={{ base: 'xl', sm: 'xl', md: 'xl', lg: '2xl', xl: '2xl' }}
color="white" color="white"
lineHeight="1.8" lineHeight="1.8"
textAlign="left" textAlign="left"
@@ -194,7 +215,7 @@ function Advantages() {
mt={-4} mt={-4}
ml={3} ml={3}
> >
<Flex flexWrap="wrap" justifyContent="center" gap="10px" maxWidth="945px"> <Flex flexDirection={'column'} justifyContent="center" gap="10px" maxWidth="945px">
{oilCube.map((item, index) => ( {oilCube.map((item, index) => (
<MotionStack <MotionStack
key={index} key={index}