ui updated
This commit is contained in:
@@ -1,15 +1,61 @@
|
|||||||
import { Box, Stack, Image, Flex, Text, SimpleGrid } from '@chakra-ui/react'
|
import { Box, Stack, Image, Flex, Text, SimpleGrid, HStack } from '@chakra-ui/react'
|
||||||
import { motion, useInView } from 'framer-motion'
|
import { motion, useInView } from 'framer-motion'
|
||||||
import { useRef } from 'react'
|
import { useRef } from 'react'
|
||||||
const MotionImage = motion.create(Image)
|
const MotionImage = motion.create(Image)
|
||||||
const MotionFlex = motion.create(Flex)
|
const MotionFlex = motion.create(Flex)
|
||||||
const MotionBox = motion.create(Box)
|
const MotionBox = motion.create(Box)
|
||||||
const MotionStack = motion(Stack);
|
const MotionStack = motion(Stack);
|
||||||
|
const MotionHStack = motion(HStack);
|
||||||
const MotionSimpleGrid = motion.create(SimpleGrid);
|
const MotionSimpleGrid = motion.create(SimpleGrid);
|
||||||
const MotionText = motion(Text);
|
const MotionText = motion(Text);
|
||||||
import { colors } from '../../colors';
|
import { colors } from '../../colors';
|
||||||
|
|
||||||
|
function contextPeopleImageMt(index: number) {
|
||||||
|
|
||||||
|
switch (index) {
|
||||||
|
case 0:
|
||||||
|
return { md: -4, lg: "-3.5vw", xl: "-1.5vw" };
|
||||||
|
|
||||||
|
case 1:
|
||||||
|
return { md: -1, lg:"-1vw", xl: "0vw" };
|
||||||
|
|
||||||
|
case 2:
|
||||||
|
return { md: -4, lg: "-3.5vw", xl: "-1.5vw" };
|
||||||
|
|
||||||
|
case 3:
|
||||||
|
return { md: -4, lg: "-3.5vw", xl: "-1.5vw" };
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function contextPeopleImageSize(index: number) {
|
||||||
|
switch (index) {
|
||||||
|
case 0:
|
||||||
|
return { md: '20vw', lg: '15vw', xl: '12vw' };
|
||||||
|
case 1:
|
||||||
|
return { md: '20vw', lg: '20vw', xl: '16vw' };
|
||||||
|
case 2:
|
||||||
|
return { md: '20vw', lg: '10vw', xl: '8vw' };
|
||||||
|
case 3:
|
||||||
|
return { md: '20vw', lg: '25vw', xl: '16vw' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function contextTitleImageSize(index: number) {
|
||||||
|
|
||||||
|
switch (index) {
|
||||||
|
case 0:
|
||||||
|
return { md: '17vw', lg: '17vw', xl: '12vw' };
|
||||||
|
case 1:
|
||||||
|
return { md: '17vw', lg: '20vw', xl: '13vw' };
|
||||||
|
case 2:
|
||||||
|
return { md: '17vw', lg: '25vw', xl: '16vw' };
|
||||||
|
case 3:
|
||||||
|
return { md: '17vw', lg: '25vw', xl: '16vw' };
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
const oilCube = [
|
const oilCube = [
|
||||||
{
|
{
|
||||||
@@ -52,7 +98,8 @@ const info = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: "黃金比例脂肪酸調配",
|
title: `黃金比例
|
||||||
|
脂肪酸調配`,
|
||||||
description: `根據世衛建議，脂肪攝取應以**不飽和脂肪為主**，當中包括多元與單元不飽和脂肪酸，同時應減少飽和脂肪攝取，以維持整體健康比例。
|
description: `根據世衛建議，脂肪攝取應以**不飽和脂肪為主**，當中包括多元與單元不飽和脂肪酸，同時應減少飽和脂肪攝取，以維持整體健康比例。
|
||||||
|
|
||||||
獅球嘜營萃護心油就係根據呢個原則調配出符合**世衛黃金比例**嘅配方²，幫助身體攝取每日必需嘅脂肪酸，並促進**脂溶性維他命A、D、E、K**嘅吸收，全面支援日常健康所需。 `,
|
獅球嘜營萃護心油就係根據呢個原則調配出符合**世衛黃金比例**嘅配方²，幫助身體攝取每日必需嘅脂肪酸，並促進**脂溶性維他命A、D、E、K**嘅吸收，全面支援日常健康所需。 `,
|
||||||
@@ -160,8 +207,170 @@ function Advantages() {
|
|||||||
|
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
|
|
||||||
<MotionSimpleGrid
|
<MotionSimpleGrid
|
||||||
columns={{ base: 1, sm: 1, md: 2 }}
|
display={{ base: 'none', sm: 'none', md: 'block', lg: 'block', xl: 'block' }}
|
||||||
|
columns={{ base: 1, sm: 1, md: 1 }}
|
||||||
|
p={4}
|
||||||
|
pb={10}
|
||||||
|
w={{ base: '100%', sm: '95vw', md: '90vw', lg: '85vw', xl: '55vw' }}
|
||||||
|
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" }}
|
||||||
|
|
||||||
|
>
|
||||||
|
{info.map((item, index) => (
|
||||||
|
<MotionHStack
|
||||||
|
w={'100%'}
|
||||||
|
justifyContent={'flex-start'}
|
||||||
|
alignItems={'flex-start'}
|
||||||
|
key={item.id}
|
||||||
|
mt={index != 0 ? 16 : 0}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
||||||
|
transition={{ duration: 0.6, delay: index * 0.15, ease: "easeOut" }}
|
||||||
|
>
|
||||||
|
<MotionStack
|
||||||
|
flex={0.4}
|
||||||
|
alignItems={'center'}>
|
||||||
|
<MotionHStack
|
||||||
|
alignItems={'flex-start'}
|
||||||
|
mt={-4}
|
||||||
|
>
|
||||||
|
<MotionImage
|
||||||
|
w={{ base: '45vw', sm: '180px', md: '80px', lg: '110px', xl: '5vw' }}
|
||||||
|
src={item.image}
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.15 + 0.1, ease: "easeOut" }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<MotionStack
|
||||||
|
mt={2}
|
||||||
|
gap={0}
|
||||||
|
justifyContent={'flex-start'}
|
||||||
|
alignItems={'center'}
|
||||||
|
|
||||||
|
>
|
||||||
|
<MotionImage
|
||||||
|
fit={'contain'}
|
||||||
|
w={contextTitleImageSize(index)}
|
||||||
|
src={item.titleImage2}
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.15 + 0.2, ease: "easeOut" }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<MotionText
|
||||||
|
|
||||||
|
className='font-melle font-xbold'
|
||||||
|
fontWeight={800}
|
||||||
|
textAlign={'center'}
|
||||||
|
mt={-1}
|
||||||
|
whiteSpace="pre-wrap"
|
||||||
|
color='white'
|
||||||
|
lineHeight="1"
|
||||||
|
fontSize={{ md: '1.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" }}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</MotionText>
|
||||||
|
|
||||||
|
</MotionStack>
|
||||||
|
</MotionHStack>
|
||||||
|
|
||||||
|
<MotionImage
|
||||||
|
w={contextPeopleImageSize(index)}
|
||||||
|
fit={'contain'}
|
||||||
|
mt={contextPeopleImageMt(index)}
|
||||||
|
src={item.titleImage}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.15 + 0.4, ease: "easeOut" }}
|
||||||
|
/>
|
||||||
|
</MotionStack>
|
||||||
|
|
||||||
|
|
||||||
|
{index === 3 ? (
|
||||||
|
<Box
|
||||||
|
flex={0.6}
|
||||||
|
ml={14}
|
||||||
|
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">
|
||||||
|
{oilCube.map((item, index) => (
|
||||||
|
<MotionStack
|
||||||
|
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' }}
|
||||||
|
bgImage={item.bgColor}
|
||||||
|
roundedTopLeft={'30px'}
|
||||||
|
roundedBottomRight={'30px'}
|
||||||
|
p={4}
|
||||||
|
justify="center"
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
color="white"
|
||||||
|
className='font-melle font-black'
|
||||||
|
fontSize={{ md: "1.3vw", lg: "2.3vw", xl: "1.3vw" }}
|
||||||
|
mb={-1}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
color={colors.backgroundColor}
|
||||||
|
className='font-melle font-medium'
|
||||||
|
fontSize={{ md: "0.8vw", lg: "1.2vw", xl: "0.8vw" }}
|
||||||
|
mt={-1}
|
||||||
|
>
|
||||||
|
{item.text}
|
||||||
|
</Text>
|
||||||
|
</MotionStack>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<MotionText
|
||||||
|
w={{ base: '90%', sm: '80%', md: '80%', 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}
|
||||||
|
ml={14}
|
||||||
|
alignSelf="flex-start"
|
||||||
|
lineHeight="1.8"
|
||||||
|
textAlign="left"
|
||||||
|
whiteSpace="pre-wrap"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.15 + 0.5, ease: "easeOut" }}
|
||||||
|
>
|
||||||
|
{renderDescription(item.description)}
|
||||||
|
</MotionText>)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</MotionHStack>
|
||||||
|
))}
|
||||||
|
</MotionSimpleGrid>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<MotionSimpleGrid
|
||||||
|
display={{ base: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}
|
||||||
|
columns={{ base: 1, sm: 1, md: 1 }}
|
||||||
p={4}
|
p={4}
|
||||||
pb={10}
|
pb={10}
|
||||||
w={{ base: '100%', sm: '95vw', md: '90vw', lg: '80vw', xl: '70vw' }}
|
w={{ base: '100%', sm: '95vw', md: '90vw', lg: '80vw', xl: '70vw' }}
|
||||||
@@ -264,12 +473,12 @@ function Advantages() {
|
|||||||
width="100%"
|
width="100%"
|
||||||
display="flex"
|
display="flex"
|
||||||
flexDirection={'column'}
|
flexDirection={'column'}
|
||||||
alignItems="center"
|
alignItems="flex-start"
|
||||||
ref={oilCubesRef}
|
ref={oilCubesRef}
|
||||||
mt={-4}
|
mt={-4}
|
||||||
ml={3}
|
ml={3}
|
||||||
>
|
>
|
||||||
<MotionFlex flexDirection={'column'} justifyContent="center" gap="10px" maxWidth="945px"
|
<MotionFlex flexDirection={'row'} flexWrap="wrap" justifyContent="flex-start" 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" }}
|
||||||
@@ -280,7 +489,8 @@ function Advantages() {
|
|||||||
initial={{ opacity: 0, scale: 0.8 }}
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
animate={isOilCubesInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
animate={isOilCubesInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
||||||
transition={{ duration: 0.5, delay: index * 0.15 }}
|
transition={{ duration: 0.5, delay: index * 0.15 }}
|
||||||
w='300px'
|
w='calc(50% - 5px)'
|
||||||
|
minW='280px'
|
||||||
h='100px'
|
h='100px'
|
||||||
bgImage={item.bgColor}
|
bgImage={item.bgColor}
|
||||||
roundedTopLeft={'30px'}
|
roundedTopLeft={'30px'}
|
||||||
|
|||||||
Reference in New Issue
Block a user