updated

src/components/footer.tsx

@@ -7,7 +7,9 @@ import { colors } from '../colors';
 // ▲Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎
 // ▼營萃護心油的omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎，維持心血管健康`
 const footerText = `¹World Health Organization (2019). REPLACE trans fat: an action package to eliminate industrially produced transfatty acids. Geneva: World Health Organization. ISBN: 978-92-4-151499-6.
-² 根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算`
+² 根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算
+
+`
 function Footer() {
 
     const formatText = (text: string) => {

src/components/header.tsx

@@ -78,7 +78,20 @@ function Header({ showMenu = false }: HeaderProps) {
         const element = isOnMainPage ? document.getElementById(targetId) : null;
 
         if (element) {
-            element.scrollIntoView({ behavior: 'smooth' });
+            // Safari-compatible scrolling with fallback
+            const headerOffset = headerHeight || 0;
+            const elementPosition = element.getBoundingClientRect().top;
+            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+
+            try {
+                window.scrollTo({
+                    top: offsetPosition,
+                    behavior: 'smooth'
+                });
+            } catch (e) {
+                // Fallback for older Safari versions
+                window.scrollTo(0, offsetPosition);
+            }
             return;
         }
 

src/components/new_ui/advantages.tsx

@@ -227,7 +227,7 @@ function Advantages() {
                                     className='font-melle font-xbold'
                                     fontWeight={400}
                                     color='white'
-                                    fontSize={{ base: '9vw', sm: '4xl', md: '3xl', lg: '5xl', xl: '5xl' }}
+                                    fontSize={{ base: '9vw', sm: '5xl', md: '3xl', lg: '5xl', xl: '5xl' }}
                                     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" }}

src/components/new_ui/truth.tsx

@@ -161,6 +161,13 @@ function Truth() {
                         initial={{ opacity: 0, x: -30 }}
                         animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
                         transition={{ duration: 0.5, delay: 0.3 + index * 0.1, ease: "easeOut" }}
+                        cursor="pointer"
+                        onClick={() => {
+                            const url = item.url;
+                            if (url) {
+                                window.open(url, '_blank');
+                            }
+                        }}
                     >
                         <MotionImage
                             src={item.image}
@@ -177,13 +184,6 @@ function Truth() {
                             initial={{ opacity: 0, y: 20 }}
                             animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
                             transition={{ duration: 0.5, delay: 0.5 + index * 0.1, ease: "easeOut" }}
-                            cursor="pointer"
-                            onClick={() => {
-                                const url = item.url;
-                                if (url) {
-                                    window.open(url, '_blank');
-                                }
-                            }}
                         >
                             {renderDescription(item.desc)}
                         </MotionText>