updated the ui v315
This commit is contained in:
parent
f32a2dd307
commit
8dcbc0fc57
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 561 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
|
|
@ -12,7 +12,7 @@ function Bestoil() {
|
|||
const cook = useBreakpointValue({
|
||||
base: "/images/cook_mb.webp",
|
||||
sm: "/images/cook_mb.webp",
|
||||
md: "/images/cook_pc.webp",
|
||||
md: "/images/goldandhealthytext.webp",
|
||||
});
|
||||
|
||||
// Create refs for elements we want to animate
|
||||
|
|
@ -62,15 +62,26 @@ function Bestoil() {
|
|||
>
|
||||
<Flex
|
||||
w='100%'
|
||||
gap={0}
|
||||
justify={"center"}
|
||||
align={"center"}
|
||||
direction={{ base: "column", sm: "column", md: "row" }}
|
||||
>
|
||||
|
||||
<Image src="/images/best5.webp"
|
||||
fit='contain'
|
||||
<Stack
|
||||
w={{ base: "70%", sm: "80%", md: '350px', lg: '500px' }}
|
||||
/>
|
||||
align={"center"}
|
||||
mr={{ base: 0, sm: 0, md: '-80px' }}
|
||||
>
|
||||
<Image src="/images/best5.webp"
|
||||
fit='contain'
|
||||
/>
|
||||
|
||||
<Image src='/images/cookmethods.webp'
|
||||
w={'70%'}
|
||||
display={{ base: "none", sm: "none", md: "flex" }}
|
||||
fit='contain'
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,35 @@
|
|||
import { Box, Stack, Image, Flex, SimpleGrid } from '@chakra-ui/react'
|
||||
import {useRef } from 'react';
|
||||
import { Box, Stack, Image, Flex, SimpleGrid, Text } from '@chakra-ui/react'
|
||||
import { useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { colors } from '../colors';
|
||||
|
||||
// Create motion versions of Chakra components
|
||||
|
||||
const MotionImage = motion(Image);
|
||||
|
||||
const statement = `*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
|
||||
^Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。
|
||||
此產品沒有根據《藥劑業及毒藥條例》或《中醫藥條例》註冊，為此產品作出的任何聲稱亦沒有為進行該等註冊而接受評核，此產品並不供作診斷、治療或預防任何疾病之用。`
|
||||
|
||||
function Compare() {
|
||||
const compareRef = useRef(null);
|
||||
|
||||
const formatText = (text: string) => {
|
||||
return text.split('\n').map((line, i) => (
|
||||
<Box key={i}
|
||||
color={colors.textColor}
|
||||
fontSize='10px'
|
||||
mx={5}
|
||||
className='font-noto-sans font-regular'
|
||||
>
|
||||
{line.split('\t').map((segment, j) => (
|
||||
j === 0 ? segment : <Text as="span" ml={4} key={j}>{segment}</Text>
|
||||
))}
|
||||
{i < text.split('\n').length - 1 && <br />}
|
||||
</Box>
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={compareRef}
|
||||
|
|
@ -18,7 +38,7 @@ function Compare() {
|
|||
>
|
||||
<SimpleGrid columns={2}
|
||||
maxW="full"
|
||||
h={{ base: '140vw', sm: '140vw', md: '120vw', lg: '50vw', xl: '55vw' }}
|
||||
h={{ base: '200vw', sm: '170vw', md: '145vw', lg: '61vw', xl: '61w' }}
|
||||
mb="20px" // Add 20px bottom margin
|
||||
position="relative"
|
||||
zIndex="1"
|
||||
|
|
@ -61,7 +81,25 @@ function Compare() {
|
|||
viewport={{ once: true }}
|
||||
transition={{ duration: 1.5 }}
|
||||
/>
|
||||
<Box
|
||||
width={'full'}
|
||||
justifyItems={'center'}
|
||||
position="absolute"
|
||||
bottom="17%"
|
||||
left="50%"
|
||||
transform="translateX(-51%)"
|
||||
zIndex="1"
|
||||
>
|
||||
<Box
|
||||
w='auto'
|
||||
h='auto'>
|
||||
{formatText(statement)}
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
|
||||
</SimpleGrid>
|
||||
|
||||
{/* Use a larger negative margin to pull the flex up into the grid area */}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,7 @@ function Footer() {
|
|||
</Text>
|
||||
<Flex alignItems={'center'} justifyContent={'center'} direction="column">
|
||||
<Image src="/images/headerlogo.webp" alt="Logo" width="150px" />
|
||||
<Text textAlign={'center'} marginLeft={3} marginTop={2} className="font-melle font-medium" color={'#075C39'}>
|
||||
{"【積極求變 健康向前】"}
|
||||
</Text>
|
||||
|
||||
</Flex>
|
||||
<Flex
|
||||
alignItems={'flex-end'}
|
||||
|
|
@ -26,15 +24,29 @@ function Footer() {
|
|||
h='60px'
|
||||
|
||||
>
|
||||
<Text
|
||||
className='font-noto-sans font-regular'
|
||||
color={colors.textColor}
|
||||
fontSize={{ base: 'xs', sm: 'sm', md: 'md', lg: 'md', xl: 'md' }}
|
||||
mt={5}
|
||||
ml={2}
|
||||
<Stack gap={0}
|
||||
position={'absolute'}
|
||||
bottom={1}
|
||||
>
|
||||
{`Copyright © ${currentYear}合興食油（香港）有限公司 版權所有，不得轉載。`}
|
||||
</Text>
|
||||
<Text
|
||||
className='font-noto-sans font-regular'
|
||||
color={colors.textColor}
|
||||
fontSize={'8px'}
|
||||
mt={5}
|
||||
ml={2}
|
||||
>
|
||||
{`Copyright © ${currentYear}合興食油（香港）有限公司 版權所有，不得轉載。`}
|
||||
</Text>
|
||||
<Text
|
||||
className='font-noto-sans font-regular'
|
||||
color={colors.textColor}
|
||||
fontSize={'8px'}
|
||||
|
||||
ml={2}
|
||||
>
|
||||
{`參考資料 | 台灣營養師張益堯在節目《奕起聊健康》上分享關於「油脂」的健康 https://bit.ly/3FmZkCo https://bit.ly/4htQ9gt`}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Stack>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Box, Flex, Image, Text, } from '@chakra-ui/react';
|
||||
import { Box, Flex, Image, } from '@chakra-ui/react';
|
||||
import {colors} from '../colors';
|
||||
|
||||
function Header() {
|
||||
|
|
@ -6,9 +6,6 @@ function Header() {
|
|||
<Box bg={colors.topBarColor} py={4} w="full">
|
||||
<Flex alignItems={'center'} justifyContent={'center'} direction="column">
|
||||
<Image src="/images/headerlogo.webp" alt="Logo" width="150px" />
|
||||
<Text textAlign={'center'} marginLeft={3} marginTop={2} className="font-melle font-medium" color={'#075C39'}>
|
||||
{"【積極求變 健康向前】"}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import { motion } from 'framer-motion'
|
|||
function Hero1() {
|
||||
const MotionImage = motion(ChakraImage);
|
||||
const oilImage = useBreakpointValue({
|
||||
base: "/images/oilmobile.webp",
|
||||
sm: "/images/oil.webp",
|
||||
base: "/images/lionglobe_product_mobile.webp",
|
||||
sm: "/images/lionglobe_product_pc.webp",
|
||||
|
||||
});
|
||||
return (
|
||||
|
|
@ -82,7 +82,7 @@ function Hero1() {
|
|||
justifyContent={{ base: "center", sm: "flex-start", md: "flex-start", lg: "flex-start", xl: "flex-start" }}
|
||||
>
|
||||
<MotionImage
|
||||
src="/images/people2.webp"
|
||||
src="/images/peoples.webp"
|
||||
h={{ base: "120vw", sm: "70vw", md: "50vw", lg: "50vw", xl: "50vw" }}
|
||||
// maxH={"50%"}
|
||||
marginRight={{ base: "-30%", sm: "0", md: "0", lg: "0", xl: "0" }}
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ function Hero2() {
|
|||
h={"auto"}
|
||||
>
|
||||
<Image
|
||||
src="/images/oldman.jpg"
|
||||
src="/images/asking.jpg"
|
||||
rounded="4xl"
|
||||
marginTop={'10px'}
|
||||
height={{ md: "100%", lg: "85%", xl: "65%" }}
|
||||
|
|
@ -143,7 +143,7 @@ function Hero2() {
|
|||
</MotionText>
|
||||
</Flex>
|
||||
<MotionImage
|
||||
src="/images/oldman.jpg"
|
||||
src="/images/asking.jpg"
|
||||
rounded="4xl"
|
||||
marginTop={'3px'}
|
||||
h={{ md: "90%", lg: "65%", xl: "65%" }}
|
||||
|
|
@ -163,7 +163,7 @@ function Hero2() {
|
|||
|
||||
<MotionText
|
||||
color={colors.textColor}
|
||||
className="font-noto-sans font-bold"
|
||||
className="font-noto-sans font-regular"
|
||||
lineHeight={2}
|
||||
variants={{
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
|
|
|
|||
|
|
@ -146,6 +146,7 @@ function Oil_info() {
|
|||
<Flex
|
||||
w={{ base: '80%', sm: '80%', md: "100%" }}
|
||||
justify={{ base: 'flex-start', sm: 'flex-start', md: 'center' }}
|
||||
display={{ base: 'flex', sm: 'flex', md: 'none' }}
|
||||
>
|
||||
<Image src={oilinfotitle}
|
||||
w='400px'
|
||||
|
|
@ -173,6 +174,15 @@ function Oil_info() {
|
|||
^根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算`)}
|
||||
</Stack>
|
||||
|
||||
<Stack
|
||||
display={{ base: 'none', sm: 'none', md: 'flex' }}
|
||||
>
|
||||
<Image src='/images/mboilinfotitle.webp'
|
||||
w='400px'
|
||||
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Text
|
||||
color='white'
|
||||
className='NotoSansCJKtc font-medium'
|
||||
|
|
@ -183,7 +193,7 @@ function Oil_info() {
|
|||
<Box as="span" className='NotoSansCJKtc font-xbold' display="inline">世界衛生組織建議，</Box>
|
||||
{"人體應攝取良好的脂肪酸比例，這可由食油中攝取，從而調節膽固醇，保護心血管健康。"}
|
||||
</Text>
|
||||
<Text
|
||||
{/* <Text
|
||||
color='white'
|
||||
className='NotoSansCJKtc font-medium'
|
||||
mb={10}
|
||||
|
|
@ -191,7 +201,7 @@ function Oil_info() {
|
|||
fontSize={'lg'}
|
||||
>
|
||||
{"獅球嘜「營萃護心油」採用黃金比例調配，讓每一滴都成為心血管的隱形防護網。"}
|
||||
</Text>
|
||||
</Text> */}
|
||||
<Stack
|
||||
display={{ base: 'none', sm: 'none', md: 'flex' }}
|
||||
mt={-5}>
|
||||
|
|
|
|||
|
|
@ -22,11 +22,11 @@ const questions = [
|
|||
{
|
||||
image: '/images/q4.png',
|
||||
question: "貴價油 = 健康油？",
|
||||
answer: `健康關鍵在於「脂肪酸比例」，而非價格！
|
||||
answer: `錯！健康關鍵在於「脂肪酸比例」，而非價格！
|
||||
不同脂肪酸對健康影響各異：
|
||||
\t• 單元不飽和脂肪酸（MUFA / 例如Omega-9） - 有助降低壞膽固醇
|
||||
\t• 多元不飽和脂肪酸（PUFA / 例如Omega-3、6） - 需攝取適當比例，Omega-6過多會引發炎症
|
||||
\t• 飽和脂肪（SFA） - 過量攝取會提升壞膽固醇，影響心血管健康`
|
||||
• 單元不飽和脂肪酸（MUFA / 例如Omega-9） - 有助降低壞膽固醇
|
||||
• 多元不飽和脂肪酸（PUFA / 例如Omega-3、6） - 需攝取適當比例，Omega-6過多會引發炎症
|
||||
• 飽和脂肪（SFA） - 過量攝取會提升壞膽固醇，影響心血管健康`
|
||||
},
|
||||
{
|
||||
image: '/images/q5.png',
|
||||
|
|
@ -41,20 +41,38 @@ const questions = [
|
|||
|
||||
function Qa() {
|
||||
const formatText = (text: string) => {
|
||||
return text.split('\n').map((line, i) => (
|
||||
<Box key={i}
|
||||
color={colors.textColor}
|
||||
fontSize='lg'
|
||||
ml={1}
|
||||
className='font-noto-sans font-regular'
|
||||
>
|
||||
{line.split('\t').map((segment, j) => (
|
||||
j === 0 ? segment : <Text as="span" ml={4} key={j}>{segment}</Text>
|
||||
))}
|
||||
{i < text.split('\n').length - 1 && <br />}
|
||||
</Box>
|
||||
));
|
||||
// Define all the phrases that should have the bold styling
|
||||
const boldPhrases = ["錯！", "未必！", "• 單元不飽和脂肪酸", "• 多元不飽和脂肪酸", "• 飽和脂肪", "看煙點：", "看脂肪酸比例：", "看認證："];
|
||||
|
||||
return text.split('\n').map((line, i) => {
|
||||
// Check if the line starts with any of the bold phrases
|
||||
const matchingPhrase = boldPhrases.find(phrase => line.startsWith(phrase));
|
||||
const hasBoldPhrase = !!matchingPhrase;
|
||||
const boldPart = hasBoldPhrase ? matchingPhrase : "";
|
||||
const restOfLine = hasBoldPhrase ? line.substring(matchingPhrase.length) : line;
|
||||
|
||||
return (
|
||||
<Box key={i}
|
||||
color={colors.textColor}
|
||||
fontSize='lg'
|
||||
ml={1}
|
||||
className='font-noto-sans font-regular'
|
||||
>
|
||||
{hasBoldPhrase && (
|
||||
<Text as="span" className='font-noto-sans font-black'>
|
||||
{boldPart}
|
||||
</Text>
|
||||
)}
|
||||
{restOfLine.split('\t').map((segment, j) => (
|
||||
j === 0 ? segment : <Text as="span" ml={4} key={j}>{segment}</Text>
|
||||
))}
|
||||
{i < text.split('\n').length - 1 && <br />}
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Box
|
||||
w="100%"
|
||||
|
|
|
|||
|
|
@ -89,6 +89,8 @@ function Salespoint() {
|
|||
gap={12}
|
||||
direction={{ base: 'column', sm: 'column', md: 'row' }}
|
||||
justify="center"
|
||||
align={'flex-end'}
|
||||
|
||||
>
|
||||
{shopImages.map((image, index) => (
|
||||
<motion.div
|
||||
|
|
|
|||
Loading…
Reference in New Issue