remove un nesasey data

data.json

@@ -194,7 +194,7 @@
         "instagram":"/",
         "twitter":"/"
     },
-    "Settting":{
+    "Setting":{
-        "Logo":"/LOGO.png"
+        "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

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/components/Contact/Left.tsx

@@ -14,7 +14,7 @@ const Left = () => {
                     return (
                         <span key={index}>
                             <div>
-                                <img src={item[1].image} alt="" />
+                                <img loading="lazy" src={item[1].image} alt="" />
                                 <h6> {item[1].title} </h6>
                             </div>
                             <p> {item[1].value} </p>

src/components/SwiperScreenShoot.tsx

@@ -59,7 +59,7 @@ const SwipeScreenShoot = () => {
                     
                     return (
                         <SwiperSlide key={index}>
-                            <img src={item} alt={`Screenshot ${index + 1}`} />
+                            <img loading="lazy" src={item} alt={`Screenshot ${index + 1}`} />
                         </SwiperSlide>
                     )
                 })}

src/components/layout/Footer.tsx

@@ -1,6 +1,6 @@
 import { Input } from "antd";
 import { FaFacebook, FaInstagram, FaTelegram, FaTwitter } from "react-icons/fa";
-import {Footer as FooterData,Links} from '../../../data.json'
+import {Footer as FooterData,Links,Setting} from '../../../data.json'
 
 const Footer = () => {
   const handleClick = (href:string)=>{
@@ -8,7 +8,7 @@ const Footer = () => {
   }
   return (
     <div className="Footer">
-      <img src="/LOGO.png" alt="logo" />
+      <img loading="lazy" src={Setting.Logo} alt="logo" />
       <div>
         <FaTelegram onClick={()=>handleClick(Links.telegram)}/>
         <FaFacebook onClick={()=>handleClick(Links.facebook)} />

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,Settting} from '../../../data.json'
+import {navBar as navBarData,Setting} from '../../../data.json'
 // Define an enum for the routes
 
 
@@ -17,7 +16,6 @@ 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: navBarData.link1 },
     { path: RoutesEnums.FEATURES, label: navBarData.link2 },
@@ -54,7 +52,7 @@ const NavBarContent = (
   
   return (
     <nav className='NavBar'>
-      <img src={Settting.Logo} 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

@@ -37,11 +37,11 @@ const DownloadPage = () => {
       </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={DownloadPageData.img} alt="" />
+      <img loading="lazy" className='main scale' src={DownloadPageData.img} alt="" />
     </div>
     
   )

src/pages/FeaturesPage.tsx

@@ -1,9 +1,7 @@
-import { useTranslation } from 'react-i18next'
 import {Features} from '../../data.json'
 
 const FeaturesPage = () => {
 
-    const [t] = useTranslation()
     console.log();
     
     return (
@@ -17,13 +15,13 @@ const FeaturesPage = () => {
                         
                         return (
                             <article key={index}>
-                                <img className='scale' src={item[1].img} alt={`${index}`} />
+                                <img loading="lazy" className='scale' src={item[1].img} alt={`${index}`} />
                                 <div>
                                     <h4>
-                                    {t(item[1].title)}
+                                    {item[1].title}
                                     </h4>
                                     <p>
-                                    {t(item[1].description)}
+                                    {item[1].description}
                                     </p>
                                 </div>
                             </article>
@@ -31,7 +29,7 @@ const FeaturesPage = () => {
                     })}
 
                 </span>
-                <img className='scale' src={Features.mainImage} alt="" />
+                <img loading="lazy" className='scale' src={Features.mainImage} alt="" />
 
             </div>
         </div>

src/pages/HomePage.tsx

@@ -34,9 +34,9 @@ const HomePage = () => {
           </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={Home.mainImage} alt="" />
+      <img loading="lazy" className='slider' src={Home.mainImage} alt="" />
     </div>
   )
 }

src/pages/HowItWork.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 import {HowItWork as HowItWorkData} from '../../data.json'
 
 const HowItWork = () => {
 
-    const [t] = useTranslation()
 
   return (
     <div className='HowItWork' id='how_it_work'>
@@ -17,31 +15,31 @@ const HowItWork = () => {
             {Object.entries(HowItWorkData.Data).slice(0,2).map((item, index) => {
                         return (
                             <article key={index}>
-                                <img className='scale' src={item[1].img} alt={`${index}`} />
+                                <img loading="lazy" className='scale' src={item[1].img} alt={`${index}`} />
                                 <div>
                                     <h4>
-                                    {t(item[1].title)}
+                                    {item[1].title}
                                     </h4>
                                     <p>
-                                    {t(item[1].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>
                 {Object.entries(HowItWorkData.Data).slice(2,4).map((item, index) => {
                         return (
                             <article key={index}>
-                                <img src={item[1].img} alt={`${item[1].img}`} />
+                                <img loading="lazy" src={item[1].img} alt={`${item[1].img}`} />
                                 <div>
                                     <h4>
-                                    {t(item[1].title)}
+                                    {item[1].title}
                                     </h4>
                                     <p>
-                                    {t(item[1].description)}
+                                    {item[1].description}
                                     </p>
                                 </div>
                             </article>

src/pages/NotePage.tsx

@@ -20,7 +20,7 @@ const NotePage = () => {
                     <Rate value={item[1].rate} />
                 </div>
                 <span>
-                    <img src={item[1].img} alt="" />
+                    <img loading="lazy" src={item[1].img} alt="" />
                     <h5> {item[1].name} </h5>
                 </span>
             </article>

src/pages/VideoPage.tsx

@@ -1,10 +1,8 @@
 import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import {VideoPage as VideoPageData} from '../../data.json'
 
 const VideoPage = () => {
     const [isPlaying, setIsPlaying] = useState(false);
-    const [t] = useTranslation();
 
 
     const handlePlayPause = () => {
@@ -14,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>{VideoPageData.title}</h1>
                     <p>
                         {VideoPageData.description}
                     </p>
-                   <img src={VideoPageData.mainImage} alt="" />
+                   <img loading="lazy" src={VideoPageData.mainImage} alt="" />
                 </main>
 
             <span>
                 {Object.entries(VideoPageData.Data).map((item, index) => (
                     <article key={index}>
-                        <img src={`/Video/${item[1].img}.png`} alt={`${index}`} />
+                        <img loading="lazy" src={`/Video/${item[1].img}.png`} alt={`${index}`} />
                         
-                            <h4>{t(item[1].number)}</h4>
+                            <h4>{item[1].number}</h4>
-                            <p>{t(item[1].title)}</p>
+                            <p>{item[1].title}</p>
                        
                     </article>
                 ))}