updated ui

2025-11-04 12:50:27 +08:00
parent 21cc9905b7
commit f5392cf597
8 changed files with 83 additions and 52 deletions
--- a/src/components/new_ui/advantages.tsx
+++ b/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
-                src='/images/new/heart.webp'
-                position="absolute"
-                left="50%"
-                transform="translateX(-50%)"
-                w={{ base: '30vw', sm: '30vw', md: '30vw', lg: '30vw', xl: '30vw' }}
-               
-            />
+                <Image
+                    src='/images/new/heart.webp'
+                    w={{ base: '75vw', sm: '75vw', md: '40vw', lg: '40vw', xl: '40vw' }}
+                />
+
+                <Text
+                    className='font-melle font-xbold'
+                    fontSize={{ base: '2xl', sm: '3xl', md: '3vw', lg: '3vw', xl: '3vw' }}
+                    color={'white'}
+                    mt={-2}
+                >
+                    {'四大優勢，世一選擇！'}
+                </Text>

            </Stack>

--- a/src/components/new_ui/hero1.tsx
+++ b/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" }}
-            right={{ base: "20vw", sm: "20vw", md: "34vw", lg: "34vw", xl: "35vw" }}
+            w={{ base: "34vw", sm: "34vw", md: "14vw", lg: "14vw", xl: "13vw" }}
+            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" }}
-            right={{ base: "14vw", sm: "14vw", md: "26vw", lg: "26vw", xl: "26vw" }}
+            w={{ base: "19vw", sm: "19vw", md: "8vw", lg: "8vw", xl: "7vw" }}
+            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',
--- a/src/components/new_ui/info.tsx
+++ b/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長期攝取不足，就容易出現易攰、記憶力下降、專注力不足等情況。隨住狀況持續惡化，仲可能影響腦部神經傳導，提升**腦霧同失智症**風險。`
    }
 ]

--- a/src/components/new_ui/oilInfo.tsx
+++ b/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'
-                        w={{ base: '100%', sm: '90%', md: '85%' }}
+                        src='/images/new/buttons.webp'
+                        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>

--- a/src/components/new_ui/truth.tsx
+++ b/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 }}