updated
This commit is contained in:
@@ -17,13 +17,13 @@ function contextPeopleImageMt(index: number) {
|
||||
return { md: -4, lg: "-3.5vw", xl: "-1.5vw" };
|
||||
|
||||
case 1:
|
||||
return { md: -1, lg:"-1vw", xl: "0vw" };
|
||||
return { md: -1, lg: "-1vw", xl: "0vw" };
|
||||
|
||||
case 2:
|
||||
return { md: -4, lg: "-3.5vw", xl: "-1.5vw" };
|
||||
return { md: -4, lg: "-3.5vw", xl: "-1.5vw" };
|
||||
|
||||
case 3:
|
||||
return { md: -4, lg: "-3.5vw", xl: "-1.5vw" };
|
||||
return { md: -4, lg: "-3.5vw", xl: "-1.5vw" };
|
||||
|
||||
}
|
||||
|
||||
@@ -46,13 +46,13 @@ function contextTitleImageSize(index: number) {
|
||||
|
||||
switch (index) {
|
||||
case 0:
|
||||
return { md: '17vw', lg: '17vw', xl: '12vw' };
|
||||
return { md: '20vw', lg: '20vw', xl: '12vw' };
|
||||
case 1:
|
||||
return { md: '17vw', lg: '20vw', xl: '13vw' };
|
||||
return { md: '20vw', lg: '20vw', xl: '13vw' };
|
||||
case 2:
|
||||
return { md: '17vw', lg: '25vw', xl: '16vw' };
|
||||
return { md: '20vw', lg: '25vw', xl: '16vw' };
|
||||
case 3:
|
||||
return { md: '17vw', lg: '25vw', xl: '16vw' };
|
||||
return { md: '20vw', lg: '25vw', xl: '16vw' };
|
||||
}
|
||||
|
||||
}
|
||||
@@ -198,7 +198,7 @@ function Advantages() {
|
||||
|
||||
<Text
|
||||
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'}
|
||||
mt={-2}
|
||||
>
|
||||
@@ -213,7 +213,8 @@ function Advantages() {
|
||||
columns={{ base: 1, sm: 1, md: 1 }}
|
||||
p={4}
|
||||
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'}
|
||||
mx="auto"
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
@@ -233,7 +234,7 @@ function Advantages() {
|
||||
transition={{ duration: 0.6, delay: index * 0.15, ease: "easeOut" }}
|
||||
>
|
||||
<MotionStack
|
||||
flex={0.4}
|
||||
flex={{ md: 0.5, lg: 0.4, xl: 0.4 }}
|
||||
alignItems={'center'}>
|
||||
<MotionHStack
|
||||
alignItems={'flex-start'}
|
||||
@@ -272,7 +273,7 @@ function Advantages() {
|
||||
whiteSpace="pre-wrap"
|
||||
color='white'
|
||||
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 }}
|
||||
animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.15 + 0.3, ease: "easeOut" }}
|
||||
@@ -299,21 +300,19 @@ function Advantages() {
|
||||
<Box
|
||||
flex={0.6}
|
||||
ml={14}
|
||||
w='100%'
|
||||
display="flex"
|
||||
flexDirection={{ base: "row", sm: "row", md: "column" }}
|
||||
alignItems="flex-start"
|
||||
mt={5}
|
||||
ref={oilCubesRef}
|
||||
>
|
||||
<Flex flexWrap="wrap" justifyContent="flex-start" gap="15px" maxW="680px">
|
||||
<Flex flexWrap="wrap" justifyContent="flex-start" gap="15px" >
|
||||
{oilCube.map((item, index) => (
|
||||
<MotionStack
|
||||
<Stack
|
||||
key={index}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={isOilCubesInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.15 }}
|
||||
w={{ md: '13vw',lg: '20vw', xl: '13vw' }}
|
||||
h={{ md: '5vw',lg: '8vw', xl: '5vw' }}
|
||||
w={{ md: '22vw', lg: '22vw', xl: '16vw' }}
|
||||
h={{ md: '8vw', lg: '8vw', xl: '5vw' }}
|
||||
bgImage={item.bgColor}
|
||||
roundedTopLeft={'30px'}
|
||||
roundedBottomRight={'30px'}
|
||||
@@ -323,7 +322,7 @@ function Advantages() {
|
||||
<Text
|
||||
color="white"
|
||||
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}
|
||||
>
|
||||
{item.title}
|
||||
@@ -331,22 +330,22 @@ function Advantages() {
|
||||
<Text
|
||||
color={colors.backgroundColor}
|
||||
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}
|
||||
>
|
||||
{item.text}
|
||||
</Text>
|
||||
</MotionStack>
|
||||
</Stack>
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
) : (
|
||||
<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"
|
||||
fontSize={{ base: 'xl', sm: 'xl', md: 'lg', lg: 'lg', xl: 'lg' }}
|
||||
color="white"
|
||||
flex={0.6}
|
||||
flex={{ md: 0.5, lg: 0.6, xl: 0.6 }}
|
||||
ml={14}
|
||||
alignSelf="flex-start"
|
||||
lineHeight="1.8"
|
||||
@@ -478,7 +477,7 @@ function Advantages() {
|
||||
mt={-4}
|
||||
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 }}
|
||||
animate={isOilCubesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
||||
transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useEffect } from 'react'
|
||||
import { useRouterState } from '@tanstack/react-router'
|
||||
import Hero1 from '../components/new_ui/hero1'
|
||||
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 Advantages from '@/components/new_ui/advantages'
|
||||
import OilInfo from '@/components/new_ui/oilInfo'
|
||||
|
||||
Reference in New Issue
Block a user