png to webp

Dockerfile

@@ -3,11 +3,13 @@ FROM node:18-alpine
 WORKDIR /app
 
 COPY package.json .
-
 RUN npm install
+RUN npm install -g serve
 
 COPY . .
+RUN npm run build
 
 EXPOSE 3000
 
-CMD ["npm", "run", "dev"]
+# Serve the static files after building
+CMD ["serve", "-s", "dist", "-l", "3000"]

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "healthy-oil",
+  "name": "healthyoil",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "healthy-oil",
+      "name": "healthyoil",
       "version": "0.0.0",
       "dependencies": {
         "@chakra-ui/cli": "^3.12.0",
@@ -21,6 +21,7 @@
         "react-dom": "^19.0.0",
         "react-facebook": "^9.0.12",
         "react-icons": "^5.5.0",
+        "react-lazy-load-image-component": "^1.6.3",
         "react-social-plugins": "^2.1.0",
         "snippet": "^0.1.0"
       },
@@ -4886,6 +4887,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4893,6 +4900,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
+      "license": "MIT"
+    },
     "node_modules/look-it-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/look-it-up/-/look-it-up-2.1.0.tgz",
@@ -5593,6 +5606,19 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-lazy-load-image-component": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.3.tgz",
+      "integrity": "sha512-kdQYUDbuISF3T9El0sBLNoWrmPohqlytcG4ognLtHYjY8bZAsJ0/Ez+VaV+0QlVyUY3K6dDXkuQAz3GpvdjBkw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1"
+      },
+      "peerDependencies": {
+        "react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x || ^19.x.x"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",

package.json

@@ -23,6 +23,7 @@
     "react-dom": "^19.0.0",
     "react-facebook": "^9.0.12",
     "react-icons": "^5.5.0",
+    "react-lazy-load-image-component": "^1.6.3",
     "react-social-plugins": "^2.1.0",
     "snippet": "^0.1.0"
   },

src/components/bestoil.tsx

@@ -10,9 +10,9 @@ const MotionStack = motion(Stack);
 
 function Bestoil() {
     const cook = useBreakpointValue({
-        base: "/images/cook_mb.png",
+        base: "/images/cook_mb.webp",
-        sm: "/images/cook_mb.png",
+        sm: "/images/cook_mb.webp",
-        md: "/images/cook_pc.png",
+        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' }}
                     />

src/components/compare.tsx

@@ -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% '
                     }}

src/components/footer.tsx

@@ -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>

src/components/header.tsx

@@ -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>

src/components/hero1.tsx

@@ -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",
+        base: "/images/oilmobile.webp",
-        sm: "/images/oil.png",
+        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"}

src/components/hero2.tsx

@@ -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%"}
                 />

src/components/oil_info.tsx

@@ -4,15 +4,15 @@ import { useRef, useEffect } from 'react'
 
 function Oil_info() {
     const oilinfotitle = useBreakpointValue({
-        base: "/images/mboilinfotitle.png",
+        base: "/images/mboilinfotitle.webp",
-        sm: "/images/mboilinfotitle.png",
+        sm: "/images/mboilinfotitle.webp",
-        md: "/images/oilinfotitle.png",
+        md: "/images/oilinfotitle.webp",
     });
 
     const oilinfogroup = useBreakpointValue({
-        base: "/images/mboilinfogroup.png",
+        base: "/images/mboilinfogroup.webp",
-        sm: "/images/mboilinfogroup.png",
+        sm: "/images/mboilinfogroup.webp",
-        md: "/images/pcoilinfogroup.png",
+        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"

src/components/salespoint.tsx

@@ -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',
         },
     ]

vite.config.ts

@@ -3,7 +3,7 @@ import react from '@vitejs/plugin-react'
 import tsconfigPaths from "vite-tsconfig-paths"
 // https://vite.dev/config/
 export default defineConfig({
-  base: "./",
+  base: "/",
   plugins: [react(), tsconfigPaths()],
   preview: {
     port: 3000,