diff --git a/public/images/new/ans_step1.webp b/public/images/new/ans_step1.webp
new file mode 100644
index 0000000..9ced581
Binary files /dev/null and b/public/images/new/ans_step1.webp differ
diff --git a/public/images/new/ans_step2.webp b/public/images/new/ans_step2.webp
new file mode 100644
index 0000000..09c3888
Binary files /dev/null and b/public/images/new/ans_step2.webp differ
diff --git a/public/images/new/ans_step3.webp b/public/images/new/ans_step3.webp
new file mode 100644
index 0000000..e93765e
Binary files /dev/null and b/public/images/new/ans_step3.webp differ
diff --git a/public/images/new/ans_step4.webp b/public/images/new/ans_step4.webp
new file mode 100644
index 0000000..7678e50
Binary files /dev/null and b/public/images/new/ans_step4.webp differ
diff --git a/src/components/new_ui/truth.tsx b/src/components/new_ui/truth.tsx
new file mode 100644
index 0000000..3d19289
--- /dev/null
+++ b/src/components/new_ui/truth.tsx
@@ -0,0 +1,226 @@
+import { Box, HStack, Image, Stack, Text, Link, Flex } from '@chakra-ui/react'
+import { motion, useInView } from 'framer-motion'
+import { colors } from '../../colors';
+import { useEffect, useRef } from 'react';
+const truthItems = [
+
+ {
+ id: 1,
+ image: '/images/new/ans_step1.webp',
+ desc: '**出街食飯死亡率大增近五成！**即睇營養師拆解「油」之迷思。'
+ },
+ {
+ id: 2,
+ image: '/images/new/ans_step2.webp',
+ desc: '**三高年輕化警號！**營養師揭港人隱形致肥陷阱！一支好油決定血管命運。'
+ },
+ {
+ id: 3,
+ image: '/images/new/ans_step3.webp',
+ desc: '**三高人士同樣啱食！**營養師教你自製健康手撕蔥油雞髀。'
+ },
+ {
+ id: 4,
+ image: '/images/new/ans_step4.webp',
+ desc: '**BBC認證豬油是健康食材？**混合食油等於垃圾油？純正食油一定最好？ 各種食油迷思可能正在誤導你，由營養學家為你拆解多數人不知道的真相！'
+ },
+]
+
+const renderDescription = (text: string) => {
+ const parts = text.split(/(\*\*.*?\*\*)/)
+
+ return parts.map((part, index) => {
+ if (part.startsWith('**') && part.endsWith('**')) {
+ return (
+
+ {part.slice(2, -2)}
+
+ )
+ }
+ return {part}
+ })
+}
+
+function Truth() {
+
+ const shopImages = [
+ {
+ image: '/images/pp.webp',
+ link: 'https://www.pns.hk/en/all-brands/b/112546/lion-globe',
+ },
+ {
+ image: '/images/we.webp',
+ link: 'https://www.wellcome.com.hk/zh-hant/search?keyword=%E7%8D%85%E7%90%83%E5%98%9C&page=1',
+ },
+ {
+ image: '/images/hk.webp',
+ link: 'https://www.hktvmall.com/hktv/zh/main/%E7%8D%85%E7%90%83%E5%98%9C%E6%97%97%E8%89%A6%E5%BA%97/s/H1261001',
+ },
+ ]
+
+ const fbContainerRef = useRef(null);
+ const titleRef = useRef(null);
+ const isTitleInView = useInView(titleRef, { once: true });
+
+
+ // Load Facebook SDK and initialize the plugin
+ useEffect(() => {
+ // Add Facebook SDK if it doesn't exist
+ if (!document.getElementById('facebook-jssdk')) {
+ const script = document.createElement('script');
+ script.id = 'facebook-jssdk';
+ script.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0';
+ script.async = true;
+ script.defer = true;
+ document.body.appendChild(script);
+ }
+
+ // Parse XFBML when SDK is loaded
+ const handleSDKLoad = () => {
+ if ((window as any).FB && fbContainerRef.current) {
+ (window as any).FB.XFBML.parse(fbContainerRef.current);
+ }
+ };
+
+ // Check if FB is already loaded
+ if ((window as any).FB) {
+ handleSDKLoad();
+ } else {
+ // Listen for SDK load
+ (window as any).fbAsyncInit = handleSDKLoad;
+ }
+
+ return () => {
+ // Clean up
+ (window as any).fbAsyncInit = undefined;
+ };
+ }, []);
+
+
+
+ return (
+
+
+
+ 想知道更多食用油健康真相？
+
+
+
+ {truthItems.map((item) => (
+
+
+
+ {renderDescription(item.desc)}
+
+
+
+
+ ))}
+
+
+
+
+ 點擊以下銷售點連結
+
+
+
+
+
+ {shopImages.map((image, index) => (
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Truth;
\ No newline at end of file
diff --git a/src/pages/main.tsx b/src/pages/main.tsx
index cf6dd3e..e13bb90 100644
--- a/src/pages/main.tsx
+++ b/src/pages/main.tsx
@@ -5,6 +5,7 @@ import Wraning from '@/components/new_ui/wraning'
import Info from '@/components/new_ui/info'
import Advantages from '@/components/new_ui/advantages'
import OilInfo from '@/components/new_ui/oilInfo'
+import Truth from '@/components/new_ui/truth'
@@ -18,6 +19,7 @@ function MainPage() {
+
)
}