added lazy loading and change the questions ans
This commit is contained in:
parent
bafeef5c29
commit
4095a9042a
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 230 KiB |
|
|
@ -74,12 +74,14 @@ function Bestoil() {
|
|||
>
|
||||
<Image src="/images/best5.webp"
|
||||
fit='contain'
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<Image src='/images/cookmethods.webp'
|
||||
w={'70%'}
|
||||
display={{ base: "none", sm: "none", md: "flex" }}
|
||||
fit='contain'
|
||||
loading="lazy"
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
|
|
@ -89,6 +91,7 @@ function Bestoil() {
|
|||
<Image src="/images/oilchart.webp"
|
||||
fit='contain'
|
||||
w={{ base: "80%", sm: "90%", md: '350px', lg: '500px' }}
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
</Flex>
|
||||
|
|
@ -101,6 +104,7 @@ function Bestoil() {
|
|||
<Image src={cook}
|
||||
w={{ base: "80%", sm: "80%", md: '600px' }}
|
||||
fit='contain'
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<Text
|
||||
|
|
|
|||
|
|
@ -67,11 +67,12 @@ function Compare() {
|
|||
>
|
||||
{/* Content here */}
|
||||
<MotionImage
|
||||
src='/images/conpareheart.webp'
|
||||
src='/images/compareheart.webp'
|
||||
width={{
|
||||
base: '95%', sm: '90% ', md: '80% ', lg: '35% '
|
||||
}}
|
||||
position="absolute"
|
||||
loading="lazy"
|
||||
top="0%"
|
||||
left="50%"
|
||||
transform="translateX(-51%)"
|
||||
|
|
@ -117,6 +118,7 @@ function Compare() {
|
|||
width={{
|
||||
base: '100%%', sm: '95% ', md: '80% ', lg: '35% '
|
||||
}}
|
||||
loading="lazy"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ function Hero2() {
|
|||
<Image
|
||||
src="/images/asking.jpg"
|
||||
rounded="4xl"
|
||||
loading="lazy"
|
||||
marginTop={'10px'}
|
||||
height={{ md: "100%", lg: "85%", xl: "65%" }}
|
||||
fit="cover"
|
||||
|
|
@ -145,6 +146,7 @@ function Hero2() {
|
|||
<MotionImage
|
||||
src="/images/asking.jpg"
|
||||
rounded="4xl"
|
||||
loading="lazy"
|
||||
marginTop={'3px'}
|
||||
h={{ md: "90%", lg: "65%", xl: "65%" }}
|
||||
display={{ base: "flex", md: "flex", lg: "none" }}
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ function Oil_info() {
|
|||
fit='contain'
|
||||
w='100%'
|
||||
h='auto'
|
||||
loading="lazy"
|
||||
></Image>
|
||||
</Stack>
|
||||
<Stack
|
||||
|
|
@ -151,6 +152,7 @@ function Oil_info() {
|
|||
<Image src={oilinfotitle}
|
||||
w='400px'
|
||||
mt={{ base: 2, sm: 2, md: -12 }}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
|
|
@ -162,6 +164,7 @@ function Oil_info() {
|
|||
>
|
||||
<Image src="/images/oilinfooil.webp"
|
||||
w={{ base: '70%', sm: '80%', md: '350px' }}
|
||||
loading="lazy"
|
||||
/>
|
||||
<Stack
|
||||
justify={"center"}
|
||||
|
|
@ -179,7 +182,7 @@ function Oil_info() {
|
|||
>
|
||||
<Image src='/images/mboilinfotitle.webp'
|
||||
w='400px'
|
||||
|
||||
loading="lazy"
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
|
|
@ -240,6 +243,7 @@ function Oil_info() {
|
|||
<Image
|
||||
src={oilinfogroup}
|
||||
w={{ base: "80%", sm: "80%", md: '850px' }}
|
||||
loading="lazy"
|
||||
/>
|
||||
</motion.div>
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@ const questions = [
|
|||
{
|
||||
image: '/images/q2.png',
|
||||
question: "用橄欖油煮食就一定最健康？",
|
||||
answer: "未必！橄欖油雖富含單元不飽和脂肪酸如Omega-9，但人體可自行合成，而其 Omega-3 和 Omega-6 含量偏低，僅約 1% 和 7%，脂肪酸比例並不均衡，對小孩及孕婦來說，長期單一使用可能無法滿足他們對營養素的需求。而初榨橄欖油煙點低（190°C），高溫煮食容易產生有害物質，反成健康負擔。"
|
||||
answer: "未必！橄欖油雖富含單元不飽和脂肪酸如Omega-9（約78%），但人體可自行合成，而其 Omega-3 和 Omega-6 含量偏低，僅約 1% 和 7%，脂肪酸比例並不均衡，對小孩及孕婦來說，長期單一使用可能無法滿足他們對營養素的需求。而初榨橄欖油煙點低（190°C），高溫煮食容易產生有害物質，反成健康負擔。"
|
||||
},
|
||||
{
|
||||
image: '/images/q3.png',
|
||||
question: "使用單一油種的食用油較好？",
|
||||
answer: "未必！橄欖油雖富含單元不飽和脂肪酸如Omega-9，但人體可自行合成，而其Omega-3和 Omega-6 含量偏低，脂肪酸比例並不均衡，對小孩及孕婦來說，長期單一使用可能無法滿足他們對營養素的需求。而初榨橄欖油煙點較低(約190°C)，高溫煮食容易產生有害物質，反成健康負擔。"
|
||||
answer: "未必！ 長期只用一種食油，猶如「偏食」，容易導致脂肪酸攝取失衡，影響健康。不同食油各有優缺點，例如米糠油、橄欖油、葵花籽油Omega-3偏低，不適合發育中的小孩、孕婦及哺乳中的婦女長期單一使用；初榨橄欖油與初榨亞麻籽油不耐高溫；花生油與牛油果油的飽和脂肪偏高，增加心血管堵塞的風險。"
|
||||
},
|
||||
{
|
||||
image: '/images/q4.png',
|
||||
|
|
@ -146,6 +146,7 @@ function Qa() {
|
|||
</Accordion.ItemTrigger>
|
||||
<Accordion.ItemContent>
|
||||
<Accordion.ItemBody
|
||||
bgColor={index % 2 == 0 ? 'white' : '#FBFCF3'}
|
||||
justifyItems={'center'}>
|
||||
<Flex w={{ base: '95%', sm: '95%', md: '80%', lg: '70%', xl: '50%' }}>
|
||||
<Flex w={{ base: '3%', sm: '2%', md: '10%', lg: '10%', xl: '10%' }}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ function Salespoint() {
|
|||
const fbContainerRef = useRef<HTMLDivElement>(null);
|
||||
const titleRef = useRef<HTMLDivElement>(null);
|
||||
const isTitleInView = useInView(titleRef, { once: true });
|
||||
|
||||
|
||||
|
||||
// Load Facebook SDK and initialize the plugin
|
||||
useEffect(() => {
|
||||
|
|
@ -90,7 +90,7 @@ function Salespoint() {
|
|||
direction={{ base: 'column', sm: 'column', md: 'row' }}
|
||||
justify="center"
|
||||
align={'flex-end'}
|
||||
|
||||
|
||||
>
|
||||
{shopImages.map((image, index) => (
|
||||
<motion.div
|
||||
|
|
@ -105,7 +105,8 @@ function Salespoint() {
|
|||
justify={'flex-end'}
|
||||
>
|
||||
<Link href={image.link}>
|
||||
<Image src={image.image} cursor="pointer" />
|
||||
<Image src={image.image} cursor="pointer"
|
||||
loading="lazy" />
|
||||
</Link>
|
||||
</Stack>
|
||||
</motion.div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue