From 330a0d1ff1dbe7049c662e4f7af0194acd8777cc Mon Sep 17 00:00:00 2001
From: Rahaf <User@DESKTOP-JSF2AL8>
Date: Thu, 8 Jan 2026 21:12:26 +0300
Subject: [PATCH] Added background Added About

---
 package-lock.json                             | 631 +++++++--------
 package.json                                  |  13 +-
 postcss.config.js                             |   2 +-
 src/App.css                                   |  64 +-
 src/App.jsx                                   |  70 +-
 .../BackgroundCanvas/BackgroundCanvas.css     | 121 +++
 .../BackgroundCanvas/BackgroundCanvas.jsx     | 237 ++++++
 src/Components/Nav/Navbar.jsx                 |  67 +-
 src/Components/Sections/About/About.jsx       | 732 ++++++++++++++++--
 src/index.css                                 | 136 +---
 src/main.jsx                                  |  21 +-
 tailwind.config.js                            |  32 +-
 vite.config.js                                |  18 +-
 13 files changed, 1520 insertions(+), 624 deletions(-)
 create mode 100644 src/Components/BackgroundCanvas/BackgroundCanvas.css
 create mode 100644 src/Components/BackgroundCanvas/BackgroundCanvas.jsx

diff --git a/package-lock.json b/package-lock.json
index 13e8a90..1d81c8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@emailjs/browser": "^4.4.1",
-        "@tailwindcss/vite": "^4.1.18",
+        "@heroicons/react": "^2.2.0",
         "aos": "^2.3.4",
+        "clsx": "^2.1.1",
         "framer-motion": "^12.23.26",
         "i18next": "^25.7.3",
         "i18next-browser-languagedetector": "^8.2.0",
@@ -19,11 +20,15 @@
         "react-dom": "^19.2.0",
         "react-i18next": "^16.5.0",
         "react-icons": "^5.5.0",
-        "react-scroll": "^1.9.3"
+        "react-scroll": "^1.9.3",
+        "styled-components": "^6.1.19",
+        "tailwind-merge": "^3.4.0",
+        "three": "^0.182.0",
+        "tweakpane": "^4.0.5",
+        "vanta": "^0.5.24"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
-        "@tailwindcss/postcss": "^4.1.18",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
@@ -33,7 +38,7 @@
         "eslint-plugin-react-refresh": "^0.4.24",
         "globals": "^16.5.0",
         "postcss": "^8.5.6",
-        "tailwindcss": "^3.3.6",
+        "tailwindcss": "^3.4.0",
         "vite": "^7.2.4"
       }
     },
@@ -350,6 +355,27 @@
         "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",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
@@ -357,6 +383,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -373,6 +400,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -389,6 +417,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -405,6 +434,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -421,6 +451,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -437,6 +468,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -453,6 +485,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -469,6 +502,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -485,6 +519,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -501,6 +536,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -517,6 +553,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -533,6 +570,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -549,6 +587,7 @@
       "cpu": [
         "mips64el"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -565,6 +604,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -581,6 +621,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -597,6 +638,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -613,6 +655,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -629,6 +672,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -645,6 +689,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -661,6 +706,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -677,6 +723,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -693,6 +740,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -709,6 +757,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -725,6 +774,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -741,6 +791,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -757,6 +808,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -923,6 +975,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "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",
@@ -979,6 +1040,7 @@
       "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",
@@ -989,6 +1051,7 @@
       "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",
@@ -999,6 +1062,7 @@
       "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"
@@ -1008,12 +1072,14 @@
       "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",
@@ -1072,6 +1138,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1085,6 +1152,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1098,6 +1166,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1111,6 +1180,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1124,6 +1194,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1137,6 +1208,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1150,6 +1222,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1163,6 +1236,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1176,6 +1250,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1189,6 +1264,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1202,6 +1278,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1215,6 +1292,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1228,6 +1306,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1241,6 +1320,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1254,6 +1334,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1267,6 +1348,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1280,6 +1362,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1293,6 +1376,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1306,6 +1390,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1319,6 +1404,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1332,6 +1418,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1345,302 +1432,13 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
-    "node_modules/@tailwindcss/node": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
-      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/remapping": "^2.3.4",
-        "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.6.1",
-        "lightningcss": "1.30.2",
-        "magic-string": "^0.30.21",
-        "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.18"
-      }
-    },
-    "node_modules/@tailwindcss/node/node_modules/tailwindcss": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
-      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "license": "MIT"
-    },
-    "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
-      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      },
-      "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.18",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
-        "@tailwindcss/oxide-darwin-x64": "4.1.18",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
-      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
-      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
-      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
-      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
-      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
-      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
-      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
-      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
-      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
-      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
-      "bundleDependencies": [
-        "@napi-rs/wasm-runtime",
-        "@emnapi/core",
-        "@emnapi/runtime",
-        "@tybys/wasm-util",
-        "@emnapi/wasi-threads",
-        "tslib"
-      ],
-      "cpu": [
-        "wasm32"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/core": "^1.7.1",
-        "@emnapi/runtime": "^1.7.1",
-        "@emnapi/wasi-threads": "^1.1.0",
-        "@napi-rs/wasm-runtime": "^1.1.0",
-        "@tybys/wasm-util": "^0.10.1",
-        "tslib": "^2.4.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
-      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
-      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.18.tgz",
-      "integrity": "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.18",
-        "@tailwindcss/oxide": "4.1.18",
-        "postcss": "^8.4.41",
-        "tailwindcss": "4.1.18"
-      }
-    },
-    "node_modules/@tailwindcss/postcss/node_modules/tailwindcss": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
-      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@tailwindcss/vite": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.18.tgz",
-      "integrity": "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==",
-      "license": "MIT",
-      "dependencies": {
-        "@tailwindcss/node": "4.1.18",
-        "@tailwindcss/oxide": "4.1.18",
-        "tailwindcss": "4.1.18"
-      },
-      "peerDependencies": {
-        "vite": "^5.2.0 || ^6 || ^7"
-      }
-    },
-    "node_modules/@tailwindcss/vite/node_modules/tailwindcss": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
-      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "license": "MIT"
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1690,6 +1488,7 @@
       "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": {
@@ -1719,6 +1518,12 @@
         "@types/react": "^19.2.0"
       }
     },
+    "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",
@@ -2000,6 +1805,15 @@
         "node": ">= 6"
       }
     },
+    "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",
@@ -2082,6 +1896,15 @@
       "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
       "license": "Unlicense"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2141,6 +1964,26 @@
         "node": ">= 8"
       }
     },
+    "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",
@@ -2190,7 +2033,10 @@
       "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"
       }
@@ -2216,23 +2062,11 @@
       "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,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2542,6 +2376,7 @@
       "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"
@@ -2664,6 +2499,7 @@
       "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,
@@ -2720,12 +2556,6 @@
         "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",
@@ -2925,7 +2755,10 @@
       "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"
       }
@@ -3024,7 +2857,10 @@
       "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"
       },
@@ -3056,11 +2892,13 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
         "android"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -3076,11 +2914,13 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -3096,11 +2936,13 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -3116,11 +2958,13 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
         "freebsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -3136,11 +2980,13 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -3156,11 +3002,13 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -3176,11 +3024,13 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -3196,11 +3046,13 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -3216,11 +3068,13 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -3236,11 +3090,13 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -3256,11 +3112,13 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MPL-2.0",
       "optional": true,
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -3352,15 +3210,6 @@
         "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",
@@ -3606,6 +3455,7 @@
       "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"
@@ -3638,6 +3488,7 @@
       "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",
@@ -3799,7 +3650,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
@@ -4023,6 +3873,7 @@
       "version": "4.54.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
       "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -4100,6 +3951,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "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",
@@ -4145,6 +4002,80 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "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",
@@ -4194,10 +4125,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "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.3.6",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
-      "integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
+      "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4242,19 +4183,6 @@
         "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",
@@ -4278,10 +4206,17 @@
         "node": ">=0.8"
       }
     },
+    "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/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",
@@ -4320,6 +4255,15 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tweakpane": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-4.0.5.tgz",
+      "integrity": "sha512-rxEXdSI+ArlG1RyO6FghC4ZUX8JkEfz8F3v1JuteXSV0pEtHJzyo07fcDG+NsJfN5L39kSbCYbB9cBGHyuI/tQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/cocopon"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4390,10 +4334,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vanta": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/vanta/-/vanta-0.5.24.tgz",
+      "integrity": "sha512-fvieEbHy1ZS23zrcX+topzqAgA4Uct1enngOEWLFBgs9TtOf6RDFOYatH7KSVdrABzQDMCQ5myQy+nTSZZwLzg==",
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.27.0",
@@ -4510,7 +4461,7 @@
       "version": "2.8.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
       "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
diff --git a/package.json b/package.json
index 14f4132..e3787e9 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,9 @@
   },
   "dependencies": {
     "@emailjs/browser": "^4.4.1",
-    "@tailwindcss/vite": "^4.1.18",
+    "@heroicons/react": "^2.2.0",
     "aos": "^2.3.4",
+    "clsx": "^2.1.1",
     "framer-motion": "^12.23.26",
     "i18next": "^25.7.3",
     "i18next-browser-languagedetector": "^8.2.0",
@@ -21,11 +22,15 @@
     "react-dom": "^19.2.0",
     "react-i18next": "^16.5.0",
     "react-icons": "^5.5.0",
-    "react-scroll": "^1.9.3"
+    "react-scroll": "^1.9.3",
+    "styled-components": "^6.1.19",
+    "tailwind-merge": "^3.4.0",
+    "three": "^0.182.0",
+    "tweakpane": "^4.0.5",
+    "vanta": "^0.5.24"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@tailwindcss/postcss": "^4.1.18",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
@@ -35,7 +40,7 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "postcss": "^8.5.6",
-    "tailwindcss": "^3.3.6",
+    "tailwindcss": "^3.4.0",
     "vite": "^7.2.4"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 5aa5df0..ea52a08 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -2,5 +2,5 @@ export default {
     plugins: {
         tailwindcss: {},
         autoprefixer: {},
-    },
+    }
 }
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 2b8c343..7217d1e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,26 +1,56 @@
-.App {
-    min-height: 100vh;
-    background-color: white;
-    color: #1e293b;
-    transition: background-color 0.3s ease, color 0.3s ease;
+.min-h-screen.bg-white.dark\:bg-gray-900 {}
+
+.bg-white,
+.bg-gray-50,
+.dark\:bg-gray-800,
+.dark\:bg-gray-900 {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
 }
 
-.dark .App {
-    background-color: #080613;
-    color: #f1f5f9;
+.dark .bg-white,
+.dark .bg-gray-50,
+.dark .dark\:bg-gray-800,
+.dark .dark\:bg-gray-900 {}
+
+.border,
+.border-gray-200,
+.dark\:border-gray-700 {
+    border-color: rgba(var(--border-color), 0.3) !important;
 }
 
-:root {
-    --app-bg: white;
-    --app-text: #1e293b;
+.text-gray-900,
+.dark\:text-white {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
-.dark {
-    --app-bg: #080613;
-    --app-text: #f1f5f9;
+.dark .text-gray-900,
+.dark .dark\:text-white {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
-.App {
-    background-color: var(--app-bg);
-    color: var(--app-text);
+.bg-opacity-95 {
+    backdrop-filter: blur(10px);
+}
+
+.shadow-lg,
+.shadow-xl {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
+}
+
+.dark .shadow-lg,
+.dark .shadow-xl {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
+}
+
+.bg-gradient-to-r,
+.bg-gradient-to-l,
+.bg-gradient-to-t,
+.bg-gradient-to-b {
+    background-blend-mode: overlay;
+}
+
+.fixed.top-0 {
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
 }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index a09f073..a0176cc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "./i18n";
 import Navbar from "./Components/Nav/Navbar";
 import Home from "./Components/Sections/Home/Home";
@@ -7,22 +7,70 @@ import About from "./Components/Sections/About/About";
 import Contact from "./Components/Sections/Contact/Contact";
 import ImagePreloader from "./Components/ImagePreloader";
 import Footer from "./Components/Nav/Footer";
+import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
 import "./App.css";
 
 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);
+    console.log("Canvas position:", canvas.style.position);
+    console.log("Canvas z-index:", canvas.style.zIndex);
+  } else {
+    console.log("Canvas NOT found!");
+  }
+}, [theme]);
+
+  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 (
     <ImagePreloader>
-      <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">
-          <Navbar />
-          <main className="flex-grow">
-            <Home />
-            <Services />
-            <About />
-            <Contact />
-          </main>
-          <Footer />
+      <div className="relative min-h-screen bg-transparent">
+        <BackgroundCanvas theme={theme} />
+        <div className="relative z-10">
+          <div className="min-h-screen bg-transparent">
+            <div className="flex flex-col min-h-screen">
+              <Navbar toggleTheme={toggleTheme} currentTheme={theme} />
+              <main className="flex-grow">
+                {/* <Home /> */}
+                <Services />
+                <About theme={theme} />
+                <Contact />
+              </main>
+              
+              <Footer />
+            </div>
+          </div>
         </div>
       </div>
     </ImagePreloader>
diff --git a/src/Components/BackgroundCanvas/BackgroundCanvas.css b/src/Components/BackgroundCanvas/BackgroundCanvas.css
new file mode 100644
index 0000000..b96339d
--- /dev/null
+++ b/src/Components/BackgroundCanvas/BackgroundCanvas.css
@@ -0,0 +1,121 @@
+html {
+    overflow-x: hidden !important;
+    height: 100% !important;
+}
+
+body {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100% !important;
+    min-height: 100% !important;
+    position: relative !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+}
+
+.background-canvas {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    z-index: -1 !important;
+    pointer-events: none !important;
+    overflow: hidden !important;
+}
+
+::-webkit-scrollbar {
+    width: 0px !important;
+    height: 0px !important;
+    background: transparent !important;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent !important;
+}
+
+::-webkit-scrollbar-thumb {
+    background: transparent !important;
+    border-radius: 0px !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: transparent !important;
+}
+
+* {
+    scrollbar-width: none !important;
+    scrollbar-color: transparent transparent !important;
+}
+
+* {
+    -ms-overflow-style: -ms-autohiding-scrollbar !important;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+main {
+    position: relative !important;
+    z-index: 10 !important;
+    min-height: 100vh !important;
+    width: 100% !important;
+    padding: 20px !important;
+}
+
+nav.fixed {
+    z-index: 50 !important;
+    background: transparent !important;
+}
+
+@media (max-width: 768px) {
+    .background-canvas {
+        opacity: 0.8 !important;
+    }
+    body {
+        -webkit-overflow-scrolling: touch !important;
+        overscroll-behavior-y: contain !important;
+    }
+    * {
+        -webkit-tap-highlight-color: transparent !important;
+    }
+}
+
+.content-container {
+    position: relative !important;
+    z-index: 10 !important;
+    height: 100% !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    -webkit-overflow-scrolling: touch !important;
+}
+
+.scroll-container::-webkit-scrollbar {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.scroll-container:hover::-webkit-scrollbar {
+    opacity: 1;
+}
+
+@supports (-webkit-touch-callout: none) {
+    body {
+        height: -webkit-fill-available !important;
+    }
+    .background-canvas {
+        height: -webkit-fill-available !important;
+    }
+}
+
+.fade-on-scroll {
+    opacity: 1;
+    transition: opacity 0.3s ease;
+}
+
+.fade-on-scroll.hidden {
+    opacity: 0;
+}
\ No newline at end of file
diff --git a/src/Components/BackgroundCanvas/BackgroundCanvas.jsx b/src/Components/BackgroundCanvas/BackgroundCanvas.jsx
new file mode 100644
index 0000000..3cda436
--- /dev/null
+++ b/src/Components/BackgroundCanvas/BackgroundCanvas.jsx
@@ -0,0 +1,237 @@
+import React, { useRef, useEffect, useState } from 'react';
+import './BackgroundCanvas.css';
+
+const BackgroundCanvas = ({ theme = 'light' }) => {
+  const canvasRef = useRef(null);
+  const animationRef = useRef(null);
+  const jointsRef = useRef([]);
+  const cameraRef = useRef(null);
+  const keysRef = useRef(new Array(127).fill(0));
+  const worldRef = useRef({ width: 0, height: 0 });
+  const themeRef = useRef(theme); 
+
+  class Camera {
+    constructor(position, zoom) {
+      this.position = position;
+      this.speed = 3;
+      this.acceleration = { x: 0, y: 0, z: 0 };
+      this.zoom = zoom;
+    }
+  }
+
+  class Joint {
+    constructor(position, vector) {
+      this.position = position;
+      this.vector = vector;
+      this.speed = 0.5;
+      this.w = 2;
+      this.h = 2;
+      this.bone_length = 150;
+    }
+  }
+
+  const generateJoints = (numb, worldWidth, worldHeight) => {
+    const arr = new Array(numb).fill(0);
+    arr.forEach((v, i) => {
+      arr[i] = new Joint(
+        {
+          x: Math.random() * worldWidth,
+          y: Math.random() * worldHeight,
+        },
+        {
+          x: Math.random() * 2 - 1,
+          y: Math.random() * 2 - 1,
+        }
+      );
+    });
+    return arr;
+  };
+
+  const moveJoints = (joints, world) => {
+    joints.forEach((joint) => {
+      joint.position.x += joint.vector.x * joint.speed;
+      joint.position.y += joint.vector.y * joint.speed;
+
+      if (joint.position.x < 0) joint.position.x = world.width;
+      if (joint.position.x > world.width) joint.position.x = 0;
+      if (joint.position.y < 0) joint.position.y = world.height;
+      if (joint.position.y > world.height) joint.position.y = 0;
+    });
+  };
+
+  const drawJoints = (ctx, joints, camera, view, theme) => {
+    const len = joints.length;
+    
+    let lineColor, pointColor, backgroundColor;
+    if (theme === 'dark') {
+      backgroundColor = '#000000'; 
+      lineColor = '#FFFFFF'; 
+      pointColor = '#F5EEE6'; 
+    } else {
+      backgroundColor = '#FFFFFF'; 
+      lineColor = '#131313'; 
+      pointColor = '#041c40'; 
+    }
+    
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, view.width, view.height);
+    
+    for (let i = 0; i < len; i++) {
+      for (let j = i + 1; j < len; j += 3) {
+        const length = Math.hypot(
+          joints[j].position.x - joints[i].position.x,
+          joints[j].position.y - joints[i].position.y
+        );
+        
+        if (length <= joints[i].bone_length) {
+          ctx.beginPath();
+          ctx.strokeStyle = lineColor;
+          ctx.lineWidth = camera.zoom * (30 / length);
+          ctx.moveTo(
+            view.width / 2 + (joints[i].position.x - camera.position.x) * camera.zoom,
+            view.height / 2 + (joints[i].position.y - camera.position.y) * camera.zoom
+          );
+          ctx.lineTo(
+            view.width / 2 + (joints[j].position.x - camera.position.x) * camera.zoom,
+            view.height / 2 + (joints[j].position.y - camera.position.y) * camera.zoom
+          );
+          ctx.stroke();
+          ctx.closePath();
+        }
+      }
+      
+      ctx.fillStyle = pointColor;
+      ctx.fillRect(
+        view.width / 2 + ((joints[i].position.x - camera.position.x) - joints[i].w / 2) * camera.zoom,
+        view.height / 2 + ((joints[i].position.y - camera.position.y) - joints[i].w / 2) * camera.zoom,
+        joints[i].w * camera.zoom,
+        joints[i].h * camera.zoom
+      );
+    }
+  };
+
+  const moveCamera = (camera, keys) => {
+    if (keys[37]) camera.acceleration.x -= camera.speed; 
+    if (keys[38]) camera.acceleration.y -= camera.speed; 
+    if (keys[39]) camera.acceleration.x += camera.speed; 
+    if (keys[40]) camera.acceleration.y += camera.speed; 
+    if (keys[188]) camera.acceleration.z += 0.003;
+    if (keys[190]) camera.acceleration.z -= 0.003; 
+
+    camera.position.x += camera.acceleration.x;
+    camera.position.y += camera.acceleration.y;
+    camera.zoom += camera.acceleration.z;
+
+    camera.acceleration.x *= 0.96;
+    camera.acceleration.y *= 0.96;
+    camera.acceleration.z *= 0.9;
+  };
+
+  const initCanvas = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    const view = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+
+    canvas.width = view.width;
+    canvas.height = view.height;
+
+    worldRef.current = {
+      width: view.width * 2,
+      height: view.height * 2,
+    };
+
+    cameraRef.current = new Camera(
+      {
+        x: worldRef.current.width / 2,
+        y: worldRef.current.height / 2,
+      },
+      1
+    );
+
+    jointsRef.current = generateJoints(300, worldRef.current.width, worldRef.current.height);
+  };
+
+  const animate = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    const view = {
+      width: canvas.width,
+      height: canvas.height,
+    };
+
+    moveCamera(cameraRef.current, keysRef.current);
+    moveJoints(jointsRef.current, worldRef.current);
+    
+    drawJoints(ctx, jointsRef.current, cameraRef.current, view, themeRef.current);
+
+    animationRef.current = requestAnimationFrame(animate);
+  };
+
+  useEffect(() => {
+    themeRef.current = theme;
+  }, [theme]);
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      keysRef.current[e.keyCode] = 1;
+    };
+
+    const handleKeyUp = (e) => {
+      keysRef.current[e.keyCode] = 0;
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+
+      worldRef.current = {
+        width: canvas.width * 2,
+        height: canvas.height * 2,
+      };
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  useEffect(() => {
+    initCanvas();
+    animate();
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []); 
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="background-canvas"
+      aria-hidden="true"
+    />
+  );
+};
+
+export default BackgroundCanvas;
\ No newline at end of file
diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx
index cf1b222..f451e3c 100644
--- a/src/Components/Nav/Navbar.jsx
+++ b/src/Components/Nav/Navbar.jsx
@@ -4,44 +4,15 @@ import { Link } from "react-scroll";
 import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher";
 import "../../index.css";
 
-const Navbar = () => {
+const Navbar = ({ toggleTheme, currentTheme }) => {
   const { t, i18n } = useTranslation();
   const [menuOpen, setMenuOpen] = useState(false);
   const [activeSection, setActiveSection] = useState("home");
-   const [isDarkMode, setIsDarkMode] = useState(false);
-
-  // Initialize dark mode
-  useEffect(() => {
-    const savedTheme = localStorage.getItem("theme");
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    const shouldEnableDarkMode = savedTheme === "dark" || (!savedTheme && prefersDark);
-    
-    setIsDarkMode(shouldEnableDarkMode);
-    if (shouldEnableDarkMode) {
-      document.documentElement.classList.add("dark");
-    }
-  }, []);
 
   const toggleMenu = () => {
     setMenuOpen(!menuOpen);
   };
 
-  // Toggle dark/light mode
-  const toggleDarkMode = () => {
-    const newDarkMode = !isDarkMode;
-    setIsDarkMode(newDarkMode);
-    
-    if (newDarkMode) {
-      document.documentElement.classList.add("dark");
-      localStorage.setItem("theme", "dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-      localStorage.setItem("theme", "light");
-    }
-  };
-
-
-  // Handle scroll to update active section
   useEffect(() => {
     const handleScroll = () => {
       const sections = ["home", "services", "about", "contact"];
@@ -70,7 +41,6 @@ const Navbar = () => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  // Update document direction when language changes
   useEffect(() => {
     if (i18n.language === "ar") {
       document.documentElement.dir = "rtl";
@@ -89,9 +59,8 @@ const Navbar = () => {
   ];
 
   return (
-    <nav className="bg-white/10 backdrop-blur-lg fixed top-0 w-full z-50 shadow h-14">
+    <nav className="navbar-theme fixed top-0 w-full z-50 shadow h-14">
       <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto py-2 px-4">
-        {/* الشعار */}
         <img
           src="src/assets/TPS-logo.png"
           className="h-8 sm:h-10 md:h-12 transition-all duration-300"
@@ -100,19 +69,20 @@ const Navbar = () => {
 
         {/* الجانب الأيمن */}
         <div className="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse relative">
-            <button
-            onClick={toggleDarkMode}
+          {/* زر تبديل الثيم */}
+          <button
+            onClick={toggleTheme}
             type="button"
-            className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 ml-2 transition-colors duration-200"
-            aria-label={isDarkMode ? "Light Mode" : "Dark Mode"}
-            title={isDarkMode ? "Light Mode" : "Dark Mode"}
+            className="icon-button-theme inline-flex items-center p-2 w-10 h-10 justify-center text-sm"
+            aria-label={currentTheme === "dark" ? "الوضع الفاتح" : "الوضع الداكن"}
+            title={currentTheme === "dark" ? "الوضع الفاتح" : "الوضع الداكن"}
           >
-            {isDarkMode ? (
-              <svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+            {currentTheme === "dark" ? (
+              <svg className="w-5 h-5 text-secondary" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
               </svg>
             ) : (
-              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+              <svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
                 <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
               </svg>
             )}
@@ -125,7 +95,7 @@ const Navbar = () => {
           <button
             onClick={toggleMenu}
             type="button"
-            className="inline-flex items-center right--30 p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 ml-2"
+            className="icon-button-theme inline-flex items-center p-2 w-10 h-10 justify-center text-sm md:hidden"
             aria-controls="navbar-menu"
             aria-expanded={menuOpen}
           >
@@ -149,9 +119,10 @@ const Navbar = () => {
           }`}
           id="navbar-menu"
         >
-          <ul className="flex flex-col md:flex-row bg-white dark:bg-gray-900 md:bg-transparent md:dark:bg-transparent p-4 md:p-0 rounded-lg shadow-md md:shadow-none space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0 divide-y divide-gray-200 md:divide-y-0">
+          <ul className="flex flex-col md:flex-row p-4 md:p-0 rounded-lg space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0 divide-y md:divide-y-0"
+              style={{ borderColor: 'var(--border-color)' }}>
             {navItems.map((item) => (
-              <li key={item.key} className="pt-2 md:pt-0">
+              <li key={item.key} className="pt-2 md:pt-0 first:pt-0 md:first:pt-0">
                 <Link
                   to={item.key}
                   smooth
@@ -159,10 +130,8 @@ const Navbar = () => {
                   spy={true}
                   offset={0}
                   onSetActive={() => setActiveSection(item.key)}
-                  className={`block text-center md:inline cursor-pointer text-lg font-semibold transition duration-200 ${
-                    activeSection === item.key
-                      ? "text-yellow-500"
-                      : "text-gray-800 dark:text-white hover:text-yellow-500"
+                  className={`nav-link-theme block text-center md:inline cursor-pointer text-lg px-4 py-2 rounded-lg ${
+                    activeSection === item.key ? "nav-link-active" : ""
                   }`}
                 >
                   {item.label}
@@ -176,4 +145,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file
diff --git a/src/Components/Sections/About/About.jsx b/src/Components/Sections/About/About.jsx
index e63b0dd..b05b274 100644
--- a/src/Components/Sections/About/About.jsx
+++ b/src/Components/Sections/About/About.jsx
@@ -1,72 +1,690 @@
-import React, { useEffect } from "react";
-import { Element } from "react-scroll";
-import { useTranslation } from "react-i18next";
-import AOS from "aos";
-import "aos/dist/aos.css";
-
-const About = () => {
-  const { t } = useTranslation();
-const home10 = "https://i.imgur.com/MW2Sk0y.jpg"; 
+import React, { useState, useRef, useEffect } from "react";
+import { motion } from "framer-motion";
+import {
+  Building,
+  Eye,
+  MessageSquare,
+  Heart,
+  X,
+  Sparkles,
+  Zap,
+  Target,
+  Globe,
+  Shield,
+  ChevronLeft,
+  ArrowDown,
+  ChevronRight
+} from "lucide-react";
+import styled, { keyframes } from "styled-components";
 
 
+const companyInfo = [
+  {
+    id: 1,
+    title: "من نحن",
+    icon: Building,
+    description: `تتمثل غايتنا في تقديم حلول هندسية وتقنية متكاملة تشمل تصميم و تنفيذ وإشراف وإدارة المشاريع الصناعية والخدمية ابتداءً من الدراسات والتخطيط مروراً بالتنفيذ والتركيب وصولاً إلى التشغيل والصيانة، توريد و تركيب المعدات و الآلات و خطوط الإنتاج و قطع الصيانة، تمثيل الشركات و الوكالات و المشاركة في المناقصات و المزايدات مع القطاعين العام و الخاص و ذلك وفق القوانين و الأنظمة المعمول بها`,
+    features: [
+      "تنفيذ الأعمال المدنية والمعمارية و المعدنية و الميكانيكية و الكهربائية ",
+      "التحكم و تصميم و تطوير و تنفيذ الأنظمة و التطبيقات البرمجية و قواعد البيانات حسب متطلبات كل مشروع بما في ذلك أنظمة الأتمتة و التحكم",
+      "تطوير و تنفيذ أنظمة متخصصة لإدارة و تشغيل المنشآت الصناعية و محطات الوقود ",
+      "التفتيش الفني بكل أنواعه",
+    ]
+  },
+  {
+    id: 2,
+    title: "رؤيتنا",
+    icon: Eye,
+    description: `أن نكون الشريك الهندسي التقني الموثوق في تنفيذ و إدارة المشاريع الصناعية والسكنية و النفطية والمساهمة في تطوير البنية التحتية والقطاعات الإنتاجية عبر حلول حديثة ومستدامة.`,
+    features: [
+      "الشريك الهندسي الموثوق",
+      "تنمية البنية التحتية",
+      "حلول مستدامة وحديثة",
+      "الريادة في القطاع الهندسي"
+    ]
+  },
+  {
+    id: 3,
+    title: "رسالتنا",
+    icon: MessageSquare,
+    description: `تقديم خدمات هندسية ودراسات تنفيذية وإشراف متكامل بأعلى معايير الجودة والسلامة، من خلال كوادر مؤهلة وخبرات متخصصة، مع الالتزام بالوقت والتكلفة وتحقيق أعلى قيمة مضافة لعملائنا.`,
+    features: [
+      "أعلى معايير الجودة والسلامة",
+      "الالتزام بالوقت والتكلفة",
+      "فرق عمل متخصصة ومؤهلة",
+      "تحقيق القيمة المضافة للعملاء"
+    ]
+  },
+  {
+    id: 4,
+    title: "قيمنا",
+    icon: Heart,
+    description: `نؤمن بقيم ثابتة توجه أعمالنا وعلاقاتنا مع العملاء والشركاء: الجودة والتميز في كل ما نقدمه، النزاهة المهنية في التعامل، الالتزام بالاستدامة والمسؤولية البيئية والاجتماعية.`,
+    features: [
+      "الجودة الاحترافية",
+      "السلامة المهنية",
+      "الاستدامة والمسؤولية",
+      "التطوير المستمر",
+      "الشفافية و بناء الثقة"
+    ]
+  }
+];
 
-  
-  useEffect(() => {
-    AOS.init({ duration: 1000, once: false });
+// Animations
+const rotating = keyframes`
+  from {
+    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
+      rotateY(0);
+  }
+  to {
+    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
+      rotateY(1turn);
+  }
+`;
 
-    const handleScroll = () => {
-      AOS.refresh();
+const floatAnimation = keyframes`
+  0%, 100% {
+    transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+      translateZ(var(--translateZ)) translateY(0px);
+  }
+  50% {
+    transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+      translateZ(var(--translateZ)) translateY(-10px);
+  }
+`;
+
+const StyledWrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s ease;
+`;
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  z-index: 2;
+`;
+
+const Inner = styled(motion.div)`
+  --quantity: ${props => props.quantity || 4};
+  --w: 250px;
+  --h: 350px;
+  --translateZ: 320px;
+  --rotateX: -8deg;
+  --perspective: 2000px;
+  position: absolute;
+  width: var(--w);
+  height: var(--h);
+  top: 26%;
+  left: calc(50% - (var(--w) / 2));
+  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(${props => props.rotation || 0}deg);
+  transform-style: preserve-3d;
+  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  z-index: 10;
+`;
+
+const Card = styled.div.attrs(props => ({
+  style: {
+    '--index': props['data-index'] || 0,
+  }
+}))`
+  position: absolute;
+  border: 2px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
+  border-radius: 20px;
+  overflow: visible;
+  inset: 0;
+  transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+    translateZ(var(--translateZ));
+  cursor: pointer;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  background: ${props => props.$theme === 'dark' ? '#f5e7c673' : '#f5e7c673'};
+  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'};
+    box-shadow:
+      0 0 30px rgba(4, 28, 64, 0.3),
+      0 0 60px rgba(4, 28, 64, 0.2);
+  }
+
+  ${props => props.$isFront && `
+    transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+      translateZ(calc(var(--translateZ) + 50px)) scale(1.03);
+    border-color:#e06923;
+    box-shadow:
+      0 15px 35px rgba(4, 28, 64, 0.2),
+      0 5px 15px rgba(4, 28, 64, 0.1);
+  `}
+`;
+
+const CardContent = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+  overflow: hidden;
+  border-radius: 18px;
+  transition: all 0.3s ease;
+`;
+
+const CardHeader = styled.div`
+  position: relative;
+  z-index: 2;
+`;
+
+const IconWrapper = styled.div`
+  width: 30px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  transition: all 0.3s ease;
+`;
+
+const CardTitle = styled.h3`
+  font-size: 30px;
+  font-weight: 700;
+  color: #041c40;
+  margin-bottom: 6px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  letter-spacing: -0.5px;
+  text-align: center !important;
+`;
+
+const CardDescription = styled.p`
+  font-size: 14px;
+  line-height: 1.6;
+  color: ${props => props.$theme === 'dark' ? '#131313' : '#131313'};
+  margin-bottom: 6px;
+  display: -webkit-box;
+  -webkit-line-clamp: 8;
+  -webkit-box-orventical: vertical;
+  overflow: hidden;
+  text-align: right;
+  position: relative;
+  flex-grow: 1;
+  opacity: 0.9;
+`;
+
+const ArrowHint = styled(motion.div)`
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  color: #041c40;
+  z-index: 2;
+  opacity: 0.7;
+  transition: all 0.3s ease;
+
+  span {
+    font-size: 11px;
+    color: #041c40;
+    font-weight: 500;
+    opacity: 0;
+    white-space: nowrap;
+    transition: opacity 0.3s ease;
+  }
+
+  svg {
+    animation: bounce 2s infinite;
+    transition: all 0.3s ease;
+    color: #041c40;
+  }
+
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(5px);
+    }
+  }
+
+  &:hover {
+    opacity: 1;
+    span {
+      opacity: 1;
+    }
+    svg {
+      animation: bounce 1s infinite;
+    }
+  }
+`;
+
+const HeaderSection = styled.div`
+  text-align: center;
+  position: absolute;
+  top: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  width: 100%;
+`;
+
+const Title = styled.div`
+  font-size: 42px;
+  text-align: center;
+  font-weight: 800;
+  color: #041c40;
+  margin-bottom: 15px;
+  text-shadow: 0 2px 10px rgba(4, 28, 64, 0.2);
+  letter-spacing: -0.5px;
+`;
+
+const Subtitle = styled.div`
+  font-size: 16px;
+  color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
+  opacity: 0.8;
+  max-width: 600px;
+  margin: 0 auto;
+  font-weight: 300;
+  line-height: 1.5;
+`;
+
+const DetailModal = styled(motion.div)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${props => props.$theme === 'dark' ? 'rgb(49 49 49 / 75%)' : 'rgb(245 238 230 / 65%)'};
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+`;
+
+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)'};
+  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(40px);
+  border-radius: 25px;
+  border: 2px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
+  padding: 12px 20px;
+  position: relative;
+  color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
+`;
+
+const CloseButton = styled(motion.button)`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid rgba(4, 28, 64, 0.3);
+  background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #041c40;
+  z-index: 1001;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(4, 28, 64, 0.1);
+    transform: rotate(90deg);
+    border-color: #041c40;
+  }
+`;
+
+const NavButton = styled(motion.button)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
+  backdrop-filter: blur(10px);
+  border: 1px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
+  z-index: 100;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(4, 28, 64, 0.1);
+    border-color: #041c40;
+    transform: translateY(-50%) scale(1.1);
+    color: #041c40;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+    &:hover {
+      background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
+      transform: translateY(-50%) scale(1);
+      border-color: ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
+      color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
+    }
+  }
+`;
+
+const LeftNavButton = styled(NavButton)`
+  left: 30px;
+`;
+
+const RightNavButton = styled(NavButton)`
+  right: 30px;
+`;
+
+const DotsContainer = styled.div`
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 12px;
+  z-index: 100;
+`;
+
+const Dot = styled.div.attrs(props => ({
+  'data-active': props['data-active'] || 'false'
+}))`
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: ${props => 
+    props['data-active'] === 'true' 
+      ? '#041c40' 
+      : props.$theme === 'dark' 
+        ? 'rgba(224, 105, 35, 0.3)' 
+        : 'rgba(4, 28, 64, 0.3)'
+  };
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: ${props => 
+      props['data-active'] === 'true' 
+        ? '#041c40' 
+        : props.$theme === 'dark' 
+          ? 'rgba(224, 105, 35, 0.5)' 
+          : 'rgba(4, 28, 64, 0.5)'
     };
+    transform: scale(1.2);
+  }
+`;
 
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
+const About = ({ theme = 'light' }) => {
+  const [selectedCard, setSelectedCard] = useState(null);
+  const [rotation, setRotation] = useState(0);
+  const [activeCardIndex, setActiveCardIndex] = useState(0);
+  const innerRef = useRef(null);
+
+  const handleCardClick = (card) => {
+    setSelectedCard(card);
+  };
+
+  const handleCloseModal = () => {
+    setSelectedCard(null);
+  };
+
+  const handleNextCard = () => {
+    const angleStep = 360 / companyInfo.length;
+    setRotation(prev => prev - angleStep);
+    setActiveCardIndex(prev => (prev + 1) % companyInfo.length);
+  };
+
+  const handlePrevCard = () => {
+    const angleStep = 360 / companyInfo.length;
+    setRotation(prev => prev + angleStep);
+    setActiveCardIndex(prev => (prev - 1 + companyInfo.length) % companyInfo.length);
+  };
+
+  const handleDotClick = (index) => {
+    const angleStep = 360 / companyInfo.length;
+    const targetRotation = -index * angleStep;
+    setRotation(targetRotation);
+    setActiveCardIndex(index);
+  };
+
+  const isCardInFront = (index) => {
+    const cardAngle = (index * (360 / companyInfo.length) + rotation) % 360;
+    const normalizedAngle = (cardAngle + 360) % 360;
+    return Math.abs(normalizedAngle) < 30 || Math.abs(normalizedAngle - 360) < 30;
+  };
 
   return (
-    <Element name="about">
-      <section
-        className="w-full h-screen px-4 sm:px-6 lg:px-16 py-12 sm:py-16 text-black font-sans relative overflow-hidden"
-        style={{ direction: "rtl", backgroundColor: "#111827" }}
-      >
-        {/* صورة الخلفية */}
-        <div
-          className="relative w-full sm:w-3/4 mx-auto z-0"
-          data-aos="fade-right"
-          style={{
-            borderRadius: "12px",
-            border: "1px solid #EB8323",
-            boxShadow:
-              "0 0 15px 5px rgba(235, 131, 35, 0.4), 0 0 8px 2px rgba(235, 131, 35, 0.3)",
-          }}
+    <StyledWrapper $theme={theme}>
+      <HeaderSection>
+        <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>
+        </Title>
+        <Subtitle $theme={theme}>
+          <div className="text-lg font-medium lg:text-xl mb-6 max-w-3xl mx-auto">
+            رحلة التميز الهندسي والتقني، هنا حيث تلتقي الخبرة بالابتكار
+          </div>
+        </Subtitle>
+      </HeaderSection>
+      
+      <Wrapper>
+        <LeftNavButton
+          $theme={theme}
+          onClick={handlePrevCard}
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
         >
-          <img
-            src={home10}
-            alt="شخص"
-            className="w-full h-[450px] sm:h-[500px] md:h-[600px] object-cover rounded-lg transition-all duration-300"
-            loading="eager"
-            fetchPriority="high"
-          />
-        </div>
+          <ChevronLeft size={28} />
+        </LeftNavButton>
+        
+        <Inner
+          ref={innerRef}
+          quantity={companyInfo.length}
+          rotation={rotation}
+        >
+          {companyInfo.map((card, index) => {
+            const Icon = card.icon;
+            const isFront = isCardInFront(index);
 
-        {/* مربع النص المتراكب */}
-        <div
-          className="z-10 max-w-full px-4 sm:px-0 -mt-20 sm:mt-0 sm:absolute sm:bottom-10 sm:right-10
-                     bg-white/20 backdrop-blur-md text-black p-6 sm:p-12 rounded-xl shadow-2xl
-                     flex flex-col sm:max-w-md"
-          data-aos="fade-left"
+            return (
+              <Card
+                key={card.id}
+                data-index={index}
+                $theme={theme}
+                $isFront={isFront}
+                onClick={() => isFront && handleCardClick(card)}
+              >
+                <CardContent $theme={theme}>
+                  <CardHeader>
+                    <IconWrapper>
+                      <Icon size={32} style={{ color: '#e06923' }} />
+                    </IconWrapper>
+                    <CardTitle>{card.title}</CardTitle>
+                    <CardDescription $theme={theme}>
+                      {card.description}
+                    </CardDescription>
+                  </CardHeader>
+
+                  <div>
+                    {isFront && (
+                      <ArrowHint style={{ color: '#e06923' }}>
+                        <ArrowDown size={24} style={{ color: '#e06923' }} />
+                        <span style={{ color: '#e06923' }}>إضغط لعرض التفاصيل</span>
+                      </ArrowHint>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </Inner>
+        
+        <RightNavButton
+          $theme={theme}
+          onClick={handleNextCard}
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
         >
-          <h1 className="mb-4 sm:mb-6 text-3xl sm:text-5xl font-extrabold md:text-6xl lg:text-7xl text-center self-center mt-0">
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
-              {t('about.title')}
-            </span>
-          </h1>
-          <p className="text-lg sm:text-2xl leading-relaxed flex-grow text-center">
-            {t('about.description')}
-          </p>
-        </div>
-      </section>
-    </Element>
+          <ChevronRight size={28} />
+        </RightNavButton>
+        
+        <DotsContainer>
+          {companyInfo.map((_, index) => (
+            <Dot
+              key={index}
+              $theme={theme}
+              data-active={index === activeCardIndex ? 'true' : 'false'}
+              onClick={() => handleDotClick(index)}
+            />
+          ))}
+        </DotsContainer>
+      </Wrapper>
+      
+      {selectedCard && (
+        <DetailModal
+          $theme={theme}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={handleCloseModal}
+        >
+          <ModalContent
+            $theme={theme}
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.8, opacity: 0 }}
+            transition={{ type: "spring", damping: 25, stiffness: 200 }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton
+              $theme={theme}
+              onClick={handleCloseModal}
+              whileHover={{ rotate: 90 }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <X size={20} />
+            </CloseButton>
+            
+            <div style={{ gap: '20px', marginBottom: '30px', textAlign:'center' }}>
+              <div>
+                <h2 style={{
+                  fontSize: '36px',
+                  fontWeight: '800',
+                  color: theme === 'dark' ? '#F5EEE6' : '#041c40',
+                  marginBottom: '10px',
+                }}>
+                  {selectedCard.title}
+                </h2>
+              </div>
+            </div>
+            
+            <div style={{ marginBottom: '30px' }}>
+              <p style={{
+                color: theme === 'dark' ? '#F5EEE6' : '#131313',
+                lineHeight: '1.7',
+                fontSize: '16px',
+                textAlign: 'right',
+                padding: '20px',
+                background: 'rgba(4, 28, 64, 0.05)',
+                backdropFilter: 'blur(10px)',
+                borderRadius: '16px',
+                border: '1px solid rgba(4, 28, 64, 0.2)'
+              }}>
+                {selectedCard.description}
+              </p>
+            </div>
+
+            <div style={{ marginBottom: '30px' }}>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '15px' }}>
+                {selectedCard.features.map((feature, idx) => (
+                  <div key={idx} style={{
+                    padding: '18px',
+                    background: 'rgba(4, 28, 64, 0.05)',
+                    backdropFilter: 'blur(15px)',
+                    borderRadius: '15px',
+                    border: '1px solid rgba(4, 28, 64, 0.2)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '15px',
+                    cursor: 'pointer',
+                    transition: 'all 0.3s ease',
+                  }}>
+                    <div style={{
+                      width: '40px',
+                      height: '40px',
+                      borderRadius: '12px',
+                      background: 'rgba(4, 28, 64, 0.1)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      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' }} />}
+                    </div>
+                    <span style={{
+                      color: theme === 'dark' ? '#F5EEE6' : '#131313',
+                      fontSize: '15px',
+                      fontWeight: '500',
+                      flex: 1
+                    }}>
+                      {feature}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </ModalContent>
+        </DetailModal>
+      )}
+    </StyledWrapper>
   );
 };
 
 export default About;
+
+
diff --git a/src/index.css b/src/index.css
index eac21f6..a042806 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,127 +3,33 @@
 @tailwind utilities;
 @layer base {
      :root {
-        --bg-color: #ffffff;
-        --surface-color: #f8fafc;
-        --text-color: #1e293b;
-        --border-color: #e2e8f0;
-        --primary-color: #5761dd;
-        --secondary-color: #3c3c3c;
-        --accent-color: #3639a3;
+        --primary: #041c40;
+        --secondary: #e06923;
+        --tertiary: #313131;
+        --bg-color: #F5EEE6;
+        --text-color: #313131;
+        --border-color: #d1c9be;
     }
     .dark {
-        --bg-color: #080613;
-        --surface-color: #12143b;
-        --text-color: #f1f5f9;
-        --border-color: #3f446a;
-        --primary-color: #3639a3;
-        --secondary-color: #3f446a;
-        --accent-color: #5761dd;
+        --primary: #041c40;
+        --secondary: #e06923;
+        --tertiary: #313131;
+        --bg-color: #313131;
+        --text-color: #F5EEE6;
+        --border-color: #4a4a4a;
     }
     body {
-        @apply bg-theme text-theme transition-colors duration-300;
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
+        width: 100vw;
+        overflow-x: hidden;
         font-family: system-ui, -apple-system, sans-serif;
-        background-color: var(--bg-color);
         color: var(--text-color);
+        transition: background-color 0.3s ease, color 0.3s ease;
     }
-}
-
-@layer components {
-    .theme-container {
-        @apply transition-colors duration-300;
-        background-color: var(--bg-color);
-        color: var(--text-color);
-    }
-    .theme-surface {
-        @apply border rounded-lg p-4 transition-colors duration-300;
-        background-color: var(--surface-color);
-        border-color: var(--border-color);
-        color: var(--text-color);
-    }
-    .theme-card {
-        @apply rounded-xl shadow-lg p-6 transition-all duration-300 hover: shadow-xl;
-        background-color: var(--surface-color);
-        border: 1px solid var(--border-color);
-    }
-    .theme-btn-primary {
-        @apply font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95;
-        background-color: var(--primary-color);
-        color: white;
-    }
-    .theme-btn-primary:hover {
-        background-color: var(--accent-color);
-    }
-    .theme-btn-secondary {
-        @apply font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95;
-        background-color: var(--secondary-color);
-        color: white;
-    }
-    .theme-input {
-        @apply w-full px-4 py-3 rounded-lg focus: ring-2 focus: border-transparent transition-colors duration-200;
-        background-color: var(--surface-color);
-        border: 1px solid var(--border-color);
-        color: var(--text-color);
-    }
-    .theme-input:focus {
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 2px rgba(87, 97, 221, 0.1);
-    }
-    .theme-nav {
-        @apply shadow-md border-b transition-colors duration-300;
-        background-color: var(--surface-color);
-        border-color: var(--border-color);
-    }
-    .theme-nav-link {
-        @apply font-medium transition-colors duration-200 px-4 py-2;
-        color: var(--text-color);
-    }
-    .theme-nav-link:hover {
-        color: var(--primary-color);
-    }
-    .theme-section {
-        @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 transition-colors duration-300;
-        background-color: var(--bg-color);
-    }
-    .theme-section-alt {
-        @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 transition-colors duration-300;
-        background-color: var(--surface-color);
-    }
-    .theme-heading {
-        @apply text-3xl md: text-4xl lg: text-5xl font-bold mb-6;
-        color: var(--text-color);
-    }
-    .theme-subheading {
-        @apply text-xl md: text-2xl mb-8;
-        color: var(--text-color);
-        opacity: 0.8;
-    }
-    .theme-text {
-        @apply leading-relaxed;
-        color: var(--text-color);
-        opacity: 0.9;
-    }
-    .theme-footer {
-        @apply py-8 border-t transition-colors duration-300;
-        background-color: var(--surface-color);
-        border-color: var(--border-color);
-        color: var(--text-color);
-    }
-    .bg-theme {
-        background-color: var(--bg-color);
-    }
-    .text-theme {
-        color: var(--text-color);
-    }
-    .bg-surface {
-        background-color: var(--surface-color);
-    }
-    .border-theme {
-        border-color: var(--border-color);
-    }
-    .bg-primary {
-        background-color: var(--primary-color);
-    }
-    .bg-secondary {
-        background-color: var(--secondary-color);
+    html {
+        scroll-behavior: smooth;
+        overflow-x: hidden;
     }
 }
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..90b57c3 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,15 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+import './App.css';
 
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
+document.documentElement.style.setProperty('--bg-color', '#F5EEE6');
+document.documentElement.style.setProperty('--text-color', '#131313');
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
     <App />
-  </StrictMode>,
-)
+  </React.StrictMode>
+);
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index ab52806..ec3770f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,29 +1,23 @@
-export default {
+module.exports = {
+    darkMode: 'class',
     content: [
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",
     ],
-    darkMode: 'class',
     theme: {
         extend: {
             colors: {
-                theme: {
-                    DEFAULT: 'var(--bg-color)',
-                },
-                surface: {
-                    DEFAULT: 'var(--surface-color)',
-                },
-                border: {
-                    theme: 'var(--border-color)',
-                },
-                primary: {
-                    light: '#5761dd',
-                    DEFAULT: 'var(--primary-color)',
-                    dark: '#3639a3',
-                },
-                secondary: {
-                    DEFAULT: 'var(--secondary-color)',
-                },
+                primary: '#041c40',
+                secondary: '#e06923',
+                'dark-bg': '#313131',
+                'light-bg': '#F5EEE6',
+            },
+            backdropBlur: {
+                'xs': '2px',
+                'sm': '4px',
+                'md': '8px',
+                'lg': '12px',
+                'xl': '20px',
             },
         },
     },
diff --git a/vite.config.js b/vite.config.js
index 8b0f57b..03972ff 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,19 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+    plugins: [react()],
+    css: {
+        postcss: './postcss.config.js',
+    },
+    build: {
+        rollupOptions: {
+            output: {
+                manualChunks: {
+                    'react-vendor': ['react', 'react-dom'],
+                    'animation-vendor': ['three', 'styled-components', 'framer-motion'],
+                }
+            }
+        }
+    }
+})
\ No newline at end of file