From 4095a9042a146379558b12082820b8c7fb597a79 Mon Sep 17 00:00:00 2001
From: philipcheung <zerophilip2013hk@gmail.com>
Date: Mon, 17 Mar 2025 19:00:39 +0800
Subject: [PATCH] added lazy loading and change the questions ans

---
 .../images/{conpareheart.webp => compareheart.webp} | Bin
 src/components/bestoil.tsx                          |   4 ++++
 src/components/compare.tsx                          |   4 +++-
 src/components/hero2.tsx                            |   2 ++
 src/components/oil_info.tsx                         |   6 +++++-
 src/components/qa.tsx                               |   5 +++--
 src/components/salespoint.tsx                       |   7 ++++---
 7 files changed, 21 insertions(+), 7 deletions(-)
 rename public/images/{conpareheart.webp => compareheart.webp} (100%)

diff --git a/public/images/conpareheart.webp b/public/images/compareheart.webp
similarity index 100%
rename from public/images/conpareheart.webp
rename to public/images/compareheart.webp
diff --git a/src/components/bestoil.tsx b/src/components/bestoil.tsx
index 7d9cb37..722b1c2 100644
--- a/src/components/bestoil.tsx
+++ b/src/components/bestoil.tsx
@@ -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
diff --git a/src/components/compare.tsx b/src/components/compare.tsx
index 2746cce..32bbf5c 100644
--- a/src/components/compare.tsx
+++ b/src/components/compare.tsx
@@ -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 }}
diff --git a/src/components/hero2.tsx b/src/components/hero2.tsx
index d9d3a16..759afe4 100644
--- a/src/components/hero2.tsx
+++ b/src/components/hero2.tsx
@@ -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" }}
diff --git a/src/components/oil_info.tsx b/src/components/oil_info.tsx
index 5f50c4c..bb5a7bb 100644
--- a/src/components/oil_info.tsx
+++ b/src/components/oil_info.tsx
@@ -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>
diff --git a/src/components/qa.tsx b/src/components/qa.tsx
index 130a02b..c39d3d0 100644
--- a/src/components/qa.tsx
+++ b/src/components/qa.tsx
@@ -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%' }}
diff --git a/src/components/salespoint.tsx b/src/components/salespoint.tsx
index 47a145c..743e50a 100644
--- a/src/components/salespoint.tsx
+++ b/src/components/salespoint.tsx
@@ -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>