diff --git a/src/components/new_ui/CyclingImage.tsx b/src/components/new_ui/CyclingImage.tsx
index 7bf7367..25b02ae 100644
--- a/src/components/new_ui/CyclingImage.tsx
+++ b/src/components/new_ui/CyclingImage.tsx
@@ -12,6 +12,7 @@ interface CyclingImageProps {
right?: any
bottom?: any
display?: any
+ transform?: 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
@@ -31,6 +32,7 @@ const CyclingImage = ({
right,
bottom,
display,
+ transform,
cycleDuration = 3,
intensity = 0.5,
timingFunction = 'ease-in-out',
@@ -95,6 +97,7 @@ const CyclingImage = ({
w={w}
maxW={maxW}
left={left}
+ transform={transform}
top={top}
right={right}
bottom={bottom}
diff --git a/src/components/new_ui/advantages.tsx b/src/components/new_ui/advantages.tsx
index 108df76..3946a31 100644
--- a/src/components/new_ui/advantages.tsx
+++ b/src/components/new_ui/advantages.tsx
@@ -130,7 +130,6 @@ function Advantages() {
bgColor="#9AC035"
zIndex={3}
overflow="hidden"
- justifyItems={'center'}
initial={{ opacity: 0 }}
animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
@@ -142,6 +141,7 @@ function Advantages() {
pb ={10}
w={{ base: '100%', sm: '95vw', md: '90vw', lg: '80vw', xl: '70vw' }}
h={'auto'}
+ mx="auto"
initial={{ opacity: 0, y: 50 }}
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
diff --git a/src/components/new_ui/hero1.tsx b/src/components/new_ui/hero1.tsx
index 0327d2f..f9d4ce4 100644
--- a/src/components/new_ui/hero1.tsx
+++ b/src/components/new_ui/hero1.tsx
@@ -1,6 +1,9 @@
import { Box, Image, Stack } from '@chakra-ui/react'
import CyclingImage from './CyclingImage'
import { useEffect, useState } from 'react'
+import { motion } from 'framer-motion'
+
+const MotionImage = motion.create(Image)
function Hero1() {
const [headerHeight, setHeaderHeight] = useState(80);
@@ -20,18 +23,18 @@ function Hero1() {
};
delayedUpdate();
-
+
const resizeObserver = new ResizeObserver(() => {
setTimeout(updateHeaderHeight, 50);
});
-
+
const header = document.querySelector('[data-header="true"]');
if (header) {
resizeObserver.observe(header);
}
-
+
window.addEventListener('resize', delayedUpdate);
-
+
return () => {
window.removeEventListener('resize', delayedUpdate);
resizeObserver.disconnect();
@@ -88,43 +91,38 @@ function Hero1() {
}
`}
-
+
{/* Hero 1 title */}
-
{/* Mobile arrow - shown on base and sm */}
-
{/* Desktop arrow - shown on md, lg, xl */}
-
-
-
-
-
-
-
-
-
-
@@ -52,19 +53,20 @@ function Hero2() {
src="/images/new/oil.webp"
zIndex={0}
position={'absolute'}
+ left="50%"
bottom={{ base: -10, sm: -10, md: -20, lg: -20, xl: -20 }}
w={{ base: "80vw", sm: "70vw", md: "60vw", lg: "50vw", xl: "40vw" }}
- initial={{ opacity: 0, y: 50 }}
- whileInView={{ opacity: 1, y: 0 }}
+ initial={{ opacity: 0, y: 50, x: '-50%' }}
+ whileInView={{ opacity: 1, y: 0, x: '-50%' }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, delay: 0.5 }}
/>
-
+
-
+
);
}
export default Hero2;
\ No newline at end of file
diff --git a/src/components/new_ui/oilInfo.tsx b/src/components/new_ui/oilInfo.tsx
index f393c4a..c37cc71 100644
--- a/src/components/new_ui/oilInfo.tsx
+++ b/src/components/new_ui/oilInfo.tsx
@@ -18,7 +18,6 @@ function OilInfo() {
bgColor="#FFFBD3"
zIndex={3}
overflow="hidden"
- justifyItems={'center'}
initial={{ opacity: 0 }}
animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
@@ -30,6 +29,7 @@ function OilInfo() {
w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '60%' }}
h={'auto'}
gap={{ base: 10, md: 0 }}
+ mx="auto"
justifyItems={'center'}
alignItems={'center'}
initial={{ opacity: 0, y: 50 }}
diff --git a/src/components/new_ui/truth.tsx b/src/components/new_ui/truth.tsx
index ab465f4..d0f0940 100644
--- a/src/components/new_ui/truth.tsx
+++ b/src/components/new_ui/truth.tsx
@@ -257,12 +257,14 @@ function Truth() {
_focus={{ outline: 'none', boxShadow: 'none' }}
_active={{ outline: 'none', boxShadow: 'none' }}>
diff --git a/src/components/new_ui/wraning.tsx b/src/components/new_ui/wraning.tsx
index 0940e0d..5ae7a4f 100644
--- a/src/components/new_ui/wraning.tsx
+++ b/src/components/new_ui/wraning.tsx
@@ -28,7 +28,6 @@ function Wraning() {
bgImage={{ base: "url('/images/new/wraning_bg_mobile.webp')", sm: "url('/images/new/wraning_bg_mobile.webp')", md: "url('/images/new/wraning_bg.webp')", lg: "url('/images/new/wraning_bg.webp')", xl: "url('/images/new/wraning_bg.webp')" }}
bgSize="cover"
backgroundPosition="center"
- justifyItems={'center'}
bgRepeat="no-repeat"
zIndex={3}
overflow="hidden"
@@ -146,11 +145,12 @@ function Wraning() {
{/* title */}
diff --git a/src/pages/recipe.tsx b/src/pages/recipe.tsx
index 91d4115..8fbf6e7 100644
--- a/src/pages/recipe.tsx
+++ b/src/pages/recipe.tsx
@@ -147,7 +147,6 @@ function Recipe() {
bgColor="#FFFBD3"
zIndex={3}
overflow="hidden"
- justifyItems={'center'}
pt={`${headerHeight}px`}
>
@@ -157,6 +156,7 @@ function Recipe() {
src="/images/new/recipe_title.webp"
w={{ base: '70vw', md: '50vw', lg: '30vw' }}
mt = {20}
+ mx="auto"
/>