remove un nesasey data

data.json

@@ -0,0 +1,200 @@
+{
+    "navBar":{
+         "link1":"الرئيسية",
+         "link2":"الميزات",
+         "link3":"كيف يعمل",
+         "link4":"لقطة الشاشة",
+         "link5":"ملاحظة",
+         "link6":"اتصل بنا"   
+    },
+    "Home":{
+        "title":"احصل على تنزيل مجاني لتطبيق",
+        "ApplicationName":"Quiz",
+        "description":"من الحقائق الثابتة منذ فترة طويلة أن القارئ سوف يصرف انتباهه عن المحتوى",
+        "buttonLabel":"تحميل على المتجر",
+        "button1":"جوجل بلاي",
+        "button2":"ابل",
+        "mainImage":"/Home/Main.png"
+    },
+    "Features":{
+        "title":"ميزات غير محدودة",
+        "description":"تقديم قيمة احترافية بموضوعية مع جاهزية متنوعة للويب. نقل خدمة العملاء اللاسلكية بشكل تعاوني دون محفزات موجهة نحو الهدف للتغيير. التعاون.",
+         "mainImage":"/Features/main.png",
+         "Data":{
+            "1":{
+                "img": "/Features/1.png",
+                "title": "دعم ودود عبر الإنترنت",
+                "description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
+            },
+            "2":{
+                "img": "/Features/2.png",
+                "title": "ميزات غير محدودة",
+                "description": "استمتع بإمكانيات غير محدودة لتخصيص تجربتك"
+            },
+           "3": {
+                "img": "/Features/3.png",
+                "title": "مكون معياري وقابل للتبديل",
+                "description": "تبديل بين التخطيطات وحتى العروض التوضيحية بسهولة"
+            },
+           "4": {
+                "img": "/Features/4.png",
+                "title": "دقة عالية",
+                "description": "احصل على جودة صور وفيديو عالية الدقة"
+            },
+           "5": {
+                "img": "/Features/5.png",
+                "title": "مشاركة اجتماعية",
+                "description": "سهولة مشاركة المحتوى عبر منصات التواصل الاجتماعي"
+            },
+            "6":{
+                "img": "/Features/6.png",
+                "title": "استخدم على أي جهاز",
+                "description": "توافق مع جميع الأجهزة لضمان تجربة سلسة"
+            }
+         }
+    },
+    "HowItWork":{
+        "title":"كيف يعمل؟ ",
+        "description":" استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل.",
+         "mainImage":"/HowItWorks/main.png",
+         "Data":{
+            "1":{
+                "img": "/HowItWorks/1.png",
+                "title": "دعم ودود عبر الإنترنت",
+                "description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
+            },
+           "2": {
+                "img": "/HowItWorks/2.png",
+                "title": "دعم ودود عبر الإنترنت",
+                "description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
+            },
+           "3": {
+                "img": "/HowItWorks/3.png",
+                "title": "دعم ودود عبر الإنترنت",
+                "description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
+            },
+          "4":  {
+                "img": "/HowItWorks/4.png",
+                "title": "دعم ودود عبر الإنترنت",
+                "description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
+            }
+         }
+    },
+    "VideoPage":{
+        "title":"منصة التطبيق الأكثر استخداما",
+        "description":"ابدأ العمل مع ذلك الذي يمكن أن يوفر كل ما تحتاجه لتوليد الوعي وزيادة حركة المرور والتواصل. تحويل القيمة الدقيقة بكفاءة من خلال المحتوى الذي يركز على العميل.",
+         "mainImage":"/Video/Play.png",
+         "Data":{
+            "1":{
+                "img": "1",
+                "title": "التصميم الإبداعي",
+                "number": "1111"
+            },
+            "2":{
+                "img": "2",
+                "title": "التصميم الإبداعي",
+                "number": "2222"
+            },
+            "3":{
+                "img": "3",
+                "title": "التصميم الإبداعي",
+                "number": "3333"
+            },
+            "4":{
+                "img": "4",
+                "title": "التصميم الإبداعي",
+                "number": "4444"
+            }
+         }
+    },
+    "ScreenShoot":{
+        "title":"لقطات شاشة التطبيق",
+        "description":"استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل",
+         "Data":[
+            "ScreenShoot/1.png",
+            "ScreenShoot/1.png",
+            "ScreenShoot/1.png",
+            "ScreenShoot/1.png",
+            "ScreenShoot/1.png",
+            "ScreenShoot/1.png",
+            "ScreenShoot/1.png",
+            "ScreenShoot/1.png",
+            "ScreenShoot/1.png",
+            "ScreenShoot/1.png",
+            "ScreenShoot/1.png"
+         ]
+    },
+    "NotePage":{
+        "title":"ماذا يقول عملاؤنا عن ذاكر",
+        "description":" استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل.",
+        "Data":{
+            "1":{
+                "description":"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
+                "rate":4,
+                "img":"/Note/1.png",
+                "name":"إليسا اسكندر"
+    
+            },
+           "2":{
+                "description":"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
+                "rate":4,
+                "img":"/Note/1.png",
+                "name":"إليسا اسكندر"
+    
+            },
+           "3":{
+                "description":"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
+                "rate":4,
+                "img":"/Note/1.png",
+                "name":"إليسا اسكندر"
+    
+            }
+        }
+    },
+    "DownloadPage":{
+        "title":"متوفر الآن على",
+        "description":"ابدأ العمل مع ذلك الذي يمكن أن يوفر كل ما تحتاجه لتوليد الوعي وزيادة حركة المرور والتواصل. تحويل القيمة الدقيقة بكفاءة من خلال المحتوى الذي يركز على العميل",
+        "buttonLabel":"تحميل على المتجر",
+        "button1":"جوجل بلاي",
+        "button2":"المتجر",
+        "img":"/Download/1.png"
+    },
+    "ContactPage":{
+        "title":"تواصل معنا",
+        "description":"من السهل جدا الاتصال بنا. ما عليك سوى استخدام نموذج الاتصال أو زيارتنا  في المكتب. ابتكار التكنولوجيا التنافسية ديناميكيا بعد مجموعة موسعة من القيادة",
+        "Data":{
+           "1": {
+                "title": "المكتب الرئيسي",
+                "image": "/contact/1.png",
+                "value": "121 King St , ملبورن VIC 3000, أستراليا"
+            },
+            "2":{
+                "title": "المكتب الرئيسي",
+                "image": "/contact/2.png",
+                "value": "121 King St , ملبورن VIC 3000, أستراليا"
+            },
+            "3":{
+                "title": "المكتب الرئيسي",
+                "image": "/contact/3.png",
+                "value": "121 King St , ملبورن VIC 3000, أستراليا"
+            }
+        }
+    },
+    "Footer":{
+        "title":"اشترك في نشرتنا الإخبارية",
+        "description":"نحن فريق من غير المتشائمين الذين يهتمون حقا بعملنا",
+        "privacy":"© زاكر 2024.جميع الحقوق محفوظة"
+        
+    },
+    "Links":{
+        "google_play_link":"/",
+        "apple_store_link":"/",
+        "facebook":"/",
+        "telegram":"/",
+        "instagram":"/",
+        "twitter":"/"
+    },
+    "Setting":{
+        "Logo":"/Setting/LOGO.png"
+    }
+}

package.json

@@ -11,21 +11,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.53.1",
     "antd": "^5.21.1",
     "axios": "^1.7.5",
     "formik": "^2.4.6",
-    "framer-motion": "^11.5.0",
-    "i18next": "^23.14.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^14.1.3",
     "react-icons": "^5.3.0",
     "react-player": "^2.16.0",
-    "react-router-dom": "^6.26.1",
+    "swiper": "^11.1.14"
-    "react-transition-group": "^4.4.5",
-    "swiper": "^11.1.14",
-    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@types/node": "^22.5.1",

pnpm-lock.yaml

@@ -8,9 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@tanstack/react-query':
-        specifier: ^5.53.1
-        version: 5.53.3(react@18.3.1)
       antd:
         specifier: ^5.21.1
         version: 5.21.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -20,39 +17,21 @@ importers:
       formik:
         specifier: ^2.4.6
         version: 2.4.6(react@18.3.1)
-      framer-motion:
-        specifier: ^11.5.0
-        version: 11.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      i18next:
-        specifier: ^23.14.0
-        version: 23.14.0
       react:
         specifier: ^18.3.1
         version: 18.3.1
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
-      react-i18next:
-        specifier: ^14.1.3
-        version: 14.1.3(i18next@23.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-icons:
         specifier: ^5.3.0
         version: 5.3.0(react@18.3.1)
       react-player:
         specifier: ^2.16.0
         version: 2.16.0(react@18.3.1)
-      react-router-dom:
-        specifier: ^6.26.1
-        version: 6.26.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-transition-group:
-        specifier: ^4.4.5
-        version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       swiper:
         specifier: ^11.1.14
         version: 11.1.14
-      zustand:
-        specifier: ^4.5.5
-        version: 4.5.5(@types/react@18.3.5)(react@18.3.1)
     devDependencies:
       '@types/node':
         specifier: ^22.5.1
@@ -486,10 +465,6 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
 
-  '@remix-run/router@1.19.1':
-    resolution: {integrity: sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==}
-    engines: {node: '>=14.0.0'}
-
   '@rollup/rollup-android-arm-eabi@4.21.2':
     resolution: {integrity: sha512-fSuPrt0ZO8uXeS+xP3b+yYTCBUd05MoSp2N/MFOgjhhUhMmchXlpTQrTpI8T+YAwAQuK7MafsCOxW7VrPMrJcg==}
     cpu: [arm]
@@ -570,14 +545,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@tanstack/query-core@5.53.3':
-    resolution: {integrity: sha512-ZfjAgd7NpqDx0e4aYBt7EmS2enbulPrJwowTy+mayRE93WUUH+sIYHun1TdRjpGwDPMNNZ5D6goh7n3CwoO+HA==}
-
-  '@tanstack/react-query@5.53.3':
-    resolution: {integrity: sha512-286mN/91CeM7vC6CZFLKYDHSw+WyMX6ekIvzoTbpM4xyPb99VSyCKPLyPgaOatKqYm6ooMBquSq9NGRdKgsJfg==}
-    peerDependencies:
-      react: ^18 || ^19
-
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -777,9 +744,6 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
-  dom-helpers@5.2.1:
-    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
-
   dotenv-expand@5.1.0:
     resolution: {integrity: sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==}
 
@@ -892,20 +856,6 @@ packages:
     peerDependencies:
       react: '>=16.8.0'
 
-  framer-motion@11.5.0:
-    resolution: {integrity: sha512-Br0sk5vVf4/dCwK+K7keLzE67ZSoQO7OeAVSQRY72mA4GEjPYJgedAaRzXHkq/ilB87Z1YiJLjhvk5+U4Kz8Yg==}
-    peerDependencies:
-      '@emotion/is-prop-valid': '*'
-      react: ^18.0.0
-      react-dom: ^18.0.0
-    peerDependenciesMeta:
-      '@emotion/is-prop-valid':
-        optional: true
-      react:
-        optional: true
-      react-dom:
-        optional: true
-
   fs-extra@10.1.0:
     resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
     engines: {node: '>=12'}
@@ -963,12 +913,6 @@ packages:
   hoist-non-react-statics@3.3.2:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
 
-  html-parse-stringify@3.0.1:
-    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
-
-  i18next@23.14.0:
-    resolution: {integrity: sha512-Y5GL4OdA8IU2geRrt2+Uc1iIhsjICdHZzT9tNwQ3TVqdNzgxHToGCKf/TPRP80vTCAP6svg2WbbJL+Gx5MFQVA==}
-
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -1432,19 +1376,6 @@ packages:
   react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
-  react-i18next@14.1.3:
-    resolution: {integrity: sha512-wZnpfunU6UIAiJ+bxwOiTmBOAaB14ha97MjOEnLGac2RJ+h/maIYXZuTHlmyqQVX1UVHmU1YDTQ5vxLmwfXTjw==}
-    peerDependencies:
-      i18next: '>= 23.2.3'
-      react: '>= 16.8.0'
-      react-dom: '*'
-      react-native: '*'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-      react-native:
-        optional: true
-
   react-icons@5.3.0:
     resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==}
     peerDependencies:
@@ -1465,25 +1396,6 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
-  react-router-dom@6.26.1:
-    resolution: {integrity: sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      react: '>=16.8'
-      react-dom: '>=16.8'
-
-  react-router@6.26.1:
-    resolution: {integrity: sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      react: '>=16.8'
-
-  react-transition-group@4.4.5:
-    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
-    peerDependencies:
-      react: '>=16.6.0'
-      react-dom: '>=16.6.0'
-
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -1647,11 +1559,6 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  use-sync-external-store@1.2.2:
-    resolution: {integrity: sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-
   vite-plugin-compression@0.5.1:
     resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
     peerDependencies:
@@ -1691,10 +1598,6 @@ packages:
       terser:
         optional: true
 
-  void-elements@3.1.0:
-    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
-    engines: {node: '>=0.10.0'}
-
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -1730,21 +1633,6 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  zustand@4.5.5:
-    resolution: {integrity: sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==}
-    engines: {node: '>=12.7.0'}
-    peerDependencies:
-      '@types/react': '>=16.8'
-      immer: '>=9.0.6'
-      react: '>=16.8'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      immer:
-        optional: true
-      react:
-        optional: true
-
 snapshots:
 
   '@ampproject/remapping@2.3.0':
@@ -2137,8 +2025,6 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@remix-run/router@1.19.1': {}
-
   '@rollup/rollup-android-arm-eabi@4.21.2':
     optional: true
 
@@ -2187,13 +2073,6 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.21.2':
     optional: true
 
-  '@tanstack/query-core@5.53.3': {}
-
-  '@tanstack/react-query@5.53.3(react@18.3.1)':
-    dependencies:
-      '@tanstack/query-core': 5.53.3
-      react: 18.3.1
-
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.25.6
@@ -2459,11 +2338,6 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
-  dom-helpers@5.2.1:
-    dependencies:
-      '@babel/runtime': 7.25.6
-      csstype: 3.1.3
-
   dotenv-expand@5.1.0: {}
 
   dotenv@8.2.0: {}
@@ -2623,13 +2497,6 @@ snapshots:
       tiny-warning: 1.0.3
       tslib: 2.7.0
 
-  framer-motion@11.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      tslib: 2.7.0
-    optionalDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   fs-extra@10.1.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -2680,14 +2547,6 @@ snapshots:
     dependencies:
       react-is: 16.13.1
 
-  html-parse-stringify@3.0.1:
-    dependencies:
-      void-elements: 3.1.0
-
-  i18next@23.14.0:
-    dependencies:
-      '@babel/runtime': 7.25.6
-
   ignore@5.3.2: {}
 
   immutable@4.3.7: {}
@@ -3201,15 +3060,6 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
-  react-i18next@14.1.3(i18next@23.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      '@babel/runtime': 7.25.6
-      html-parse-stringify: 3.0.1
-      i18next: 23.14.0
-      react: 18.3.1
-    optionalDependencies:
-      react-dom: 18.3.1(react@18.3.1)
-
   react-icons@5.3.0(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -3229,27 +3079,6 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
-  react-router-dom@6.26.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      '@remix-run/router': 1.19.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-router: 6.26.1(react@18.3.1)
-
-  react-router@6.26.1(react@18.3.1):
-    dependencies:
-      '@remix-run/router': 1.19.1
-      react: 18.3.1
-
-  react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      '@babel/runtime': 7.25.6
-      dom-helpers: 5.2.1
-      loose-envify: 1.4.0
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -3397,10 +3226,6 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  use-sync-external-store@1.2.2(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-
   vite-plugin-compression@0.5.1(vite@5.4.2(@types/node@22.5.2)(sass@1.77.8)):
     dependencies:
       chalk: 4.1.2
@@ -3425,8 +3250,6 @@ snapshots:
       fsevents: 2.3.3
       sass: 1.77.8
 
-  void-elements@3.1.0: {}
-
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -3458,10 +3281,3 @@ snapshots:
       yargs-parser: 21.1.1
 
   yocto-queue@0.1.0: {}
-
-  zustand@4.5.5(@types/react@18.3.5)(react@18.3.1):
-    dependencies:
-      use-sync-external-store: 1.2.2(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.5
-      react: 18.3.1

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.tsx

@@ -6,14 +6,11 @@ import HowItWork from './pages/HowItWork';
 import NotePage from './pages/NotePage';
 import ScreenShoot from './pages/ScreenShoot';
 import VideoPage from './pages/VideoPage';
-import ProviderContainer from './ProviderContainer';
 import ContactPage from './pages/ContactPage';
 import './styles/App/index.scss';
 const App = () => {
 
   return (
-    <ProviderContainer>
-      {/* <Routes /> */}
       <Layout>
             <HomePage />
             <FeaturesPage/>
@@ -24,7 +21,6 @@ const App = () => {
             <DownloadPage/>
             <ContactPage/>
           </Layout>
-    </ProviderContainer>
   );
 };
 

src/Routes.tsx

@@ -1,32 +1,9 @@
-import { lazy, Suspense } from 'react';
-import { Route, Routes as RoutesContainer } from 'react-router-dom';
 import './styles/App/index.scss';
-import SpinContainer from './components/layout/SpinContainer';
 import HomePage from './pages/HomePage';
-import Layout from './components/layout/Layout';
-import { RoutesEnums } from './enums/RoutesEnums';
-const Page404 = lazy(() => import('./components/layout/NotFoundPage'));
 
 const Routes = () => {
   return (
-    <RoutesContainer>
+    <HomePage />
-      <Route
-        path={RoutesEnums.HOME}
-        element={
-          <Layout>
-            <HomePage />
-          </Layout>
-        }
-      />
-      <Route
-        path={'/*'}
-        element={
-          <Suspense fallback={<SpinContainer />}>
-            <Page404 />
-          </Suspense>
-        }
-      />
-    </RoutesContainer>
   );
 };
 

src/components/Contact/Left.tsx

@@ -1,38 +1,23 @@
 import React from 'react'
+import {ContactPage as ContactPageData} from '../../../data.json'
 
 const Left = () => {
-    const Left = [
+
-        {
-            title: "المكتب الرئيسي",
-            image: "/contact/1.png",
-            value: "121 King St , ملبورن VIC 3000, أستراليا"
-        },
-        {
-            title: "المكتب الرئيسي",
-            image: "/contact/2.png",
-            value: "121 King St , ملبورن VIC 3000, أستراليا"
-        },
-        {
-            title: "المكتب الرئيسي",
-            image: "/contact/3.png",
-            value: "121 King St , ملبورن VIC 3000, أستراليا"
-        }
-    ]
     return (
         <div className='Left'>
-            <h1> تواصل معنا </h1>
+            <h1> {ContactPageData.title} </h1>
             <p>
-            من السهل جدا الاتصال بنا. ما عليك سوى استخدام نموذج الاتصال أو زيارتنا  في المكتب. ابتكار التكنولوجيا التنافسية ديناميكيا بعد مجموعة موسعة من القيادة.
+            {ContactPageData.description}
             </p>
             <div>
-                {Left?.map((item, index) => {
+                {Object.entries(ContactPageData.Data)?.map((item, index) => {
                     return (
                         <span key={index}>
                             <div>
-                                <img src={item.image} alt="" />
+                                <img loading="lazy" src={item[1].image} alt="" />
-                                <h6> {item.title} </h6>
+                                <h6> {item[1].title} </h6>
                             </div>
-                            <p> {item.value} </p>
+                            <p> {item[1].value} </p>
                         </span>
                     )
                 })}

src/components/SwiperScreenShoot.tsx

@@ -6,6 +6,7 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/scrollbar';
+import {ScreenShoot as ScreenShootData} from '../../data.json'
 
 const SwipeScreenShoot = () => {
     const SwipeScreenShoot = [
@@ -54,11 +55,14 @@ const SwipeScreenShoot = () => {
                     },
                 }}
             >
-                {SwipeScreenShoot.map((item, index) => (
+                {ScreenShootData.Data.map((item, index) => {
-                    <SwiperSlide key={index}>
+                    
-                        <img src={item.image} alt={`Screenshot ${index + 1}`} />
+                    return (
-                    </SwiperSlide>
+                        <SwiperSlide key={index}>
-                ))}
+                            <img loading="lazy" src={item} alt={`Screenshot ${index + 1}`} />
+                        </SwiperSlide>
+                    )
+                })}
             </Swiper>
         </div>
     );

src/components/layout/Footer.tsx

@@ -1,23 +1,27 @@
 import { Input } from "antd";
 import { FaFacebook, FaInstagram, FaTelegram, FaTwitter } from "react-icons/fa";
+import {Footer as FooterData,Links,Setting} from '../../../data.json'
 
 const Footer = () => {
+  const handleClick = (href:string)=>{
+    window.location.href = href
+  }
   return (
     <div className="Footer">
-      <img src="/LOGO.png" alt="logo" />
+      <img loading="lazy" src={Setting.Logo} alt="logo" />
       <div>
-        <FaTelegram/>
+        <FaTelegram onClick={()=>handleClick(Links.telegram)}/>
-        <FaFacebook/>
+        <FaFacebook onClick={()=>handleClick(Links.facebook)} />
-        <FaInstagram/>
+        <FaInstagram onClick={()=>handleClick(Links.instagram)} />
-        <FaTwitter/>
+        <FaTwitter onClick={()=>handleClick(Links.twitter)} />
       </div>
       <p>
-      © زاكر 2024.جميع الحقوق محفوظة
+     {FooterData.privacy}
       </p>
       <span className="FooterHeader">
           <span>
-            <h1>اشترك في نشرتنا الإخبارية</h1>
+            <h1>{FooterData.title}</h1>
-            <p>نحن فريق من غير المتشائمين الذين يهتمون حقا بعملنا.</p>
+            <p>{FooterData.description}</p>
           </span>
           <div>
             <Input placeholder="أدخل بريدك الإلكتروني" />

src/components/layout/NavBar.tsx

@@ -1,11 +1,10 @@
 // NavBar.tsx
 import React, { useState } from 'react';
 import { RoutesEnums } from '../../enums/RoutesEnums';
-import { useTranslation } from 'react-i18next';
 import { MdLanguage } from "react-icons/md";
 import { FaEllipsis } from 'react-icons/fa6';
 import { Popover } from 'antd';
-
+import {navBar as navBarData,Setting} from '../../../data.json'
 // Define an enum for the routes
 
 
@@ -17,14 +16,13 @@ interface NavLink {
 
 const NavBar: React.FC = () => {
   // Define an array of link objects using the RoutesEnums
-  const [t] = useTranslation()
   const links: NavLink[] = [
-    { path: RoutesEnums.HOME, label: t('home') },
+    { path: RoutesEnums.HOME, label: navBarData.link1 },
-    { path: RoutesEnums.FEATURES, label: t('features') },
+    { path: RoutesEnums.FEATURES, label: navBarData.link2 },
-    { path: RoutesEnums.HOW_IT_WORK, label: t('how_it_work') },
+    { path: RoutesEnums.HOW_IT_WORK, label: navBarData.link3},
-    { path: RoutesEnums.SCREEN_SHOOT, label: t('screen_shoot') },
+    { path: RoutesEnums.SCREEN_SHOOT, label: navBarData.link4 },
-    { path: RoutesEnums.NOTE, label: t('note') },
+    { path: RoutesEnums.NOTE, label:navBarData.link5 },
-    { path: RoutesEnums.CONTACT, label: t('contact_us') },
+    { path: RoutesEnums.CONTACT, label: navBarData.link6 },
   ];
   const [Open, setOpen] = useState(false)
   const handleToggle = ()=>{
@@ -54,7 +52,7 @@ const NavBarContent = (
   
   return (
     <nav className='NavBar'>
-      <img src="/LOGO.png" className='scale' alt="" />
+      <img loading="lazy" src={Setting.Logo} className='scale' alt="" />
       <ul className='NavBarLinks'>
         {links.map((link) =>{
         

src/components/layout/NotFoundPage.tsx

@@ -1,21 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-function NotFoundPage() {
-  const navigate = useNavigate();
-  const [t] = useTranslation();
-  const handleNavigate = () => {
-    navigate('/');
-  };
-  return (
-    <div className="notFoundPage">
-      <div className="containerNotFound">
-        <p>404 | {t('This_page_could_not_be_found')}</p>
-        <div>
-          <button onClick={handleNavigate}>{t('home')}</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default NotFoundPage;

src/design-system/FirstLoading.tsx

@@ -41,7 +41,7 @@ const FirstLoading: React.FC<FirstLoadingProps> = ({ seconds,children }) => {
     <>
      <div className={`FirstLoading ${pageUp ? 'PageUp' : ''}`}>
       <div>
-      <img src={Logo} className='Logo' alt="" />
+      <img loading="lazy" src={Logo} className='Logo' alt="" />
       <div className={`Info`}>
         [{currentNumber} %]
       </div>

src/pages/DownloadPage.tsx

@@ -1,44 +1,47 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { BsGooglePlay } from 'react-icons/bs'
 import { FaApple } from 'react-icons/fa'
+import {DownloadPage as DownloadPageData,Links} from '../../data.json'
 
 const DownloadPage = () => {
-    const { t } = useTranslation()
 
+  const handleClick = (href:string)=>{
+    window.location.href = href
+  }
+
+  
   return (
     <div className='DownloadPage'  >
           <main>
-        <h1>متوفر الآن على</h1>
+        <h1> {DownloadPageData.title} </h1>
-        <p>ابدأ العمل مع ذلك الذي يمكن أن يوفر كل ما تحتاجه لتوليد الوعي وزيادة حركة المرور والتواصل. تحويل القيمة الدقيقة بكفاءة من خلال المحتوى الذي يركز على العميل.</p>
+        <p> {DownloadPageData.description} </p>
-        <div>
+        <div >
-          <button>
+          <button onClick={()=>handleClick(Links.google_play_link)}>
             <div>
               <BsGooglePlay />
             </div>
             <div>
-              <h6>{t('download_on')}</h6>
+            <h6>{DownloadPageData.buttonLabel}</h6>
-              <h5>{t('play_store')}</h5>
+            <h5> {DownloadPageData.button1} </h5>
             </div>
           </button>
-          <button>
+          <button onClick={()=>handleClick(Links.apple_store_link)}>
             <div>
               <FaApple />
             </div>
             <div>
-              <h6>{t('available_on')}</h6>
+            <h6>{DownloadPageData.buttonLabel}</h6>
-              <h5>{t('google_play')}</h5>
+            <h5> {DownloadPageData.button2} </h5>
             </div>
           </button>
         </div>
       </main>
 
       <div>
-      <img className='circle'   src="/circle.png" alt="" />
+      <img loading="lazy" className='circle'   src="/Setting/circle.png" alt="" />
 
       </div>
 
-      <img className='main scale' src="/Download/1.png" alt="" />
+      <img loading="lazy" className='main scale' src={DownloadPageData.img} alt="" />
     </div>
     
   )

src/pages/FeaturesPage.tsx

@@ -1,56 +1,27 @@
-import { useTranslation } from 'react-i18next'
+import {Features} from '../../data.json'
 
 const FeaturesPage = () => {
 
-    const features = [
+    console.log();
-        {
+    
-            "img": "1",
-            "title": "Friendly_Online_Support",
-            "description": "Providing_round_the_clock_technical_support_to_assist_you_with_any_inquiries"
-        },
-        {
-            "img": "2",
-            "title": "Unlimited_Features",
-            "description": "Enjoy_limitless_possibilities_to_customize_your_experience"
-        },
-        {
-            "img": "3",
-            "title": "Modular_and_Switchable_Component",
-            "description": "Easily_switch_between_layouts_and_even_demos"
-        },
-        {
-            "img": "4",
-            "title": "High_Resolution",
-            "description": "Get_high_quality_images_and_videos"
-        },
-        {
-            "img": "5",
-            "title": "Social_Sharing",
-            "description": "Easily_share_content_across_social_media_platforms"
-        },
-        {
-            "img": "6",
-            "title": "Use_on_Any_Device",
-            "description": "Compatibility_with_all_devices_for_a_seamless_experience"
-        }
-    ]
-    const [t] = useTranslation()
     return (
         <div className='FeaturesPage' id='features'>
-            <h1> {t("Application_Features")} </h1>
+            <h1> {Features.title} </h1>
-            <p> {t("Providing_professional_value_objectively_with_varied_web_readiness_Collaborative_wireless_customer_service_without_targeted_incentives_for_change_Collaboration")} </p>
+            <p> {Features.description}</p>
             <div>
                 <span>
-                    {features.map((item, index) => {
+                    {Object.entries(Features.Data).map((item, index) => {
+                        console.log(item,"item");
+                        
                         return (
                             <article key={index}>
-                                <img className='scale' src={`/Features/${item.img}.png`} alt={`${index}`} />
+                                <img loading="lazy" className='scale' src={item[1].img} alt={`${index}`} />
                                 <div>
                                     <h4>
-                                    {t(item.title)}
+                                    {item[1].title}
                                     </h4>
                                     <p>
-                                    {t(item.description)}
+                                    {item[1].description}
                                     </p>
                                 </div>
                             </article>
@@ -58,7 +29,7 @@ const FeaturesPage = () => {
                     })}
 
                 </span>
-                <img className='scale' src="/Features/main.png" alt="" />
+                <img loading="lazy" className='scale' src={Features.mainImage} alt="" />
 
             </div>
         </div>

src/pages/HomePage.tsx

@@ -1,39 +1,42 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { BsGooglePlay } from 'react-icons/bs'
 import { FaApple } from 'react-icons/fa'
+import {Home,Links} from '../../data.json'
 
 const HomePage = () => {
-  const { t } = useTranslation()
+
+  const handleClick = (href:string)=>{
+    window.location.href = href
+  }
+
   return (
     <div className='HomePage' id='#'>
       <main>
-        <h1>{t('get_free_download')} <h2>{t('quiz_app')}</h2></h1>
+        <h1>{Home.title} <h2> {Home.ApplicationName} </h2></h1>
-        <p>{t('reader_distracted')}</p>
+        <p>{Home.description}</p>
         <div>
-          <button>
+          <button onClick={()=>handleClick(Links.google_play_link)}>
             <div>
               <BsGooglePlay />
             </div>
-            <div>
+            <div >
-              <h6>{t('download_on')}</h6>
+              <h6>{Home.buttonLabel}</h6>
-              <h5>{t('play_store')}</h5>
+              <h5> {Home.button1} </h5>
             </div>
           </button>
-          <button>
+          <button onClick={()=>handleClick(Links.apple_store_link)}>
             <div>
               <FaApple />
             </div>
-            <div>
+            <div >
-              <h6>{t('available_on')}</h6>
+              <h6>{Home.buttonLabel}</h6>
-              <h5>{t('google_play')}</h5>
+              <h5> {Home.button2} </h5>
             </div>
           </button>
         </div>
       </main>
-      <img className='circle' src="/circle.png" alt="" />
+      <img loading="lazy" className='circle' src="/Setting/circle.png" alt="" />
-      <img className='shape' src="/shape.svg" alt="" />
+      <img loading="lazy" className='shape' src="/Setting/shape.svg" alt="" />
-      <img className='slider' src="/Slider.png" alt="" />
+      <img loading="lazy" className='slider' src={Home.mainImage} alt="" />
     </div>
   )
 }

src/pages/HowItWork.tsx

@@ -1,68 +1,45 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import {HowItWork as HowItWorkData} from '../../data.json'
 
 const HowItWork = () => {
 
-    const HowItWorks = [
-        {
-            "img": "1",
-            "title": "Friendly_Online_Support",
-            "description": "Providing_round_the_clock_technical_support_to_assist_you_with_any_inquiries"
-        },
-        {
-            "img": "2",
-            "title": "Unlimited_Features",
-            "description": "Enjoy_limitless_possibilities_to_customize_your_experience"
-        },
-        {
-            "img": "3",
-            "title": "Modular_and_Switchable_Component",
-            "description": "Easily_switch_between_layouts_and_even_demos"
-        },
-        {
-            "img": "4",
-            "title": "High_Resolution",
-            "description": "Get_high_quality_images_and_videos"
-        },
-    ]
-    const [t] = useTranslation()
 
   return (
     <div className='HowItWork' id='how_it_work'>
-        <h1> كيف يعمل؟ </h1>
+        <h1> {HowItWorkData.title}</h1>
         <p>
-        استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل.
+            {HowItWorkData.description}
         </p>
         <div>
             <span>
-            {HowItWorks.slice(0,2).map((item, index) => {
+            {Object.entries(HowItWorkData.Data).slice(0,2).map((item, index) => {
                         return (
                             <article key={index}>
-                                <img className='scale' src={`/HowItWorks/${item.img}.png`} alt={`${index}`} />
+                                <img loading="lazy" className='scale' src={item[1].img} alt={`${index}`} />
                                 <div>
                                     <h4>
-                                    {t(item.title)}
+                                    {item[1].title}
                                     </h4>
                                     <p>
-                                    {t(item.description)}
+                                    {item[1].description}
                                     </p>
                                 </div>
                             </article>
                         )
                     })}
                 </span>
-                <img className='scale' src="/HowItWorks/main.png" alt="" />
+                <img loading="lazy" className='scale' src="/HowItWorks/main.png" alt="" />
                 <span>
-                {HowItWorks.slice(2,4).map((item, index) => {
+                {Object.entries(HowItWorkData.Data).slice(2,4).map((item, index) => {
                         return (
                             <article key={index}>
-                                <img src={`/HowItWorks/${item.img}.png`} alt={`${index}`} />
+                                <img loading="lazy" src={item[1].img} alt={`${item[1].img}`} />
                                 <div>
                                     <h4>
-                                    {t(item.title)}
+                                    {item[1].title}
                                     </h4>
                                     <p>
-                                    {t(item.description)}
+                                    {item[1].description}
                                     </p>
                                 </div>
                             </article>

src/pages/NotePage.tsx

@@ -1,50 +1,27 @@
 import React from 'react'
 import {  Rate } from 'antd';
+import {NotePage as NotePageData} from '../../data.json'
 
 const NotePage = () => {
-    const Note = [
-        {
-            description:"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
-            rate:4,
-            img:"/Note/1.png",
-            name:"إليسا اسكندر"
-
-        },
-        {
-            description:"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
-            rate:4,
-            img:"/Note/1.png",
-            name:"إليسا اسكندر"
-
-        },
-        {
-            description:"تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
-            rate:4,
-            img:"/Note/1.png",
-            name:"إليسا اسكندر"
-
-        },
-        
-    ]
   return (
     <div className='NotePage' id='note' >
-        <h1> ماذا يقول عملاؤنا عن ذاكر </h1>
+        <h1> {NotePageData.title}  </h1>
         <p>
-        استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل.
+        {NotePageData.description}
         </p>
         <div>
-            {Note.map((item,index:number)=>{
+            {Object.entries(NotePageData.Data).map((item,index:number)=>{
                 return (
             <article key={index}>
                 <div>
                     <p>
-                    {item.description} 
+                    {item[1].description} 
                     </p>
-                    <Rate value={item.rate} />
+                    <Rate value={item[1].rate} />
                 </div>
                 <span>
-                    <img src={item.img} alt="" />
+                    <img loading="lazy" src={item[1].img} alt="" />
-                    <h5> {item.name} </h5>
+                    <h5> {item[1].name} </h5>
                 </span>
             </article>
 

src/pages/ScreenShoot.tsx

@@ -1,13 +1,16 @@
 import React from 'react'
 import SwipeScreenShoot from '../components/SwiperScreenShoot'
 
+import {ScreenShoot as ScreenShootData} from '../../data.json'
+
+
 const ScreenShoot = () => {
   return (
     <div className='ScreenShoot' id='screen_shoot'>
 
-        <h1> لقطات شاشة التطبيق </h1>
+        <h1> {ScreenShootData.title} </h1>
         <p> 
-        استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل.
+        {ScreenShootData.description}
         </p>
 
         <SwipeScreenShoot/>

src/pages/VideoPage.tsx

@@ -1,35 +1,9 @@
 import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import {VideoPage as VideoPageData} from '../../data.json'
-import { FaPlayCircle } from 'react-icons/fa';
-import { PiPlayCircle } from 'react-icons/pi';
-import ReactPlayer from 'react-player';
 
 const VideoPage = () => {
     const [isPlaying, setIsPlaying] = useState(false);
-    const [t] = useTranslation();
 
-    const details = [
-        {
-            "img": "1",
-            "title": "Friendly_Online_Support",
-            "number": "1111"
-        },
-        {
-            "img": "2",
-            "title": "Unlimited_Features",
-            "number": "2222"
-        },
-        {
-            "img": "3",
-            "title": "Modular_and_Switchable_Component",
-            "number": "3333"
-        },
-        {
-            "img": "4",
-            "title": "High_Resolution",
-            "number": "4444"
-        },
-    ];
 
     const handlePlayPause = () => {
         setIsPlaying(!isPlaying);
@@ -38,23 +12,23 @@ const VideoPage = () => {
     return (
         <div className='VideoPage'>
                 
-               <img src="/Video/video.png" alt="" />
+               <img loading="lazy" src="/Video/video.png" alt="" />
                 
                 <main>
-                    <h1>منصة التطبيق الأكثر استخداما</h1>
+                    <h1>{VideoPageData.title}</h1>
                     <p>
-                        ابدأ العمل مع ذلك الذي يمكن أن يوفر كل ما تحتاجه لتوليد الوعي وزيادة حركة المرور والتواصل. تحويل القيمة الدقيقة بكفاءة من خلال المحتوى الذي يركز على العميل.
+                        {VideoPageData.description}
                     </p>
-                   <img src="/Video/Play.png" alt="" />
+                   <img loading="lazy" src={VideoPageData.mainImage} alt="" />
                 </main>
 
             <span>
-                {details.map((item, index) => (
+                {Object.entries(VideoPageData.Data).map((item, index) => (
                     <article key={index}>
-                        <img src={`/Video/${item.img}.png`} alt={`${index}`} />
+                        <img loading="lazy" src={`/Video/${item[1].img}.png`} alt={`${index}`} />
                         
-                            <h4>{t(item.number)}</h4>
+                            <h4>{item[1].number}</h4>
-                            <p>{t(item.title)}</p>
+                            <p>{item[1].title}</p>
                        
                     </article>
                 ))}

src/styles/pages/ContactPage.scss

@@ -11,6 +11,7 @@
         display: flex;
         flex-direction: column;
         gap: 10px;
+     
         .Forms{
             display: flex;
             flex-wrap: wrap;
@@ -50,6 +51,7 @@
         display: flex;
         flex-direction: column;
         gap: 20px;
+        min-width: 40vw;
         p{
             color: var(--text);
         }