finish hero1 and add hero2 to main.tsx
This commit is contained in:
BIN
public/images/new/arrow_mobile_1.webp
Normal file
BIN
public/images/new/arrow_mobile_1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
public/images/new/arrow_mobile_2.webp
Normal file
BIN
public/images/new/arrow_mobile_2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
public/images/new/arrow_pc_2.webp
Normal file
BIN
public/images/new/arrow_pc_2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
public/images/new/confuse_mobile.webp
Normal file
BIN
public/images/new/confuse_mobile.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
@@ -3,12 +3,15 @@ import { useState, useEffect, CSSProperties } from 'react'
|
||||
|
||||
interface CyclingImageProps {
|
||||
src: string
|
||||
src2?: string // Optional second image to alternate with
|
||||
position?: CSSProperties['position']
|
||||
w?: any
|
||||
maxW?: any
|
||||
left?: any
|
||||
top?: any
|
||||
right?: any
|
||||
bottom?: any
|
||||
display?: any
|
||||
cycleDuration?: number // Duration of one complete cycle in seconds
|
||||
intensity?: number // How dark/light it gets (0-1, where 1 is maximum)
|
||||
timingFunction?: string // CSS timing function
|
||||
@@ -19,12 +22,15 @@ interface CyclingImageProps {
|
||||
|
||||
const CyclingImage = ({
|
||||
src,
|
||||
src2,
|
||||
position = 'relative',
|
||||
w,
|
||||
maxW,
|
||||
left,
|
||||
top,
|
||||
right,
|
||||
bottom,
|
||||
display,
|
||||
cycleDuration = 3,
|
||||
intensity = 0.5,
|
||||
timingFunction = 'ease-in-out',
|
||||
@@ -35,11 +41,23 @@ const CyclingImage = ({
|
||||
const [isPlaying, setIsPlaying] = useState(autoStart)
|
||||
const [speed, setSpeed] = useState(cycleDuration)
|
||||
const [currentIntensity, setCurrentIntensity] = useState(intensity)
|
||||
const [currentImage, setCurrentImage] = useState(src)
|
||||
|
||||
useEffect(() => {
|
||||
setSpeed(cycleDuration)
|
||||
}, [cycleDuration])
|
||||
|
||||
// Handle image alternation if src2 is provided
|
||||
useEffect(() => {
|
||||
if (!src2 || !isPlaying) return
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setCurrentImage(prev => prev === src ? src2 : src)
|
||||
}, speed * 1000)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [src, src2, speed, isPlaying])
|
||||
|
||||
const togglePlayPause = () => {
|
||||
setIsPlaying(!isPlaying)
|
||||
}
|
||||
@@ -57,13 +75,13 @@ const CyclingImage = ({
|
||||
const animationStyle = `
|
||||
@keyframes ${animationName} {
|
||||
0% {
|
||||
filter: brightness(${1 + currentIntensity});
|
||||
filter: brightness(${1 - currentIntensity * 1.5});
|
||||
}
|
||||
50% {
|
||||
filter: brightness(${1 - currentIntensity});
|
||||
filter: brightness(1);
|
||||
}
|
||||
100% {
|
||||
filter: brightness(${1 + currentIntensity}) ;
|
||||
filter: brightness(${1 - currentIntensity * 1.5});
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -72,16 +90,18 @@ const CyclingImage = ({
|
||||
<>
|
||||
<style>{animationStyle}</style>
|
||||
<Image
|
||||
src={src}
|
||||
src={currentImage}
|
||||
position={position}
|
||||
w={w}
|
||||
maxW={maxW}
|
||||
left={left}
|
||||
top={top}
|
||||
right={right}
|
||||
bottom={bottom}
|
||||
display={display}
|
||||
style={{
|
||||
...style,
|
||||
animation: isPlaying ? `${animationName} ${speed}s ${timingFunction} infinite` : 'none',
|
||||
animation: isPlaying && !src2 ? `${animationName} ${speed}s ${timingFunction} infinite` : 'none',
|
||||
willChange: 'filter',
|
||||
transition: 'filter 0.3s ease'
|
||||
}}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Box, Image, Stack, } from '@chakra-ui/react'
|
||||
import { Box, Image, Stack } from '@chakra-ui/react'
|
||||
import CyclingImage from './CyclingImage'
|
||||
|
||||
function Hero1() {
|
||||
const bigWarningSize = { base: "80px", sm: "100px", md: "120px", lg: "9vw", xl: "8vw" };
|
||||
const smallWarningSize = { base: "40px", sm: "50px", md: "60px", lg: "6vw", xl: "5vw" };
|
||||
const bigWarningSize = { base: "17vw", sm: "15vw", md: "9vw", lg: "9vw", xl: "8vw" };
|
||||
|
||||
return (
|
||||
<Box
|
||||
position="relative"
|
||||
@@ -12,100 +12,248 @@ function Hero1() {
|
||||
justifyContent={"center"}
|
||||
|
||||
>
|
||||
{/* Global keyframes for all animations */}
|
||||
<style>
|
||||
{`
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatSlow {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatMedium {
|
||||
0%, 100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px) rotate(3deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatFast {
|
||||
0%, 100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-8px) rotate(-3deg);
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<Stack gap={0}>
|
||||
<Box
|
||||
position="relative"
|
||||
w="100%"
|
||||
minH={{ base: "100vh", sm: "100vh", md: "100vh", lg: "70vw", xl: "45vw" }}
|
||||
bgImage={"url('/images/new/confuse.webp')"}
|
||||
minH={{ base: "110vw", sm: "110vw", md: "70vw", lg: "70vw", xl: "45vw" }}
|
||||
bgImage={{base:"url('/images/new/confuse_mobile.webp')",sm:"url('/images/new/confuse_mobile.webp')",md:"url('/images/new/confuse.webp')",lg:"url('/images/new/confuse.webp')",xl:"url('/images/new/confuse.webp')"}}
|
||||
bgSize="cover"
|
||||
backgroundPosition="center"
|
||||
justifyItems={'center'}
|
||||
bgRepeat="no-repeat"
|
||||
>
|
||||
{/* Hero 1 title */}
|
||||
<Image src="/images/new/hero_text1x.webp"
|
||||
position={'absolute'}
|
||||
bottom={'100px'}
|
||||
maxW={{ base: "90%", sm: "80%", md: "60%", lg: "50vw", xl: "35vw" }}
|
||||
bottom={{ base: '70px', sm: '100px', md: '100px', lg: '100px', xl: '100px' }}
|
||||
maxW={{ base: "70vw", sm: "70vw", md: "50vw", lg: "50vw", xl: "35vw" }}
|
||||
alt='hero title'
|
||||
css={{
|
||||
animation: 'fadeInUp 1s ease-out',
|
||||
'@keyframes fadeInUp': {
|
||||
from: {
|
||||
opacity: 0,
|
||||
transform: 'translateY(30px)'
|
||||
},
|
||||
to: {
|
||||
opacity: 1,
|
||||
transform: 'translateY(0)'
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Image src="/images/new/arrow_pc_1.webp"
|
||||
{/* Mobile arrow - shown on base and sm */}
|
||||
<CyclingImage
|
||||
src="/images/new/arrow_mobile_1.webp"
|
||||
src2="/images/new/arrow_mobile_2.webp"
|
||||
position={'absolute'}
|
||||
maxW={{ base: "40px", sm: "50px", md: "60px", lg: "70%", xl: "70%" }}
|
||||
bottom={'10px'} />
|
||||
maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }}
|
||||
bottom={'10px'}
|
||||
display={{ base: "block", sm: "block", md: "none", lg: "none", xl: "none" }}
|
||||
cycleDuration={0.3}
|
||||
intensity={0}
|
||||
/>
|
||||
{/* Desktop arrow - shown on md, lg, xl */}
|
||||
<CyclingImage
|
||||
src="/images/new/arrow_pc_1.webp"
|
||||
src2="/images/new/arrow_pc_2.webp"
|
||||
position={'absolute'}
|
||||
maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }}
|
||||
bottom={'10px'}
|
||||
display={{ base: "none", sm: "none", md: "block", lg: "block", xl: "block" }}
|
||||
cycleDuration={0.3}
|
||||
intensity={0}
|
||||
/>
|
||||
{/* signs */}
|
||||
<CyclingImage
|
||||
src="/images/new/bigwarning.webp"
|
||||
<Box
|
||||
position={'absolute'}
|
||||
w={bigWarningSize}
|
||||
left={'20vw'}
|
||||
top={'5vw'}
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
<CyclingImage
|
||||
src="/images/new/bigwarning.webp"
|
||||
left={{ base: '14vw', sm: '14vw', md: '20vw', lg: '20vw', xl: '20vw' }}
|
||||
top={{ base: '14vw', sm: '14vw', md: '5vw', lg: '5vw', xl: '5vw' }}
|
||||
css={{
|
||||
animation: 'floatSlow 3s ease-in-out infinite',
|
||||
animationDelay: '0s'
|
||||
}}
|
||||
>
|
||||
<CyclingImage
|
||||
src="/images/new/bigwarning.webp"
|
||||
position={'relative'}
|
||||
w="100%"
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
position={'absolute'}
|
||||
w={smallWarningSize}
|
||||
left={'25vw'}
|
||||
bottom={'18vw'}
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
<CyclingImage
|
||||
src="/images/new/bigwarning.webp"
|
||||
w={{ base: "13vw", sm: "13vw", md: "6vw", lg: "6vw", xl: "5vw" }}
|
||||
left={{ base: '6vw', sm: '6vw', md: '13vw', lg: '13vw', xl: '25vw' }}
|
||||
bottom={{ base: '50vw', sm: '50vw', md: '27vw', lg: '27vw', xl: '18vw' }}
|
||||
css={{
|
||||
animation: 'floatMedium 3.5s ease-in-out infinite',
|
||||
animationDelay: '0.5s'
|
||||
}}
|
||||
>
|
||||
<CyclingImage
|
||||
src="/images/new/bigwarning.webp"
|
||||
position={'relative'}
|
||||
w="100%"
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
position={'absolute'}
|
||||
w={{ base: "13vw", sm: "13vw", md: "6vw", lg: "6vw", xl: "5vw" }}
|
||||
right={{ base: '7vw', sm: '7vw', md: '14vw', lg: '14vw', xl: '20vw' }}
|
||||
top={{ base: '60vw', sm: '60vw', md: '40vw', lg: '40vw', xl: '25vw' }}
|
||||
css={{
|
||||
animation: 'floatFast 3.2s ease-in-out infinite',
|
||||
animationDelay: '1s'
|
||||
}}
|
||||
>
|
||||
<CyclingImage
|
||||
src="/images/new/bigwarning.webp"
|
||||
position={'relative'}
|
||||
w="100%"
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
position={'absolute'}
|
||||
w={bigWarningSize}
|
||||
right={'20vw'}
|
||||
top={'25vw'}
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
<CyclingImage
|
||||
src="/images/new/bigwarning.webp"
|
||||
position={'absolute'}
|
||||
w={bigWarningSize}
|
||||
right={'18vw'}
|
||||
top={'10vw'}
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
right={{ base: '11vw', sm: '11vw', 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',
|
||||
animationDelay: '1.5s'
|
||||
}}
|
||||
>
|
||||
<CyclingImage
|
||||
src="/images/new/bigwarning.webp"
|
||||
position={'relative'}
|
||||
w="100%"
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
</Box>
|
||||
{/* Warning Texts */}
|
||||
<CyclingImage
|
||||
src="/images/new/threehightext.webp"
|
||||
<Box
|
||||
position={'absolute'}
|
||||
w={{ base: "100px", sm: "120px", md: "150px", lg: "11vw", xl: "10vw" }}
|
||||
left={{ base: "20px", sm: "30px", md: "40px", lg: "30vw", xl: "37vw" }}
|
||||
top={{ base: "3vw", sm: "3vw", md: "3vw", lg: "7vw", xl: "3vw" }}
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
<CyclingImage
|
||||
src="/images/new/fattext.webp"
|
||||
w={{ base: "20vw", sm: "20vw", 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={{
|
||||
animation: 'floatMedium 3.2s ease-in-out infinite',
|
||||
animationDelay: '0.2s'
|
||||
}}
|
||||
>
|
||||
<CyclingImage
|
||||
src="/images/new/threehightext.webp"
|
||||
position={'relative'}
|
||||
w="100%"
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
position={'absolute'}
|
||||
w={{ base: "100px", sm: "120px", md: "150px", lg: "10vw", xl: "9vw" }}
|
||||
left={{ base: "25vw", sm: "25vw", md: "25vw", lg: "18vw", xl: "25vw" }}
|
||||
top={{ base: "14vw", sm: "14vw", md: "14vw", lg: "20vw", xl: "14vw" }}
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
<CyclingImage
|
||||
src="/images/new/centerfattext.webp"
|
||||
w={{ base: "20vw", sm: "20vw", 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={{
|
||||
animation: 'floatFast 3.5s ease-in-out infinite',
|
||||
animationDelay: '0.7s'
|
||||
}}
|
||||
>
|
||||
<CyclingImage
|
||||
src="/images/new/fattext.webp"
|
||||
position={'relative'}
|
||||
w="100%"
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
position={'absolute'}
|
||||
w={{ base: "100px", sm: "120px", md: "150px", lg: "14vw", xl: "13vw" }}
|
||||
right={{ base: "35vw", sm: "35vw", md: "35vw", lg: "34vw", xl: "35vw" }}
|
||||
top={{ base: "5vw", sm: "5vw", md: "5vw", lg: "7vw", xl: "5vw" }}
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
<CyclingImage
|
||||
src="/images/new/hairlosstext.webp"
|
||||
w={{ base: "29vw", sm: "29vw", md: "14vw", lg: "14vw", xl: "13vw" }}
|
||||
right={{ base: "20vw", sm: "20vw", 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',
|
||||
animationDelay: '0.4s'
|
||||
}}
|
||||
>
|
||||
<CyclingImage
|
||||
src="/images/new/centerfattext.webp"
|
||||
position={'relative'}
|
||||
w="100%"
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
position={'absolute'}
|
||||
w={{ base: "100px", sm: "120px", md: "150px", lg: "8vw", xl: "7vw" }}
|
||||
right={{ base: "26vw", sm: "26vw", md: "26vw", lg: "26vw", xl: "26vw" }}
|
||||
top={{ base: "12vw", sm: "12vw", md: "12vw", lg: "18vw", xl: "12vw" }}
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
w={{ base: "13vw", sm: "13vw", md: "8vw", lg: "8vw", xl: "7vw" }}
|
||||
right={{ base: "14vw", sm: "14vw", 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',
|
||||
animationDelay: '0.9s'
|
||||
}}
|
||||
>
|
||||
<CyclingImage
|
||||
src="/images/new/hairlosstext.webp"
|
||||
position={'relative'}
|
||||
w="100%"
|
||||
cycleDuration={3}
|
||||
intensity={0.1}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
@@ -11,7 +11,7 @@ function Hero2() {
|
||||
<Box
|
||||
position="relative"
|
||||
w="100%"
|
||||
minH={{ base: "100vh", sm: "100vh", md: "100vh", lg: "70vw", xl: "70vw" }}
|
||||
minH={{ base: "115vw", sm: "105vw", md: "90vw", lg: "73vw", xl: "65vw" }}
|
||||
bgImage={"url('/images/new/hero2bg.webp')"}
|
||||
bgSize="cover"
|
||||
backgroundPosition="center"
|
||||
@@ -22,24 +22,24 @@ function Hero2() {
|
||||
|
||||
<Image src="/images/new/hero2title.webp"
|
||||
position={'absolute'}
|
||||
top={"50px"}
|
||||
w={{ base: "80%", sm: "70%", md: "60%", lg: "50vw", xl: "40vw" }}
|
||||
top={{ base: "10px", sm: "50px", md: "50px", lg: "50px", xl: "50px" }}
|
||||
w={{ base: "70vw", sm: "60vw", md: "50vw", lg: "35vw", xl: "35vw" }}
|
||||
|
||||
/>
|
||||
<Image src="/images/new/hero2subtitle.webp"
|
||||
position={'absolute'}
|
||||
zIndex={1}
|
||||
top={"18vw"}
|
||||
right={{ base: "10px", sm: "10px", md: "10px", lg: "3vw", xl: "27vw" }}
|
||||
w={{ base: "80%", sm: "70%", md: "60%", lg: "50vw", xl: "20vw" }}
|
||||
top={{ base: "30vw", sm: "35vw", md: "24vw", lg: "20vw", xl: "18vw" }}
|
||||
right={{ base: "15vw", sm: "15vw", md: "20vw", lg: "28vw", xl: "30vw" }}
|
||||
w={{ base: "30vw", sm: "30vw", md: "25vw", lg: "18vw", xl: "18vw" }}
|
||||
|
||||
/>
|
||||
|
||||
<Image src="/images/new/oil.webp"
|
||||
zIndex={0}
|
||||
position={'absolute'}
|
||||
bottom={-20}
|
||||
w={{ base: "80%", sm: "70%", md: "60%", lg: "50vw", xl: "44vw" }}
|
||||
bottom={{ base: -10, sm: -20, md: -20, lg: -20, xl: -20 }}
|
||||
w={{ base: "80vw", sm: "70vw", md: "60vw", lg: "50vw", xl: "40vw" }}
|
||||
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user