added alt and title attributes to images for better accessibility and SEO.

Co-authored-by: Copilot <copilot@github.com>

src/components/new_ui/CyclingImage.tsx

@@ -19,6 +19,8 @@ interface CyclingImageProps {
     showControls?: boolean // Show play/pause and speed controls
     autoStart?: boolean // Auto-start animation
     style?: CSSProperties // Additional CSS styles
+    alt?: string
+    title?: string
 }
 
 const CyclingImage = ({
@@ -38,7 +40,9 @@ const CyclingImage = ({
     timingFunction = 'ease-in-out',
     showControls = false,
     autoStart = true,
-    style = {}
+    style = {},
+    alt,
+    title
 }: CyclingImageProps) => {
     const [isPlaying, setIsPlaying] = useState(autoStart)
     const [speed, setSpeed] = useState(cycleDuration)
@@ -93,6 +97,8 @@ const CyclingImage = ({
             <style>{animationStyle}</style>
             <Image
                 src={currentImage}
+                alt={alt}
+                title={title}
                 position={position}
                 w={w}
                 maxW={maxW}

src/components/new_ui/advantages.tsx

@@ -94,7 +94,10 @@ const info = [
 **獅球嘜營萃護心油每食用份量含0克反式脂肪**，有助減少壞膽固醇，減低患心臟病嘅風險。`,
         image: "/images/new/1.webp",
         titleImage: "/images/new/adv_img1.webp",
-        titleImage2: "/images/new/adv1.webp"
+        titleImage2: "/images/new/adv1.webp",
+        alt: "零反式脂肪",
+        titleSEO: "零反式脂肪"
+
     },
     {
         id: 2,
@@ -105,7 +108,9 @@ const info = [
 獅球嘜營萃護心油就係根據呢個原則調配出符合**世衛黃金比例**嘅配方²，幫助身體攝取每日必需脂肪酸，並促進**脂溶性維他命A、D、E、K**嘅吸收，全面支援日常健康所需。 `,
         image: "/images/new/2.webp",
         titleImage: "/images/new/adv_img2.webp",
-        titleImage2: "/images/new/adv2.webp"
+        titleImage2: "/images/new/adv2.webp",
+        alt: "不飽和脂肪,健康比例",
+        titleSEO: "不飽和脂肪,健康比例"
     },
     {
         id: 3,
@@ -115,7 +120,9 @@ const info = [
 **獅球嘜營萃護心油內嘅Omega-3比例較一般花生油及粟米油高**，特別有助經常外出用餐嘅都市人平衡脂肪酸攝取比例，從而支援心血管健康。 `,
         image: "/images/new/3.webp",
         titleImage: "/images/new/adv_img3.webp",
-        titleImage2: "/images/new/adv3.webp"
+        titleImage2: "/images/new/adv3.webp",
+        alt: "Omega3",
+        titleSEO: "Omega3"
     },
     {
         id: 4,
@@ -123,7 +130,10 @@ const info = [
         description: "",
         image: "/images/new/4.webp",
         titleImage: "/images/new/adv_img4.webp",
-        titleImage2: "/images/new/adv4.webp"
+        titleImage2: "/images/new/adv4.webp",
+        alt: "獅球嘜營萃護心油",
+        titleSEO: "獅球嘜營萃護心油"
+
     }
 ];
 
@@ -193,6 +203,8 @@ function Advantages() {
 
                 <Image
                     src='/images/new/heart.webp'
+                    title="獅球嘜營萃護心油"
+                    alt="獅球嘜營萃護心油"
                     w={{ base: '75vw', sm: '75vw', md: '40vw', lg: '40vw', xl: '40vw' }}
                 />
 
@@ -243,6 +255,8 @@ function Advantages() {
                                 <MotionImage
                                     w={{ base: '45vw', sm: '180px', md: '80px', lg: '110px', xl: '5vw' }}
                                     src={item.image}
+                                    alt={item.alt}
+                                    title={item.titleSEO}
                                     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" }}
@@ -259,6 +273,8 @@ function Advantages() {
                                         fit={'contain'}
                                         w={contextTitleImageSize(index)}
                                         src={item.titleImage2}
+                                        alt={item.alt}
+                                        title={item.titleSEO}
                                         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" }}
@@ -289,6 +305,8 @@ function Advantages() {
                                 fit={'contain'}
                                 mt={contextPeopleImageMt(index)}
                                 src={item.titleImage}
+                                alt={item.alt}
+                                title={item.titleSEO}
                                 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" }}

src/components/new_ui/hero1.tsx

@@ -111,7 +111,8 @@ function Hero1() {
             left="50%"
             top={{ base: '80vw', sm: '80vw', md: '26vw', lg: '26vw', xl: '28vw' }}
             maxW={{ base: "70vw", sm: "70vw", md: "40vw", lg: "50vw", xl: "35vw" }}
-            alt='hero title'
+            alt="一到40歲身就問多多"
+            title="一到40歲身就問多多"
             initial={{ opacity: 0, y: 30, x: '-50%' }}
             whileInView={{ opacity: 1, y: 0, x: '-50%' }}
             viewport={{ once: true, amount: 0.3 }}
@@ -364,6 +365,8 @@ function Hero1() {
               w="100%"
               cycleDuration={3}
               intensity={0.1}
+              alt="三高"
+              title="三高"
             />
           </Box>
           <Box
@@ -382,6 +385,8 @@ function Hero1() {
               w="100%"
               cycleDuration={3}
               intensity={0.1}
+              alt="脂肪肝"
+              title="脂肪肝"
             />
           </Box>
           <Box
@@ -400,6 +405,8 @@ function Hero1() {
               w="100%"
               cycleDuration={3}
               intensity={0.1}
+              alt="中央肥胖"
+              title="中央肥胖"
             />
           </Box>
           <Box
@@ -418,6 +425,8 @@ function Hero1() {
               w="100%"
               cycleDuration={3}
               intensity={0.1}
+              alt="脫髮"
+              title="脫髮"
             />
           </Box>
 

src/components/new_ui/hero2.tsx

@@ -29,6 +29,8 @@ function Hero2() {
                         src="/images/new/hero2title.webp"
                         position={'absolute'}
                         left="50%"
+                        title="獅球嘜營萃護心油"
+                        alt="獅球嘜營萃護心油"
                         top={{ base: "10px", sm: "20px", md: "30px", lg: "30px", xl: "40px" }}
                         w={{ base: "70vw", sm: "70vw", md: "35vw", lg: "35vw", xl: "28vw" }}
                         initial={{ opacity: 0, y: -30, x: '-50%' }}
@@ -51,6 +53,8 @@ function Hero2() {
 
                     <MotionImage
                         src="/images/new/oil_new.webp"
+                        alt="獅球嘜營萃護心油"
+                        title="獅球嘜營萃護心油"
                         zIndex={0}
                         position={'absolute'}
                         left="50%"

src/components/new_ui/oilInfo.tsx

@@ -61,7 +61,8 @@ function OilInfo() {
                 >
                     <MotionImage
                         src='/images/cookmethods.webp'
-                        alt='cooking methods'
+                        alt='烹調方法'
+                        title='烹調方法'
                         w={{ base: '100%', sm: '90%', md: '85%' }}
                         initial={{ opacity: 0, scale: 0.8 }}
                         animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}