Merge branch 'main' of http://45.93.137.91:3000/Rahaf/REXNT
This commit is contained in:
324
package-lock.json
generated
324
package-lock.json
generated
@ -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"
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
182
src/App.jsx
182
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 (
|
||||
// <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
|
||||
// <div className="flex flex-col min-h-screen">
|
||||
// <main className="flex-grow">
|
||||
// <Home />
|
||||
// <Services />
|
||||
// <About />
|
||||
// <Departments />
|
||||
// <Contact />
|
||||
// </main>
|
||||
// <Footer />
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// function RouterView() {
|
||||
// const location = useLocation();
|
||||
|
||||
// return (
|
||||
// <LayoutGroup>
|
||||
// <AnimatePresence mode="wait" initial={false}>
|
||||
// <Routes location={location} key={location.pathname}>
|
||||
// <Route path="/" element={<MainPage />} />
|
||||
// <Route path="/departments/:id" element={<DepartmentDetail />} />
|
||||
// <Route path="/department-detail2" element={<DepartmentDetail2 />} />
|
||||
// </Routes>
|
||||
// </AnimatePresence>
|
||||
// </LayoutGroup>
|
||||
// );
|
||||
// }
|
||||
|
||||
// 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 && <Navbar />}
|
||||
|
||||
// <div style={{ paddingTop: navbarHeight }}>
|
||||
// <RouterView />
|
||||
// </div>
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
|
||||
// const App = () => {
|
||||
// return (
|
||||
// <BrowserRouter>
|
||||
// <Layout />
|
||||
// </BrowserRouter>
|
||||
// );
|
||||
// };
|
||||
|
||||
// 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 (
|
||||
<div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
|
||||
<div className="min-h-screen bg-transparent">
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<main className="flex-grow">
|
||||
<Home />
|
||||
<Services />
|
||||
<About />
|
||||
<About theme={theme} />
|
||||
<Departments />
|
||||
<Contact />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function RouterView() {
|
||||
// مكون الراوتر الداخلي
|
||||
function RouterView({ theme, toggleTheme }) {
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<LayoutGroup>
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
<Routes location={location} key={location.pathname}>
|
||||
<Route path="/" element={<MainPage />} />
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<div className="relative min-h-screen bg-transparent">
|
||||
<BackgroundCanvas theme={theme} />
|
||||
<div className="relative z-10">
|
||||
<MainPage theme={theme} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Route path="/departments/:id" element={<DepartmentDetail />} />
|
||||
<Route path="/department-detail2" element={<DepartmentDetail2 />} />
|
||||
</Routes>
|
||||
@ -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 && <Navbar />}
|
||||
{!hideNavbar && <Navbar toggleTheme={toggleTheme} currentTheme={theme} />}
|
||||
|
||||
<div style={{ paddingTop: navbarHeight }}>
|
||||
<RouterView />
|
||||
<RouterView theme={theme} toggleTheme={toggleTheme} />
|
||||
|
||||
{/* إظهار Footer فقط في الصفحة الرئيسية */}
|
||||
{location.pathname === "/" && <Footer />}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// المكون الرئيسي للتطبيق
|
||||
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 (
|
||||
<BrowserRouter>
|
||||
<Layout />
|
||||
</BrowserRouter>
|
||||
<ImagePreloader>
|
||||
<BrowserRouter>
|
||||
<Layout theme={theme} toggleTheme={toggleTheme} />
|
||||
</BrowserRouter>
|
||||
</ImagePreloader>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
@ -63,7 +63,7 @@ main {
|
||||
z-index: 10 !important;
|
||||
min-height: 100vh !important;
|
||||
width: 100% !important;
|
||||
padding: 20px !important;
|
||||
/* padding: 20px !important; */
|
||||
}
|
||||
|
||||
nav.fixed {
|
||||
|
||||
@ -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';
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
// <div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50">
|
||||
// {/* Animated background effect */}
|
||||
// <div className="absolute inset-0 overflow-hidden opacity-10">
|
||||
// <div className="absolute top-0 left-0 w-full h-full">
|
||||
// {[...Array(20)].map((_, i) => (
|
||||
// <div
|
||||
// key={i}
|
||||
// className="absolute rounded-full bg-white/30"
|
||||
// style={{
|
||||
// width: `${Math.random() * 10 + 5}px`,
|
||||
// height: `${Math.random() * 10 + 5}px`,
|
||||
// top: `${Math.random() * 100}%`,
|
||||
// left: `${Math.random() * 100}%`,
|
||||
// animationDuration: `${Math.random() * 10 + 10}s`,
|
||||
// animationDelay: `${Math.random() * 5}s`,
|
||||
// }}
|
||||
// />
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
if (!imagesLoaded) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50">
|
||||
{/* Animated background effect */}
|
||||
<div className="absolute inset-0 overflow-hidden opacity-10">
|
||||
<div className="absolute top-0 left-0 w-full h-full">
|
||||
{[...Array(20)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-white/30"
|
||||
style={{
|
||||
width: `${Math.random() * 10 + 5}px`,
|
||||
height: `${Math.random() * 10 + 5}px`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
left: `${Math.random() * 100}%`,
|
||||
animationDuration: `${Math.random() * 10 + 10}s`,
|
||||
animationDelay: `${Math.random() * 5}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// {/* Company logo or branding could go here */}
|
||||
// <div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
|
||||
// TPS
|
||||
// </div>
|
||||
{/* Company logo or branding could go here */}
|
||||
<div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
|
||||
TPS
|
||||
</div>
|
||||
|
||||
// {/* 3D-style Fuel Tank */}
|
||||
// <div className="relative w-72 h-56 mb-8 perspective-800">
|
||||
// {/* Tank body with 3D effect */}
|
||||
// <div
|
||||
// className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
|
||||
// style={{
|
||||
// background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
|
||||
// boxShadow:
|
||||
// "inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)",
|
||||
// border: "1px solid rgba(255,255,255,0.1)",
|
||||
// }}
|
||||
// >
|
||||
// {/* Glass effect overlay */}
|
||||
// <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>
|
||||
{/* 3D-style Fuel Tank */}
|
||||
<div className="relative w-72 h-56 mb-8 perspective-800">
|
||||
{/* Tank body with 3D effect */}
|
||||
<div
|
||||
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
|
||||
style={{
|
||||
background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
|
||||
boxShadow:
|
||||
"inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)",
|
||||
border: "1px solid rgba(255,255,255,0.1)",
|
||||
}}
|
||||
>
|
||||
{/* Glass effect overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>
|
||||
|
||||
// {/* Tank Cap with metallic effect */}
|
||||
// <div
|
||||
// className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
|
||||
// style={{
|
||||
// background:
|
||||
// "linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
|
||||
// boxShadow: "0 -2px 5px rgba(0,0,0,0.2)",
|
||||
// }}
|
||||
// >
|
||||
// <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div>
|
||||
// </div>
|
||||
{/* Tank Cap with metallic effect */}
|
||||
<div
|
||||
className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
|
||||
boxShadow: "0 -2px 5px rgba(0,0,0,0.2)",
|
||||
}}
|
||||
>
|
||||
<div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
// {/* Fuel Level with dynamic wave effect */}
|
||||
// <div
|
||||
// className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
|
||||
// style={{
|
||||
// height: `${progress}%`,
|
||||
// background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
|
||||
// boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
|
||||
// }}
|
||||
// >
|
||||
// {/* Animated wave effect at the top of fuel */}
|
||||
// <div className="absolute -top-2 left-0 w-full h-4 animate-wave">
|
||||
// <div
|
||||
// className="relative w-[200%] h-full"
|
||||
// style={{
|
||||
// backgroundImage:
|
||||
// "linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
|
||||
// backgroundSize: "50% 100%",
|
||||
// animation: "moveWave 3s linear infinite",
|
||||
// }}
|
||||
// ></div>
|
||||
// </div>
|
||||
{/* Fuel Level with dynamic wave effect */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
|
||||
style={{
|
||||
height: `${progress}%`,
|
||||
background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
|
||||
boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
|
||||
}}
|
||||
>
|
||||
{/* Animated wave effect at the top of fuel */}
|
||||
<div className="absolute -top-2 left-0 w-full h-4 animate-wave">
|
||||
<div
|
||||
className="relative w-[200%] h-full"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
|
||||
backgroundSize: "50% 100%",
|
||||
animation: "moveWave 3s linear infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
// {/* Bubbles with varied animations */}
|
||||
// {[...Array(8)].map((_, i) => (
|
||||
// <div
|
||||
// key={i}
|
||||
// className="absolute rounded-full bg-white/20"
|
||||
// style={{
|
||||
// width: `${Math.random() * 6 + 2}px`,
|
||||
// height: `${Math.random() * 6 + 2}px`,
|
||||
// bottom: `${Math.random() * 80}%`,
|
||||
// left: `${Math.random() * 90 + 5}%`,
|
||||
// animation: `bubble ${
|
||||
// Math.random() * 3 + 2
|
||||
// }s ease-in infinite ${Math.random() * 2}s`,
|
||||
// }}
|
||||
// />
|
||||
// ))}
|
||||
// </div>
|
||||
{/* Bubbles with varied animations */}
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-white/20"
|
||||
style={{
|
||||
width: `${Math.random() * 6 + 2}px`,
|
||||
height: `${Math.random() * 6 + 2}px`,
|
||||
bottom: `${Math.random() * 80}%`,
|
||||
left: `${Math.random() * 90 + 5}%`,
|
||||
animation: `bubble ${
|
||||
Math.random() * 3 + 2
|
||||
}s ease-in infinite ${Math.random() * 2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
// {/* Tank level markings with glow effect */}
|
||||
// <div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none">
|
||||
// {[...Array(4)].map((_, i) => (
|
||||
// <div
|
||||
// key={i}
|
||||
// className="w-full border-b border-[#F3C623]/20 h-1/4"
|
||||
// style={{
|
||||
// boxShadow:
|
||||
// progress > 75 - i * 25
|
||||
// ? "0 1px 3px rgba(243,198,35,0.3)"
|
||||
// : "none",
|
||||
// }}
|
||||
// >
|
||||
// <div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
{/* Tank level markings with glow effect */}
|
||||
<div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-full border-b border-[#F3C623]/20 h-1/4"
|
||||
style={{
|
||||
boxShadow:
|
||||
progress > 75 - i * 25
|
||||
? "0 1px 3px rgba(243,198,35,0.3)"
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// {/* Fuel Gauge with realistic dial */}
|
||||
// <div
|
||||
// className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
|
||||
// style={{
|
||||
// background:
|
||||
// "radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
|
||||
// boxShadow:
|
||||
// "inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)",
|
||||
// border: "2px solid rgba(235,131,23,0.7)",
|
||||
// }}
|
||||
// >
|
||||
// {/* Gauge markings */}
|
||||
// {[...Array(9)].map((_, i) => {
|
||||
// const rotation = -135 + i * 30;
|
||||
// const isLarge = i % 2 === 0;
|
||||
// return (
|
||||
// <div
|
||||
// key={i}
|
||||
// className={`absolute w-${isLarge ? "1.5" : "1"} h-${
|
||||
// isLarge ? "3" : "2"
|
||||
// } bg-[#F3C623]/${isLarge ? "70" : "40"}`}
|
||||
// style={{
|
||||
// transform: `rotate(${rotation}deg) translateY(-7px)`,
|
||||
// transformOrigin: "bottom center",
|
||||
// }}
|
||||
// />
|
||||
// );
|
||||
// })}
|
||||
{/* Fuel Gauge with realistic dial */}
|
||||
<div
|
||||
className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
|
||||
boxShadow:
|
||||
"inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)",
|
||||
border: "2px solid rgba(235,131,23,0.7)",
|
||||
}}
|
||||
>
|
||||
{/* Gauge markings */}
|
||||
{[...Array(9)].map((_, i) => {
|
||||
const rotation = -135 + i * 30;
|
||||
const isLarge = i % 2 === 0;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`absolute w-${isLarge ? "1.5" : "1"} h-${
|
||||
isLarge ? "3" : "2"
|
||||
} bg-[#F3C623]/${isLarge ? "70" : "40"}`}
|
||||
style={{
|
||||
transform: `rotate(${rotation}deg) translateY(-7px)`,
|
||||
transformOrigin: "bottom center",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
// {/* Gauge needle with smooth animation */}
|
||||
// <div
|
||||
// className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
|
||||
// style={{
|
||||
// transform: `rotate(${-135 + progress * 2.7}deg)`,
|
||||
// transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
|
||||
// boxShadow: "0 0 5px rgba(243,198,35,0.5)",
|
||||
// }}
|
||||
// >
|
||||
// <div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div>
|
||||
// </div>
|
||||
{/* Gauge needle with smooth animation */}
|
||||
<div
|
||||
className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
|
||||
style={{
|
||||
transform: `rotate(${-135 + progress * 2.7}deg)`,
|
||||
transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
|
||||
boxShadow: "0 0 5px rgba(243,198,35,0.5)",
|
||||
}}
|
||||
>
|
||||
<div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div>
|
||||
</div>
|
||||
|
||||
// {/* Center pin */}
|
||||
// <div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>
|
||||
{/* Center pin */}
|
||||
<div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>
|
||||
|
||||
// {/* E and F indicators */}
|
||||
// <div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
|
||||
// E
|
||||
// </div>
|
||||
// <div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
|
||||
// F
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
{/* E and F indicators */}
|
||||
<div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
|
||||
E
|
||||
</div>
|
||||
<div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
|
||||
F
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// {/* Progress indicator with animated glow */}
|
||||
// <div className="relative">
|
||||
// <p
|
||||
// className="text-white text-2xl font-bold"
|
||||
// style={{
|
||||
// textShadow: "0 0 10px rgba(255,255,255,0.3)",
|
||||
// }}
|
||||
// >
|
||||
// {progress}%
|
||||
// </p>
|
||||
// <div
|
||||
// className="absolute -inset-4 rounded-full opacity-0"
|
||||
// style={{
|
||||
// background:
|
||||
// "radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
|
||||
// animation: "pulse 2s ease-in-out infinite",
|
||||
// }}
|
||||
// ></div>
|
||||
// </div>
|
||||
{/* Progress indicator with animated glow */}
|
||||
<div className="relative">
|
||||
<p
|
||||
className="text-white text-2xl font-bold"
|
||||
style={{
|
||||
textShadow: "0 0 10px rgba(255,255,255,0.3)",
|
||||
}}
|
||||
>
|
||||
{progress}%
|
||||
</p>
|
||||
<div
|
||||
className="absolute -inset-4 rounded-full opacity-0"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
|
||||
animation: "pulse 2s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
// <p className="mt-2 text-gray-300 font-medium tracking-wide">
|
||||
// Filling your tank...
|
||||
// </p>
|
||||
<p className="mt-2 text-gray-300 font-medium tracking-wide">
|
||||
Filling your tank...
|
||||
</p>
|
||||
|
||||
// {/* Advanced animations */}
|
||||
// {/* <style jsx>{`
|
||||
// @keyframes bubble {
|
||||
// 0% {
|
||||
// transform: translateY(0) scale(0.8);
|
||||
// opacity: 0;
|
||||
// }
|
||||
// 20% {
|
||||
// opacity: 0.8;
|
||||
// transform: translateY(-10px) scale(1);
|
||||
// }
|
||||
// 80% {
|
||||
// opacity: 0.8;
|
||||
// transform: translateY(-30px) scale(0.9);
|
||||
// }
|
||||
// 100% {
|
||||
// transform: translateY(-40px) scale(0.3);
|
||||
// opacity: 0;
|
||||
// }
|
||||
// }
|
||||
{/* Advanced animations */}
|
||||
{/* <style jsx>{`
|
||||
@keyframes bubble {
|
||||
0% {
|
||||
transform: translateY(0) scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-10px) scale(1);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-30px) scale(0.9);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-40px) scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// @keyframes pulse {
|
||||
// 0% {
|
||||
// opacity: 0;
|
||||
// transform: scale(0.8);
|
||||
// }
|
||||
// 50% {
|
||||
// opacity: 0.5;
|
||||
// transform: scale(1.1);
|
||||
// }
|
||||
// 100% {
|
||||
// opacity: 0;
|
||||
// transform: scale(0.8);
|
||||
// }
|
||||
// }
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
// @keyframes moveWave {
|
||||
// 0% {
|
||||
// transform: translateX(0);
|
||||
// }
|
||||
// 100% {
|
||||
// transform: translateX(-50%);
|
||||
// }
|
||||
// }
|
||||
@keyframes moveWave {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// .perspective-800 {
|
||||
// perspective: 800px;
|
||||
// }
|
||||
.perspective-800 {
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
// .animate-wave {
|
||||
// overflow: hidden;
|
||||
// }
|
||||
// `}</style> */}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
.animate-wave {
|
||||
overflow: hidden;
|
||||
}
|
||||
`}</style> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// return <>{children}</>;
|
||||
// };
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
// export default ImagePreloader;
|
||||
export default ImagePreloader;
|
||||
|
||||
@ -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 }) => (
|
||||
// <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
||||
// <path d="M12 4v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
// <path d="M12 18v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
// <path d="M4.22 4.22l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
// <path d="M18.36 18.36l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
// <path d="M1 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
// <path d="M21 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
// <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6" />
|
||||
// </svg>
|
||||
// );
|
||||
// const MoonIcon = ({ className }) => (
|
||||
// <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
||||
// <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
// </svg>
|
||||
// );
|
||||
// const GlobeIcon = ({ className }) => (
|
||||
// <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
||||
// <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
// <path d="M2.05 12h19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
// <path d="M12 2.05v19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
// </svg>
|
||||
// );
|
||||
|
||||
// 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 (
|
||||
// <StyledWrapper>
|
||||
// <label
|
||||
// role="switch"
|
||||
// aria-checked={isDark}
|
||||
// tabIndex={0}
|
||||
// className="switch"
|
||||
// onKeyDown={(e) => {
|
||||
// if (e.key === "Enter" || e.key === " ") {
|
||||
// e.preventDefault();
|
||||
// toggle();
|
||||
// }
|
||||
// }}
|
||||
// >
|
||||
// <input
|
||||
// type="checkbox"
|
||||
// checked={isDark}
|
||||
// onChange={toggle}
|
||||
// aria-hidden="false"
|
||||
// />
|
||||
// <span className="slider" aria-hidden="true">
|
||||
// <span className="slider-inner" />
|
||||
// </span>
|
||||
// </label>
|
||||
// </StyledWrapper>
|
||||
// );
|
||||
// };
|
||||
|
||||
// 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 (
|
||||
// <button
|
||||
// onClick={toggle}
|
||||
// className="flex items-center gap-2 px-3 py-1 rounded-md font-semibold text-sm border border-transparent hover:border-amber-500/30 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/40 hover:shadow-md active:scale-95"
|
||||
// aria-label="Toggle language"
|
||||
// title={isAr ? "Switch to English" : "التبديل للعربية"}
|
||||
// >
|
||||
// <GlobeIcon className="w-4 h-4" />
|
||||
// <span className="hidden sm:inline">{isAr ? "عربي" : "EN"}</span>
|
||||
// <span className="text-amber-400/95 text-xs sm:text-sm">{isAr ? "AR" : "EN"}</span>
|
||||
// </button>
|
||||
// );
|
||||
// };
|
||||
|
||||
// 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 (
|
||||
// <>
|
||||
// <style>{`
|
||||
// /* background and glass */
|
||||
// .glass-nav {
|
||||
// background: linear-gradient(180deg, rgba(75,85,99,0.96), rgba(55,65,81,0.9));
|
||||
// color: #e6e6e6;
|
||||
// border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
// backdrop-filter: blur(8px);
|
||||
// -webkit-backdrop-filter: blur(8px);
|
||||
// }
|
||||
|
||||
// /* nav links */
|
||||
// .nav-link {
|
||||
// position: relative;
|
||||
// padding-bottom: 6px;
|
||||
// transition: transform .22s cubic-bezier(.2,.9,.2,1), color .18s ease, text-shadow .18s ease, box-shadow .18s ease;
|
||||
// color: rgba(229,231,235,0.95);
|
||||
// display: inline-block;
|
||||
// }
|
||||
// .nav-link::after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%) scaleX(0);
|
||||
// bottom: -8px;
|
||||
// height: 3px;
|
||||
// width: 64%;
|
||||
// border-radius: 999px;
|
||||
// transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s;
|
||||
// opacity: 0;
|
||||
// }
|
||||
// .nav-link:hover {
|
||||
// transform: translateY(-6px) scale(1.03);
|
||||
// color: #fff;
|
||||
// text-shadow: 0 10px 30px rgba(2,6,23,0.5);
|
||||
// box-shadow: 0 8px 24px rgba(2,6,23,0.25);
|
||||
// }
|
||||
// .nav-link:hover::after {
|
||||
// background: linear-gradient(90deg, #9CA3AF, #F59E0B);
|
||||
// transform: translateX(-50%) scaleX(1);
|
||||
// opacity: 1;
|
||||
// }
|
||||
// .nav-link.active {
|
||||
// color: #fff;
|
||||
// font-weight: 700;
|
||||
// }
|
||||
// .nav-link.active::after {
|
||||
// background: linear-gradient(90deg, #9CA3AF, #F59E0B);
|
||||
// transform: translateX(-50%) scaleX(1);
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
// /* NEW: pill / circular orange background for the active/pressed link */
|
||||
// .nav-pill {
|
||||
// display: inline-flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// padding: 0.32rem 0.6rem; /* vertical horizontal */
|
||||
// border-radius: 999px;
|
||||
// transition: transform .15s ease, background .18s ease, box-shadow .18s ease, color .12s ease;
|
||||
// background: transparent;
|
||||
// color: inherit;
|
||||
// line-height: 1;
|
||||
// font-weight: 600;
|
||||
// }
|
||||
|
||||
// /* active (current) */
|
||||
// .nav-link.active .nav-pill,
|
||||
// .nav-link:active .nav-pill,
|
||||
// .nav-link:focus-visible .nav-pill {
|
||||
// background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18); /* warm orange */
|
||||
// color: #0b0b0b; /* dark text for contrast on orange */
|
||||
// box-shadow: 0 6px 18px rgba(255, 122, 24, 0.18), 0 2px 6px rgba(0,0,0,0.12);
|
||||
// transform: translateY(-4px) scale(1.03);
|
||||
// }
|
||||
|
||||
// /* Make press feedback snappier */
|
||||
// .nav-link:active .nav-pill {
|
||||
// transform: translateY(-2px) scale(0.995);
|
||||
// }
|
||||
|
||||
// /* mobile drawer */
|
||||
// .mobile-drawer {
|
||||
// background: linear-gradient(180deg, rgba(17,24,39,0.98), rgba(15,23,42,0.95));
|
||||
// backdrop-filter: blur(6px);
|
||||
// }
|
||||
|
||||
// /* ensure mobile pill doesn't stretch full width — make it inline inside block */
|
||||
// .mobile-drawer .nav-pill {
|
||||
// display: inline-flex;
|
||||
// padding: 0.4rem 0.8rem;
|
||||
// }
|
||||
|
||||
// /* adjust mobile active color */
|
||||
// .mobile-drawer .nav-pill.active,
|
||||
// .mobile-drawer a[aria-current="page"] .nav-pill {
|
||||
// background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18);
|
||||
// color: #0b0b0b;
|
||||
// }
|
||||
|
||||
// /* Enhanced button hover (more professional) */
|
||||
// .glass-nav button, .mobile-drawer button {
|
||||
// transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
|
||||
// will-change: transform, box-shadow;
|
||||
// }
|
||||
|
||||
// .glass-nav button:hover, .mobile-drawer button:hover {
|
||||
// transform: translateY(-3px);
|
||||
// box-shadow: 0 10px 24px rgba(2,6,23,0.25), 0 2px 6px rgba(0,0,0,0.12);
|
||||
// }
|
||||
|
||||
// .glass-nav button:active, .mobile-drawer button:active {
|
||||
// transform: translateY(-1px) scale(0.995);
|
||||
// box-shadow: 0 6px 18px rgba(2,6,23,0.2);
|
||||
// }
|
||||
|
||||
// .glass-nav button:focus {
|
||||
// outline: none;
|
||||
// box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
|
||||
// }
|
||||
|
||||
// `}</style>
|
||||
|
||||
// <nav
|
||||
// className="fixed top-0 left-0 right-0 z-50 w-full glass-nav px-4 md:px-8 lg:px-16 py-3"
|
||||
// aria-label="Main navigation"
|
||||
// role="navigation"
|
||||
// >
|
||||
// <div className="mx-auto max-w-screen-xl">
|
||||
// <div className="flex items-center justify-between h-14 px-2 md:px-4">
|
||||
// <div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse">
|
||||
// <ul className="flex items-center gap-6">
|
||||
// {navItems.map((item) => {
|
||||
// const isActive = activeSection === item.key;
|
||||
// return (
|
||||
// <li key={item.key}>
|
||||
// <Link
|
||||
// to={item.key}
|
||||
// smooth
|
||||
// duration={600}
|
||||
// spy={true}
|
||||
// offset={-110}
|
||||
// onSetActive={() => setActiveSection(item.key)}
|
||||
// onClick={() => {
|
||||
// if (item.key === "home") scroll.scrollToTop({ duration: 600 });
|
||||
// if (menuOpen) setMenuOpen(false);
|
||||
// }}
|
||||
// className={`nav-link cursor-pointer text-sm md:text-lg ${isActive ? "active" : "text-slate-200 dark:text-slate-200/90"}`}
|
||||
// aria-current={isActive ? "page" : undefined}
|
||||
// >
|
||||
// <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
|
||||
// </Link>
|
||||
// </li>
|
||||
// );
|
||||
// })}
|
||||
// </ul>
|
||||
// </div>
|
||||
|
||||
// {/* controls */}
|
||||
// <div className="flex items-center gap-3 md:gap-5">
|
||||
// <div className="hidden md:flex items-center gap-3">
|
||||
// <LanguageToggle i18n={i18n} />
|
||||
// <ThemeToggle theme={theme} setTheme={setTheme} />
|
||||
// </div>
|
||||
|
||||
// <div className="md:hidden flex items-center gap-2">
|
||||
// <ThemeToggle theme={theme} setTheme={setTheme} />
|
||||
// <button
|
||||
// onClick={() => setMenuOpen((s) => !s)}
|
||||
// aria-controls="mobile-menu"
|
||||
// aria-expanded={menuOpen}
|
||||
// className="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/50 transition-transform hover:scale-105"
|
||||
// >
|
||||
// <span className="sr-only">Open main menu</span>
|
||||
// <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
||||
// {menuOpen ? <path d="M6 18L18 6M6 6l12 12" /> : <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>}
|
||||
// </svg>
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* mobile drawer */}
|
||||
// <div
|
||||
// id="mobile-menu"
|
||||
// className={`md:hidden overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out ${menuOpen ? "max-h-[420px] opacity-100" : "max-h-0 opacity-0"}`}
|
||||
// >
|
||||
// <div className="mobile-drawer px-4 pb-6 pt-3 rounded-b-2xl">
|
||||
// <div className="flex items-center justify-between mb-3">
|
||||
// <div className="flex items-center gap-3"></div>
|
||||
// <div className="flex items-center gap-2">
|
||||
// <LanguageToggle i18n={i18n} />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <ul className="flex flex-col gap-2">
|
||||
// {navItems.map((item) => {
|
||||
// const isActive = activeSection === item.key;
|
||||
// return (
|
||||
// <li key={item.key}>
|
||||
// <Link
|
||||
// to={item.key}
|
||||
// smooth
|
||||
// duration={600}
|
||||
// spy={true}
|
||||
// offset={-110}
|
||||
// onSetActive={() => setActiveSection(item.key)}
|
||||
// onClick={() => {
|
||||
// if (item.key === "home") scroll.scrollToTop({ duration: 600 });
|
||||
// setMenuOpen(false);
|
||||
// }}
|
||||
// className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`}
|
||||
// aria-current={isActive ? "page" : undefined}
|
||||
// >
|
||||
// {/* add inline pill for mobile too — stays inline so it looks like a circle around the label */}
|
||||
// <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
|
||||
// </Link>
|
||||
// </li>
|
||||
// );
|
||||
// })}
|
||||
// </ul>
|
||||
|
||||
// <div className="mt-4 flex items-center gap-3">
|
||||
// <ThemeToggle theme={theme} setTheme={setTheme} />
|
||||
// <button className="flex-1 px-4 py-2 rounded-md bg-amber-500/95 text-black font-semibold shadow-inner hover:shadow-lg transition-shadow active:scale-95">
|
||||
// {t("nav.getQuote") || "Get Quote"}
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </nav>
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
|
||||
// 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 }) => (
|
||||
<svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
||||
@ -19,19 +709,11 @@ const MoonIcon = ({ className }) => (
|
||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
const GlobeIcon = ({ className }) => (
|
||||
<svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
||||
<path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M2.05 12h19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M12 2.05v19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
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 (
|
||||
<StyledWrapper>
|
||||
@ -352,14 +1024,14 @@ const ThemeToggle = ({ theme, setTheme }) => {
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
toggle();
|
||||
toggleTheme();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isDark}
|
||||
onChange={toggle}
|
||||
onChange={toggleTheme}
|
||||
aria-hidden="false"
|
||||
/>
|
||||
<span className="slider" aria-hidden="true">
|
||||
@ -370,59 +1042,16 @@ const ThemeToggle = ({ theme, setTheme }) => {
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<button
|
||||
onClick={toggle}
|
||||
className="flex items-center gap-2 px-3 py-1 rounded-md font-semibold text-sm border border-transparent hover:border-amber-500/30 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/40 hover:shadow-md active:scale-95"
|
||||
aria-label="Toggle language"
|
||||
title={isAr ? "Switch to English" : "التبديل للعربية"}
|
||||
>
|
||||
<GlobeIcon className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">{isAr ? "عربي" : "EN"}</span>
|
||||
<span className="text-amber-400/95 text-xs sm:text-sm">{isAr ? "AR" : "EN"}</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const Navbar = () => {
|
||||
const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
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) {
|
||||
@ -435,11 +1064,22 @@ const Navbar = () => {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleScroll();
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (i18n.language === "ar") {
|
||||
document.documentElement.dir = "rtl";
|
||||
document.documentElement.lang = "ar";
|
||||
} else {
|
||||
document.documentElement.dir = "ltr";
|
||||
document.documentElement.lang = i18n.language;
|
||||
}
|
||||
}, [i18n.language]);
|
||||
|
||||
const navItems = [
|
||||
{ key: "home", label: t("nav.home") || "Home" },
|
||||
{ key: "services", label: t("nav.services") || "Services" },
|
||||
@ -578,6 +1218,13 @@ const Navbar = () => {
|
||||
>
|
||||
<div className="mx-auto max-w-screen-xl">
|
||||
<div className="flex items-center justify-between h-14 px-2 md:px-4">
|
||||
{/* Logo - from second code */}
|
||||
<img
|
||||
src="/src/assets/TPS-logo.png"
|
||||
className="h-8 sm:h-10 md:h-12 transition-all duration-300"
|
||||
alt="TPS Logo"
|
||||
/>
|
||||
|
||||
<div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse">
|
||||
<ul className="flex items-center gap-6">
|
||||
{navItems.map((item) => {
|
||||
@ -609,12 +1256,13 @@ const Navbar = () => {
|
||||
{/* controls */}
|
||||
<div className="flex items-center gap-3 md:gap-5">
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<LanguageToggle i18n={i18n} />
|
||||
<ThemeToggle theme={theme} setTheme={setTheme} />
|
||||
{/* LanguageSwitcher from second code */}
|
||||
<LanguageSwitcher />
|
||||
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
||||
</div>
|
||||
|
||||
<div className="md:hidden flex items-center gap-2">
|
||||
<ThemeToggle theme={theme} setTheme={setTheme} />
|
||||
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
||||
<button
|
||||
onClick={() => setMenuOpen((s) => !s)}
|
||||
aria-controls="mobile-menu"
|
||||
@ -639,7 +1287,7 @@ const Navbar = () => {
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-3"></div>
|
||||
<div className="flex items-center gap-2">
|
||||
<LanguageToggle i18n={i18n} />
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -662,7 +1310,6 @@ const Navbar = () => {
|
||||
className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
>
|
||||
{/* add inline pill for mobile too — stays inline so it looks like a circle around the label */}
|
||||
<span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
@ -671,7 +1318,7 @@ const Navbar = () => {
|
||||
</ul>
|
||||
|
||||
<div className="mt-4 flex items-center gap-3">
|
||||
<ThemeToggle theme={theme} setTheme={setTheme} />
|
||||
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
||||
<button className="flex-1 px-4 py-2 rounded-md bg-amber-500/95 text-black font-semibold shadow-inner hover:shadow-lg transition-shadow active:scale-95">
|
||||
{t("nav.getQuote") || "Get Quote"}
|
||||
</button>
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
.grow-img {
|
||||
animation: growIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes growIn {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes soft-blink {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-soft-blink {
|
||||
animation: soft-blink 3s infinite ease-in-out;
|
||||
}
|
||||
@ -70,7 +70,6 @@ const companyInfo = [
|
||||
}
|
||||
];
|
||||
|
||||
// Animations
|
||||
const rotating = keyframes`
|
||||
from {
|
||||
transform: perspective(var(--perspective)) rotateX(var(--rotateX))
|
||||
@ -140,7 +139,7 @@ const Card = styled.div.attrs(props => ({
|
||||
}
|
||||
}))`
|
||||
position: absolute;
|
||||
border: 2px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
|
||||
border: 2px solid ${props => props.$theme === 'dark' ? '#47718b' : '#47718b'};
|
||||
border-radius: 20px;
|
||||
overflow: visible;
|
||||
inset: 0;
|
||||
@ -148,15 +147,15 @@ const Card = styled.div.attrs(props => ({
|
||||
translateZ(var(--translateZ));
|
||||
cursor: pointer;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background: ${props => props.$theme === 'dark' ? '#f5e7c673' : '#f5e7c673'};
|
||||
background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg,#3c4b5d, #57acd9)' : 'linear-gradient(45deg,white,#47718b)'};
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
|
||||
&:hover {
|
||||
transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
|
||||
translateZ(calc(var(--translateZ) + 80px)) scale(1.05);
|
||||
border-color: #e06923;
|
||||
background: ${props => props.$theme === 'dark' ? '#F7B980' : '#F7B980'};
|
||||
border-color: #47718b;
|
||||
// background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg,#57acd9, transpatent)' : '#063e5b'};
|
||||
box-shadow:
|
||||
0 0 30px rgba(4, 28, 64, 0.3),
|
||||
0 0 60px rgba(4, 28, 64, 0.2);
|
||||
@ -165,7 +164,7 @@ const Card = styled.div.attrs(props => ({
|
||||
${props => props.$isFront && `
|
||||
transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
|
||||
translateZ(calc(var(--translateZ) + 50px)) scale(1.03);
|
||||
border-color:#e06923;
|
||||
border-color:#47718b;
|
||||
box-shadow:
|
||||
0 15px 35px rgba(4, 28, 64, 0.2),
|
||||
0 5px 15px rgba(4, 28, 64, 0.1);
|
||||
@ -213,7 +212,7 @@ const CardTitle = styled.h3`
|
||||
const CardDescription = styled.p`
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: ${props => props.$theme === 'dark' ? '#131313' : '#131313'};
|
||||
color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
|
||||
margin-bottom: 6px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 8;
|
||||
@ -310,7 +309,7 @@ const DetailModal = styled(motion.div)`
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: ${props => props.$theme === 'dark' ? 'rgb(49 49 49 / 75%)' : 'rgb(245 238 230 / 65%)'};
|
||||
background: ${props => props.$theme === 'dark' ? 'rgb(49 49 49 / 75%)' : 'rgb(49 49 49 / 75%)'};
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
z-index: 2000;
|
||||
@ -324,7 +323,7 @@ const ModalContent = styled(motion.div)`
|
||||
max-width: 650px;
|
||||
width: 100%;
|
||||
height: 86%;
|
||||
background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.9)' : 'rgba(245, 238, 230, 0.9)'};
|
||||
background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg, #063e5b, gray);' : 'linear-gradient(45deg,#539cc4, gray)'};
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
border-radius: 25px;
|
||||
@ -486,17 +485,7 @@ const About = ({ theme = 'light' }) => {
|
||||
<Title>
|
||||
<div
|
||||
className="pt-0 mb-2 text-4xl font-extrabold md:text-5xl lg:text-6xl"
|
||||
style={{
|
||||
background: 'linear-gradient(90deg, #e06923 0%, #ffffff 33%, #313131 66%, #e06923 100%)',
|
||||
backgroundSize: '300% 100%',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text',
|
||||
color: 'transparent',
|
||||
animation: 'gradientFlow 3s ease infinite',
|
||||
fontWeight: 900,
|
||||
letterSpacing: '-0.5px'
|
||||
}}
|
||||
|
||||
>
|
||||
من نحن
|
||||
</div>
|
||||
@ -538,7 +527,7 @@ const About = ({ theme = 'light' }) => {
|
||||
<CardContent $theme={theme}>
|
||||
<CardHeader>
|
||||
<IconWrapper>
|
||||
<Icon size={32} style={{ color: '#e06923' }} />
|
||||
<Icon size={32} style={{ color: '#57acd9' }} />
|
||||
</IconWrapper>
|
||||
<CardTitle>{card.title}</CardTitle>
|
||||
<CardDescription $theme={theme}>
|
||||
@ -548,9 +537,9 @@ const About = ({ theme = 'light' }) => {
|
||||
|
||||
<div>
|
||||
{isFront && (
|
||||
<ArrowHint style={{ color: '#e06923' }}>
|
||||
<ArrowDown size={24} style={{ color: '#e06923' }} />
|
||||
<span style={{ color: '#e06923' }}>إضغط لعرض التفاصيل</span>
|
||||
<ArrowHint style={{ color: '#57acd9' }}>
|
||||
<ArrowDown size={24} style={{ color: '#57acd9' }} />
|
||||
<span style={{ color: '#57acd9' }}>إضغط لعرض التفاصيل</span>
|
||||
</ArrowHint>
|
||||
)}
|
||||
</div>
|
||||
@ -660,11 +649,11 @@ const About = ({ theme = 'light' }) => {
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
{idx === 1 && <Shield size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 0 && <Target size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 2 && <Globe size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 3 && <Zap size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 4 && <Sparkles size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 1 && <Shield size={20} style={{ color: '#57acd9' }} />}
|
||||
{idx === 0 && <Target size={20} style={{ color: '#57acd9' }} />}
|
||||
{idx === 2 && <Globe size={20} style={{ color: '#57acd9' }} />}
|
||||
{idx === 3 && <Zap size={20} style={{ color: '#57acd9' }} />}
|
||||
{idx === 4 && <Sparkles size={20} style={{ color: '#57acd9' }} />}
|
||||
</div>
|
||||
<span style={{
|
||||
color: theme === 'dark' ? '#F5EEE6' : '#131313',
|
||||
|
||||
@ -1,3 +1,455 @@
|
||||
// import { useTranslation } from "react-i18next";
|
||||
// import {
|
||||
// FaMapMarkerAlt,
|
||||
// FaPhoneAlt,
|
||||
// FaEnvelope,
|
||||
// FaWhatsapp,
|
||||
// FaPaperPlane,
|
||||
// } from "react-icons/fa";
|
||||
// import emailjs from "@emailjs/browser";
|
||||
// import { useRef, useState } from "react";
|
||||
// import { motion } from "framer-motion";
|
||||
|
||||
// const Contact = () => {
|
||||
// const { t } = useTranslation();
|
||||
// const form = useRef();
|
||||
// const [message, setMessage] = useState({ text: "", type: "" });
|
||||
// const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// const sendEmail = (e) => {
|
||||
// e.preventDefault();
|
||||
// setIsLoading(true);
|
||||
// setMessage({ text: "", type: "" });
|
||||
// emailjs
|
||||
// .sendForm(
|
||||
// "service_dynf5hg",
|
||||
// "template_l4ik4he",
|
||||
// form.current,
|
||||
// "rRjr_WNgPp7_rGno1"
|
||||
// )
|
||||
// .then(
|
||||
// (result) => {
|
||||
// console.log("Message sent:", result.text);
|
||||
// setMessage({
|
||||
// text: t("contact.successMessage") || "Message sent successfully!",
|
||||
// type: "success",
|
||||
// });
|
||||
// form.current.reset();
|
||||
// setIsLoading(false);
|
||||
// setTimeout(() => setMessage({ text: "", type: "" }), 5000);
|
||||
// },
|
||||
// (error) => {
|
||||
// console.error("Failed to send message:", error.text);
|
||||
// setMessage({
|
||||
// text:
|
||||
// t("contact.errorMessage") ||
|
||||
// "Failed to send message. Please try again.",
|
||||
// type: "error",
|
||||
// });
|
||||
// setIsLoading(false);
|
||||
// setTimeout(() => setMessage({ text: "", type: "" }), 5000);
|
||||
// }
|
||||
// );
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <section
|
||||
// id="contact"
|
||||
// className="relative min-h-screen py-16 px-4 sm:px-6 font-sans"
|
||||
// style={{
|
||||
// direction: "rtl",
|
||||
// // background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
// }}
|
||||
// >
|
||||
// <div className="absolute inset-0 overflow-hidden">
|
||||
// <div className="absolute -top-10 -right-40 w-80 h-80 bg-[#446a85] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
// <div className="absolute -bottom-10 -left-40 w-80 h-80 bg-[#446a85] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
// <div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#57acd9] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
|
||||
// <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#57acd9]/30 to-transparent"></div>
|
||||
// </div>
|
||||
|
||||
// <div className="relative z-10 w-full max-w-6xl mx-auto">
|
||||
// <motion.div
|
||||
// initial={{ y: -50, opacity: 0 }}
|
||||
// animate={{ y: 0, opacity: 1 }}
|
||||
// transition={{ duration: 0.8 }}
|
||||
// className="text-center mb-12"
|
||||
// >
|
||||
// <h1 className="pt-0 mb-0 text-2xl font-extrabold md:text-5xl lg:text-6xl">
|
||||
// <motion.span
|
||||
// className="bg-clip-text text-transparent bg-gradient-to-r from-[#57acd9] via-blue-200 to-[#446a85]"
|
||||
// animate={{
|
||||
// backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
|
||||
// }}
|
||||
// transition={{
|
||||
// duration: 5,
|
||||
// repeat: Infinity,
|
||||
// ease: "linear"
|
||||
// }}
|
||||
// style={{
|
||||
// backgroundSize: "200% 100%"
|
||||
// }}
|
||||
// >
|
||||
// {t("contact.title")}
|
||||
// </motion.span>
|
||||
// </h1>
|
||||
// </motion.div>
|
||||
// <div className="flex flex-col lg:flex-row-reverse gap-8 items-start">
|
||||
// <motion.div
|
||||
// initial={{ x: 50, opacity: 0 }}
|
||||
// animate={{ x: 0, opacity: 1 }}
|
||||
// transition={{ duration: 0.8, delay: 0.2 }}
|
||||
// className="space-y-4 lg:w-1/2"
|
||||
// >
|
||||
// <motion.div
|
||||
// whileHover={{ y: -5, scale: 1.02 }}
|
||||
// transition={{ duration: 0.3 }}
|
||||
// className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#063e5b]/50 hover:shadow-2xl transition-all duration-300"
|
||||
// >
|
||||
// <div className="flex items-start gap-4">
|
||||
// <motion.div
|
||||
// whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
// transition={{ duration: 0.5 }}
|
||||
// className="p-3 rounded-xl bg-gradient-to-br from-[#57acd9] to-[#063e5b] text-white shadow-lg"
|
||||
// >
|
||||
// <FaMapMarkerAlt className="text-2xl" />
|
||||
// </motion.div>
|
||||
|
||||
// <div className="flex-1">
|
||||
// <h3 className="text-[#516475] lg font-bold text- mb-2">
|
||||
// {t("contact.address")}
|
||||
// </h3>
|
||||
// <p className="text-[#063e5b] text-sm leading-relaxed whitespace-pre-line">
|
||||
// {t("contact.addressText")}
|
||||
// </p>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <motion.div
|
||||
// className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#063e5b]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
// initial={false}
|
||||
// />
|
||||
// <motion.div
|
||||
// className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#57acd9] to-transparent rounded-full"
|
||||
// initial={{ x: "-50%", width: "0%" }}
|
||||
// whileHover={{ width: "75%" }}
|
||||
// transition={{ duration: 0.3 }}
|
||||
// />
|
||||
// </motion.div>
|
||||
// <motion.div
|
||||
// whileHover={{ y: -5, scale: 1.02 }}
|
||||
// transition={{ duration: 0.3 }}
|
||||
// className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
// >
|
||||
// <div className="flex items-start gap-4">
|
||||
// <motion.div
|
||||
// whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
// transition={{ duration: 0.5 }}
|
||||
// className="p-3 rounded-xl bg-gradient-to-br from-[#063e5b] to-[#5c7ce3] text-white shadow-lg"
|
||||
// >
|
||||
// <FaPhoneAlt className="text-2xl" />
|
||||
// </motion.div>
|
||||
|
||||
// <div className="flex-1">
|
||||
// <h3 className="text-lg font-bold text-gray-800 mb-3">
|
||||
// {t("contact.phone")}
|
||||
// </h3>
|
||||
// <div className="space-y-3">
|
||||
// <div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
|
||||
// <span className="text-[#23558f] font-medium">0965656631</span>
|
||||
// <div className="flex items-center gap-2">
|
||||
// <motion.button
|
||||
// whileHover={{ scale: 1.1 }}
|
||||
// whileTap={{ scale: 0.9 }}
|
||||
// className="p-2 rounded-full bg-gradient-to-r from-[#57acd9] to-[#4a7c9b] text-white hover:shadow-lg transition-all duration-300"
|
||||
// >
|
||||
// <FaPhoneAlt className="text-sm" />
|
||||
// </motion.button>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
|
||||
// <a
|
||||
// href="https://wa.me/963965656631"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
// className="text-[#23558f] font-medium hover:text-[#3c5ee3] transition-colors"
|
||||
// >
|
||||
// 963965656631
|
||||
// </a>
|
||||
// <div className="flex items-center gap-2">
|
||||
// <motion.a
|
||||
// href="https://wa.me/963965656631"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
// whileHover={{ scale: 1.1 }}
|
||||
// whileTap={{ scale: 0.9 }}
|
||||
// className="p-2 rounded-full bg-gradient-to-r from-[#25D366] to-[#128C7E] text-white hover:shadow-lg transition-all duration-300"
|
||||
// >
|
||||
// <FaWhatsapp className="text-sm" />
|
||||
// </motion.a>
|
||||
// <motion.button
|
||||
// whileHover={{ scale: 1.1 }}
|
||||
// whileTap={{ scale: 0.9 }}
|
||||
// className="p-2 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white hover:shadow-lg transition-all duration-300"
|
||||
// >
|
||||
// <FaPhoneAlt className="text-sm" />
|
||||
// </motion.button>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <motion.div
|
||||
// className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
// initial={false}
|
||||
// />
|
||||
// </motion.div>
|
||||
// <motion.div
|
||||
// whileHover={{ y: -5, scale: 1.02 }}
|
||||
// transition={{ duration: 0.3 }}
|
||||
// className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
// >
|
||||
// <div className="flex items-start gap-4">
|
||||
// <motion.div
|
||||
// whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
// transition={{ duration: 0.5 }}
|
||||
// className="p-3 rounded-xl bg-gradient-to-br from-[#2ecc71] to-[#1abc9c] text-white shadow-lg"
|
||||
// >
|
||||
// <FaEnvelope className="text-2xl" />
|
||||
// </motion.div>
|
||||
|
||||
// <div className="flex-1">
|
||||
// <h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||
// {t("contact.email")}
|
||||
// </h3>
|
||||
// <a
|
||||
// href="mailto:info@TPS-STATIONS.COM"
|
||||
// className="inline-block bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] text-[#23558f] font-medium rounded-xl px-4 py-3 hover:from-[#dceafe] hover:to-[#c6e2ff] hover:text-[#3c5ee3] hover:shadow-lg transition-all duration-300"
|
||||
// >
|
||||
// Info@TPS-STATIONS.COM
|
||||
// </a>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <motion.div
|
||||
// className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
// initial={false}
|
||||
// />
|
||||
|
||||
// <motion.div
|
||||
// className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#2ecc71] to-transparent rounded-full"
|
||||
// initial={{ x: "-50%", width: "0%" }}
|
||||
// whileHover={{ width: "75%" }}
|
||||
// transition={{ duration: 0.3 }}
|
||||
// />
|
||||
// </motion.div>
|
||||
// </motion.div>
|
||||
// <motion.div
|
||||
// initial={{ x: -50, opacity: 0 }}
|
||||
// animate={{ x: 0, opacity: 1 }}
|
||||
// transition={{ duration: 0.8, delay: 0.4 }}
|
||||
// className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-2xl border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-3xl transition-all duration-500 lg:w-1/2"
|
||||
// >
|
||||
// <div className="relative mb-3 pt-3">
|
||||
// <h2 className="text-2xl md:text-3xl font-bold text-center">
|
||||
// <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#4a7c9b] via-[#063e5b] to-[#57acd9]">
|
||||
// {t("contact.formTitle")}
|
||||
// </span>
|
||||
// </h2>
|
||||
// <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71] rounded-full"></div>
|
||||
// </div>
|
||||
// <form
|
||||
// ref={form}
|
||||
// onSubmit={sendEmail}
|
||||
// className="space-y-2"
|
||||
// >
|
||||
// <div className="group/field">
|
||||
// <label className="block mb-1 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
|
||||
// {t("contact.name")}
|
||||
// </label>
|
||||
// <div className="relative">
|
||||
// <input
|
||||
// type="text"
|
||||
// name="user_name"
|
||||
// required
|
||||
// className="w-full border-2 border-gray-200 p-4 rounded-xl bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10"
|
||||
// placeholder={t("contact.namePlaceholder")}
|
||||
// />
|
||||
// <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="group/field">
|
||||
// <label className="block mb-1 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
|
||||
// {t("contact.email")}
|
||||
// </label>
|
||||
// <div className="relative">
|
||||
// <input
|
||||
// type="email"
|
||||
// name="user_email"
|
||||
// required
|
||||
// className="w-full border-2 border-gray-200 p-4 rounded-xl bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10"
|
||||
// placeholder={t("contact.emailPlaceholder")}
|
||||
// />
|
||||
// <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="group/field">
|
||||
// <label className="block mb-2 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
|
||||
// {t("contact.message")}
|
||||
// </label>
|
||||
// <div className="relative">
|
||||
// <textarea
|
||||
// name="user_message"
|
||||
// required
|
||||
// className="w-full border-2 border-gray-200 p-4 rounded-xl resize-none bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10 min-h-[120px]"
|
||||
// placeholder={t("contact.messagePlaceholder")}
|
||||
// ></textarea>
|
||||
// <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
// {message.text && (
|
||||
// <motion.div
|
||||
// initial={{ scale: 0.9, opacity: 0 }}
|
||||
// animate={{ scale: 1, opacity: 1 }}
|
||||
// className={`p-4 rounded-xl text-center font-medium transition-all duration-500 ${
|
||||
// message.type === "success"
|
||||
// ? "bg-gradient-to-r from-[#2ecc71]/20 to-[#1abc9c]/20 border border-[#2ecc71]/50 text-[#2ecc71] shadow-lg shadow-[#2ecc71]/20"
|
||||
// : "bg-gradient-to-r from-[#e74c3c]/20 to-[#c0392b]/20 border border-[#e74c3c]/50 text-[#e74c3c] shadow-lg shadow-[#e74c3c]/20"
|
||||
// }`}
|
||||
// >
|
||||
// <div className="flex items-center justify-center gap-2">
|
||||
// {message.type === "success" ? (
|
||||
// <svg
|
||||
// className="w-5 h-5"
|
||||
// fill="none"
|
||||
// stroke="currentColor"
|
||||
// viewBox="0 0 24 24"
|
||||
// >
|
||||
// <path
|
||||
// strokeLinecap="round"
|
||||
// strokeLinejoin="round"
|
||||
// strokeWidth={2}
|
||||
// d="M5 13l4 4L19 7"
|
||||
// />
|
||||
// </svg>
|
||||
// ) : (
|
||||
// <svg
|
||||
// className="w-5 h-5"
|
||||
// fill="none"
|
||||
// stroke="currentColor"
|
||||
// viewBox="0 0 24 24"
|
||||
// >
|
||||
// <path
|
||||
// strokeLinecap="round"
|
||||
// strokeLinejoin="round"
|
||||
// strokeWidth={2}
|
||||
// d="M6 18L18 6M6 6l12 12"
|
||||
// />
|
||||
// </svg>
|
||||
// )}
|
||||
// {message.text}
|
||||
// </div>
|
||||
// </motion.div>
|
||||
// )}
|
||||
// <div className="pt-2">
|
||||
// <motion.button
|
||||
// type="submit"
|
||||
// disabled={isLoading}
|
||||
// whileHover={{ scale: 1.02 }}
|
||||
// whileTap={{ scale: 0.98 }}
|
||||
// className={`group/btn relative w-full bg-gradient-to-r from-[#57acd9] via-[#063e5b] to-[#4a7c9b] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:shadow-2xl hover:shadow-[#3c5ee3]/30 transition-all duration-500 overflow-hidden ${
|
||||
// isLoading ? "opacity-70 cursor-not-allowed" : ""
|
||||
// }`}
|
||||
// >
|
||||
// <span className="relative z-10 flex items-center justify-center gap-2">
|
||||
// {isLoading ? (
|
||||
// <>
|
||||
// <svg
|
||||
// className="animate-spin w-5 h-5"
|
||||
// fill="none"
|
||||
// viewBox="0 0 24 24"
|
||||
// >
|
||||
// <circle
|
||||
// className="opacity-25"
|
||||
// cx="12"
|
||||
// cy="12"
|
||||
// r="10"
|
||||
// stroke="currentColor"
|
||||
// strokeWidth="4"
|
||||
// ></circle>
|
||||
// <path
|
||||
// className="opacity-75"
|
||||
// fill="currentColor"
|
||||
// d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
// ></path>
|
||||
// </svg>
|
||||
// {t("contact.send")}...
|
||||
// </>
|
||||
// ) : (
|
||||
// <>
|
||||
// {t("contact.send")}
|
||||
// <FaPaperPlane className="w-5 h-5 transform group-hover/btn:translate-x-1 transition-transform duration-300" />
|
||||
// </>
|
||||
// )}
|
||||
// </span>
|
||||
// {!isLoading && (
|
||||
// <div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 transform -skew-x-12 -translate-x-full group-hover/btn:translate-x-full transition-transform duration-1000"></div>
|
||||
// )}
|
||||
// </motion.button>
|
||||
// </div>
|
||||
// </form>
|
||||
// <div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-[#23558f]/10 to-[#3360b2]/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
|
||||
// <div className="absolute bottom-0 left-0 w-16 h-16 bg-gradient-to-br from-[#2ecc71]/10 to-[#1abc9c]/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
|
||||
// </motion.div>
|
||||
// </div>
|
||||
// <motion.div
|
||||
// initial={{ opacity: 0, y: 30 }}
|
||||
// animate={{ opacity: 1, y: 0 }}
|
||||
// transition={{ duration: 0.8, delay: 0.6 }}
|
||||
// className="mt-16 p-8 rounded-2xl shadow-2xl text-center relative overflow-hidden"
|
||||
// style={{
|
||||
// background: "linear-gradient(135deg, #4a7c9b 0%, #063e5b 33%, #57acd9 66%, #4a7c9b 100%)"
|
||||
// }}
|
||||
// >
|
||||
// <div className="absolute inset-0">
|
||||
// <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
||||
// <div className="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
||||
// </div>
|
||||
|
||||
// <div className="relative z-10">
|
||||
// <h3 className="text-xl md:text-2xl font-bold text-white mb-4">
|
||||
// {t('contact.contactSection.title')}
|
||||
// </h3>
|
||||
// <p className="text-white/90 text-lg mb-6 max-w-2xl mx-auto">
|
||||
// {t('contact.contactSection.description')}
|
||||
// </p>
|
||||
// <div className="flex flex-wrap justify-center gap-4">
|
||||
// {t('contact.contactSection.badges', { returnObjects: true }).map((badge, index) => (
|
||||
// <motion.div
|
||||
// key={index}
|
||||
// whileHover={{ scale: 1.05, y: -2 }}
|
||||
// whileTap={{ scale: 0.95 }}
|
||||
// className="px-4 py-2 bg-white/20 rounded-full text-white text-sm font-medium backdrop-blur-sm hover:bg-white/30 transition-all duration-300 cursor-pointer"
|
||||
// >
|
||||
// {badge}
|
||||
// </motion.div>
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
// </motion.div>
|
||||
// </div>
|
||||
// </section>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default Contact;
|
||||
|
||||
|
||||
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
FaMapMarkerAlt,
|
||||
@ -58,15 +510,15 @@ emailjs
|
||||
className="relative min-h-screen py-16 px-4 sm:px-6 font-sans"
|
||||
style={{
|
||||
direction: "rtl",
|
||||
background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
// background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-10 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-10 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
<div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
<div className="absolute -top-10 -right-40 w-80 h-80 bg-[#446a85] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-10 -left-40 w-80 h-80 bg-[#446a85] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
<div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#57acd9] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#57acd9]/30 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-6xl mx-auto">
|
||||
@ -78,7 +530,7 @@ emailjs
|
||||
>
|
||||
<h1 className="pt-0 mb-0 text-2xl font-extrabold md:text-5xl lg:text-6xl">
|
||||
<motion.span
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-[#57acd9] via-blue-200 to-[#446a85]"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
|
||||
}}
|
||||
@ -102,115 +554,48 @@ emailjs
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="space-y-4 lg:w-1/2"
|
||||
>
|
||||
{/* بطاقة العنوان - بقيت كما هي */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-lg border border-gray-100 hover:border-[#063e5b]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="p-3 rounded-xl bg-gradient-to-br from-[#23558f] to-[#3360b2] text-white shadow-lg"
|
||||
className="p-3 rounded-xl bg-gradient-to-br from-[#57acd9] to-[#063e5b] text-white shadow-lg"
|
||||
>
|
||||
<FaMapMarkerAlt className="text-2xl" />
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||
<h3 className="text-[#516475] lg font-bold text- mb-2">
|
||||
{t("contact.address")}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed whitespace-pre-line">
|
||||
<p className="text-[#063e5b] text-sm leading-relaxed whitespace-pre-line">
|
||||
{t("contact.addressText")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#063e5b]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
initial={false}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#3c5ee3] to-transparent rounded-full"
|
||||
className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#57acd9] to-transparent rounded-full"
|
||||
initial={{ x: "-50%", width: "0%" }}
|
||||
whileHover={{ width: "75%" }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* بطاقة البريد الإلكتروني - بقيت كما هي */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="p-3 rounded-xl bg-gradient-to-br from-[#3c5ee3] to-[#5c7ce3] text-white shadow-lg"
|
||||
>
|
||||
<FaPhoneAlt className="text-2xl" />
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-3">
|
||||
{t("contact.phone")}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
|
||||
<span className="text-[#23558f] font-medium">0965656631</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className="p-2 rounded-full bg-gradient-to-r from-[#2ecc71] to-[#1abc9c] text-white hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<FaPhoneAlt className="text-sm" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
|
||||
<a
|
||||
href="https://wa.me/963965656631"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#23558f] font-medium hover:text-[#3c5ee3] transition-colors"
|
||||
>
|
||||
963965656631
|
||||
</a>
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.a
|
||||
href="https://wa.me/963965656631"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className="p-2 rounded-full bg-gradient-to-r from-[#25D366] to-[#128C7E] text-white hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<FaWhatsapp className="text-sm" />
|
||||
</motion.a>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className="p-2 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<FaPhoneAlt className="text-sm" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
initial={false}
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
@ -222,14 +607,14 @@ emailjs
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||
<h3 className="text-lg font-bold text-[#063e5b] mb-2">
|
||||
{t("contact.email")}
|
||||
</h3>
|
||||
<a
|
||||
href="mailto:info@TPS-STATIONS.COM"
|
||||
href="mailto:info@rexnt.com"
|
||||
className="inline-block bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] text-[#23558f] font-medium rounded-xl px-4 py-3 hover:from-[#dceafe] hover:to-[#c6e2ff] hover:text-[#3c5ee3] hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
Info@TPS-STATIONS.COM
|
||||
Info@rexnt.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -247,6 +632,7 @@ emailjs
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ x: -50, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
@ -255,11 +641,11 @@ emailjs
|
||||
>
|
||||
<div className="relative mb-3 pt-3">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-center">
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71]">
|
||||
<span className="bg-clip-text text-[#063e5b] bg-gradient-to-r from-[#4a7c9b] via-[#063e5b] to-[#57acd9]">
|
||||
{t("contact.formTitle")}
|
||||
</span>
|
||||
</h2>
|
||||
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71] rounded-full"></div>
|
||||
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-[#4a7c9b] via-[#063e5b] to-[#57acd9] rounded-full"></div>
|
||||
</div>
|
||||
<form
|
||||
ref={form}
|
||||
@ -360,7 +746,7 @@ emailjs
|
||||
disabled={isLoading}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={`group/btn relative w-full bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:shadow-2xl hover:shadow-[#3c5ee3]/30 transition-all duration-500 overflow-hidden ${
|
||||
className={`group/btn relative w-full bg-gradient-to-r from-[#57acd9] via-[#063e5b] to-[#4a7c9b] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:shadow-2xl hover:shadow-[#3c5ee3]/30 transition-all duration-500 overflow-hidden ${
|
||||
isLoading ? "opacity-70 cursor-not-allowed" : ""
|
||||
}`}
|
||||
>
|
||||
@ -411,7 +797,7 @@ emailjs
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="mt-16 p-8 rounded-2xl shadow-2xl text-center relative overflow-hidden"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #23558f 0%, #3360b2 33%, #3c5ee3 66%, #2ecc71 100%)"
|
||||
background: "linear-gradient(135deg, #4a7c9b 0%, #063e5b 33%, #57acd9 66%, #4a7c9b 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0">
|
||||
|
||||
@ -1,656 +1,132 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Element } from "react-scroll";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
Globe,
|
||||
MessageSquare,
|
||||
Bell,
|
||||
Package,
|
||||
BarChart3,
|
||||
Zap,
|
||||
Shield,
|
||||
Users,
|
||||
Clock,
|
||||
CheckCircle
|
||||
} from "lucide-react";
|
||||
|
||||
const CARDS_PER_PAGE = 4;
|
||||
import React from "react";
|
||||
import { Wallet, Zap, Users, PieChart, ChevronRight, Sparkles } from "lucide-react";
|
||||
|
||||
const Services = () => {
|
||||
const { t, ready } = useTranslation();
|
||||
const servicesData = [
|
||||
const features = [
|
||||
{
|
||||
id: "service-1",
|
||||
title: t('tradesafe.services.platform.title'),
|
||||
description: t('tradesafe.services.platform.description'),
|
||||
details: t('tradesafe.services.platform.details'),
|
||||
icon: <Globe className="w-10 h-10" />,
|
||||
color: "from-[#23558f] to-[#3360b2]",
|
||||
bgColor: "bg-gradient-to-br from-[#23558f]/20 to-[#3360b2]/20",
|
||||
features: t('tradesafe.services.platform.features', { returnObjects: true })
|
||||
id: 1,
|
||||
icon: <Wallet className="w-8 h-8" />,
|
||||
title: "تصميم وتنفيذ خطوط إنتاج صناعية متكاملة",
|
||||
description: "تشمل قطاعات الحديد، الإسمنت، الغذائيات، الأدوية، والبلاستيك بأعلى معايير الجودة والسلامة",
|
||||
},
|
||||
{
|
||||
id: "service-2",
|
||||
title: t('tradesafe.services.orders.title'),
|
||||
description: t('tradesafe.services.orders.description'),
|
||||
details: t('tradesafe.services.orders.details'),
|
||||
icon: <Package className="w-10 h-10" />,
|
||||
color: "from-[#3360b2] to-[#3c5ee3]",
|
||||
bgColor: "bg-gradient-to-br from-[#3360b2]/20 to-[#3c5ee3]/20",
|
||||
features: t('tradesafe.services.orders.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-3",
|
||||
title: t('tradesafe.services.communication.title'),
|
||||
description: t('tradesafe.services.communication.description'),
|
||||
details: t('tradesafe.services.communication.details'),
|
||||
icon: <MessageSquare className="w-10 h-10" />,
|
||||
color: "from-[#3c5ee3] to-[#5c7ce3]",
|
||||
bgColor: "bg-gradient-to-br from-[#3c5ee3]/20 to-[#5c7ce3]/20",
|
||||
features: t('tradesafe.services.communication.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-4",
|
||||
title: t('tradesafe.services.notifications.title'),
|
||||
description: t('tradesafe.services.notifications.description'),
|
||||
details: t('tradesafe.services.notifications.details'),
|
||||
icon: <Bell className="w-10 h-10" />,
|
||||
color: "from-[#4a90e2] to-[#6aa8f2]",
|
||||
bgColor: "bg-gradient-to-br from-[#4a90e2]/20 to-[#6aa8f2]/20",
|
||||
features: t('tradesafe.services.notifications.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-5",
|
||||
title: t('tradesafe.services.dashboard.title'),
|
||||
description: t('tradesafe.services.dashboard.description'),
|
||||
details: t('tradesafe.services.dashboard.details'),
|
||||
icon: <BarChart3 className="w-10 h-10" />,
|
||||
color: "from-[#2ecc71] to-[#1abc9c]",
|
||||
bgColor: "bg-gradient-to-br from-[#2ecc71]/20 to-[#1abc9c]/20",
|
||||
features: t('tradesafe.services.dashboard.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-6",
|
||||
title: t('tradesafe.services.solutions.title'),
|
||||
description: t('tradesafe.services.solutions.description'),
|
||||
details: t('tradesafe.services.solutions.details'),
|
||||
icon: <Shield className="w-10 h-10" />,
|
||||
color: "from-[#9b59b6] to-[#8e44ad]",
|
||||
bgColor: "bg-gradient-to-br from-[#9b59b6]/20 to-[#8e44ad]/20",
|
||||
features: t('tradesafe.services.solutions.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-7",
|
||||
title: t('tradesafe.services.speed.title'),
|
||||
description: t('tradesafe.services.speed.description'),
|
||||
details: t('tradesafe.services.speed.details'),
|
||||
icon: <Zap className="w-10 h-10" />,
|
||||
color: "from-[#f39c12] to-[#e67e22]",
|
||||
bgColor: "bg-gradient-to-br from-[#f39c12]/20 to-[#e67e22]/20",
|
||||
features: t('tradesafe.services.speed.features', { returnObjects: true })
|
||||
},
|
||||
{
|
||||
id: "service-8",
|
||||
title: t('tradesafe.services.network.title'),
|
||||
description: t('tradesafe.services.network.description'),
|
||||
details: t('tradesafe.services.network.details'),
|
||||
icon: <Users className="w-10 h-10" />,
|
||||
color: "from-[#3498db] to-[#2980b9]",
|
||||
bgColor: "bg-gradient-to-br from-[#3498db]/20 to-[#2980b9]/20",
|
||||
features: t('tradesafe.services.network.features', { returnObjects: true })
|
||||
}
|
||||
];
|
||||
|
||||
const reasonsToChooseUs = [
|
||||
{
|
||||
id: 2,
|
||||
icon: <Zap className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.speed.text'),
|
||||
description: t('tradesafe.reasons.speed.description')
|
||||
title: "تنفيذ مشاريع سكنية وخدمية متكاملة",
|
||||
description: "وحدات سكنية مسبقة الصنع، مباني خدمية وإدارية، مع الالتزام بأعلى المعايير الهندسية",
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.reliability.text'),
|
||||
description: t('tradesafe.reasons.reliability.description')
|
||||
id: 3,
|
||||
icon: <Users className="w-8 h-8" />,
|
||||
title: "إنشاء وصيانة مرافق البنية التحتية",
|
||||
description: "محطات الوقود، المنشآت النفطية، المحطات المائية، وأنظمة ضخ ومعالجة المياه",
|
||||
},
|
||||
{
|
||||
icon: <Globe className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.connection.text'),
|
||||
description: t('tradesafe.reasons.connection.description')
|
||||
id: 4,
|
||||
icon: <PieChart className="w-8 h-8" />,
|
||||
title: "تشغيل وصيانة متكاملة للمنشآت",
|
||||
description: "أنظمة أتمتة متقدمة، إدارة محطات، صيانة على مدار الساعة، وتطوير مستمر للمرافق",
|
||||
},
|
||||
{
|
||||
icon: <MessageSquare className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.communication.text'),
|
||||
description: t('tradesafe.reasons.communication.description')
|
||||
},
|
||||
{
|
||||
icon: <Clock className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.time.text'),
|
||||
description: t('tradesafe.reasons.time.description')
|
||||
},
|
||||
{
|
||||
icon: <CheckCircle className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.solutions.text'),
|
||||
description: t('tradesafe.reasons.solutions.description')
|
||||
}
|
||||
];
|
||||
|
||||
const [expandedCards, setExpandedCards] = useState({});
|
||||
const [hoveredCard, setHoveredCard] = useState(null);
|
||||
const [page, setPage] = useState(0);
|
||||
|
||||
const startIndex = page * CARDS_PER_PAGE;
|
||||
const endIndex = startIndex + CARDS_PER_PAGE;
|
||||
const visibleServices = servicesData.slice(startIndex, endIndex);
|
||||
const totalPages = Math.ceil(servicesData.length / CARDS_PER_PAGE);
|
||||
|
||||
const toggleCard = (cardId) => {
|
||||
setExpandedCards(prev => ({
|
||||
...prev,
|
||||
[cardId]: !prev[cardId]
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleAllCards = () => {
|
||||
const allExpanded = Object.values(expandedCards).every(Boolean);
|
||||
const newState = {};
|
||||
visibleServices.forEach(service => {
|
||||
newState[service.id] = !allExpanded;
|
||||
});
|
||||
setExpandedCards(newState);
|
||||
};
|
||||
|
||||
const handleNextPage = () => {
|
||||
const newExpandedState = {};
|
||||
visibleServices.forEach(service => {
|
||||
newExpandedState[service.id] = false;
|
||||
});
|
||||
setExpandedCards(newExpandedState);
|
||||
setPage((prev) => (prev + 1) % totalPages);
|
||||
};
|
||||
|
||||
const handlePrevPage = () => {
|
||||
const newExpandedState = {};
|
||||
visibleServices.forEach(service => {
|
||||
newExpandedState[service.id] = false;
|
||||
});
|
||||
setExpandedCards(newExpandedState);
|
||||
setPage((prev) => (prev - 1 + totalPages) % totalPages);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const newExpandedState = {};
|
||||
visibleServices.forEach(service => {
|
||||
newExpandedState[service.id] = expandedCards[service.id] || false;
|
||||
});
|
||||
setExpandedCards(newExpandedState);
|
||||
}, [page]);
|
||||
|
||||
const openPdfPresentation = () => {
|
||||
const pdfUrl = `${window.location.origin}/trader-safe.pdf`;
|
||||
window.open(pdfUrl, "_blank", "noopener,noreferrer");
|
||||
};
|
||||
|
||||
const openPlatformLink = () => {
|
||||
const platformUrl = "http://45.93.137.91/";
|
||||
window.open(platformUrl, "_blank", "noopener,noreferrer");
|
||||
};
|
||||
|
||||
if (!ready) return (
|
||||
<div className="flex justify-center items-center h-screen bg-gradient-to-br from-[#23558f] via-[#3360b2] to-[#3c5ee3]">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-white"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Element name="services">
|
||||
<motion.section
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="w-full min-h-screen py-12 px-4 sm:px-6 text-gray-800 flex flex-col items-center font-sans relative overflow-hidden"
|
||||
style={{
|
||||
direction: "rtl",
|
||||
background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-40 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
<div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
<div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-[#23558f]/30 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-7xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-8"
|
||||
>
|
||||
<h1 className="pt-6 mb-4 text-4xl font-extrabold md:text-5xl lg:text-6xl">
|
||||
<motion.span
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
style={{
|
||||
backgroundSize: "200% 100%"
|
||||
}}
|
||||
>
|
||||
{t('tradesafe.services.title')}
|
||||
</motion.span>
|
||||
</h1>
|
||||
<p className="text-lg font-medium text-gray-700 lg:text-xl mb-6 max-w-3xl mx-auto">
|
||||
{t('tradesafe.subtitle')}
|
||||
</p>
|
||||
<div className="flex justify-center mb-8">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={toggleAllCards}
|
||||
className="px-6 py-3 bg-gradient-to-r from-[#23558f] to-[#3c5ee3] text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2"
|
||||
>
|
||||
{Object.values(expandedCards).every(Boolean) ? (
|
||||
<>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
{t('tradesafe.buttons.collapseAll')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
{t('tradesafe.buttons.showDetails')}
|
||||
</>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="w-full px-4 relative z-10">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<AnimatePresence>
|
||||
{visibleServices.map((service, index) => {
|
||||
const isExpanded = expandedCards[service.id] || false;
|
||||
const isHovered = hoveredCard === service.id;
|
||||
return (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}}
|
||||
exit={{ scale: 0.9, opacity: 0, y: -20 }}
|
||||
transition={{
|
||||
duration: 0.4,
|
||||
delay: index * 0.1,
|
||||
type: "spring",
|
||||
stiffness: 100
|
||||
}}
|
||||
whileHover={{
|
||||
y: -5,
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
onHoverStart={() => setHoveredCard(service.id)}
|
||||
onHoverEnd={() => setHoveredCard(null)}
|
||||
onClick={() => toggleCard(service.id)}
|
||||
className={`relative cursor-pointer transition-all duration-300 ease-in-out p-6 rounded-2xl shadow-lg backdrop-blur-sm bg-white/90 border-2 ${
|
||||
isExpanded
|
||||
? 'border-[#3c5ee3] shadow-xl'
|
||||
: 'border-white/20 hover:border-[#3c5ee3]/30'
|
||||
}`}
|
||||
>
|
||||
<div className={`absolute inset-0 rounded-2xl ${service.bgColor} opacity-20`}></div>
|
||||
<div className="relative z-10 h-full flex flex-col">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className={`p-3 rounded-xl bg-gradient-to-br ${service.color} text-white shadow-lg`}>
|
||||
{service.icon}
|
||||
</div>
|
||||
<motion.div
|
||||
animate={{ rotate: isExpanded ? 180 : 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="w-6 h-6 text-gray-500"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm mb-4">
|
||||
{service.description}
|
||||
</p>
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="pt-4 border-t border-gray-200">
|
||||
<p className="text-gray-700 text-sm mb-3 leading-relaxed">
|
||||
{service.details}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Array.isArray(service.features) && service.features.map((feature, idx) => (
|
||||
<motion.span
|
||||
key={idx}
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: idx * 0.05 }}
|
||||
className="px-3 py-1 bg-gradient-to-r from-white to-gray-50 text-[#23558f] text-xs font-medium rounded-full border border-[#23558f]/20 shadow-sm"
|
||||
>
|
||||
{feature}
|
||||
</motion.span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<AnimatePresence>
|
||||
{!isExpanded && isHovered && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="pt-3 border-t border-dashed border-gray-300 mt-3">
|
||||
<p className="text-gray-700 text-xs mb-2 line-clamp-2">
|
||||
{service.details.split(' - ')[0]}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{Array.isArray(service.features) && service.features.slice(0, 2).map((feature, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-1 bg-gradient-to-r from-[#dceafe] to-[#e8f4ff] text-[#23558f] text-xs font-medium rounded-full"
|
||||
>
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
{isHovered && !isExpanded && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/5 to-transparent"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
/>
|
||||
)}
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/10 to-transparent"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className="flex justify-center items-center gap-6 mt-12">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05, x: -5 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={handlePrevPage}
|
||||
className="p-4 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</motion.button>
|
||||
<div className="flex gap-3">
|
||||
{Array.from({ length: totalPages }).map((_, idx) => (
|
||||
<motion.button
|
||||
key={idx}
|
||||
whileHover={{ scale: 1.2 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => {
|
||||
const newExpandedState = {};
|
||||
visibleServices.forEach(service => {
|
||||
newExpandedState[service.id] = false;
|
||||
});
|
||||
setExpandedCards(newExpandedState);
|
||||
setPage(idx);
|
||||
}}
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center font-medium transition-all ${
|
||||
page === idx
|
||||
? 'bg-gradient-to-r from-[#3c5ee3] to-[#2ecc71] text-white shadow-lg scale-110'
|
||||
: 'bg-white/80 text-gray-600 hover:bg-white'
|
||||
}`}
|
||||
>
|
||||
{idx + 1}
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05, x: 5 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={handleNextPage}
|
||||
className="p-4 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</motion.button>
|
||||
</div>
|
||||
<div className="text-center mt-4">
|
||||
<span className="text-gray-600 font-medium">
|
||||
{t('tradesafe.buttons.page', { current: page + 1, total: totalPages })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
</Element>
|
||||
|
||||
<Element name="why-us">
|
||||
<motion.section
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="w-full py-16 px-4 sm:px-6 text-gray-800 flex flex-col items-center font-sans relative overflow-hidden"
|
||||
style={{
|
||||
direction: "rtl",
|
||||
background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-white/90"></div>
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-40 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
<div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
|
||||
<div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-[#23558f]/30 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-6xl mx-auto">
|
||||
<motion.h1
|
||||
initial={{ y: -30, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="pt-6 mb-12 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center"
|
||||
>
|
||||
<motion.span
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
style={{
|
||||
backgroundSize: "200% 100%"
|
||||
}}
|
||||
<div className="min-h-screen bg-transparent font-sans overflow-hidden relative">
|
||||
<div className="absolute inset-0 z-0 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-transparent"></div>
|
||||
</div>
|
||||
<div className="relative z-10 flex flex-col lg:flex-row min-h-screen items-center">
|
||||
<div className=" flex flex-col justify-center max-h-screen ">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-10 max-w-4xl mx-auto p-6">
|
||||
{features.map((feature) => (
|
||||
<div
|
||||
key={feature.id}
|
||||
className="group relative overflow-hidden"
|
||||
>
|
||||
{t('tradesafe.reasons.title')}
|
||||
</motion.span>
|
||||
</motion.h1>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
|
||||
{reasonsToChooseUs.map((reason, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ y: 50, opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ y: 0, opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
delay: index * 0.1,
|
||||
type: "spring",
|
||||
stiffness: 100
|
||||
}}
|
||||
whileHover={{
|
||||
y: -8,
|
||||
scale: 1.02,
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className={`p-3 rounded-xl bg-gradient-to-br ${
|
||||
index % 3 === 0 ? 'from-[#23558f] to-[#3360b2]' :
|
||||
index % 3 === 1 ? 'from-[#3c5ee3] to-[#5c7ce3]' :
|
||||
'from-[#2ecc71] to-[#1abc9c]'
|
||||
} text-white shadow-lg`}
|
||||
>
|
||||
{reason.icon}
|
||||
</motion.div>
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white to-[#47718b] rounded-2xl shadow-lg group-hover:shadow-2xl transition-all duration-500 border border-gray-200 group-hover:border-[#47718b]"></div>
|
||||
|
||||
<div className="relative p-6 z-10">
|
||||
<div className="flex items-start space-x-5">
|
||||
<div className="p-3 bg-gradient-to-br from-white to-[#47718b] rounded-xl group-hover:from-[#47718b] group-hover:to-[#063e5b] group-hover:text-white transition-all duration-500 shadow-sm group-hover:shadow-lg">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||
{reason.text}
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-3 group-hover:text-[#47718b] transition-colors duration-500">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{reason.description}
|
||||
<p className="text-gray-600 leading-relaxed text-sm">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
initial={false}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#3c5ee3] to-transparent rounded-full"
|
||||
initial={{ x: "-50%", width: "0%" }}
|
||||
whileHover={{ width: "75%" }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9, y: 30 }}
|
||||
whileInView={{ opacity: 1, scale: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="mt-16 p-8 rounded-2xl shadow-2xl text-center relative overflow-hidden"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #23558f 0%, #3360b2 33%, #3c5ee3 66%, #2ecc71 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
||||
<div className="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-white mb-4">
|
||||
{t('tradesafe.reasons.cta.title')}
|
||||
</h3>
|
||||
<p className="text-white/90 text-lg mb-6 max-w-2xl mx-auto">
|
||||
{t('tradesafe.reasons.cta.subtitle')}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<motion.button
|
||||
whileHover={{
|
||||
scale: 1.05,
|
||||
boxShadow: "0 10px 25px rgba(0,0,0,0.2)"
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={openPlatformLink}
|
||||
className="px-8 py-3 bg-white text-[#23558f] font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
{t('tradesafe.buttons.startNow')}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
whileHover={{
|
||||
scale: 1.05,
|
||||
boxShadow: "0 10px 25px rgba(255,255,255,0.2)"
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={openPdfPresentation}
|
||||
className="px-8 py-3 bg-transparent border-2 border-white text-white font-bold rounded-full hover:bg-white/10 transition-all duration-300 flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
{t('tradesafe.buttons.viewPresentation')}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.section>
|
||||
</Element>
|
||||
</>
|
||||
</div>
|
||||
<div className="relative lg:w-1/2 lg:min-h-screen flex items-center justify-center py-16 lg:py-0">
|
||||
<div className="absolute inset-0 lg:inset-y-0 lg:right-0 lg:left-auto lg:w-[100%]">
|
||||
<div className="absolute inset-0">
|
||||
<div className="hidden lg:block absolute inset-0">
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl"
|
||||
style={{
|
||||
clipPath: 'circle(150% at 0% 50%)',
|
||||
borderTopLeftRadius: '0',
|
||||
borderBottomLeftRadius: '0',
|
||||
borderTopRightRadius: '9999px',
|
||||
borderBottomRightRadius: '9999px'
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:hidden absolute inset-0">
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl"
|
||||
style={{
|
||||
clipPath: 'ellipse(150% 100% at 50% 0%)',
|
||||
borderBottomLeftRadius: '9999px',
|
||||
borderBottomRightRadius: '9999px'
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-white/10 via-transparent to-white/5"></div>
|
||||
<div className="absolute inset-0 border-2 border-white/20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute top-1/4 -left-16 w-64 h-64 bg-white/10 rounded-full backdrop-blur-md"></div>
|
||||
<div className="absolute bottom-1/3 -left-8 w-48 h-48 bg-purple-400/20 rounded-full backdrop-blur-lg"></div>
|
||||
<div className="absolute top-1/2 right-1/4 w-32 h-32 bg-indigo-400/15 rounded-full backdrop-blur-md animate-pulse"></div>
|
||||
</div>
|
||||
<div className="absolute top-0 left-0 w-32 h-full bg-gradient-to-r from-white/5 to-transparent"></div>
|
||||
</div>
|
||||
<div className="relative z-20 text-white p-8 md:p-12 lg:p-16 max-w-2xl mx-auto lg:mr-16 lg:ml-auto">
|
||||
<div className="space-y-8 lg:space-y-10">
|
||||
<div className="relative">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<span className="text-sm font-semibold tracking-widest text-white" >خلاصة أعمالنا </span>
|
||||
<Sparkles className="w-6 h-6 text-[#57acd9]" />
|
||||
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4]">
|
||||
خدماتنا
|
||||
</h1>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl">
|
||||
خبرات تراكمية واسعة في تنفيذ المشاريع الصناعية والإنشائية
|
||||
</h2>
|
||||
<div className="w-20 h-1 bg-gradient-to-r from-white to[#57acd9] rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-lg md:text-xl text-purple-100/90 font-light leading-relaxed max-w-lg">
|
||||
تنفيذ مشاريع متكاملة مع الشركاء بأعلى معايير الجودة والسلامة
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
export default Services;
|
||||
Reference in New Issue
Block a user