philip-cat/healthy_oil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

png to webp

Browse Source
This commit is contained in:
philipcheung
2025-03-16 21:18:31 +08:00
parent 3fca970100
commit 0e1fe0b656
66 changed files with 63 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/hero1.tsx
View File

@@ -1,10 +1,11 @@
import { Box, Stack, SimpleGrid, Image as ChakraImage, Flex, useBreakpointValue } from '@chakra-ui/react'
import { motion } from 'framer-motion'
function Hero1() {
const MotionImage = motion(ChakraImage);
const oilImage = useBreakpointValue({
base: "/images/oilmobile.png",
sm: "/images/oil.png",
base: "/images/oilmobile.webp",
sm: "/images/oil.webp",
});
return (
@@ -62,7 +63,7 @@ function Hero1() {
h="fit-content" // or a specific height
alignSelf="flex-start" // This constrains the Flex to its content height
>
<MotionImage src="/images/text1.png"
<MotionImage src="/images/text1.webp"
width={{ base: "90%", sm: "80%", md: "70%", lg: "70%", xl: "60%" }}
fit="contain"
h="auto"
@@ -81,7 +82,7 @@ function Hero1() {
justifyContent={{ base: "center", sm: "flex-start", md: "flex-start", lg: "flex-start", xl: "flex-start" }}
>
<MotionImage
src="/images/people2.png"
src="/images/people2.webp"
h={{ base: "120vw", sm: "70vw", md: "50vw", lg: "50vw", xl: "50vw" }}
// maxH={"50%"}
marginRight={{ base: "-30%", sm: "0", md: "0", lg: "0", xl: "0" }}
@@ -99,7 +100,7 @@ function Hero1() {
position="relative"
h={{ base: "30vw", sm: "30vw", md: "30vw", lg: "30vw", xl: "20vw" }}
w="100%"
bgImage={"url('/images/woodtable.png')"}
bgImage={"url('/images/woodtable.webp')"}
bgSize="cover"
backgroundPosition="center"
justifyContent={"center"}