updated ui

src/components/new_ui/advantages.tsx

@@ -1,4 +1,4 @@
-import { Box, Stack, Image, Flex, Text, SimpleGrid } from '@chakra-ui/react'
+import { Box, Stack, Image, Flex, Text, SimpleGrid, HStack } from '@chakra-ui/react'
 import { motion, useInView } from 'framer-motion'
 import { useRef } from 'react'
 const MotionImage = motion.create(Image)
@@ -139,18 +139,24 @@ function Advantages() {
             <Stack
                 position="relative"
                 w="100%"
-                h={{ base: '20vw', sm: '20vw', md: '20vw', lg: '20vw', xl: '25vw' }}    
                 justifyItems={'center'}
+                alignItems={'center'}
+                gap={0}
             >
 
-            <Image
+                <Image
-                src='/images/new/heart.webp'
+                    src='/images/new/heart.webp'
-                position="absolute"
+                    w={{ base: '75vw', sm: '75vw', md: '40vw', lg: '40vw', xl: '40vw' }}
-                left="50%"
+                />
-                transform="translateX(-50%)"
+
-                w={{ base: '30vw', sm: '30vw', md: '30vw', lg: '30vw', xl: '30vw' }}
+                <Text
-               
+                    className='font-melle font-xbold'
-            />
+                    fontSize={{ base: '2xl', sm: '3xl', md: '3vw', lg: '3vw', xl: '3vw' }}
+                    color={'white'}
+                    mt={-2}
+                >
+                    {'四大優勢，世一選擇！'}
+                </Text>
 
             </Stack>
 

src/components/new_ui/hero1.tsx

@@ -200,7 +200,7 @@ function Hero1() {
           <Box
             position={'absolute'}
             w={bigWarningSize}
-            right={{ base: '11vw', sm: '11vw', md: '18vw', lg: '18vw', xl: '18vw' }}
+            right={{ base: '5vw', sm: '5vw', md: '18vw', lg: '18vw', xl: '18vw' }}
             top={{ base: '12vw', sm: '12vw', md: '20vw', lg: '20vw', xl: '10vw' }}
             css={{
               animation: 'floatSlow 3.3s ease-in-out infinite',
@@ -218,7 +218,7 @@ function Hero1() {
           {/* Warning Texts */}
           <Box
             position={'absolute'}
-            w={{ base: "20vw", sm: "20vw", md: "11vw", lg: "11vw", xl: "10vw" }}
+            w={{ base: "25vw", sm: "25vw", md: "11vw", lg: "11vw", xl: "10vw" }}
             left={{ base: "23vw", sm: "23vw", md: "30vw", lg: "30vw", xl: "37vw" }}
             top={{ base: "9vw", sm: "9vw", md: "7vw", lg: "7vw", xl: "3vw" }}
             css={{
@@ -236,7 +236,7 @@ function Hero1() {
           </Box>
           <Box
             position={'absolute'}
-            w={{ base: "20vw", sm: "20vw", md: "10vw", lg: "10vw", xl: "9vw" }}
+            w={{ base: "27vw", sm: "27vw", md: "10vw", lg: "10vw", xl: "9vw" }}
             left={{ base: "35vw", sm: "35vw", md: "18vw", lg: "18vw", xl: "25vw" }}
             top={{ base: "25vw", sm: "25vw", md: "20vw", lg: "20vw", xl: "14vw" }}
             css={{
@@ -254,8 +254,8 @@ function Hero1() {
           </Box>
           <Box
             position={'absolute'}
-            w={{ base: "29vw", sm: "29vw", md: "14vw", lg: "14vw", xl: "13vw" }}
+            w={{ base: "34vw", sm: "34vw", md: "14vw", lg: "14vw", xl: "13vw" }}
-            right={{ base: "20vw", sm: "20vw", md: "34vw", lg: "34vw", xl: "35vw" }}
+            right={{ base: "15vw", sm: "15vw", md: "34vw", lg: "34vw", xl: "35vw" }}
             top={{ base: "10vw", sm: "10vw", md: "7vw", lg: "7vw", xl: "5vw" }}
             css={{
               animation: 'floatSlow 3.8s ease-in-out infinite',
@@ -272,8 +272,8 @@ function Hero1() {
           </Box>
           <Box
             position={'absolute'}
-            w={{ base: "13vw", sm: "13vw", md: "8vw", lg: "8vw", xl: "7vw" }}
+            w={{ base: "19vw", sm: "19vw", md: "8vw", lg: "8vw", xl: "7vw" }}
-            right={{ base: "14vw", sm: "14vw", md: "26vw", lg: "26vw", xl: "26vw" }}
+            right={{ base: "10vw", sm: "10vw", md: "26vw", lg: "26vw", xl: "26vw" }}
             top={{ base: "35vw", sm: "35vw", md: "18vw", lg: "18vw", xl: "12vw" }}
             css={{
               animation: 'floatFast 3.3s ease-in-out infinite',

src/components/new_ui/info.tsx

@@ -42,7 +42,7 @@ const infoData: InfoData[] = [
         image: '/images/new/info_4.webp',
         description: `香港人生活節奏急促，一日三餐唔係叫外賣就出街食，而餐廳普遍使用 Omega-6 偏高嘅食油（如大豆油）。**長期攝取會令體內Omega-6遠多於Omega-3，脂肪酸比例失衡，促進身體慢性發炎。**
 
-失衡嘅狀況如果未能得到改善，會慢慢出現容易攰、記憶力下降、專注力不足等情況；若持續惡化，仲可能影響腦部神經傳導，進一步提升患上**腦霧及失智症**嘅風險。 `
+如果失衡未能改善，尤其Omega-3長期攝取不足，就容易出現易攰、記憶力下降、專注力不足等情況。隨住狀況持續惡化，仲可能影響腦部神經傳導，提升**腦霧同失智症**風險。`
     }
 ]
 

src/components/new_ui/oilInfo.tsx

@@ -1,6 +1,7 @@
 import { Box, Image, SimpleGrid } from '@chakra-ui/react'
 import { motion, useInView } from 'framer-motion'
 import { useRef } from 'react'
+import { useRouter, useRouterState } from '@tanstack/react-router'
 
 const MotionImage = motion.create(Image)
 const MotionBox = motion.create(Box)
@@ -9,6 +10,20 @@ const MotionSimpleGrid = motion.create(SimpleGrid)
 function OilInfo() {
     const mainRef = useRef(null);
     const isMainInView = useInView(mainRef, { once: true });
+    const router = useRouter();
+    const { location } = useRouterState();
+
+    const handleRecipeNavigation = () => {
+        const isOnRecipePage = location.pathname === '/recipe';
+        
+        if (isOnRecipePage) {
+            // Already on recipe page
+            return;
+        }
+        
+        // Navigate from main page - force reload to ensure Instagram embeds work
+        window.location.href = '/recipe';
+    };
 
     return (
         <MotionBox
@@ -62,11 +77,13 @@ function OilInfo() {
                     transition={{ duration: 0.6, delay: 0.8, ease: "easeOut" }}
                 >
                     <MotionImage
-                        src='/images/new/recipe_button.webp'
+                        src='/images/new/buttons.webp'
-                        w={{ base: '100%', sm: '90%', md: '85%' }}
+                        w={{ base: '100%', sm: '100%', md: '90%' }}
                         initial={{ opacity: 0, scale: 0.8 }}
                         animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
                         transition={{ duration: 0.5, delay: 1.0, ease: "easeOut" }}
+                        cursor="pointer"
+                        onClick={handleRecipeNavigation}
                     />
                 </MotionBox>
 

src/components/new_ui/truth.tsx

@@ -135,6 +135,7 @@ function Truth() {
             </MotionText>
 
             <MotionStack
+                mx="auto"
                 mt={{ base: 3, sm: -5, md: -5, lg: -5, xl: -5 }}
                 columns={{ base: 1, sm: 1, md: 2 }}
                 p={{ base: 5, sm: 12, md: 20 }}
@@ -188,6 +189,7 @@ function Truth() {
             >
                 <MotionStack
                     w='100%'
+                    mt={5}
                     justify={'center'}
                     align={'center'}
                     initial={{ opacity: 0, scale: 0.9 }}
@@ -210,9 +212,9 @@ function Truth() {
             <MotionFlex
                 gap={12}
                 direction={{ base: 'column', sm: 'column', md: 'row' }}
-                justify="center"
+                justifyItems="center"
                 mt={5}
-                align={'flex-end'}
+                align={{ base: 'center', sm: 'center', md: 'flex-end', lg: 'flex-end', xl: 'flex-end' }}
                 initial={{ opacity: 0, y: 30 }}
                 animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                 transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
@@ -225,7 +227,8 @@ function Truth() {
                         transition={{ duration: 0.5, delay: 0.5 + index * 0.2, ease: "easeOut" }}
                     >
                         <MotionStack
-                            w='250px'
+                            w={{ base: '250px', sm: '250px', md: '220px', lg: '250px', xl: '250px' }}
+                            mx="auto"
                             justify={'flex-end'}
                             initial={{ opacity: 0, y: 20 }}
                             animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}

src/pages/recipe.tsx

@@ -6,34 +6,29 @@ import { useEffect, useState } from 'react'
 const igPosts = [
     {
         id: 1,
-        title: "Healthy Oil Recipe 1",
+        title: "Sam Sam Kitchen",
-        url: "https://www.instagram.com/reel/DQiyajyET7l/?igsh=NzZnbmduNjc0Zjlo"
+        subTitle: "蜂蜜芥末煎三文魚",
+        url: "https://www.instagram.com/p/DLrhFq6JnKV/?utm_source=ig_web_button_share_sheet"
     },
     {
         id: 2,
-        title: "Healthy Oil Recipe 2",
+        title: "阿婆廚房",
-        url: "https://www.instagram.com/reel/DO5f01Pj_By/?igsh=NjhhMnpxczllaHQ1"
+        subTitle: "懶人版蝦多士",
+        url: "https://www.instagram.com/reel/DMaP9jaSeDV/?utm_source=ig_web_button_share_sheet"
     },
     {
         id: 3,
-        title: "Healthy Oil Recipe 3",
+        title: "Cook1cook",
-        url: "https://www.instagram.com/p/DQicBYxE9IA/?igsh=MWIybmo4YXNxdnBlbw=="
+        subTitle: "慳油炸雞法",
+        url: "https://www.instagram.com/reel/DL4i5TXtI4B/?igsh=MXBsYXoyOGJucXE0ZQ"
     },
     {
         id: 4,
-        title: "Healthy Oil Recipe 4",
+        title: "Travelogue by Tracy",
-        url: "https://www.instagram.com/p/DQCAnNrEWfF/?igsh=MXc0Z25qNm9jaWtyNA=="
+        subTitle: "酥炸牛油果天婦羅",
+        url: "https://www.instagram.com/reel/DOYeOUfEUoP/"
     },
-    {
+
-        id: 5,
-        title: "Healthy Oil Recipe 5",
-        url: "https://www.instagram.com/reel/DQbruJ2Ejpz/?igsh=Mm96NWljMWdyOW56"
-    },
-    {
-        id: 6,
-        title: "Healthy Oil Recipe 6",
-        url: "https://www.instagram.com/reel/DQe5gwTkjCf/?igsh=MXZ2aHRjN3Vnd2RjcQ=="
-    }
 ];
 
 function Recipe() {
@@ -155,38 +150,48 @@ function Recipe() {
             <Image
                 src="/images/new/recipe_title.webp"
                 w={{ base: '70vw', md: '50vw', lg: '30vw' }}
-                mt = {20}
+                mt={20}
                 mx="auto"
             />
 
             <SimpleGrid
-                columns={{ base: 1, sm: 1, md: 2 }}
+                columns={{ base: 1, sm: 1, md: 2, lg: 2, xl: 3 }}
                 p={{ base: 10, sm: 20, md: 20 }}
-                w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '70%' }}
+                w={{ base: '100%', sm: '100%', md: '100%', lg: '80%', xl: '85%' }}
                 h={'auto'}
                 gap={{ base: 10, md: 5 }}
                 mx="auto"
                 justifyItems={'center'}
-                alignItems={'center'}
+                alignItems={'flex-start'}
             >
                 {igPosts.map((post) => (
 
 
                     <Box
                         key={post.id}
-                        justifyItems={'center'}
+                        justifyItems={'flex-start'}
                         alignItems={'center'}
-                        width={325}
 
                     >
                         <Text
-                            color={'#2E683D'}
+                            color={'#3F8C04'}
-                            mb={2}
+
-                            className='font-melle font-xbold'
+                            className='font-noto-sans'
-                            fontSize={{ base: "2xl", md: "2xl", lg: "22xl2px", xl: "2xl" }}>
+                            fontWeight={'400'}
+                            fontSize={{ base: "2xl", md: "2xl", lg: "2xl", xl: "2xl" }}>
                             {post.title}
                         </Text>
-                        <InstagramEmbed url={post.url} width={328} />
+
+                        <Text
+                            color={'#3F8C04'}
+                            mb={2}
+                            className='font-melle font-xbold'
+                            fontSize={{ base: "2xl", md: "2xl", lg: "2xl", xl: "2xl" }}>
+                            {post.subTitle}
+                        </Text>
+                        <InstagramEmbed url={post.url}
+                            width={328}
+                        />
                     </Box>
                 ))}