first

2025-03-16 00:10:11 +08:00
parent e7cf1c28b0
commit a14b206d25
84 changed files with 8752 additions and 0 deletions
--- a/src/components/compare.tsx
+++ b/src/components/compare.tsx
@@ -0,0 +1,93 @@
+import { Box, Stack, Image, Text, Flex, SimpleGrid } from '@chakra-ui/react'
+import { colors } from '../colors';
+import { useEffect, useRef, useState } from 'react';
+import { motion, useInView } from 'framer-motion';
+
+// Create motion versions of Chakra components
+const MotionStack = motion(Stack);
+const MotionImage = motion(Image);
+const MotionBox = motion(Box);
+
+function Compare() {
+    const compareRef = useRef(null);
+    const isInView = useInView(compareRef, { once: true, amount: 0.3 });
+
+    return (
+        <Box
+            ref={compareRef}
+            w="100%"
+            position="relative"
+        >
+            <SimpleGrid columns={2}
+                maxW="full"
+                h={{ base: '140vw', sm: '140vw', md: '120vw', lg: '50vw', xl: '55vw' }}
+                mb="20px" // Add 20px bottom margin
+                position="relative"
+                zIndex="1"
+            >
+                <Stack
+                    position="relative"
+                    w="100%"
+                    h="100%"
+                    bgImage={`
+                        linear-gradient(to bottom, 
+                            rgba(255, 251, 210, 1) 4%, 
+                            rgba(255, 251, 210, 0.1) 10%),
+                        url(/images/bgyellow.jpg)
+                    `}
+                    bgSize="cover"
+                    bgPos="center"
+
+                >
+                    <Box bgColor="rgba(255, 251, 210, 0.4)" w="100%" h="100%" />
+                    {/* Content container with z-index to appear above the background */}
+                </Stack>
+                <Stack
+                    w="100%"
+                    h="100%"
+                    bgImage="linear-gradient(to bottom, #FFFBD2 4%, #E1E1E2 10%)"
+                >
+                    {/* Content here */}
+                    <MotionImage
+                        src='/images/conpareheart.png'
+                        width={{
+                            base: '95%', sm: '90% ', md: '80% ', lg: '35% '
+                        }}
+                        position="absolute"
+                        top="0%"
+                        left="50%"
+                        transform="translateX(-51%)"
+                        zIndex="1"
+                        initial={{ opacity: 0 }}
+                        whileInView={{ opacity: 1 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 1.5 }}
+                    />
+                </Stack>
+            </SimpleGrid>
+
+            {/* Use a larger negative margin to pull the flex up into the grid area */}
+            <Flex
+                direction="column"
+                justify="center"
+                align="center"
+                width="100%"
+                mt={{ base: '-25vw', sm: '-25vw', md: '-20vw', lg: '-10vw' }}
+                position="relative"
+                zIndex="2"
+            >
+                <MotionImage
+                    src="/images/bigheart.png"
+                    width={{
+                        base: '100%%', sm: '95% ', md: '80% ', lg: '35% '
+                    }}
+                    initial={{ opacity: 0 }}
+                    whileInView={{ opacity: 1 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 1.5 }}
+                />
+            </Flex>
+        </Box>
+    )
+}
+export default Compare;