format

data.json

@@ -132,21 +132,18 @@
         "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": "إليسا اسكندر"
-    
       }
     }
   },
@@ -183,7 +180,6 @@
     "title": "اشترك في نشرتنا الإخبارية",
     "description": "نحن فريق من غير المتشائمين الذين يهتمون حقا بعملنا",
     "privacy": "© زاكر 2024.جميع الحقوق محفوظة"
-        
   },
   "Links": {
     "google_play_link": "/",

index.html

@@ -4,11 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="manifest" href="/site.webmanifest" />
-    <link
+    <link rel="icon" type="image/webp" href="/ Setting/LOGO.png" />
-      rel="icon"
-      type="image/webp"
-      href="/ Setting/LOGO.png"
-    />
     <meta name="description" content=" description of your web app" />
     <title>Website</title>
   </head>

src/App.tsx

@@ -9,7 +9,6 @@ import VideoPage from './pages/VideoPage';
 import ContactPage from './pages/ContactPage';
 import './styles/App/index.scss';
 const App = () => {
-
   return (
     <Layout>
       <HomePage />

src/Routes.tsx

@@ -2,9 +2,7 @@ import './styles/App/index.scss';
 import HomePage from './pages/HomePage';
 
 const Routes = () => {
-  return (
+  return <HomePage />;
-    <HomePage />
-  );
 };
 
 export default Routes;

src/components/Contact/Left.tsx

@@ -1,13 +1,10 @@
-import {ContactPage as ContactPageData} from '../../../data.json'
+import { ContactPage as ContactPageData } from '../../../data.json';
 
 const Left = () => {
-
   return (
-        <div className='Left'>
+    <div className="Left">
       <h1> {ContactPageData.title} </h1>
-            <p>
+      <p>{ContactPageData.description}</p>
-                {ContactPageData.description}
-            </p>
       <div>
         {Object.entries(ContactPageData.Data)?.map((item, index) => {
           return (
@@ -18,13 +15,11 @@ const Left = () => {
               </div>
               <p> {item[1].value} </p>
             </span>
-                    )
+          );
         })}
-
       </div>
     </div>
+  );
+};
 
-    )
+export default Left;
-}
-
-export default Left

src/components/Contact/Right.tsx

@@ -1,32 +1,27 @@
-import { Form, Formik } from 'formik'
+import { Form, Formik } from 'formik';
-import React from 'react'
+import React from 'react';
-import InputField from '../Field/InputField'
+import InputField from '../Field/InputField';
-import TextAreaField from '../Field/TextAreaField'
+import TextAreaField from '../Field/TextAreaField';
 
 const Right = () => {
-  const handleSubmit = ()=>{
+  const handleSubmit = () => {};
-
-  }
   return (
-    <div className='Right'>
+    <div className="Right">
       <h1>تواصل معنا بسرعة</h1>
       <Formik initialValues={handleSubmit} onSubmit={handleSubmit}>
         <Form>
-          <div className='Forms'>
+          <div className="Forms">
-            <InputField name='name' placeholder='أدخل الاسم' />
+            <InputField name="name" placeholder="أدخل الاسم" />
-            <InputField name='email' placeholder='أدخل البريد الإلكتروني' />
+            <InputField name="email" placeholder="أدخل البريد الإلكتروني" />
-            <InputField name='number' placeholder='هاتفك' />
+            <InputField name="number" placeholder="هاتفك" />
-            <InputField name='company' placeholder='شركتك' />
+            <InputField name="company" placeholder="شركتك" />
-        <TextAreaField  name='message' placeholder='رسالة' />
+            <TextAreaField name="message" placeholder="رسالة" />
           </div>
-        <button  className='scale' >
+          <button className="scale">ارسل رسالة</button>
-        ارسل رسالة
-        </button>
         </Form>
       </Formik>
-
     </div>
-  )
+  );
-}
+};
 
-export default Right
+export default Right;

src/components/Field/InputField.tsx

@@ -1,21 +1,16 @@
-import { Input, InputProps } from "antd";
+import { Input, InputProps } from 'antd';
-import React from "react";
+import React from 'react';
-import { Field } from "formik";
+import { Field } from 'formik';
-
-const InputField = ({
-  name,
-  ...props
-}: InputProps) => {
 
+const InputField = ({ name, ...props }: InputProps) => {
   return (
     <div className="ValidationField w-100">
-
       <Field
         as={Input}
         name={name}
         id={name}
         size="large"
-          styles={{width:"100%"}}
+        styles={{ width: '100%' }}
         {...props}
       />
     </div>

src/components/Field/TextAreaField.tsx

@@ -1,22 +1,17 @@
-import {  InputProps } from "antd";
+import { InputProps } from 'antd';
-import React from "react";
+import React from 'react';
-import { Field } from "formik";
+import { Field } from 'formik';
-import TextArea from "antd/es/input/TextArea";
+import TextArea from 'antd/es/input/TextArea';
-
-const TextAreaField = ({
-  name,
-  ...props
-}: InputProps) => {
 
+const TextAreaField = ({ name, ...props }: InputProps) => {
   return (
     <div className="ValidationField TextAreaField">
-
       <Field
         as={TextArea}
         name={name}
         id={name}
         size="large"
-          styles={{width:"100%"}}
+        styles={{ width: '100%' }}
         autoSize={{ minRows: 4, maxRows: 10 }}
         {...props}
       />

src/components/SwiperScreenShoot.tsx

@@ -5,17 +5,15 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/scrollbar';
-import {ScreenShoot as ScreenShootData} from '../../data.json'
+import { ScreenShoot as ScreenShootData } from '../../data.json';
 
 const SwipeScreenShoot = () => {
-
   return (
-        <div className='SwipeScreenShoot'>
+    <div className="SwipeScreenShoot">
       <Swiper
         modules={[Pagination, A11y, Autoplay]}
         spaceBetween={20}
         autoplay={{ delay: 3000 }} // Configure autoplay options
-                
         pagination={{ clickable: true }}
         // onSwiper={(swiper) => console.log(swiper)}
         // onSlideChange={() => console.log('slide change')}
@@ -38,16 +36,15 @@ const SwipeScreenShoot = () => {
         }}
       >
         {ScreenShootData.Data.map((item, index) => {
-                    
           return (
             <SwiperSlide key={index}>
               <img loading="lazy" src={item} alt={`Screenshot ${index + 1}`} />
             </SwiperSlide>
-                    )
+          );
         })}
       </Swiper>
     </div>
   );
-}
+};
 
 export default SwipeScreenShoot;

src/components/layout/BackToTop.tsx

@@ -1,5 +1,5 @@
 import { Button } from 'antd';
-import { FaHandPointUp } from "react-icons/fa";
+import { FaHandPointUp } from 'react-icons/fa';
 import useScroll from '../../hooks/useScroll';
 
 const BackToTopButton = () => {

src/components/layout/Footer.tsx

@@ -1,11 +1,11 @@
-import { Input } from "antd";
+import { Input } from 'antd';
-import { FaFacebook, FaInstagram, FaTelegram, FaTwitter } from "react-icons/fa";
+import { FaFacebook, FaInstagram, FaTelegram, FaTwitter } from 'react-icons/fa';
-import {Footer as FooterData,Links,Setting} from '../../../data.json'
+import { Footer as FooterData, Links, Setting } from '../../../data.json';
 
 const Footer = () => {
   const handleClick = (href: string) => {
-    window.location.href = href
+    window.location.href = href;
-  }
+  };
   return (
     <div className="Footer">
       <img loading="lazy" src={Setting.Logo} alt="logo" />
@@ -15,9 +15,7 @@ const Footer = () => {
         <FaInstagram onClick={() => handleClick(Links.instagram)} />
         <FaTwitter onClick={() => handleClick(Links.twitter)} />
       </div>
-      <p>
+      <p>{FooterData.privacy}</p>
-     {FooterData.privacy}
-      </p>
       <span className="FooterHeader">
         <span>
           <h1>{FooterData.title}</h1>
@@ -31,7 +29,7 @@ const Footer = () => {
         </div>
       </span>
     </div>
-  )
+  );
 };
 
 export default Footer;

src/components/layout/NavBar.tsx

@@ -1,13 +1,12 @@
 // NavBar.tsx
 import React, { useState } from 'react';
 import { RoutesEnums } from '../../enums/RoutesEnums';
-import { MdLanguage } from "react-icons/md";
+import { MdLanguage } from 'react-icons/md';
 import { FaEllipsis } from 'react-icons/fa6';
 import { Popover } from 'antd';
-import {navBar as navBarData,Setting} from '../../../data.json'
+import { navBar as navBarData, Setting } from '../../../data.json';
 // Define an enum for the routes
 
-
 // Define a type for the link objects
 interface NavLink {
   path: RoutesEnums;
@@ -24,47 +23,50 @@ const NavBar: React.FC = () => {
     { path: RoutesEnums.NOTE, label: navBarData.link5 },
     { path: RoutesEnums.CONTACT, label: navBarData.link6 },
   ];
-  const [Open, setOpen] = useState(false)
+  const [Open, setOpen] = useState(false);
   const handleToggle = () => {
-    setOpen(!Open)
+    setOpen(!Open);
-  }
+  };
-
 
   const NavBarContent = (
-  <div className='NavBarContent'>
+    <div className="NavBarContent">
-   <ul className='NavBarLinks'>
+      <ul className="NavBarLinks">
         {links.map((link) => {
           return (
-            <li onClick={handleToggle} key={link.path} className={`${"activeLink"}`}>
+            <li
+              onClick={handleToggle}
+              key={link.path}
+              className={`${'activeLink'}`}
+            >
               <a href={link.path}>{link.label}</a>
             </li>
-          )
+          );
-
         })}
       </ul>
-
     </div>
   );
 
-
+  const [Active, setActive] = useState(location.hash);
-  const [Active, setActive] = useState(location.hash)
 
   return (
-    <nav className='NavBar'>
+    <nav className="NavBar">
-      <img loading="lazy" src={Setting.Logo} className='scale' alt="" />
+      <img loading="lazy" src={Setting.Logo} className="scale" alt="" />
-      <ul className='NavBarLinks'>
+      <ul className="NavBarLinks">
         {links.map((link) => {
-        
           const handleClick = () => {
-          setActive(link.path)
+            setActive(link.path);
-      }
+          };
-          const isActive = Active === "" && link.path === "#" ? true :  Active === link.path; 
+          const isActive =
+            Active === '' && link.path === '#' ? true : Active === link.path;
           return (
-            <li key={link.path} onClick={handleClick} className={`${isActive  ? "activeLink" : ""}`}>
+            <li
+              key={link.path}
+              onClick={handleClick}
+              className={`${isActive ? 'activeLink' : ''}`}
+            >
               <a href={link.path}>{link.label}</a>
             </li>
-          )
+          );
-
         })}
       </ul>
 
@@ -75,7 +77,6 @@ const NavBarContent = (
             <FaEllipsis onClick={handleToggle} />
           </Popover>
         </article>
-    
       </div>
     </nav>
   );

src/components/layout/PageTransition.tsx

@@ -37,9 +37,7 @@ const PageTransition: React.FC<PageTransitionProps> = ({ to, children }) => {
       <div
         className={`transition-overlay ${transitioning ? (reversed ? 'enter' : 'exit') : ''}`}
       />
-            <div onClick={handleClick}>
+      <div onClick={handleClick}>{children}</div>
-                {children}
-            </div>
     </>
   );
 };

src/components/layout/SpinContainer.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 
 const SpinContainer: React.FC = () => {
   return (
-    <div className='full-screen-center'>
+    <div className="full-screen-center">
       <div className="loader"></div>
     </div>
   );
 };
 
-
 export default SpinContainer;

src/design-system/FirstLoading.tsx

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

src/lib/I18nProvider.tsx

@@ -10,7 +10,8 @@ interface I18nProviderProps {
 
 const I18nProvider: React.FC<I18nProviderProps> = ({ children }) => {
   useEffect(() => {
-    const currentLanguage =(LocalStorageManager.getItem(LocalStorageEnum.LANGUAGE_KEY) as string) ===
+    const currentLanguage =
+      (LocalStorageManager.getItem(LocalStorageEnum.LANGUAGE_KEY) as string) ===
       'en'
         ? 'en'
         : 'ar';

src/pages/AboutUs.tsx

@@ -1,9 +1,7 @@
-import React from 'react'
+import React from 'react';
 
 const AboutUs = () => {
-  return (
+  return <div className="AboutUs">AboutUs</div>;
-    <div className='AboutUs'>AboutUs</div>
+};
-  )
-}
 
-export default AboutUs
+export default AboutUs;

src/pages/ContactPage.tsx

@@ -1,15 +1,14 @@
-import React from 'react'
+import React from 'react';
-import Left from '../components/Contact/Left'
+import Left from '../components/Contact/Left';
-import Right from '../components/Contact/Right'
+import Right from '../components/Contact/Right';
 
 const ContactPage = () => {
   return (
-    <div className='ContactPage' id='contact_us'>
+    <div className="ContactPage" id="contact_us">
       <Left />
       <Right />
-
     </div>
-  )
+  );
-}
+};
 
-export default ContactPage
+export default ContactPage;

src/pages/DownloadPage.tsx

@@ -1,16 +1,14 @@
-import { BsGooglePlay } from 'react-icons/bs'
+import { BsGooglePlay } from 'react-icons/bs';
-import { FaApple } from 'react-icons/fa'
+import { FaApple } from 'react-icons/fa';
-import {DownloadPage as DownloadPageData,Links} from '../../data.json'
+import { DownloadPage as DownloadPageData, Links } from '../../data.json';
 
 const DownloadPage = () => {
-
   const handleClick = (href: string) => {
-    window.location.href = href
+    window.location.href = href;
-  }
+  };
-
 
   return (
-    <div className='DownloadPage'  >
+    <div className="DownloadPage">
       <main>
         <h1> {DownloadPageData.title} </h1>
         <p> {DownloadPageData.description} </p>
@@ -37,14 +35,22 @@ const DownloadPage = () => {
       </main>
 
       <div>
-      <img loading="lazy" className='circle'   src="/Setting/circle.png" alt="" />
+        <img
-
+          loading="lazy"
+          className="circle"
+          src="/Setting/circle.png"
+          alt=""
+        />
       </div>
 
-      <img loading="lazy" className='main scale' src={DownloadPageData.img} alt="" />
+      <img
+        loading="lazy"
+        className="main scale"
+        src={DownloadPageData.img}
+        alt=""
+      />
     </div>
+  );
+};
 
-  )
+export default DownloadPage;
-}
-
-export default DownloadPage

src/pages/FeaturesPage.tsx

@@ -1,39 +1,37 @@
-import {Features} from '../../data.json'
+import { Features } from '../../data.json';
 
 const FeaturesPage = () => {
-
   console.log();
 
   return (
-        <div className='FeaturesPage' id='features'>
+    <div className="FeaturesPage" id="features">
       <h1> {Features.title} </h1>
       <p> {Features.description}</p>
       <div>
         <span>
           {Object.entries(Features.Data).map((item, index) => {
-                        console.log(item,"item");
+            console.log(item, 'item');
 
             return (
               <article key={index}>
-                                <img loading="lazy" className='scale' src={item[1].img} alt={`${index}`} />
+                <img
+                  loading="lazy"
+                  className="scale"
+                  src={item[1].img}
+                  alt={`${index}`}
+                />
                 <div>
-                                    <h4>
+                  <h4>{item[1].title}</h4>
-                                    {item[1].title}
+                  <p>{item[1].description}</p>
-                                    </h4>
-                                    <p>
-                                    {item[1].description}
-                                    </p>
                 </div>
               </article>
-                        )
+            );
           })}
-
         </span>
-                <img loading="lazy" className='scale' src={Features.mainImage} alt="" />
+        <img loading="lazy" className="scale" src={Features.mainImage} alt="" />
-
       </div>
     </div>
-    )
+  );
-}
+};
 
-export default FeaturesPage
+export default FeaturesPage;

src/pages/HomePage.tsx

@@ -1,17 +1,18 @@
-import { BsGooglePlay } from 'react-icons/bs'
+import { BsGooglePlay } from 'react-icons/bs';
-import { FaApple } from 'react-icons/fa'
+import { FaApple } from 'react-icons/fa';
-import {Home,Links} from '../../data.json'
+import { Home, Links } from '../../data.json';
 
 const HomePage = () => {
-
   const handleClick = (href: string) => {
-    window.location.href = href
+    window.location.href = href;
-  }
+  };
 
   return (
-    <div className='HomePage' id='#'>
+    <div className="HomePage" id="#">
       <main>
-        <h1>{Home.title} <h2> {Home.ApplicationName} </h2></h1>
+        <h1>
+          {Home.title} <h2> {Home.ApplicationName} </h2>
+        </h1>
         <p>{Home.description}</p>
         <div>
           <button onClick={() => handleClick(Links.google_play_link)}>
@@ -34,11 +35,11 @@ const HomePage = () => {
           </button>
         </div>
       </main>
-      <img loading="lazy" className='circle' src="/Setting/circle.png" alt="" />
+      <img loading="lazy" className="circle" src="/Setting/circle.png" alt="" />
-      <img loading="lazy" className='shape' src="/Setting/shape.svg" alt="" />
+      <img loading="lazy" className="shape" src="/Setting/shape.svg" alt="" />
-      <img loading="lazy" className='slider' src={Home.mainImage} alt="" />
+      <img loading="lazy" className="slider" src={Home.mainImage} alt="" />
     </div>
-  )
+  );
-}
+};
 
-export default HomePage
+export default HomePage;

src/pages/HowItWork.tsx

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

src/pages/NotePage.tsx

@@ -1,23 +1,24 @@
-import React from 'react'
+import React from 'react';
 import { Rate } from 'antd';
-import {NotePage as NotePageData} from '../../data.json'
+import { NotePage as NotePageData } from '../../data.json';
 
 const NotePage = () => {
   return (
-    <div className='NotePage' id='note' >
+    <div className="NotePage" id="note">
       <h1> {NotePageData.title} </h1>
-        <p>
+      <p>{NotePageData.description}</p>
-        {NotePageData.description}
-        </p>
       <div>
         {Object.entries(NotePageData.Data).map((item, index: number) => {
           return (
             <article key={index}>
               <div>
-                    <img className='message_form' src="/Note/message.png" alt="" width={20}/>
+                <img
-                    <p>
+                  className="message_form"
-                    {item[1].description} 
+                  src="/Note/message.png"
-                    </p>
+                  alt=""
+                  width={20}
+                />
+                <p>{item[1].description}</p>
                 <Rate value={item[1].rate} />
               </div>
               <span>
@@ -25,12 +26,11 @@ const NotePage = () => {
                 <h5> {item[1].name} </h5>
               </span>
             </article>
-
+          );
-                )
         })}
       </div>
     </div>
-  )
+  );
-}
+};
 
-export default NotePage
+export default NotePage;

src/pages/ScreenShoot.tsx

@@ -1,21 +1,17 @@
-import React from 'react'
+import React from 'react';
-import SwipeScreenShoot from '../components/SwiperScreenShoot'
+import SwipeScreenShoot from '../components/SwiperScreenShoot';
-
-import {ScreenShoot as ScreenShootData} from '../../data.json'
 
+import { ScreenShoot as ScreenShootData } from '../../data.json';
 
 const ScreenShoot = () => {
   return (
-    <div className='ScreenShoot' id='screen_shoot'>
+    <div className="ScreenShoot" id="screen_shoot">
-
       <h1> {ScreenShootData.title} </h1>
-        <p> 
+      <p>{ScreenShootData.description}</p>
-        {ScreenShootData.description}
-        </p>
 
       <SwipeScreenShoot />
     </div>
-  )
+  );
-}
+};
 
-export default ScreenShoot
+export default ScreenShoot;

src/pages/VideoPage.tsx

@@ -1,39 +1,37 @@
 import React, { useState } from 'react';
-import {VideoPage as VideoPageData} from '../../data.json'
+import { VideoPage as VideoPageData } from '../../data.json';
 
 const VideoPage = () => {
   const [isPlaying, setIsPlaying] = useState(false);
 
-
   const handlePlayPause = () => {
     setIsPlaying(!isPlaying);
   };
 
   return (
-        <div className='VideoPage'>
+    <div className="VideoPage">
-                
       <img loading="lazy" src="/Video/video.png" alt="" />
 
       <main>
         <h1>{VideoPageData.title}</h1>
-                    <p>
+        <p>{VideoPageData.description}</p>
-                        {VideoPageData.description}
-                    </p>
         <img loading="lazy" src={VideoPageData.mainImage} alt="" />
       </main>
 
       <span>
         {Object.entries(VideoPageData.Data).map((item, index) => (
           <article key={index}>
-                        <img loading="lazy" src={`/Video/${item[1].img}.png`} alt={`${index}`} />
+            <img
+              loading="lazy"
+              src={`/Video/${item[1].img}.png`}
+              alt={`${index}`}
+            />
 
             <h4>{item[1].number}</h4>
             <p>{item[1].title}</p>
-                       
           </article>
         ))}
       </span>
-           
     </div>
   );
 };

src/styles/App/App.scss

@@ -1,7 +1,5 @@
-
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap');
 
-
 html,
 body {
   background: var(--bg);
@@ -68,19 +66,18 @@ input:-webkit-autofill:active {
   box-shadow: inset 0 0 20px 20px #23232329;
 }
 
-
 button {
   cursor: pointer;
-      transition: .5s ease-in-out;
+  transition: 0.5s ease-in-out;
   &:hover {
     scale: 1.02;
   }
 }
 
-
+svg,
-svg,.scale{
+.scale {
   cursor: pointer;
-  transition: .5s ease-in-out;
+  transition: 0.5s ease-in-out;
   &:hover {
     scale: 1.1;
   }

src/styles/App/Variables.scss

@@ -8,8 +8,7 @@
   --placeholder: rgb(0, 0, 0, 0.3);
   --bg: rgb(245 247 251);
   --bg2: white;
-  --gradient : linear-gradient(45deg, #55B9E3, #5262E3);
+  --gradient: linear-gradient(45deg, #55b9e3, #5262e3);
-
 }
 
 :root:has(.dark) {

src/styles/App/classNames.scss

@@ -11,9 +11,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  
-
 }
 .spinner {
-  
 }

src/styles/components/FirstLoading.scss

@@ -13,7 +13,9 @@
   color: white;
   z-index: 9999999999;
   overflow: hidden;
-    transition: transform 1s cubic-bezier(.25,1,.5,1), visibility 1ms linear 1s;
+  transition:
+    transform 1s cubic-bezier(0.25, 1, 0.5, 1),
+    visibility 1ms linear 1s;
 }
 
 .Logo {

src/styles/components/Footer.scss

@@ -12,7 +12,6 @@
   position: relative;
   img {
     width: 100px;
-
   }
   > div {
     display: flex;
@@ -26,7 +25,6 @@
       border: 1px solid var(--white);
       border-radius: 50%;
     }
-    
   }
   p {
     font-size: 16px;
@@ -86,13 +84,9 @@
       }
     }
   }
-
-    
 }
 
-
 @media screen and (max-width: 900px) {
-
   .Footer {
     background: var(--primary);
     height: 330px;
@@ -108,7 +102,6 @@
     padding-bottom: 30px;
     img {
       width: 100px;
-       
     }
     > div {
       display: flex;
@@ -122,7 +115,6 @@
         border: 1px solid var(--white);
         border-radius: 50%;
       }
-           
     }
     p {
       font-size: 14px;
@@ -183,8 +175,5 @@
         cursor: pointer;
       }
     }
-       
-           
   }
-       
 }

src/styles/components/Layout.scss

@@ -11,6 +11,3 @@
 //     z-index: 1000;
 //     background: black;
 // }
-
-
-

src/styles/components/NavBar.scss

@@ -9,20 +9,19 @@
   width: calc(100% - 100px);
   z-index: 999999999;
   font-size: max(20px, 1.5vw);
-    img,svg{
+  img,
+  svg {
     width: 60px;
     font-size: 30px;
   }
   > ul {
-
     display: flex;
     li {
       all: unset;
       cursor: pointer;
-            transition: .5s ease-in-out;
+      transition: 0.5s ease-in-out;
       &:hover {
         scale: 1.1;
-        
       }
     }
   }
@@ -32,15 +31,14 @@
 
     a {
       color: var(--white) !important;
-            opacity: .6;
+      opacity: 0.6;
-            transition: .5s ease-in-out;
+      transition: 0.5s ease-in-out;
       font-weight: normal;
       font-size: 18px;
       &:hover {
         color: var(--secondary) !important;
         scale: 1.1;
         opacity: 1;
-        
       }
     }
     .activeLink {
@@ -59,21 +57,16 @@
   }
 }
 
-
-
 @media screen and (max-width: 900px) {
   .NavBar {
-
     .NavBarLinks {
       display: none !important;
-            
     }
     > div {
       display: flex;
       article {
         &:nth-child(2) {
           display: block;
-              
         }
       }
     }
@@ -101,11 +94,10 @@
       }
     }
   }
-    
 }
-.ant-popover,.ant-popover-inner{
+.ant-popover,
+.ant-popover-inner {
   padding: 0 !important;
   z-index: 999;
   margin-inline: 30px;
-
 }

src/styles/components/PageTransition.scss

@@ -21,5 +21,3 @@
   transition: top 1s ease-in-out;
   top: 100%;
 }
-
-

src/styles/components/index.scss

@@ -1,6 +1,6 @@
 @import './FirstLoading.scss';
 @import './Layout.scss';
-@import "./PageTransition.scss";
+@import './PageTransition.scss';
 @import './NavBar.scss';
 @import './Footer.scss';
 @import './BackToTop.scss';

src/styles/pages/ContactPage.scss

@@ -22,13 +22,11 @@
         margin-bottom: 20px;
         .ant-input {
           min-height: 50px;
-    
         }
       }
       .TextAreaField {
         min-width: 97%;
       }
-           
     }
     button {
       all: unset;
@@ -42,7 +40,7 @@
       // background-image: linear-gradient(45deg, #55B9E3, #5262E3);
       background: var(--thirdly);
       cursor: pointer;
-            transition: .5s ease-in-out;
+      transition: 0.5s ease-in-out;
       &:hover {
         scale: 1.1;
       }
@@ -74,7 +72,6 @@
           img {
             width: 18px;
           }
-                  
         }
         p {
           font-size: 16px;
@@ -85,7 +82,6 @@
   }
 }
 
-
 @media screen and (max-width: 900px) {
   .ContactPage {
     background: var(--bg);
@@ -110,13 +106,11 @@
           margin-bottom: 20px;
           .ant-input {
             min-height: 50px;
-        
           }
         }
         .TextAreaField {
           min-width: 100%;
         }
-               
       }
       button {
         all: unset;
@@ -156,7 +150,6 @@
             img {
               width: 15px;
             }
-                      
           }
           p {
             font-size: 14px;
@@ -166,5 +159,4 @@
       }
     }
   }
-
 }

src/styles/pages/DownloadPage.scss

@@ -23,7 +23,6 @@
       gap: 20px;
       color: var(--white);
       font-size: max(4vw, 50px);
-
     }
     p {
       color: var(--white);
@@ -35,7 +34,7 @@
       gap: max(1vw, 10px);
       button {
         all: unset;
-                padding: max(.5vw,8px) max(1.5vw,30px);
+        padding: max(0.5vw, 8px) max(1.5vw, 30px);
         display: flex;
         align-items: center;
         gap: max(1vw, 10px);
@@ -43,7 +42,7 @@
         border: 1px solid var(--white);
         border-radius: 10px;
         cursor: pointer;
-                transition: .5s ease-in-out;
+        transition: 0.5s ease-in-out;
         padding-block: 10px;
         &:hover {
           background: var(--thirdly);
@@ -64,8 +63,6 @@
         }
       }
     }
-
-     
   }
   > div {
     position: absolute;
@@ -82,9 +79,7 @@
       left: 50%;
       transform: translate(-50%, 0%);
       z-index: 9999;
-        
     }
-
   }
   .main {
     position: relative;
@@ -93,9 +88,7 @@
     width: 80%;
     object-fit: contain;
     margin-inline: auto;
-        
   }
-   
 }
 
 @media screen and (max-width: 900px) {
@@ -124,7 +117,6 @@
         gap: 10px;
         color: var(--white);
         font-size: 6vw;
-    
       }
       p {
         color: var(--white);
@@ -136,7 +128,7 @@
         gap: max(1vw, 10px);
         button {
           all: unset;
-                    padding: max(.5vw,8px) max(1.5vw,30px);
+          padding: max(0.5vw, 8px) max(1.5vw, 30px);
           display: flex;
           align-items: center;
           gap: max(1vw, 10px);
@@ -156,8 +148,6 @@
           }
         }
       }
-    
-         
     }
     > div {
       position: absolute;
@@ -174,9 +164,7 @@
         left: 50%;
         transform: translate(-50%, 0%);
         z-index: 1;
-            
       }
-    
     }
     .main {
       position: relative;
@@ -185,9 +173,6 @@
       width: 100%;
       object-fit: contain;
       margin-inline: auto;
-            
     }
-       
   }
-
 }

src/styles/pages/FeaturesPage.scss

@@ -49,14 +49,12 @@
           }
           p {
             font-weight: normal;
-                            font-size: max(.8vw,16px);
+            font-size: max(0.8vw, 16px);
             line-height: 30px;
-                            
           }
         }
       }
     }
-        
   }
 }
 
@@ -93,7 +91,9 @@
         width: 300px;
       }
       > span {
-                display: flex;align-items: center;justify-content: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         flex-wrap: wrap;
         width: 100% !important;
         max-width: 90%;
@@ -118,13 +118,10 @@
             p {
               font-weight: normal;
               font-size: max(1vw, 14px);
-                                
             }
           }
         }
       }
-            
     }
   }
-
 }

src/styles/pages/HomePage.scss

@@ -36,7 +36,7 @@
       gap: max(1vw, 10px);
       button {
         all: unset;
-                padding: max(.5vw,8px) max(1.5vw,30px);
+        padding: max(0.5vw, 8px) max(1.5vw, 30px);
         display: flex;
         align-items: center;
         gap: max(1vw, 10px);
@@ -44,7 +44,7 @@
         border: 1px solid var(--white);
         border-radius: 10px;
         cursor: pointer;
-                transition: .5s ease-in-out;
+        transition: 0.5s ease-in-out;
         padding-block: 10px;
         &:hover {
           background: var(--thirdly);
@@ -65,8 +65,6 @@
         }
       }
     }
-
-     
   }
   .shape {
     position: absolute;
@@ -76,8 +74,6 @@
     min-height: 60vh;
 
     object-fit: cover;
-        
-        
   }
   .circle {
     position: absolute;
@@ -85,8 +81,6 @@
     top: 73%;
     left: 50%;
     transform: translate(-50%, -50%);
-          
-        
   }
   .slider {
     position: absolute;
@@ -95,13 +89,8 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
-        
-        
-        
 }
 
-
-
 @media screen and (max-width: 900px) {
   .HomePage {
     min-height: 100vh;
@@ -145,7 +134,7 @@
         gap: max(1vw, 10px);
         button {
           all: unset;
-                    padding: max(.5vw,8px) max(1.5vw,20px);
+          padding: max(0.5vw, 8px) max(1.5vw, 20px);
           display: flex;
           align-items: center;
           gap: max(1vw, 10px);
@@ -153,7 +142,7 @@
           border: 1px solid var(--white);
           border-radius: 10px;
           cursor: pointer;
-                    transition: .5s ease-in-out;
+          transition: 0.5s ease-in-out;
           padding-block: 8px;
           // width: 90% !important;
           &:hover {
@@ -177,33 +166,22 @@
           }
           svg {
             font-size: max(20px, 1.3vw);
-                        
           }
         }
       }
-    
-         
     }
     .shape {
       display: none;
-            
     }
     .circle {
       position: absolute;
       width: 800px;
       top: 500px;
-       
-            
     }
     .slider {
       position: absolute;
       width: 600px;
       top: 600px;
-                
     }
-            
-            
-            
   }
-    
 }

src/styles/pages/HowItWork.scss

@@ -60,13 +60,10 @@
         }
       }
     }
-        
   }
 }
 
-
 @media screen and (max-width: 900px) {
-
   .HowItWork {
     background: var(--bg);
     display: flex;
@@ -100,7 +97,6 @@
       > img {
         width: 300px;
         order: 0;
-                
       }
       > span {
         order: 2;
@@ -133,13 +129,10 @@
               font-weight: normal;
               font-size: max(1vw, 14px);
               width: 100%;
-                                
             }
           }
         }
       }
-            
+    }
-        }
-       
   }
 }

src/styles/pages/NotePage.scss

@@ -58,7 +58,6 @@
 }
 
 @media screen and (max-width: 900px) {
-
   .NotePage {
     background: var(--bg2);
     display: flex;
@@ -117,6 +116,4 @@
       }
     }
   }
-    
-
 }

src/styles/pages/ScreenShoot.scss

@@ -30,8 +30,6 @@
       width: 250px;
       margin-inline: auto;
     }
-
-  
   }
 }
 
@@ -42,10 +40,7 @@
   display: flex;
 }
 
-
-
 @media screen and (max-width: 900px) {
-
   .ScreenShoot {
     background: var(--bg);
     display: flex;
@@ -79,8 +74,6 @@
         width: 280px;
         margin-inline: auto;
       }
-
-  
     }
   }
 
@@ -90,6 +83,4 @@
   .swiper-slide {
     display: flex;
   }
-
-
 }

src/styles/pages/VideoPage.scss

@@ -10,13 +10,10 @@
   position: relative;
 
   > img {
-
     width: 100%;
     object-fit: cover;
-           
   }
 
-    
   main {
     position: absolute;
     top: 30%;
@@ -62,9 +59,7 @@
   }
 }
 
-
 @media screen and (max-width: 900px) {
-    
   .VideoPage {
     background: var(--bg);
     display: flex;
@@ -77,14 +72,11 @@
     position: relative;
 
     > img {
-    
       width: 100%;
       height: 600px;
       object-fit: cover;
-               
     }
 
-        
     main {
       position: absolute;
       top: 30%;
@@ -141,10 +133,7 @@
         p {
           font-size: 13px;
         }
-                
       }
     }
   }
-    
-
 }

src/styles/pages/index.scss

@@ -5,4 +5,4 @@
 @import './ScreenShoot.scss';
 @import './NotePage.scss';
 @import './DownloadPage.scss';
-@import './ContactPage.scss'
+@import './ContactPage.scss';

src/utils/index.tsx

@@ -1,6 +1,3 @@
-import Logo from '../assets/core/logo.svg'
+import Logo from '../assets/core/logo.svg';
 
-
+export { Logo };
-export  {
-    Logo
-}