make it static and make data in data.json

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

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/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 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 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} from '../../../data.json'
 
 const Footer = () => {
+  const handleClick = (href:string)=>{
+    window.location.href = href
+  }
   return (
     <div className="Footer">
       <img src="/LOGO.png" 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

@@ -5,7 +5,7 @@ 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'
 // Define an enum for the routes
 
 
@@ -19,12 +19,12 @@ 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 +54,7 @@ const NavBarContent = (
   
   return (
     <nav className='NavBar'>
-      <img src="/LOGO.png" className='scale' alt="" />
+      <img src={Settting.Logo} className='scale' alt="" />
       <ul className='NavBarLinks'>
         {links.map((link) =>{
         

src/pages/DownloadPage.tsx

@@ -1,33 +1,36 @@
-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>
@@ -38,7 +41,7 @@ const DownloadPage = () => {
 
       </div>
 
-      <img className='main scale' src="/Download/1.png" alt="" />
+      <img className='main scale' src={DownloadPageData.img} alt="" />
     </div>
     
   )

src/pages/FeaturesPage.tsx

@@ -1,56 +1,29 @@
 import { useTranslation } from 'react-i18next'
+import {Features} from '../../data.json'
 
 const FeaturesPage = () => {
 
-    const features = [
-        {
-            "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()
+    console.log();
+    
     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 className='scale' src={item[1].img} alt={`${index}`} />
                                 <div>
                                     <h4>
-                                    {t(item.title)}
+                                    {t(item[1].title)}
                                     </h4>
                                     <p>
-                                    {t(item.description)}
+                                    {t(item[1].description)}
                                     </p>
                                 </div>
                             </article>
@@ -58,7 +31,7 @@ const FeaturesPage = () => {
                     })}
 
                 </span>
-                <img className='scale' src="/Features/main.png" alt="" />
+                <img 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 className='shape' src="/shape.svg" alt="" />
-      <img className='slider' src="/Slider.png" alt="" />
+      <img className='slider' src={Home.mainImage} alt="" />
     </div>
   )
 }

src/pages/HowItWork.tsx

@@ -1,50 +1,29 @@
 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 className='scale' src={item[1].img} alt={`${index}`} />
                                 <div>
                                     <h4>
-                                    {t(item.title)}
+                                    {t(item[1].title)}
                                     </h4>
                                     <p>
-                                    {t(item.description)}
+                                    {t(item[1].description)}
                                     </p>
                                 </div>
                             </article>
@@ -53,16 +32,16 @@ const HowItWork = () => {
                 </span>
                 <img 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 src={item[1].img} alt={`${item[1].img}`} />
                                 <div>
                                     <h4>
-                                    {t(item.title)}
+                                    {t(item[1].title)}
                                     </h4>
                                     <p>
-                                    {t(item.description)}
+                                    {t(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 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,11 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaPlayCircle } from 'react-icons/fa';
+import {VideoPage as VideoPageData} from '../../data.json'
-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);
@@ -41,20 +17,20 @@ const VideoPage = () => {
                <img src="/Video/video.png" alt="" />
                 
                 <main>
-                    <h1>منصة التطبيق الأكثر استخداما</h1>
+                    <h1>{VideoPageData.title}</h1>
                     <p>
-                        ابدأ العمل مع ذلك الذي يمكن أن يوفر كل ما تحتاجه لتوليد الوعي وزيادة حركة المرور والتواصل. تحويل القيمة الدقيقة بكفاءة من خلال المحتوى الذي يركز على العميل.
+                        {VideoPageData.description}
                     </p>
-                   <img src="/Video/Play.png" alt="" />
+                   <img 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 src={`/Video/${item[1].img}.png`} alt={`${index}`} />
                         
-                            <h4>{t(item.number)}</h4>
+                            <h4>{t(item[1].number)}</h4>
-                            <p>{t(item.title)}</p>
+                            <p>{t(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);
         }