diff --git a/Dockerfile b/Dockerfile
index 6b6369b..387529c 100644
--- a/Dockerfile
+++ b/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"]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 0423c8c..7784422 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 248482c..64b80ef 100644
--- a/package.json
+++ b/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"
},
diff --git a/public/images/background.png b/public/images/background.png
deleted file mode 100644
index 0171e5b..0000000
Binary files a/public/images/background.png and /dev/null differ
diff --git a/public/images/best5.png b/public/images/best5.png
deleted file mode 100644
index ee1d1cb..0000000
Binary files a/public/images/best5.png and /dev/null differ
diff --git a/public/images/best5.webp b/public/images/best5.webp
new file mode 100644
index 0000000..df7b9ca
Binary files /dev/null and b/public/images/best5.webp differ
diff --git a/public/images/bigheart.png b/public/images/bigheart.png
deleted file mode 100644
index 4c2eef9..0000000
Binary files a/public/images/bigheart.png and /dev/null differ
diff --git a/public/images/bigheart.webp b/public/images/bigheart.webp
new file mode 100644
index 0000000..ced3a9b
Binary files /dev/null and b/public/images/bigheart.webp differ
diff --git a/public/images/conpareheart.png b/public/images/conpareheart.png
deleted file mode 100644
index 87488c7..0000000
Binary files a/public/images/conpareheart.png and /dev/null differ
diff --git a/public/images/conpareheart.webp b/public/images/conpareheart.webp
new file mode 100644
index 0000000..c1c12c3
Binary files /dev/null and b/public/images/conpareheart.webp differ
diff --git a/public/images/cook_mb.png b/public/images/cook_mb.png
deleted file mode 100644
index 74d8d5d..0000000
Binary files a/public/images/cook_mb.png and /dev/null differ
diff --git a/public/images/cook_mb.webp b/public/images/cook_mb.webp
new file mode 100644
index 0000000..a1c385a
Binary files /dev/null and b/public/images/cook_mb.webp differ
diff --git a/public/images/cook_pc.png b/public/images/cook_pc.png
deleted file mode 100644
index 7c31515..0000000
Binary files a/public/images/cook_pc.png and /dev/null differ
diff --git a/public/images/cook_pc.webp b/public/images/cook_pc.webp
new file mode 100644
index 0000000..1e55a4a
Binary files /dev/null and b/public/images/cook_pc.webp differ
diff --git a/public/images/headerlogo.png b/public/images/headerlogo.png
deleted file mode 100644
index 1b6abe5..0000000
Binary files a/public/images/headerlogo.png and /dev/null differ
diff --git a/public/images/headerlogo.webp b/public/images/headerlogo.webp
new file mode 100644
index 0000000..7b9a990
Binary files /dev/null and b/public/images/headerlogo.webp differ
diff --git a/public/images/hero1oil.png b/public/images/hero1oil.png
deleted file mode 100644
index ba3024c..0000000
Binary files a/public/images/hero1oil.png and /dev/null differ
diff --git a/public/images/hero1text.png b/public/images/hero1text.png
deleted file mode 100644
index 0c2229a..0000000
Binary files a/public/images/hero1text.png and /dev/null differ
diff --git a/public/images/hero2title.png b/public/images/hero2title.png
deleted file mode 100644
index 1e28f60..0000000
Binary files a/public/images/hero2title.png and /dev/null differ
diff --git a/public/images/hero2title.webp b/public/images/hero2title.webp
new file mode 100644
index 0000000..51effe4
Binary files /dev/null and b/public/images/hero2title.webp differ
diff --git a/public/images/hk.png b/public/images/hk.png
deleted file mode 100644
index c0afc8e..0000000
Binary files a/public/images/hk.png and /dev/null differ
diff --git a/public/images/hk.webp b/public/images/hk.webp
new file mode 100644
index 0000000..d0652f4
Binary files /dev/null and b/public/images/hk.webp differ
diff --git a/public/images/mboilinfogroup.png b/public/images/mboilinfogroup.png
deleted file mode 100644
index 7994b7c..0000000
Binary files a/public/images/mboilinfogroup.png and /dev/null differ
diff --git a/public/images/mboilinfogroup.webp b/public/images/mboilinfogroup.webp
new file mode 100644
index 0000000..c2d488a
Binary files /dev/null and b/public/images/mboilinfogroup.webp differ
diff --git a/public/images/mboilinfotitle.png b/public/images/mboilinfotitle.png
deleted file mode 100644
index 8f9dd79..0000000
Binary files a/public/images/mboilinfotitle.png and /dev/null differ
diff --git a/public/images/mboilinfotitle.webp b/public/images/mboilinfotitle.webp
new file mode 100644
index 0000000..8469e8d
Binary files /dev/null and b/public/images/mboilinfotitle.webp differ
diff --git a/public/images/oil.png b/public/images/oil.png
deleted file mode 100644
index df4f6a3..0000000
Binary files a/public/images/oil.png and /dev/null differ
diff --git a/public/images/oil.webp b/public/images/oil.webp
new file mode 100644
index 0000000..3572a84
Binary files /dev/null and b/public/images/oil.webp differ
diff --git a/public/images/oilchart.png b/public/images/oilchart.png
deleted file mode 100644
index 36fca21..0000000
Binary files a/public/images/oilchart.png and /dev/null differ
diff --git a/public/images/oilchart.webp b/public/images/oilchart.webp
new file mode 100644
index 0000000..e2d67f4
Binary files /dev/null and b/public/images/oilchart.webp differ
diff --git a/public/images/oilinfobg.png b/public/images/oilinfobg.png
deleted file mode 100644
index 70ad0e0..0000000
Binary files a/public/images/oilinfobg.png and /dev/null differ
diff --git a/public/images/oilinfobg.webp b/public/images/oilinfobg.webp
new file mode 100644
index 0000000..e49de51
Binary files /dev/null and b/public/images/oilinfobg.webp differ
diff --git a/public/images/oilinfofooterbg.png b/public/images/oilinfofooterbg.png
deleted file mode 100644
index 6a60a88..0000000
Binary files a/public/images/oilinfofooterbg.png and /dev/null differ
diff --git a/public/images/oilinfofooterbg.webp b/public/images/oilinfofooterbg.webp
new file mode 100644
index 0000000..4e3d81f
Binary files /dev/null and b/public/images/oilinfofooterbg.webp differ
diff --git a/public/images/oilinfoheadertitle.png b/public/images/oilinfoheadertitle.png
deleted file mode 100644
index 9f329dd..0000000
Binary files a/public/images/oilinfoheadertitle.png and /dev/null differ
diff --git a/public/images/oilinfoheadertitle.webp b/public/images/oilinfoheadertitle.webp
new file mode 100644
index 0000000..45d657c
Binary files /dev/null and b/public/images/oilinfoheadertitle.webp differ
diff --git a/public/images/oilinfooil.png b/public/images/oilinfooil.png
deleted file mode 100644
index b419b89..0000000
Binary files a/public/images/oilinfooil.png and /dev/null differ
diff --git a/public/images/oilinfooil.webp b/public/images/oilinfooil.webp
new file mode 100644
index 0000000..d7547d8
Binary files /dev/null and b/public/images/oilinfooil.webp differ
diff --git a/public/images/oilinfotitle.png b/public/images/oilinfotitle.png
deleted file mode 100644
index d281997..0000000
Binary files a/public/images/oilinfotitle.png and /dev/null differ
diff --git a/public/images/oilinfotitle.webp b/public/images/oilinfotitle.webp
new file mode 100644
index 0000000..6eef7f8
Binary files /dev/null and b/public/images/oilinfotitle.webp differ
diff --git a/public/images/oilmobile.png b/public/images/oilmobile.png
deleted file mode 100644
index fc17515..0000000
Binary files a/public/images/oilmobile.png and /dev/null differ
diff --git a/public/images/oilmobile.webp b/public/images/oilmobile.webp
new file mode 100644
index 0000000..a2bfb88
Binary files /dev/null and b/public/images/oilmobile.webp differ
diff --git a/public/images/oldman.webp b/public/images/oldman.webp
new file mode 100644
index 0000000..ac37d1f
Binary files /dev/null and b/public/images/oldman.webp differ
diff --git a/public/images/pcoilinfogroup.png b/public/images/pcoilinfogroup.png
deleted file mode 100644
index 1bb271c..0000000
Binary files a/public/images/pcoilinfogroup.png and /dev/null differ
diff --git a/public/images/pcoilinfogroup.webp b/public/images/pcoilinfogroup.webp
new file mode 100644
index 0000000..55b279c
Binary files /dev/null and b/public/images/pcoilinfogroup.webp differ
diff --git a/public/images/people2.png b/public/images/people2.png
deleted file mode 100644
index 94de24a..0000000
Binary files a/public/images/people2.png and /dev/null differ
diff --git a/public/images/people2.webp b/public/images/people2.webp
new file mode 100644
index 0000000..ac78e36
Binary files /dev/null and b/public/images/people2.webp differ
diff --git a/public/images/pp.png b/public/images/pp.png
deleted file mode 100644
index fb2ab2c..0000000
Binary files a/public/images/pp.png and /dev/null differ
diff --git a/public/images/pp.webp b/public/images/pp.webp
new file mode 100644
index 0000000..9c8f4cc
Binary files /dev/null and b/public/images/pp.webp differ
diff --git a/public/images/qtext.png b/public/images/qtext.png
deleted file mode 100644
index 7b27894..0000000
Binary files a/public/images/qtext.png and /dev/null differ
diff --git a/public/images/text1.png b/public/images/text1.png
deleted file mode 100644
index 4373829..0000000
Binary files a/public/images/text1.png and /dev/null differ
diff --git a/public/images/text1.webp b/public/images/text1.webp
new file mode 100644
index 0000000..c1da2e8
Binary files /dev/null and b/public/images/text1.webp differ
diff --git a/public/images/title1.png b/public/images/title1.png
deleted file mode 100644
index 35231c5..0000000
Binary files a/public/images/title1.png and /dev/null differ
diff --git a/public/images/we.png b/public/images/we.png
deleted file mode 100644
index 044baff..0000000
Binary files a/public/images/we.png and /dev/null differ
diff --git a/public/images/we.webp b/public/images/we.webp
new file mode 100644
index 0000000..b70d824
Binary files /dev/null and b/public/images/we.webp differ
diff --git a/public/images/woodtable.png b/public/images/woodtable.png
deleted file mode 100644
index a454b5b..0000000
Binary files a/public/images/woodtable.png and /dev/null differ
diff --git a/public/images/woodtable.webp b/public/images/woodtable.webp
new file mode 100644
index 0000000..0cd7273
Binary files /dev/null and b/public/images/woodtable.webp differ
diff --git a/src/components/bestoil.tsx b/src/components/bestoil.tsx
index 25bf719..441efdf 100644
--- a/src/components/bestoil.tsx
+++ b/src/components/bestoil.tsx
@@ -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 }}
>
-
@@ -88,7 +88,7 @@ function Bestoil() {
transition={{ duration: 0.8 }}
justifyItems={"center"}
>
-
diff --git a/src/components/compare.tsx b/src/components/compare.tsx
index 42fc791..2c85214 100644
--- a/src/components/compare.tsx
+++ b/src/components/compare.tsx
@@ -47,7 +47,7 @@ function Compare() {
>
{/* Content here */}
-
+
{"【積極求變 健康向前】"}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 551871a..5a14435 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -5,7 +5,7 @@ function Header() {
return (
-
+
{"【積極求變 健康向前】"}
diff --git a/src/components/hero1.tsx b/src/components/hero1.tsx
index 5cccd6f..a1f0de5 100644
--- a/src/components/hero1.tsx
+++ b/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",
- 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
>
-
diff --git a/src/components/oil_info.tsx b/src/components/oil_info.tsx
index ecaef9e..8128020 100644
--- a/src/components/oil_info.tsx
+++ b/src/components/oil_info.tsx
@@ -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() {
-
-