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

10
src/components/bestoil.tsx
View File

@@ -10,9 +10,9 @@ const MotionStack = motion(Stack);
function Bestoil() {
const cook = useBreakpointValue({
base: "/images/cook_mb.png",
sm: "/images/cook_mb.png",
md: "/images/cook_pc.png",
base: "/images/cook_mb.webp",
sm: "/images/cook_mb.webp",
md: "/images/cook_pc.webp",
});
// Create refs for elements we want to animate
@@ -75,7 +75,7 @@ function Bestoil() {
animate={isBestOilInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
transition={{ duration: 0.8 }}
>
<Image src="/images/best5.png"
<Image src="/images/best5.webp"
fit='contain'
w={{ base: "70%", sm: "80%", md: '350px', lg: '500px' }}
/>
@@ -88,7 +88,7 @@ function Bestoil() {
transition={{ duration: 0.8 }}
justifyItems={"center"}
>
<Image src="/images/oilchart.png"
<Image src="/images/oilchart.webp"
fit='contain'
w={{ base: "80%", sm: "90%", md: '350px', lg: '500px' }}
/>

4
src/components/compare.tsx
View File

@@ -47,7 +47,7 @@ function Compare() {
>
{/* Content here */}
<MotionImage
src='/images/conpareheart.png'
src='/images/conpareheart.webp'
width={{
base: '95%', sm: '90% ', md: '80% ', lg: '35% '
}}
@@ -75,7 +75,7 @@ function Compare() {
zIndex="2"
>
<MotionImage
src="/images/bigheart.png"
src="/images/bigheart.webp"
width={{
base: '100%%', sm: '95% ', md: '80% ', lg: '35% '
}}

2
src/components/footer.tsx
View File

@@ -15,7 +15,7 @@ function Footer() {
{"查詢：29437810"}
</Text>
<Flex alignItems={'center'} justifyContent={'center'} direction="column">
<Image src="/images/headerlogo.png" alt="Logo" width="150px" />
<Image src="/images/headerlogo.webp" alt="Logo" width="150px" />
<Text textAlign={'center'} marginLeft={3} marginTop={2} className="font-melle font-medium" color={'#075C39'}>
{"【積極求變 健康向前】"}
</Text>

2
src/components/header.tsx
View File

@@ -5,7 +5,7 @@ function Header() {
return (
<Box bg={colors.topBarColor} py={4} w="full">
<Flex alignItems={'center'} justifyContent={'center'} direction="column">
<Image src="/images/headerlogo.png" alt="Logo" width="150px" />
<Image src="/images/headerlogo.webp" alt="Logo" width="150px" />
<Text textAlign={'center'} marginLeft={3} marginTop={2} className="font-melle font-medium" color={'#075C39'}>
{"【積極求變 健康向前】"}
</Text>

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"}

2
src/components/hero2.tsx
View File

@@ -69,7 +69,7 @@ function Hero2() {
align={"center"}
>
<Image
src="/images/hero2title.png"
src="/images/hero2title.webp"
w={{base:"420px",sm:"450px",md:"450px",lg:"350px",xl:"350px"}}
maxW={"95%"}
/>

20
src/components/oil_info.tsx
View File

@@ -4,15 +4,15 @@ import { useRef, useEffect } from 'react'
function Oil_info() {
const oilinfotitle = useBreakpointValue({
base: "/images/mboilinfotitle.png",
sm: "/images/mboilinfotitle.png",
md: "/images/oilinfotitle.png",
base: "/images/mboilinfotitle.webp",
sm: "/images/mboilinfotitle.webp",
md: "/images/oilinfotitle.webp",
});
const oilinfogroup = useBreakpointValue({
base: "/images/mboilinfogroup.png",
sm: "/images/mboilinfogroup.png",
md: "/images/pcoilinfogroup.png",
base: "/images/mboilinfogroup.webp",
sm: "/images/mboilinfogroup.webp",
md: "/images/pcoilinfogroup.webp",
});
@@ -74,7 +74,7 @@ function Oil_info() {
<Flex
direction="column"
bgImage={"url('/images/oilinfobg.png')"}
bgImage={"url('/images/oilinfobg.webp')"}
bgSize="cover"
backgroundPosition="center"
bgRepeat="no-repeat"
@@ -93,7 +93,7 @@ function Oil_info() {
justify={"center"}
align={"center"}
>
<Image src="/images/oilinfoheadertitle.png"
<Image src="/images/oilinfoheadertitle.webp"
fit='contain'
w='100%'
h='auto'
@@ -159,7 +159,7 @@ function Oil_info() {
gap={3}
align={"center"}
>
<Image src="/images/oilinfooil.png"
<Image src="/images/oilinfooil.webp"
w={{ base: '70%', sm: '80%', md: '350px' }}
/>
<Stack
@@ -204,7 +204,7 @@ function Oil_info() {
<Flex
direction="column"
bgImage={"url('/images/oilinfofooterbg.png')"}
bgImage={"url('/images/oilinfofooterbg.webp')"}
bgSize="cover"
backgroundPosition="center"
bgRepeat="no-repeat"

6
src/components/salespoint.tsx
View File

@@ -6,15 +6,15 @@ import { motion, useInView } from 'framer-motion'
function Salespoint() {
const shopImages = [
{
image: '/images/pp.png',
image: '/images/pp.webp',
link: 'https://www.pns.hk/zh-hk/all-brands/b/112546/%E7%8D%85%E7%90%83%E5%98%9C',
},
{
image: '/images/we.png',
image: '/images/we.webp',
link: 'https://www.wellcome.com.hk/zh-hant/search?keyword=%E7%8D%85%E7%90%83%E5%98%9C&page=1',
},
{
image: '/images/hk.png',
image: '/images/hk.webp',
link: 'https://www.hktvmall.com/hktv/zh/search_a?keyword=%E7%8D%85%E7%90%83%E5%98%9C',
},
]