94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
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;
|