diff --git a/package-lock.json b/package-lock.json index c75eb3d..1c8472f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,9 @@ "@emailjs/browser": "^4.4.1", "@heroicons/react": "^2.2.0", "aos": "^2.3.4", + "clsx": "^2.1.1", "flowbite": "^4.0.1", "flowbite-react": "^0.12.16", - "clsx": "^2.1.1", "framer-motion": "^12.23.26", "i18next": "^25.7.3", "i18next-browser-languagedetector": "^8.2.0", @@ -22,7 +22,7 @@ "react-dom": "^19.2.0", "react-i18next": "^16.5.0", "react-icons": "^5.5.0", - "react-router-dom": "^7.11.0", + "react-router-dom": "^7.12.0", "react-scroll": "^1.9.3", "styled-components": "^6.1.19", "tailwind-merge": "^3.4.0", @@ -88,7 +88,6 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -358,9 +357,6 @@ "node": ">=14.0.0" } }, - - - "node_modules/@emotion/is-prop-valid": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", @@ -475,7 +471,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -493,7 +488,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -511,7 +505,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -529,7 +522,6 @@ "arm" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -547,7 +539,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -565,7 +556,6 @@ "ia32" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -583,7 +573,6 @@ "loong64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -601,7 +590,6 @@ "mips64el" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -619,7 +607,6 @@ "ppc64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -637,7 +624,6 @@ "riscv64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -655,7 +641,6 @@ "s390x" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -673,7 +658,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -691,7 +675,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -709,7 +692,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -727,7 +709,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -745,7 +726,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -763,7 +743,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -781,7 +760,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -799,7 +777,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -817,7 +794,6 @@ "ia32" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -835,7 +811,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1064,15 +1039,6 @@ "react": ">= 16 || ^19.0.0-rc" } }, - "node_modules/@heroicons/react": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz", - "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==", - "license": "MIT", - "peerDependencies": { - "react": ">= 16 || ^19.0.0-rc" - } - }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -1135,7 +1101,6 @@ "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", @@ -1146,7 +1111,6 @@ "version": "2.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", @@ -1157,7 +1121,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -1167,14 +1130,12 @@ "version": "1.5.5", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", - "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.31", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -1287,7 +1248,6 @@ "arm" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1302,7 +1262,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1317,7 +1276,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1332,7 +1290,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1347,7 +1304,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1362,7 +1318,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1377,7 +1332,6 @@ "arm" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1392,7 +1346,6 @@ "arm" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1407,7 +1360,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1422,7 +1374,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1437,7 +1388,6 @@ "loong64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1452,7 +1402,6 @@ "ppc64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1467,7 +1416,6 @@ "riscv64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1482,7 +1430,6 @@ "riscv64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1497,7 +1444,6 @@ "s390x" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1512,7 +1458,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1527,7 +1472,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1542,7 +1486,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1557,7 +1500,6 @@ "arm64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1572,7 +1514,6 @@ "ia32" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1587,7 +1528,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1602,7 +1542,6 @@ "x64" ], "dev": true, - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1926,7 +1865,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", - "dev": true, "license": "MIT" }, "node_modules/@types/json-schema": { @@ -1942,7 +1880,6 @@ "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -2100,12 +2037,6 @@ "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@types/stylis": { - "version": "4.2.5", - "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", - "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", - "license": "MIT" - }, "node_modules/@vitejs/plugin-react": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.2.tgz", @@ -2133,7 +2064,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2365,7 +2295,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -2408,15 +2337,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/camelize": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", - "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", - "license": "MIT", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/caniuse-lite": { "version": "1.0.30001761", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001761.tgz", @@ -2623,26 +2543,6 @@ "postcss-value-parser": "^4.0.2" } }, - "node_modules/css-color-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", - "license": "ISC", - "engines": { - "node": ">=4" - } - }, - "node_modules/css-to-react-native": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", - "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", - "license": "MIT", - "dependencies": { - "camelize": "^1.0.0", - "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^4.0.2" - } - }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -2720,10 +2620,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", - "dev": true, "license": "Apache-2.0", - "optional": true, - "peer": true, "engines": { "node": ">=8" } @@ -2747,12 +2644,24 @@ "dev": true, "license": "ISC" }, + "node_modules/enhanced-resolve": { + "version": "5.18.4", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz", + "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==", + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.4", + "tapable": "^2.2.0" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/esbuild": { "version": "0.27.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz", "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==", "dev": true, - "dev": true, "hasInstallScript": true, "license": "MIT", "bin": { @@ -2819,7 +2728,6 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3078,7 +2986,6 @@ "version": "6.5.0", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", - "dev": true, "license": "MIT", "engines": { "node": ">=12.0.0" @@ -3287,7 +3194,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -3342,6 +3248,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "license": "ISC" + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -3409,7 +3321,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.28.4" }, @@ -3542,10 +3453,7 @@ "version": "2.6.1", "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz", "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==", - "dev": true, "license": "MIT", - "optional": true, - "peer": true, "bin": { "jiti": "lib/jiti-cli.mjs" } @@ -3653,10 +3561,7 @@ "version": "1.30.2", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz", "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==", - "dev": true, "license": "MPL-2.0", - "optional": true, - "peer": true, "dependencies": { "detect-libc": "^2.0.3" }, @@ -3688,13 +3593,11 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "android" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3710,13 +3613,11 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "darwin" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3732,13 +3633,11 @@ "cpu": [ "x64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "darwin" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3754,13 +3653,11 @@ "cpu": [ "x64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "freebsd" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3776,13 +3673,11 @@ "cpu": [ "arm" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "linux" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3798,13 +3693,11 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "linux" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3820,13 +3713,11 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "linux" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3842,13 +3733,11 @@ "cpu": [ "x64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "linux" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3864,13 +3753,11 @@ "cpu": [ "x64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "linux" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3886,13 +3773,11 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "win32" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -3908,13 +3793,11 @@ "cpu": [ "x64" ], - "dev": true, "license": "MPL-2.0", "optional": true, "os": [ "win32" ], - "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -4004,6 +3887,15 @@ "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/magic-string": { + "version": "0.30.21", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", + "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -4256,7 +4148,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", - "dev": true, "license": "MIT", "engines": { "node": ">=12" @@ -4287,7 +4178,6 @@ "version": "8.5.6", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", - "dev": true, "funding": [ { "type": "opencollective", @@ -4303,7 +4193,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -4502,7 +4391,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4512,7 +4400,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -4573,9 +4460,9 @@ } }, "node_modules/react-router": { - "version": "7.11.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz", - "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==", + "version": "7.12.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz", + "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==", "license": "MIT", "dependencies": { "cookie": "^1.0.1", @@ -4595,12 +4482,12 @@ } }, "node_modules/react-router-dom": { - "version": "7.11.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz", - "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==", + "version": "7.12.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz", + "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==", "license": "MIT", "dependencies": { - "react-router": "7.11.0" + "react-router": "7.12.0" }, "engines": { "node": ">=20.0.0" @@ -4718,9 +4605,7 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz", "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==", "devOptional": true, - "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -4808,12 +4693,6 @@ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", "license": "MIT" }, - "node_modules/shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", - "license": "MIT" - }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -4942,80 +4821,6 @@ "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", "license": "MIT" }, - "node_modules/styled-components": { - "version": "6.1.19", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz", - "integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==", - "license": "MIT", - "dependencies": { - "@emotion/is-prop-valid": "1.2.2", - "@emotion/unitless": "0.8.1", - "@types/stylis": "4.2.5", - "css-to-react-native": "3.2.0", - "csstype": "3.1.3", - "postcss": "8.4.49", - "shallowequal": "1.1.0", - "stylis": "4.3.2", - "tslib": "2.6.2" - }, - "engines": { - "node": ">= 16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/styled-components" - }, - "peerDependencies": { - "react": ">= 16.8.0", - "react-dom": ">= 16.8.0" - } - }, - "node_modules/styled-components/node_modules/csstype": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "license": "MIT" - }, - "node_modules/styled-components/node_modules/postcss": { - "version": "8.4.49", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", - "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "nanoid": "^3.3.7", - "picocolors": "^1.1.1", - "source-map-js": "^1.2.1" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, - "node_modules/styled-components/node_modules/tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", - "license": "0BSD" - }, - "node_modules/stylis": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", - "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", - "license": "MIT" - }, "node_modules/sucrase": { "version": "3.35.1", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz", @@ -5069,6 +4874,16 @@ "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==", "license": "MIT" }, + "node_modules/tailwind-merge": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz", + "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwind-merge-v2": { "name": "tailwind-merge", "version": "2.6.0", @@ -5091,26 +4906,11 @@ "url": "https://github.com/sponsors/dcastil" } }, - "node_modules/tailwind-merge": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz", - "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==", - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/dcastil" - } - }, "node_modules/tailwindcss": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz", "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==", - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz", - "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==", - "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -5152,6 +4952,19 @@ "jiti": "bin/jiti.js" } }, + "node_modules/tapable": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz", + "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==", + "license": "MIT", + "engines": { + "node": ">=6" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/thenify": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", @@ -5173,23 +4986,22 @@ "node": ">=0.8" } }, - "node_modules/tiny-invariant": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", - "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", - "license": "MIT" - }, "node_modules/three": { "version": "0.182.0", "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz", "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==", "license": "MIT" }, + "node_modules/tiny-invariant": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", + "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", + "license": "MIT" + }, "node_modules/tinyglobby": { "version": "0.2.15", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", - "dev": true, "license": "MIT", "dependencies": { "fdir": "^6.5.0", @@ -5341,9 +5153,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz", "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==", "dev": true, - "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -5459,7 +5269,6 @@ "version": "2.8.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz", "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", - "dev": true, "license": "ISC", "bin": { "yaml": "bin.mjs" @@ -5490,7 +5299,6 @@ "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/package.json b/package.json index 5520116..7c71391 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,9 @@ "@emailjs/browser": "^4.4.1", "@heroicons/react": "^2.2.0", "aos": "^2.3.4", + "clsx": "^2.1.1", "flowbite": "^4.0.1", "flowbite-react": "^0.12.16", - "clsx": "^2.1.1", "framer-motion": "^12.23.26", "i18next": "^25.7.3", "i18next-browser-languagedetector": "^8.2.0", @@ -24,7 +24,7 @@ "react-dom": "^19.2.0", "react-i18next": "^16.5.0", "react-icons": "^5.5.0", - "react-router-dom": "^7.11.0", + "react-router-dom": "^7.12.0", "react-scroll": "^1.9.3", "styled-components": "^6.1.19", "tailwind-merge": "^3.4.0", diff --git a/src/App.jsx b/src/App.jsx index 4f363b5..13faf51 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,94 @@ -import React from "react"; +// import React from "react"; +// import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom"; +// import { AnimatePresence, LayoutGroup } from "framer-motion"; + +// import "./i18n"; +// import "./App.css"; + +// import Navbar from "./Components/Nav/Navbar"; +// import Home from "./Components/Sections/Home/Home"; +// import Services from "./Components/Sections/Services/Services"; +// import About from "./Components/Sections/About/About"; +// import Departments from "./Components/Sections/Departments/Departments"; +// import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail"; +// import Contact from "./Components/Sections/Contact/Contact"; +// import Footer from "./Components/Nav/Footer"; +// import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2"; + +// const MainPage = () => { +// return ( +//
+//
+//
+// +// +// +// +// +//
+//
+//
+// ); +// }; + +// function RouterView() { +// const location = useLocation(); + +// return ( +// +// +// +// } /> +// } /> +// } /> +// +// +// +// ); +// } + +// function Layout() { +// const location = useLocation(); + +// const excludedExactPaths = [ +// "/department-detail2", +// ]; + +// const excludedPrefixes = ["/departments/"]; + +// const isExcludedExact = excludedExactPaths.includes(location.pathname); +// const isExcludedPrefix = excludedPrefixes.some((p) => location.pathname.startsWith(p)); + +// const hideNavbar = isExcludedExact || isExcludedPrefix; + +// const navbarHeight = hideNavbar ? 0 : 56; + +// return ( +// <> +// {!hideNavbar && } + +//
+// +//
+// +// ); +// } + +// const App = () => { +// return ( +// +// +// +// ); +// }; + +// export default App; + + + + +import React, { useState, useEffect } from "react"; import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom"; import { AnimatePresence, LayoutGroup } from "framer-motion"; @@ -14,32 +104,45 @@ import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentD import Contact from "./Components/Sections/Contact/Contact"; import Footer from "./Components/Nav/Footer"; import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2"; +import ImagePreloader from "./Components/ImagePreloader"; +import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas"; -const MainPage = () => { +// المكون الرئيسي الذي يظهر في الصفحة الرئيسية +const MainPage = ({ theme }) => { return ( -
+
- +
-
); }; -function RouterView() { +// مكون الراوتر الداخلي +function RouterView({ theme, toggleTheme }) { const location = useLocation(); return ( - } /> + + +
+ +
+
+ } + /> } /> } /> @@ -48,7 +151,8 @@ function RouterView() { ); } -function Layout() { +// المكون الذي يتحكم في التخطيط +function Layout({ theme, toggleTheme }) { const location = useLocation(); const excludedExactPaths = [ @@ -66,21 +170,71 @@ function Layout() { return ( <> - {!hideNavbar && } + {!hideNavbar && }
- + + + {/* إظهار Footer فقط في الصفحة الرئيسية */} + {location.pathname === "/" &&
}
); } +// المكون الرئيسي للتطبيق const App = () => { + const [theme, setTheme] = useState("light"); + + useEffect(() => { + // تتبع الثيم لأغراض التصحيح + console.log("Current theme:", theme); + console.log("HTML has dark class:", document.documentElement.classList.contains('dark')); + + const canvas = document.querySelector('.background-canvas'); + if (canvas) { + console.log("Canvas found:", canvas); + console.log("Canvas dimensions:", canvas.width, "x", canvas.height); + } else { + console.log("Canvas NOT found!"); + } + }, [theme]); + + // تهيئة الثيم من localStorage + useEffect(() => { + const savedTheme = localStorage.getItem("theme"); + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + + if (savedTheme === "dark" || (!savedTheme && prefersDark)) { + setTheme("dark"); + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + setTheme("light"); + } + }, []); + + // دالة تبديل الثيم + const toggleTheme = () => { + const newTheme = theme === "light" ? "dark" : "light"; + setTheme(newTheme); + + if (newTheme === "dark") { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } + + localStorage.setItem("theme", newTheme); + }; + return ( - - - + + + + + ); }; -export default App; +export default App; \ No newline at end of file diff --git a/src/Components/BackgroundCanvas/BackgroundCanvas.css b/src/Components/BackgroundCanvas/BackgroundCanvas.css index b96339d..b69fc4e 100644 --- a/src/Components/BackgroundCanvas/BackgroundCanvas.css +++ b/src/Components/BackgroundCanvas/BackgroundCanvas.css @@ -63,7 +63,7 @@ main { z-index: 10 !important; min-height: 100vh !important; width: 100% !important; - padding: 20px !important; + /* padding: 20px !important; */ } nav.fixed { diff --git a/src/Components/BackgroundCanvas/BackgroundCanvas.jsx b/src/Components/BackgroundCanvas/BackgroundCanvas.jsx index 3cda436..ff671f1 100644 --- a/src/Components/BackgroundCanvas/BackgroundCanvas.jsx +++ b/src/Components/BackgroundCanvas/BackgroundCanvas.jsx @@ -64,11 +64,11 @@ const BackgroundCanvas = ({ theme = 'light' }) => { let lineColor, pointColor, backgroundColor; if (theme === 'dark') { - backgroundColor = '#000000'; + backgroundColor = '#446a85'; lineColor = '#FFFFFF'; pointColor = '#F5EEE6'; } else { - backgroundColor = '#FFFFFF'; + backgroundColor = '#d3dde3'; lineColor = '#131313'; pointColor = '#041c40'; } diff --git a/src/Components/ImagePreloader.jsx b/src/Components/ImagePreloader.jsx index 7b6e0e8..2c6aadb 100644 --- a/src/Components/ImagePreloader.jsx +++ b/src/Components/ImagePreloader.jsx @@ -1,22 +1,22 @@ -// import { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; -// // Import all images statically -// // import home1 from "../assets/home1.jpg"; -// // import home1Mobile from "../assets/home1-2.jpg"; -// // import home2 from "../assets/home2.jpg"; -// // import home2Mobile from "../assets/home2-2.jpg"; -// // import home3 from "../assets/home3.png"; -// // import home4 from "../assets/home4.png"; -// // // import home4Mobile from "../assets/home4-2.jpg"; -// // import home5 from "../assets/home5.png"; -// // import home6 from "../assets/home6.jpg"; -// // import home6Mobile from "../assets/home6-2.jpg"; -// // import home7 from "../assets/home7.jpg"; -// // import home7Mobile from "../assets/home7-2.jpg"; -// // import home8 from "../assets/home8.jpg"; -// // import home8Mobile from "../assets/home8-2.jpg"; -// // import home9 from "../assets/home9.jpg"; -// // import home10 from "../assets/home10.jpg"; +// Import all images statically +// import home1 from "../assets/home1.jpg"; +// import home1Mobile from "../assets/home1-2.jpg"; +// import home2 from "../assets/home2.jpg"; +// import home2Mobile from "../assets/home2-2.jpg"; +// import home3 from "../assets/home3.png"; +// import home4 from "../assets/home4.png"; +// // import home4Mobile from "../assets/home4-2.jpg"; +// import home5 from "../assets/home5.png"; +// import home6 from "../assets/home6.jpg"; +// import home6Mobile from "../assets/home6-2.jpg"; +// import home7 from "../assets/home7.jpg"; +// import home7Mobile from "../assets/home7-2.jpg"; +// import home8 from "../assets/home8.jpg"; +// import home8Mobile from "../assets/home8-2.jpg"; +// import home9 from "../assets/home9.jpg"; +// import home10 from "../assets/home10.jpg"; // Services images // import gasStation from "../assets/Images/gasstation.jpg"; @@ -44,293 +44,293 @@ const imagesToPreload = [ // Services images // gasStation, -// ]; +]; -// const ImagePreloader = ({ children }) => { -// const [imagesLoaded, setImagesLoaded] = useState(false); -// const [progress, setProgress] = useState(0); +const ImagePreloader = ({ children }) => { + const [imagesLoaded, setImagesLoaded] = useState(false); + const [progress, setProgress] = useState(0); -// useEffect(() => { -// let loadedCount = 0; -// const totalImages = imagesToPreload.length; + useEffect(() => { + let loadedCount = 0; + const totalImages = imagesToPreload.length; -// const preloadImages = async () => { -// try { -// const loadImage = (src) => { -// return new Promise((resolve, reject) => { -// const img = new Image(); -// img.src = src; -// img.onload = () => { -// loadedCount++; -// setProgress(Math.floor((loadedCount / totalImages) * 100)); -// resolve(); -// }; -// img.onerror = reject; -// }); -// }; + const preloadImages = async () => { + try { + const loadImage = (src) => { + return new Promise((resolve, reject) => { + const img = new Image(); + img.src = src; + img.onload = () => { + loadedCount++; + setProgress(Math.floor((loadedCount / totalImages) * 100)); + resolve(); + }; + img.onerror = reject; + }); + }; -// await Promise.all(imagesToPreload.map(loadImage)); -// setImagesLoaded(true); -// } catch (error) { -// console.error("Failed to preload images:", error); -// // Continue anyway after a timeout -// setTimeout(() => setImagesLoaded(true), 3000); -// } -// }; + await Promise.all(imagesToPreload.map(loadImage)); + setImagesLoaded(true); + } catch (error) { + console.error("Failed to preload images:", error); + // Continue anyway after a timeout + setTimeout(() => setImagesLoaded(true), 3000); + } + }; -// preloadImages(); -// }, []); + preloadImages(); + }, []); -// if (!imagesLoaded) { -// return ( -//
-// {/* Animated background effect */} -//
-//
-// {[...Array(20)].map((_, i) => ( -//
-// ))} -//
-//
+ if (!imagesLoaded) { + return ( +
+ {/* Animated background effect */} +
+
+ {[...Array(20)].map((_, i) => ( +
+ ))} +
+
-// {/* Company logo or branding could go here */} -//
-// TPS -//
+ {/* Company logo or branding could go here */} +
+ TPS +
-// {/* 3D-style Fuel Tank */} -//
-// {/* Tank body with 3D effect */} -//
-// {/* Glass effect overlay */} -//
+ {/* 3D-style Fuel Tank */} +
+ {/* Tank body with 3D effect */} +
+ {/* Glass effect overlay */} +
-// {/* Tank Cap with metallic effect */} -//
-//
-//
+ {/* Tank Cap with metallic effect */} +
+
+
-// {/* Fuel Level with dynamic wave effect */} -//
-// {/* Animated wave effect at the top of fuel */} -//
-//
-//
+ {/* Fuel Level with dynamic wave effect */} +
+ {/* Animated wave effect at the top of fuel */} +
+
+
-// {/* Bubbles with varied animations */} -// {[...Array(8)].map((_, i) => ( -//
-// ))} -//
+ {/* Bubbles with varied animations */} + {[...Array(8)].map((_, i) => ( +
+ ))} +
-// {/* Tank level markings with glow effect */} -//
-// {[...Array(4)].map((_, i) => ( -//
75 - i * 25 -// ? "0 1px 3px rgba(243,198,35,0.3)" -// : "none", -// }} -// > -//
-//
-// ))} -//
-//
+ {/* Tank level markings with glow effect */} +
+ {[...Array(4)].map((_, i) => ( +
75 - i * 25 + ? "0 1px 3px rgba(243,198,35,0.3)" + : "none", + }} + > +
+
+ ))} +
+
-// {/* Fuel Gauge with realistic dial */} -//
-// {/* Gauge markings */} -// {[...Array(9)].map((_, i) => { -// const rotation = -135 + i * 30; -// const isLarge = i % 2 === 0; -// return ( -//
-// ); -// })} + {/* Fuel Gauge with realistic dial */} +
+ {/* Gauge markings */} + {[...Array(9)].map((_, i) => { + const rotation = -135 + i * 30; + const isLarge = i % 2 === 0; + return ( +
+ ); + })} -// {/* Gauge needle with smooth animation */} -//
-//
-//
+ {/* Gauge needle with smooth animation */} +
+
+
-// {/* Center pin */} -//
+ {/* Center pin */} +
-// {/* E and F indicators */} -//
-// E -//
-//
-// F -//
-//
-//
+ {/* E and F indicators */} +
+ E +
+
+ F +
+
+
-// {/* Progress indicator with animated glow */} -//
-//

-// {progress}% -//

-//
-//
+ {/* Progress indicator with animated glow */} +
+

+ {progress}% +

+
+
-//

-// Filling your tank... -//

+

+ Filling your tank... +

-// {/* Advanced animations */} -// {/* */} -//
-// ); -// } + .animate-wave { + overflow: hidden; + } + `} */} +
+ ); + } -// return <>{children}; -// }; + return <>{children}; +}; -// export default ImagePreloader; +export default ImagePreloader; diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx index f7bc70c..2731245 100644 --- a/src/Components/Nav/Navbar.jsx +++ b/src/Components/Nav/Navbar.jsx @@ -1,7 +1,697 @@ +// import React, { useState, useEffect } from "react"; +// import styled from "styled-components"; +// import { useTranslation } from "react-i18next"; +// import { Link, animateScroll as scroll } from "react-scroll"; + +// const SunIcon = ({ className }) => ( +// +// +// +// +// +// +// +// +// +// ); +// const MoonIcon = ({ className }) => ( +// +// +// +// ); +// const GlobeIcon = ({ className }) => ( +// +// +// +// +// +// ); + +// const StyledWrapper = styled.div` +// /* Base Styles */ +// .switch { +// display: inline-block; +// /* reduced a bit */ +// width: 5.2em; +// height: 2.6em; +// position: relative; +// font-size: 16px; +// user-select: none; +// margin: 0; +// transform-origin: center; +// } + +// /* Hide default HTML checkbox */ +// .switch input { +// opacity: 0; +// width: 0; +// height: 0; +// position: absolute; +// } + +// /* Slider */ +// .slider { +// position: absolute; +// cursor: pointer; +// top: 0; +// left: 0; +// right: 0; +// bottom: 0; +// background: linear-gradient(to right, #87ceeb, #e0f6ff); +// border-radius: 50px; +// transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); +// box-shadow: +// 0 4px 8px rgba(0, 0, 0, 0.1), +// inset 0 -5px 10px rgba(0, 0, 0, 0.1); +// overflow: hidden; +// } + +// /* Inner slider for additional styling */ +// .slider-inner { +// position: absolute; +// top: 0.28em; +// left: 0.28em; +// height: 2.1em; +// width: 2.1em; +// border-radius: 50%; +// background-color: #ffd700; +// transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); +// box-shadow: +// 0 2px 4px rgba(0, 0, 0, 0.2), +// inset 0 -2px 5px rgba(0, 0, 0, 0.2); +// } + +// /* Checked state */ +// .switch input:checked + .slider { +// background: linear-gradient(to right, #1a237e, #3949ab); +// } + +// .switch input:checked + .slider .slider-inner { +// transform: translateX(2.6em); +// background-color: #ffffff; +// } + +// /* Focus state */ +// .switch input:focus + .slider { +// outline: none; +// box-shadow: 0 0 0.4em rgba(25, 118, 210, 0.5); +// } + +// /* Hover and active states */ +// .switch:hover .slider { +// background: linear-gradient(to right, #64b5f6, #e3f2fd); +// } + +// .switch input:checked:hover + .slider { +// background: linear-gradient(to right, #283593, #5c6bc0); +// } + +// /* Animation for slider inner */ +// @keyframes sunPulse { +// 0%, +// 100% { +// box-shadow: +// 0 0 0 0 rgba(255, 215, 0, 0.7), +// 0 0 0 0 rgba(255, 215, 0, 0.4); +// } +// 50% { +// box-shadow: +// 0 0 20px 10px rgba(255, 215, 0, 0.7), +// 0 0 40px 20px rgba(255, 215, 0, 0.4); +// } +// } + +// @keyframes moonPhase { +// 0%, +// 100% { +// box-shadow: +// inset -10px -5px 0 0 #ddd, +// 0 0 20px rgba(255, 255, 255, 0.5); +// } +// 50% { +// box-shadow: +// inset 0 0 0 0 #ddd, +// 0 0 20px rgba(255, 255, 255, 0.5); +// } +// } + +// .switch input:not(:checked) + .slider .slider-inner { +// animation: sunPulse 3s infinite; +// } + +// .switch input:checked + .slider .slider-inner { +// animation: moonPhase 5s infinite; +// } + +// /* Stars effect */ +// @keyframes twinkle { +// 0%, +// 100% { +// opacity: 0.2; +// } +// 50% { +// opacity: 1; +// } +// } + +// .slider::before, +// .slider::after { +// content: ""; +// position: absolute; +// width: 4px; +// height: 4px; +// background-color: #ffffff; +// border-radius: 50%; +// transition: all 0.6s ease; +// opacity: 0; +// } + +// .slider::before { +// top: 20%; +// left: 30%; +// } + +// .slider::after { +// bottom: 25%; +// right: 25%; +// } + +// .switch input:checked + .slider::before, +// .switch input:checked + .slider::after { +// opacity: 1; +// animation: twinkle 2s infinite; +// } + +// .switch input:checked + .slider::before { +// animation-delay: 0.5s; +// } + +// /* 3D effect */ +// .slider { +// transform-style: preserve-3d; +// perspective: 500px; +// } + +// .slider-inner { +// transform: translateZ(5px); +// } + +// .switch input:checked + .slider .slider-inner { +// transform: translateX(2.6em) translateZ(5px) rotateY(180deg); +// } + +// /* Cloud effect for day mode */ +// .slider-inner::before, +// .slider-inner::after { +// content: ""; +// position: absolute; +// background-color: rgba(255, 255, 255, 0.8); +// border-radius: 50%; +// transition: all 0.6s ease; +// } + +// .slider-inner::before { +// width: 1em; +// height: 1em; +// top: -0.5em; +// left: -0.2em; +// } + +// .slider-inner::after { +// width: 1.2em; +// height: 1.2em; +// bottom: -0.6em; +// right: -0.3em; +// } + +// .switch input:checked + .slider .slider-inner::before, +// .switch input:checked + .slider .slider-inner::after { +// opacity: 0; +// } + +// /* Crater effect for night mode */ +// .switch input:checked + .slider .slider-inner::before { +// width: 0.6em; +// height: 0.6em; +// background-color: rgba(0, 0, 0, 0.2); +// top: 0.3em; +// left: 0.3em; +// opacity: 1; +// } + +// .switch input:checked + .slider .slider-inner::after { +// width: 0.4em; +// height: 0.4em; +// background-color: rgba(0, 0, 0, 0.15); +// bottom: 0.5em; +// right: 0.5em; +// opacity: 1; +// } + +// /* Accessibility improvements */ +// .switch input:focus + .slider { +// outline: 2px solid #4a90e2; +// outline-offset: 2px; +// } + +// /* Responsive adjustments */ +// @media (max-width: 768px) { +// .switch { +// width: 4.6em; +// height: 2.3em; +// } + +// .slider-inner { +// height: 1.85em; +// width: 1.85em; +// top: 0.23em; +// left: 0.23em; +// } + +// .switch input:checked + .slider .slider-inner { +// transform: translateX(2.2em) translateZ(5px) rotateY(180deg); +// } +// } + +// @media (max-width: 480px) { +// .switch { +// width: 3.8em; +// height: 1.9em; +// } + +// .slider-inner { +// height: 1.5em; +// width: 1.5em; +// top: 0.2em; +// left: 0.2em; +// } + +// .switch input:checked + .slider .slider-inner { +// transform: translateX(1.8em) translateZ(5px) rotateY(180deg); +// } +// } + +// /* High contrast mode */ +// @media (forced-colors: active) { +// .slider { +// background: Canvas; +// border: 2px solid ButtonText; +// } + +// .switch input:checked + .slider { +// background: Highlight; +// } + +// .slider-inner { +// background-color: ButtonFace; +// } + +// .switch::before, +// .switch::after { +// color: ButtonText; +// } +// } + +// /* Reduced motion preference */ +// @media (prefers-reduced-motion: reduce) { +// .switch, +// .slider, +// .slider-inner { +// transition: none; +// } + +// .switch input:checked + .slider .slider-inner, +// .switch input:not(:checked) + .slider .slider-inner, +// .switch input:checked + .slider::before, +// .switch input:checked + .slider::after { +// animation: none; +// } +// } +// `; + +// const ThemeToggle = ({ theme, setTheme }) => { +// const isDark = theme === "dark"; + +// const toggle = () => { +// const next = isDark ? "light" : "dark"; +// setTheme(next); +// if (next === "dark") document.documentElement.classList.add("dark"); +// else document.documentElement.classList.remove("dark"); +// try { +// localStorage.setItem("theme", next); +// } catch (e) {} +// }; + +// return ( +// +// +// +// ); +// }; + +// const LanguageToggle = ({ i18n }) => { +// const isAr = i18n.language === "ar"; +// const toggle = () => { +// const next = isAr ? "en" : "ar"; +// i18n.changeLanguage(next); +// if (next === "ar") { +// document.documentElement.dir = "rtl"; +// document.documentElement.lang = "ar"; +// } else { +// document.documentElement.dir = "ltr"; +// document.documentElement.lang = next; +// } +// }; + +// return ( +// +// ); +// }; + +// const Navbar = () => { +// const { t, i18n } = useTranslation(); +// const [menuOpen, setMenuOpen] = useState(false); +// const [activeSection, setActiveSection] = useState("home"); +// const [theme, setTheme] = useState("light"); + +// useEffect(() => { +// try { +// const saved = localStorage.getItem("theme"); +// if (saved) setTheme(saved); +// else if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark"); +// } catch (e) { +// if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark"); +// } +// }, []); + +// useEffect(() => { +// if (theme === "dark") document.documentElement.classList.add("dark"); +// else document.documentElement.classList.remove("dark"); +// }, [theme]); + +// useEffect(() => { +// const handleScroll = () => { +// const sections = ["home", "services", "about", "contact"]; +// const scrollPosition = window.scrollY + 140; +// for (const section of sections) { +// const element = document.getElementById(section) || document.querySelector(`[name="${section}"]`); +// if (element) { +// const offsetTop = element.offsetTop; +// const offsetHeight = element.offsetHeight; +// if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) { +// setActiveSection(section); +// break; +// } +// } +// } +// }; +// handleScroll(); +// window.addEventListener("scroll", handleScroll, { passive: true }); +// return () => window.removeEventListener("scroll", handleScroll); +// }, []); + +// const navItems = [ +// { key: "home", label: t("nav.home") || "Home" }, +// { key: "services", label: t("nav.services") || "Services" }, +// { key: "about", label: t("nav.about") || "About" }, +// { key: "contact", label: t("nav.contact") || "Contact" }, +// ]; + +// return ( +// <> +// + +// +// +// ); +// }; + +// export default Navbar; + + import React, { useState, useEffect } from "react"; import styled from "styled-components"; import { useTranslation } from "react-i18next"; import { Link, animateScroll as scroll } from "react-scroll"; +import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher"; const SunIcon = ({ className }) => ( @@ -19,19 +709,11 @@ const MoonIcon = ({ className }) => ( ); -const GlobeIcon = ({ className }) => ( - - - - - -); const StyledWrapper = styled.div` /* Base Styles */ .switch { display: inline-block; - /* reduced a bit */ width: 5.2em; height: 2.6em; position: relative; @@ -329,18 +1011,8 @@ const StyledWrapper = styled.div` } `; -const ThemeToggle = ({ theme, setTheme }) => { - const isDark = theme === "dark"; - - const toggle = () => { - const next = isDark ? "light" : "dark"; - setTheme(next); - if (next === "dark") document.documentElement.classList.add("dark"); - else document.documentElement.classList.remove("dark"); - try { - localStorage.setItem("theme", next); - } catch (e) {} - }; +const ThemeToggle = ({ currentTheme, toggleTheme }) => { + const isDark = currentTheme === "dark"; return ( @@ -352,14 +1024,14 @@ const ThemeToggle = ({ theme, setTheme }) => { onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); - toggle(); + toggleTheme(); } }} >