updated

2025-03-16 13:42:53 +08:00
parent a909854e4c
commit e169585a99
52 changed files with 425 additions and 73 deletions
--- a/src/components/salespoint.tsx
+++ b/src/components/salespoint.tsx
@@ -0,0 +1,146 @@
+import { Box, Stack, Image, Text, Flex, Link } from '@chakra-ui/react'
+import { colors } from '../colors';
+import { useEffect, useRef } from 'react';
+import { motion, useInView } from 'framer-motion'
+
+function Salespoint() {
+    const shopImages = [
+        {
+            image: '/images/pp.png',
+            link: 'https://www.pns.hk/zh-hk/all-brands/b/112546/%E7%8D%85%E7%90%83%E5%98%9C',
+        },
+        {
+            image: '/images/we.png',
+            link: 'https://www.wellcome.com.hk/zh-hant/search?keyword=%E7%8D%85%E7%90%83%E5%98%9C&page=1',
+        },
+        {
+            image: '/images/hk.png',
+            link: 'https://www.hktvmall.com/hktv/zh/search_a?keyword=%E7%8D%85%E7%90%83%E5%98%9C',
+        },
+    ]
+
+    const fbContainerRef = useRef<HTMLDivElement>(null);
+    const titleRef = useRef<HTMLDivElement>(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 (
+        <Stack
+            position="relative"
+            w="100%"
+            overflow="hidden"
+            align={'center'}
+        >
+            <motion.div
+                ref={titleRef}
+                initial={{ opacity: 0, y: 50 }}
+                animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
+                transition={{ duration: 0.7 }}
+            >
+                <Stack
+                    w='100%'
+                    justify={'center'}
+                    align={'center'}
+                >
+                    <Text
+                        className='font-melle font-xbold'
+                        color={colors.textColor}
+                        fontSize={'4xl'}
+                    >
+                        銷售點
+                    </Text>
+                </Stack>
+            </motion.div>
+
+            <Flex
+                gap={12}
+                direction={{ base: 'column', sm: 'column', md: 'row' }}
+                justify="center"
+            >
+                {shopImages.map((image, index) => (
+                    <motion.div
+                        key={index}
+                        initial={{ opacity: 0, y: 30 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.5, delay: index * 0.2 }}
+                    >
+                        <Stack
+                            w='250px'
+                            justify={'flex-end'}
+                        >
+                            <Link href={image.link}>
+                                <Image src={image.image} cursor="pointer" />
+                            </Link>
+                        </Stack>
+                    </motion.div>
+                ))}
+            </Flex>
+
+            {/* Facebook Page Plugin */}
+            <motion.div
+                initial={{ opacity: 0, scale: 0.9 }}
+                whileInView={{ opacity: 1, scale: 1 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.7, delay: 0.3 }}
+            >
+                <Box
+                    ref={fbContainerRef}
+                    className="fb-page-container"
+                    w="100%"
+                    maxW="500px"
+                    bgColor='red'
+                    justifyItems={'center'}
+                    my={4}
+                    h="auto" // Add a minimum height so there's space for the plugin to render
+                >
+                    <div id="fb-root"></div>
+                    <div
+                        className="fb-page"
+                        data-href="https://www.facebook.com/hoehinwhiteflower/" // Use a valid Facebook page URL
+                        data-width="600"   // Increased from 500px to 600px
+                        data-height="700"  // Increased from 230px to 400px
+                        data-hide-cover="false"
+                        data-show-facepile="false"
+                        data-tabs="timeline"
+                    ></div>
+                </Box>
+            </motion.div>
+        </Stack>
+    )
+}
+
+export default Salespoint;